[React🌀] Next JS 13 업데이트 사항 총 정리 📄
들어가며 안녕하세요. 오랜만에 포스팅을 하네요. 😃 사실 react 와 svelte 를 비교하는 글을 준비하고 있었는데, 아무래도 제가 svelte에 관한 내용을 쓰기에는 사용경험이 너무 적더라구요. 이미 관련된 좋은 글도 너무 많은데 차별성도 없고 내용도 결국 똑같아지는 것 같고.. 몇 가지 개인적인 일들이 있기도 했구요. 아무튼 군소리는 여기까지 하고, 바로 시작하겠습니다! 이 포스팅의 내용들은 99% 이상이 아래 링크된 Next JS의 공식 블로그 내용을 바탕으로 하고 있을 테니, 영어에 자신 있는 분들은 그냥 블로그 글 읽는게 더 도움이 되실 수도 있습니다 😄 Next JS 13 Next JS 12가 공개된지 1년쯤 되었네요 벌써 .. 드디어 Next js 13이 공개되었습니다! https://..
2022. 10. 31.
[JavaScript] 자바스크립트 모듈 시스템을 마스터 해보자
들어가며 '시작은 미약했으나, 그 끝은 창대하리라' 이 말은 딱 자바스크립트를 위한 말이 아닐까 싶습니다. 초창기 자바스크립트가 생겨났을 때, 이렇게 대표적인 언어로 발전할 것이라고 예상을 했을까요? 자바스크립트는 탄생 이래로 정말 많은 변화와 발전과정을 거쳐왔습니다. 자바스크립트의 탄생부터 FE 세계에 있던 분이 아니라면, 저처럼 타입스크립트 시대부터 제데로 공부를 시작한 분이라면, JS의 모듈 시스템에 대해 정확히 이해하고 있기가 쉽지 않습니다. ts 파일을 직접 실행시킬 때 import 문제로 실행이 되지 않아 애먹은 적이 있었죠. { "compilerOptions": { "target": "es5", "module": "commonjs", } } tsconfig 의 compilerOptions >..
2022. 8. 6.
[Next JS] Layouts RFC , React 18에 최적화된 라우팅 방식 공개
Offscreen Stashing with Instant Back/ForwardLayouts RFC 올해 3월 말, 리액트 v18.0 이 공개가 되었죠, 이제 Concurrent mode, Suspense, RSC 등을 탑재한 리액트 18의 도입을 적극적으로 고려해볼 만한 시간이 얼마 안남은 것 같습니다. (https://reactjs.org/blog/2022/03/29/react-v18.html) Next JS에서도 적극적으로 리액트 v18 의 변경사항들을 적용중임을 알려왔었고 이번에는 새롭게 변경되는 layout, 그리고 라우팅 방식을 공개했습니다 ! 이 포스팅의 내용들은 99% 이상이 아래 링크된 Next JS의 공식 블로그 내용을 바탕으로 하고 있을 테니, 영어에 자신 있는 분들은 그냥 블로그 ..
2022. 6. 15.
[React🌀] Ref 에 대한 고찰 🔍 / 2️⃣ - useRef 와 useState, 그리고 global Variable
들어가며 이전 포스팅을 읽고 오시는 것을 추천드립니다 ! https://programming119.tistory.com/265 [React🌀] Ref 에 대한 고찰 🔍 / 1️⃣ - Ref 의 활용과 useRef Ref는 언제 사용할까? ref 는 references 의 약자로, React 에서 특정 컴퍼넌트를 접근하는 데에 사용하는 props 라고 이해하고 있으면 편합니다. 리액트에서 DOM을 컨트롤할때 주로 이 ref 를 이용하지 programming119.tistory.com useRef와 useState [React🌀] Ref 에 대한 고찰 🔍 / 1️⃣ - Ref 의 활용과 useRef 를 읽고 오셨다면, 사실 두 훅을 구분하는 것은 너무나도 간단한 일입니다. useState는 리액트의 핵심 훅..
2022. 5. 15.
[React🌀] Ref 에 대한 고찰 🔍 / 1️⃣ - Ref 의 활용과 useRef
Ref는 언제 사용할까? ref 는 references 의 약자로, React 에서 특정 컴퍼넌트를 접근하는 데에 사용하는 props 라고 이해하고 있으면 편합니다. 리액트에서 DOM을 컨트롤할때 주로 이 ref 를 이용하지만, ref 의 개념이 리액트를 처음 이용하는 사람들은 직관적으로 이해하기가 쉽지 않고, 리액트를 어느 정도 활용할줄 아는 사람도 정확히 ref가 뭔지 풀어 설명하기가 쉽지 않습니다. 때문에 이번 포스팅에서는, ref 에 대한 개념을 되새겨보고, 사용예시들을 바탕으로 이런저런 고민해볼 점들에 대해 다뤄보고자 합니다! Ref는 render 메서드에서 생성된 DOM 노드나 React 엘리먼트에 접근하는 방법을 제공합니다. 그러나, 일반적인 데이터 플로우에서 벗어나 직접적으로 자식을 수정해..
2022. 5. 15.
[React🌀] 차세대 상태관리 라이브러리, Jotai VS Zustand ⭐ (Feat. Recoil)
들어가며 프론트엔드 분야는 변화가 정말 빠르고 쉴새없이 발전하고 있는 것 같습니다. 하던 것만 열심히하면 어느새 뒤쳐지고 있는 자신을 발견할 수 있습니다… 😭 그 중에서도 가장 우리를 까다롭게 만드는 분야가 있죠, 바로 상태관리 (state management) 입니다. 리액트와 Next JS 등 프레임워크들이 여러 문제상황들을 해결해주었다고 하지만 상태관리에 대해서는 여전히 의문입니다. 코드가 길어지고, 무언가 모를 불편함이 항상 존재해왔죠. Redux 나 Mobx, 거기에 더 나아가서는 Redux 사용을 간소화시킨 Redux toolkit 또한 등장하지만 아직도 이 부분은 발전할 길이 많이 남았다고 생각됩니다. 그 중에 최근들어 점점 주목받고있는 2가지 라이브러리를 소개하고자 합니다! 바로 Jotai..
2022. 1. 24.
[React🌀] Next JS 13 업데이트 사항 총 정리 📄
들어가며 안녕하세요. 오랜만에 포스팅을 하네요. 😃 사실 react 와 svelte 를 비교하는 글을 준비하고 있었는데, 아무래도 제가 svelte에 관한 내용을 쓰기에는 사용경험이 너무 적더라구요. 이미 관련된 좋은 글도 너무 많은데 차별성도 없고 내용도 결국 똑같아지는 것 같고.. 몇 가지 개인적인 일들이 있기도 했구요. 아무튼 군소리는 여기까지 하고, 바로 시작하겠습니다! 이 포스팅의 내용들은 99% 이상이 아래 링크된 Next JS의 공식 블로그 내용을 바탕으로 하고 있을 테니, 영어에 자신 있는 분들은 그냥 블로그 글 읽는게 더 도움이 되실 수도 있습니다 😄 Next JS 13 Next JS 12가 공개된지 1년쯤 되었네요 벌써 .. 드디어 Next js 13이 공개되었습니다! https://..
[JavaScript] 자바스크립트 모듈 시스템을 마스터 해보자
들어가며 '시작은 미약했으나, 그 끝은 창대하리라' 이 말은 딱 자바스크립트를 위한 말이 아닐까 싶습니다. 초창기 자바스크립트가 생겨났을 때, 이렇게 대표적인 언어로 발전할 것이라고 예상을 했을까요? 자바스크립트는 탄생 이래로 정말 많은 변화와 발전과정을 거쳐왔습니다. 자바스크립트의 탄생부터 FE 세계에 있던 분이 아니라면, 저처럼 타입스크립트 시대부터 제데로 공부를 시작한 분이라면, JS의 모듈 시스템에 대해 정확히 이해하고 있기가 쉽지 않습니다. ts 파일을 직접 실행시킬 때 import 문제로 실행이 되지 않아 애먹은 적이 있었죠. { "compilerOptions": { "target": "es5", "module": "commonjs", } } tsconfig 의 compilerOptions >..
[Next JS] Layouts RFC , React 18에 최적화된 라우팅 방식 공개
Offscreen Stashing with Instant Back/ForwardLayouts RFC 올해 3월 말, 리액트 v18.0 이 공개가 되었죠, 이제 Concurrent mode, Suspense, RSC 등을 탑재한 리액트 18의 도입을 적극적으로 고려해볼 만한 시간이 얼마 안남은 것 같습니다. (https://reactjs.org/blog/2022/03/29/react-v18.html) Next JS에서도 적극적으로 리액트 v18 의 변경사항들을 적용중임을 알려왔었고 이번에는 새롭게 변경되는 layout, 그리고 라우팅 방식을 공개했습니다 ! 이 포스팅의 내용들은 99% 이상이 아래 링크된 Next JS의 공식 블로그 내용을 바탕으로 하고 있을 테니, 영어에 자신 있는 분들은 그냥 블로그 ..
[React🌀] Ref 에 대한 고찰 🔍 / 2️⃣ - useRef 와 useState, 그리고 global Variable
들어가며 이전 포스팅을 읽고 오시는 것을 추천드립니다 ! https://programming119.tistory.com/265 [React🌀] Ref 에 대한 고찰 🔍 / 1️⃣ - Ref 의 활용과 useRef Ref는 언제 사용할까? ref 는 references 의 약자로, React 에서 특정 컴퍼넌트를 접근하는 데에 사용하는 props 라고 이해하고 있으면 편합니다. 리액트에서 DOM을 컨트롤할때 주로 이 ref 를 이용하지 programming119.tistory.com useRef와 useState [React🌀] Ref 에 대한 고찰 🔍 / 1️⃣ - Ref 의 활용과 useRef 를 읽고 오셨다면, 사실 두 훅을 구분하는 것은 너무나도 간단한 일입니다. useState는 리액트의 핵심 훅..
[React🌀] Ref 에 대한 고찰 🔍 / 1️⃣ - Ref 의 활용과 useRef
Ref는 언제 사용할까? ref 는 references 의 약자로, React 에서 특정 컴퍼넌트를 접근하는 데에 사용하는 props 라고 이해하고 있으면 편합니다. 리액트에서 DOM을 컨트롤할때 주로 이 ref 를 이용하지만, ref 의 개념이 리액트를 처음 이용하는 사람들은 직관적으로 이해하기가 쉽지 않고, 리액트를 어느 정도 활용할줄 아는 사람도 정확히 ref가 뭔지 풀어 설명하기가 쉽지 않습니다. 때문에 이번 포스팅에서는, ref 에 대한 개념을 되새겨보고, 사용예시들을 바탕으로 이런저런 고민해볼 점들에 대해 다뤄보고자 합니다! Ref는 render 메서드에서 생성된 DOM 노드나 React 엘리먼트에 접근하는 방법을 제공합니다. 그러나, 일반적인 데이터 플로우에서 벗어나 직접적으로 자식을 수정해..
[React🌀] 차세대 상태관리 라이브러리, Jotai VS Zustand ⭐ (Feat. Recoil)
들어가며 프론트엔드 분야는 변화가 정말 빠르고 쉴새없이 발전하고 있는 것 같습니다. 하던 것만 열심히하면 어느새 뒤쳐지고 있는 자신을 발견할 수 있습니다… 😭 그 중에서도 가장 우리를 까다롭게 만드는 분야가 있죠, 바로 상태관리 (state management) 입니다. 리액트와 Next JS 등 프레임워크들이 여러 문제상황들을 해결해주었다고 하지만 상태관리에 대해서는 여전히 의문입니다. 코드가 길어지고, 무언가 모를 불편함이 항상 존재해왔죠. Redux 나 Mobx, 거기에 더 나아가서는 Redux 사용을 간소화시킨 Redux toolkit 또한 등장하지만 아직도 이 부분은 발전할 길이 많이 남았다고 생각됩니다. 그 중에 최근들어 점점 주목받고있는 2가지 라이브러리를 소개하고자 합니다! 바로 Jotai..