React
-
[React] Concurrency(동시성) - #3. Concurrent RenderingFront-End(Web)/React - 프레임워크(React, Next) 2022. 10. 27. 20:19
🧐 서론 지난 포스팅에선, , 를 통한 Loading UI, 를 통한 Error UI 등에 대해 알아보았다. 하지만, 이런 로딩화면도 사용자에게 답답함을 줄 수 있기에, React는 좀 더 UX 친화적인 렌더링 방식을 제공하려고 한다. Concurrent Rendering(동시성 렌더링)는 React 18버전이 릴리즈되면서 가장 강조하고 있는 컨셉이다. 정확히는, Parellel(병렬)이 불가능한 Javascript의 싱글 스레드 환경에서, 최대한 이와 비슷한 Concurrency(동시성)을 구현하는 것이다. React 18에 출시된 Transition API들을 통해 동시성 렌더링을 구현할 수 있으며, 이러한 환경을 앞으로 더욱 보장할 계획이라고 한다. * React 18 변경점(포스팅) : https..
-
[React] Concurrecy(동시성) - #2. Error BoundaryFront-End(Web)/React - 프레임워크(React, Next) 2022. 10. 27. 19:58
지난 포스팅에선, Code Splitting(코드 분할) 그리고 이를 React에서 구현하는 Suspense와 React.lazy를 알아보았다. Suspense는 비동기 컴포넌트(React.lazy) 혹은 비동기 데이터 요청에 따른 선언적 Loading UI 노출에도 유용하다. 물론 이 비동기 요청에서 에러가 발생할 수 있고, 이를 위임하는 기능인 Error Boundary 에 대해 정리해보겠다. 💙 React의 Error Boundary 컴포넌트 내의 Javascript 에러가 발생하면, 컴포넌트 트리가 깨지며 정상적으로 렌더링되지 않는다. 기존에는 이를 처리 및 복구할 방법이 없었으나, React 16부터 Error Boundary 이라는 컨셉을 제안하게 된다. 이는, 자식 컴포넌트 트리에서 발생한 ..
-
[React] Concurrency(동시성) - #1. Suspense와 React.lazyFront-End(Web)/React - 프레임워크(React, Next) 2022. 10. 24. 02:53
🧐 서론 전 회사분들과 진행하는 스터디에서 나는 Suspense와 React.lazy를 통한 코드 스플리팅 부분을 맡게 되었다. Suspense에 대해서만 공부하려고 했다가, Error Boundary나 Transition API 등 관련된 기능들을 함께 공부하면서 Concurrent Rendering(동시성 렌더링)까지 공부하게 되었다. 첫 번째 주제는 선언적 Loading UI와 Code Splitting(코드 분할)을 위한 Suspense와 React.lazy부터 시작된다. 기존의 비동기 렌더링 분기를 어떻게 사용했는지 알아보고 이것이 동시성 모드에서 어떻게 변화하려고 하는지 로 시리즈를 전개하려고 한다. 💙 Code Splitting(코드 분할) Suspense와 React.lazy를 바로 정리하..
-
[webpack] 환경변수 직접 선언 : dotenv, dotenv-webpackEnvironment(개발환경)/Configs 2022. 10. 11. 07:54
🧐 서론 회사에서 KTLO(Keeping the lights on) 건으로 미뤄지던 환경변수 선언방식을 개선하는 작업을 할당받아 진행하게 되었다. React나 Next를 쓰게 되면 보편적으로 Prefix (React_APP_...) 를 붙여 사용하게 되지만, 우리 프로젝트에서는 Webpack의 플러그인을 통해 직접 주입하는 방식을 사용하고 있었다. 물론 문제가 큰 방법은 아니지만, 환경변수를 JS모듈로 관리하는만큼 모든 환경의 파일이 번들에 포함되거나 토큰같은 인증정보가 배포버전에 포함될 수 있다는 등의 문제점은 있다. 그렇기에, .env(환경변수 파일) 기반의 관리방법에 대해 찾아보았고 dotenv를 비롯한 다양한 방법들을 알 수 있었다. 이번 포스팅은 이러한 방법들을 정리하고, 각각의 특징과 장점 등..
-
[Next.js] next/link - <Link> 태그Front-End(Web)/React - 프레임워크(React, Next) 2022. 10. 3. 14:20
🤔 서론 본래는, Next 스터디를 진행하면서 에 Styled-Components를 적용하며 겪었던 이슈를 정리하려는 포스팅이었다. 그런데, Next를 처음 공부할 때에도 next/link를 정리한 적이 없어 이번 기회에 한 번 전체적으로 제대로 공부해보고자 한다! 🤍 next/link 및 태그 Next.js에서 페이지 간의 링크전환에 태그를 주로 사용한다. 페이지 리렌더링 없이 이동시켜주는 SPA 동작을 담당하며, 태그로 전환되어 SEO에 적합하거나 다음 페이지를 prefetch 하는 등의 장점이 있다. 그렇기에 네비게이션 바에서 많이 볼 수 있으며, 아래와 같이 사용될 수 있다. (pages 폴더 내 index.tsx, about/index.tsx, blog/[slug].tsx 세 가지 페이지에 대한..
-
[React] 자식 컴포넌트 제어 - forwardRef, useImperativeHandleFront-End(Web)/React - 프레임워크(React, Next) 2022. 9. 15. 04:37
사이드 프로젝트에서 Uncontrolled Input을 구현하기 위해 고민하던 중, 문득 자식(input)의 ref.current.value를 부모(container component)가 어떻게 참조할 수 있을까에 대한 의문이 생겼다. * ref, useRef() 포스팅 : https://abangpa1ace.tistory.com/248 [React] Hooks - useRef() 회사에서는 Vue를 주로 사용하다보니, 개인공부나 토이 프로젝트에서는 React를 꾸준히 적용하고있다. 이번에 MBTI 사이드 프로젝트를 진행하면서, 페이지 컴포넌트에서 질문 리스트를 불러와서 abangpa1ace.tistory.com 가장 심플하게, 자식인 React 노드에 ref를 줘보았고, 아래와 같은 에러 메세지를 띄워..
-
[Next.js] Dark Mode 구현하기Front-End(Web)/React - 프레임워크(React, Next) 2022. 9. 12. 19:49
전 회사 사람들과 진행하는 사이드 프로젝트에서, 테마(theme.ts)를 세팅하다가 다크모드 적용여부를 논의하였다. (일반적으론, 색상 등으로 설정된 변수명에 값을 넣어주겠지만, 다크모드를 고려하면 방법이 조금 달라진다!) 적용하기로 결정이 되었으며, 이전 프로젝트에서 느꼈듯이 다크테마를 적용하기 위해선 스타일링이 조금 더 복잡해진다. 배경, 텍스트 등에 색상을 그대로 넣는게 아니라, 변수값에 이 색상들을 저장하고 이 변수들을 기반으로 마크업을 적용해야 한다. 다크테마 색상을 어떻게 설정하는지, 각종 설정들과 연계하여 다크테마를 제공하는 것, Next.js SSR에서의 적용 등 다크모드를 적용하면서 내가 고민했던 이슈들과 그 해결법들을 정리해보고 공유해보고자 한다! 🎨 Dark Mode 준비 다크모드는 ..
-
[React Query] (5) SSRFront-End(Web)/React - 라이브러리들 2022. 8. 12. 21:12
🧐 서론 지난 포스팅까지 진행하며, React Query를 사용해서 데이터를 다루는 주요 문법들을 정리하였다. 프로젝트를 마이그레이션하며 적용하던 중, Next.js 세팅인 점을 상기했으며 당연히 React Query도 SSR을 위한 솔루션을 제공하는 것을 알았다. Next.js에서의 SSR을 React Query와 함께 사용하기 위해 어떤 방법이 있는지 한 번 정리해보도록 하겠다. 🌺 SSR 사용하기 공식문서는 React Query가 2가지 형태의 SSR을 지원한다고 소개한다. initialData : SSR 메서드로 불러온 응답을 React Query 기본값으로 넣어주는 방법 Hydration : SSR 내에서 prefetch를 통해 쿼리를 불러온 뒤, queryClient에서 dehydrate한 ..