Front-End Dev.
-
[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 업데이트 등에 초점이 맞춰져있다고 한다...
-
[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한 ..
-
[React Query] (4) useMutation()Front-End(Web)/React - 라이브러리들 2022. 8. 10. 20:59
🧐 서론 지난 포스팅까지, useQuery()를 쓰는 다양한 기법들과 더욱 확장된 기능을 위한 훅들을 알아보았다. (useQueries, useInfiniteQuery 등) 계속 언급했듯, useQuery()는 데이터 조회(HTTP 요청의 GET)를 담당하는 훅이다. 이번 포스팅에서는, useMutations() 훅을 통해 POST, PUT, DELETE를 어떻게 핸들링하는지 알아보도록 하겠다! (공식문서는 위 요청을 Mutation으로 구현할 것을 권장한다. useQuery의 onSuccess, onError로 POST도 구현가능하나 가급적 지양) * https://www.youtube.com/watch?v=NYCG1o38oEQ&list=PLC3y8-rFHvwjTELCrPrcZlo6blLBUspd2&i..
-
[React Query] (3) useQuery() 고급 - Parallel, Dependent, Paginated, InfiniteFront-End(Web)/React - 라이브러리들 2022. 8. 2. 01:07
🧐 서론 앞에서는, React Query의 가장 기본 개념이 되는 useQuery() 메서드에 대해 알아보았다. (이는, GET 요청을 담당) 이번 포스팅도 useQuery() 에서 이어지는 내용들이며, 이를 사용하는 다양한 방법들 그리고 확장된 기능들을 구현하기 위해 지원되는 useQuery() 외의 메서드들을 집필해보려고 한다. * https://www.youtube.com/watch?v=2s2iJLLDwgk&list=PLC3y8-rFHvwjTELCrPrcZlo6blLBUspd2&index=14 🌺 useQuery() 더욱 잘 쓰기 - Custom Hook으로 분리하기 아래 예시는 이전에 useQuery() 로 구현한 리스트 페이지이다. import { useQuery } from "react-que..
-
[React Query] (2) useQuery()Front-End(Web)/React - 라이브러리들 2022. 7. 26. 21:14
🧐 서론 첫 번째 포스팅에서는 React Query를 도입하는 배경과 장점, 그리고 기본개념들을 우선 정리하였다. 그리고, 이번 포스팅부터는 실질적으로 다루기 위한 문법들을 정리하려고 한다. React Query에는 주요 개념들이 있었으며, 이번 주제는 비동기 데이터를 지칭하는 쿼리(Queries)를 다루는 문법들이 될 것이다. 쿼리 데이터를 패치하는 useQuery() 메서드와 이 데이터를 다루기 위한 다양한 방법들을 정리해보겠다! * https://www.youtube.com/watch?v=Ev60HKYFM0s&list=PLC3y8-rFHvwjTELCrPrcZlo6blLBUspd2&index=3 🌺 useQuery() : 데이터 패치 Hooks 우선, 어플리케이션의 컴포넌트 트리 최상단에 설정했던 ..
-
[React Query] (1) React Query 시작하기Front-End(Web)/React - 라이브러리들 2022. 7. 25. 18:55
🧐 서론 React에서 사용되는 기술들에 계속해서 관심가지던 도중, 최근 React Query를 통한 API fetching이 많다는 것을 느꼈다. 대게 라이브러리들이 그렇듯, 기존의 fetch() 함수나 axios에 비해 더 많은 기능을 제공할 것이라 생각된다. (패치상태, 캐싱 등) 또한, Redux의 경우를 생각하면 비동기 패치와 상태관리 등을 위해 서드파티 라이브러리 설치가 필수적이었다. (비동기 패치를 위한 Redux-thunk, Redux-saga, 상태관리를 위한 Redux-toolkit 등) 그렇지 않아도 번거로운 Redux 설정이 서드파티로 인해 더욱 비대해지고, 범용적으로 쓰이는 saga는 제너레이션 문법이 요구된다는 등의 사용성 이슈가 존재한다. 유튜브 강의 전개내용을 적당히 분할하면..