Front-End
-
[Next.js] Next.js 13 변경사항Front-End(Web)/React - 프레임워크(React, Next) 2023. 1. 14. 03:05
🤍 Next.js 13 Next.js 12버전도 2021년 중순 업데이트 된 것으로 기억하는데, Next.js 13이 2022년 10월에 컨퍼런스에서 다시 발표됬다. 체감상 가장 큰 변화를 느낄 것 같은 버전 체인지이다. (디렉토리 구조, getServerSideProps 등 Next 정체성이 대거 바뀜) Next 개발팀은 13버전 업을 통해 좀 더 제한없이 동적으로 동작하는 기반을 마련하고자 했다는게 주요 컨셉이다. - 주요 변경사항 app/Directory(beta) : 쉽고, 빠르고, 적은 클라이언트 JS Layouts(레이아웃) React Server Components (리액트 서버 컴포넌트) Streaming (스트리밍) Turbopack(alpha) : Rust 기반. Webpack 보다 7..
-
[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 이라는 컨셉을 제안하게 된다. 이는, 자식 컴포넌트 트리에서 발생한 ..
-
[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 준비 다크모드는 ..
-
[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 업데이트 등에 초점이 맞춰져있다고 한다...