Front-End(Web)/React - 프레임워크(React, Next)
-
[Next.js] Dark Mode 구현하기Front-End(Web)/React - 프레임워크(React, Next) 2022. 9. 12. 19:49
전 회사 사람들과 진행하는 사이드 프로젝트에서, 테마(theme.ts)를 세팅하다가 다크모드 적용여부를 논의하였다. (일반적으론, 색상 등으로 설정된 변수명에 값을 넣어주겠지만, 다크모드를 고려하면 방법이 조금 달라진다!) 적용하기로 결정이 되었으며, 이전 프로젝트에서 느꼈듯이 다크테마를 적용하기 위해선 스타일링이 조금 더 복잡해진다. 배경, 텍스트 등에 색상을 그대로 넣는게 아니라, 변수값에 이 색상들을 저장하고 이 변수들을 기반으로 마크업을 적용해야 한다. 다크테마 색상을 어떻게 설정하는지, 각종 설정들과 연계하여 다크테마를 제공하는 것, Next.js SSR에서의 적용 등 다크모드를 적용하면서 내가 고민했던 이슈들과 그 해결법들을 정리해보고 공유해보고자 한다! 🎨 Dark Mode 준비 다크모드는 ..
-
[Next.js] Next.js 12 변경사항Front-End(Web)/React - 프레임워크(React, Next) 2022. 9. 1. 19:34
🤔 서론 작년 10월, Next.js 12버전이 빠르게 릴리즈되었고 컴파일러를 기존 Babel에서 Rust 기반의 SWC로 바꾸면서 빌드 속도가 대폭 상향됬다는 걸 알게되었다. 좀 더 알아보니, 이 뿐만 아니라 최근에 릴리즈된 React 18의 기능들을 지원하기 위한 업데이트도 포함된 것을 확인했다. 이번 기회에, 최근 Next가 12버전으로 업데이트 되면서 어떠한 변화들이 있었는지 한 번 정리해보려고 한다. 🤍 Next.js 12 업데이트 2021년 10월, 11버전이 업데이트된지 약 3달만에 Vercel(Next 개발사)은 다시 12버전을 발표하게 된다. 이번 배포는 개발자 경험(DX, Developer Experience)을 향상시키는 기능, React 18 업데이트 등에 초점이 맞춰져있다고 한다...
-
[React] Container Component 제작 - ClickOutside, TooltipFront-End(Web)/React - 프레임워크(React, Next) 2022. 7. 5. 02:10
이번 포스팅 역시 과제를 진행하면서 새로이 경험한 React 개발내용을 복기하면서 정리하는 글이다. 하나는 요소에 마우스를 호버했을 때 표현되는 툴팁, 다른 하나는 박스 외부를 클릭했을 때 닫히는 Click-Outside 기능이다. 기능적으로 연관성은 없으나, 코드상으로 둘 다 Container Component를 사용했다는 공통점이 있다. 또한, 회사에서는 둘 다 Vue의 Custom Directive로 구현되었는데, React에서는 어떻게 구현할지 리서치해보니 생각보다 컨테이너로 쉽게 구현이 되어서 이를 소개해보려고 한다. 💙 Click Outside 구현 위처럼, 특정버튼을 누르면 팝업창이 표현되고, 창 외부를 클릭하면 닫히는 UX를 제공하기 위한 기능이다. 검색창의 자동완성창, 프로필 등 클릭시 ..
-
[React] Infinite Scroll을 구현하는 2가지 방법Front-End(Web)/React - 프레임워크(React, Next) 2022. 7. 3. 18:19
🧐 서론 최근, 이직을 하게 되면서 많은 과제를 수행했었고, 처음 혹은 새로 구현하는 다양한 경험치들을 쌓을 수 있었다! 그 중에 하나가 기술할 Infinite Scroll(무한 스크롤) 로, 앱에서는 특히 이 기법을 통해 리스트 데이터를 추가하는 경우가 많다. 이전에 개인 프로젝트를 하면서 무한 스크롤을 구현했었고, 당시 window 객체의 스크롤값을 비교하는 보편적인 방법으로 구현했었다. (링크) [Javascript] Infinite Scroll (Height 속성) 🤔 배경 3차 프로젝트로 Nike 사이트 클론을 진행하면서, List 페이지를 연구하는테 아이템을 페이지네이션이 아닌 "인피니트 스크롤" 로 이어붙이는 로직으로 구성되어있는 것이었다. (아래는, abangpa1ace.tistory.co..
-
[React] React 18 의 달라진 점들Front-End(Web)/React - 프레임워크(React, Next) 2022. 4. 18. 01:15
올해 3월, React v18.0 이 정식 릴리즈가 되었다. (2020년 10월, v17.0 이 릴리즈된지 약 1년반) 업데이트 소식과 베타버전은 작년부터 리포트 되어왔으며, 최근 정식 릴리즈됨에 따라 이 포스팅을 한 번 정리하면 좋겠다는 생각이 들었다. 지난 React v17.0 은 호환성, 안정화 정도의 간단한 업데이트라면, v18.0은 주요 기능들이 많이 추가되어 이례적으로 작년에 알파버전까지 릴리즈하기도 했다. 이번 기회를 통해 React를 버전업하는 방법, 그리고 이번에 추가된 주요 기능들에 대해 알아보도록 하겠다! 💙 React 18 시작하기 이번 React 18 버전에서 추가된 주요기능은 크게 아래 3가지로 소개된다. automatic batching : 여러 개의 상태 업데이트를 한 번에 ..
-
[React] 컴포넌트 렌더링 최적화Front-End(Web)/React - 프레임워크(React, Next) 2022. 4. 13. 04:40
React를 사용하면 렌더링 성능에 대해 고민할 수 밖에 없다. 최적화를 위해선, React 컴포넌트의 리렌더링 조건을 먼저 복기하자! 본인의 state가 변경될 때 부모 컴포넌트로부터 받아오는 props가 변경될 때 부모 컴포넌트가 리렌더링 될 떄 shouldComponentUpdate(), forceUpdate() 등 강제 업데이트 메서드 호출 지금까지 나도 state, props를 단순히 데이터를 다루기 위해 적용하다보니, 데이터의 할당이나 위치가 부적절했을때 불필요한 리렌더링이 유발되었을 거라고 생각한다. 리렌더링을 하면 컴포넌트를 reflow & repaint 를 함에 따른 브라우저 성능 저하가 발생할 뿐만 아니라, 다른 이슈도 동반된다. 함수형 컴포넌트의 경우, 리렌더링을 할 경우 내부 로직들..
-
[React] Hooks - useRef()Front-End(Web)/React - 프레임워크(React, Next) 2022. 4. 3. 17:21
회사에서는 Vue를 주로 사용하다보니, 개인공부나 토이 프로젝트에서는 React를 꾸준히 적용하고있다. 이번에 MBTI 사이드 프로젝트를 진행하면서, 페이지 컴포넌트에서 질문 리스트를 불러와서 각 질문들을 인덱스에 따라 렌더링하는 화면을 만들어야했다. 리스트, 인덱스, 질문 데이터들을 모두 useState()에 담아도 당연히 동작은 잘 하겠지만, 리스트 데이터에 대한 고민이 있었다. 첫 번째는, 리스트 데이터는 페이지 리렌더링에 아무런 연관성이 없다. 단순히, 리스트 정보들을 가지고 있고, 질문에 응답한 결과만을 저장하면 되기 때문에 state의 취지에 맞지 않는다고 할 수 있다. 두 번째는, 리스트 데이터가 수정(결과값이 입력)될 때마다 컴포넌트가 리렌더링된다. 각 질문에 대답할때 마다, 질문 리스트의..
-
[Next.js] next/image - <Image> 컴포넌트Front-End(Web)/React - 프레임워크(React, Next) 2022. 3. 13. 13:22
이번에 토이를 Next.js로 진행하면서, 이미지를 Next.js에서 지원하는 컴포넌트로 적용하는 것을 권장한다는 메세지를 보았다. Next.js v10부터 컴포넌트를 지원했으며, 주요 목적이 바로 이미지 최적화(Optimization) 인 것이다. 컴포넌트를 사용하는 의의와 사용법에 대해 간단하게 공부하면서 정리해보았다! 🤍 컴포넌트는? 는 HTML의 태그에서 확장되어 built-in을 최적화하는 Next.js의 이미지 컴포넌트이다. Next.js 공식문서에서 설명하는 컴포넌트 사용의 의의는 아래와 같다. Basic Features: Image Optimization | Next.js Next.js supports built-in image optimization, as well as third par..