sungwook

프론트엔드 개발자로 살아남기 위해 필요한 역량이 무엇일까 생각을 많이 해봤다.javascript, html, css 를 기본으로 typescript도 알아야하고 React, Next.js, react-query, redux, webpack, babel 등등나열해보면 공부하고 알아야할게 끝이 없다. 그래서 이 모든걸 다 준비하고 다시 취업시장에 뛰어들기 보다는 초심으로 돌아가 기초를 다잡기로 마음먹었다.바로 vanilla javascript로 리액트라는 프레임워크를 구현하는 것이다. 단, 한가지 조건이 있다. 함수형 컴포넌트 제작으로 리액트를 쓸 때와 거의 동일하게 만드는 것이다. 이런 결정을 하게 된 이유는 다음과 같다.1. 자바스크립트와 리액트에 대한 이해도를 높이고 싶다.2. 리액트를 바닐라 자바스크..

버전 정보next 14.2.3 (app router)react 18.3.1@tanstack/react-query 5.40.1 suspense의 존재에 대해 알고 있었지만 시간에 쫓겨 대충 고차 컴포넌트로 로딩을 관리하면서 코드를 짜왔다.하지만 어제 suspense에 대해 좀 더 공부하고 react-query에서 useSuspenseQuery를 사용하면비교적 쉽게 도입할 수 있다는 것을 깨닫고 이를 진행중인 프로젝트에 도입해보기로 했다. 결과적으로 하루만에(야근은 덤..) 40여개의 api를 모두 useSuspenseQuery로 수정했고Next에서 서버사이드렌더링을 사용하면서 겪었던 이슈들을 정리해보려 한다. 1. prefetch로 서버사이드에서 미리 데이터 불러오기공식문서를 보고 prefetch가 서버사..