전체 글

진행 배경초기 렌더링 개선과 SEO를 위해 SSR를 사용하기 위해 Next14 app router적용,렌더링이 서버에서 처리되면서 서버비용이 많이 들어감트래픽이 많은경우 CPU 부하가 심해짐상세페이지 레이아웃, 상품정보는 자주 변경되는 정보가 아님웹서버의 성능이 중요한 이유얼마나 빠르고, 효율적으로 사용자들에게 콘텐츠를 제공하느냐를 의미빠른로딩으로 사용자 경험 향상빠른사이트는 SEO유리네트워크 사용량 감소, 서버 요청 최소화로 인프라 비용 절감개선할점상품스펙에 관련 된 상품정보는 자주 변경되는 정보가 아니여서 상품페이지는 full route cache를 적용해서 캐시된 HTML을 적용한다.full route cache란?Next.js는 4가지 캐시 매커니즘이 있다. 이번에 사용하는 캐시는 Full Rou..

컴포넌트?데이터(props)를 인자로 받아서, jsx를 리턴하는 자바스크립트 함수를 컴포넌트라고 한다.1. 실행 환경서버 컴포넌트서버에서 렌더링되며, 클라이언트(브라우저)로 전송되는 HTML 또는 React Server Component Payload(RSC Payload) 형태로 제공됩니다.클라이언트 측 JavaScript 번들 크기를 줄여 성능을 최적화합니다.기본적으로 Next.js 14의 모든 컴포넌트는 서버 컴포넌트로 간주됩니다.클라이언트 컴포넌트클라이언트(브라우저)에서 렌더링되며, 서버에서 사전 렌더링된 후 클라이언트에서 "하이드레이션(hydration)" 과정을 거쳐 인터랙티브해집니다.'use client' 지시어를 파일 상단에 추가하여 정의합니다. 2. 주요 특징서버 컴포넌트데이터 페칭: 서..

Next 앱라우터는 Suspense를 통한 스트리밍을 지원한다.streaming이란?React와 Next.js에서 스트리밍이 작동하는 방식을 알아보려면 서버사이드렌더링(SSR)을 이해해야한다.서버에서 모든 데이터를 fetch한다.데이터를 바탕으로한 HTML을 렌더링한다.클라이언트로 HTML, CSS, Javascript를 전송한다.HTML, CSS를 통해 인터페이스를 표현한다. (상호작용 안되는)React hydration을 통해 상호작용이 될 수 있도록 한다.streaming을 사용하게 된 배경서버에서 모든데이터를 가져오고 작업이 완료되므로 순차적이고 차단적이다.컨텐츠를 다운받기 전 빈화면이 보일 수있다.streaming을 사용하면페이지의 HTML을 작은조각으로 나누고 점진적으로 서버에서 클라이언트에 ..

1. 배경React Query를 사용하면 캐싱이 가능하지만, 기본적으로 브라우저 메모리에 저장되므로 새 창을 열거나 새로고침하면 캐시 데이터가 유지되지 않습니다. 특히, 슈프라이즈 앱처럼 페이지 이동 시 새 창이 열리는 구조에서는 react-query 캐시를 활용할 수 없는 문제가 발생합니다.이를 해결하기 위해 persistQueryClient 를 사용하여 캐시를 로컬 스토리지에 저장하고, 새 창이나 새로고침 시에도 캐시 데이터를 활용할 수 있도록 최적화하였습니다.persistQueryClient?persistQueryClient는 React Query에서 제공하는 기능으로, 쿼리 클라이언트(QueryClient)의 상태(예: 캐시된 데이터)를 브라우저의 로컬 스토리지, 세션 스토리지 등에 영구적으로 저..

함수와 렉시컬환경의 조합함수가 생성 될 당시의 외부변수를 기억, 생성 이후에도 계속 접근 가능외부변수의 은닉화 (외부함수의 변수를 변경할 수 없다.) 함수 내부 렉시컬환경에서 변수가 없는경우 하나씩 외부로 나가서 변수를 찾게된다. 내부함수 -> 외부함수 -> ... -> 전역환경  let one;one = 1;function addOne(num) { console.log(num + one); //인수 5 + 전역변수 one값을 가져온다}addOne(5); 함수가 생성 될 당시의 변수를 기억해서 이후에 계속 사용할 수 있다. function makeAdder(x) { return function (y) { return x + y; };}const add3 = makeAdder(3);console..

프로젝트에서 특정 버튼을 클릭 시 사용자정보를 fetch해서 response에 따라 비동기로 input에 focus하는 로직을 구현했습니다. 안드, 웹에서는 정상작동했지만 ios에서 input에 focus가 안되는 이슈가 있었습니다. 찾아보니 Ios는 사용자 인터렉션에 의해서만 input focus를 시킬 수 있다고 합니다. 해결방법이라기보다 제가 사용한 꼼수는 ios경우 버튼클릭 시 인풋에 포커스가 가게하고 비동기로 response받아서 이후 프로세스 처리하는 것으로 진행했습니다.사실 ios의 경우 활성화가 되면안되는경우도 활성화가 되었다가 비활성화 된다는 현상이 있었지만 사용성을 생각했을 때 키보드에 포커스가 가는게 더 낫다 생각을 했기때문에 진행했습니다. 참고 https://gist.github..

순수 css 별다른 처리가 필요하지 않아 서버컴포넌트에서 호환문제가 발생하지 않는다. css 전처리기 sass, less, postcss등 css 전처리기는 빌드타임에 순수css로 컴파일된다. css modules 빌드타임에 css가 생성된다. Tailwind css 빌드 타임에 css가 생성된다. CSS-in-JS 자바스크립트를 사용하여 스타일 정의를 한다. 런타임에 동적으로 스타일이 적용된다. 빌드타임에 css가 완성되냐, 런타임에서 js통해 동적으로 css가 렌더링 되냐 Next.js 서버컴포넌트 호환성을 결정해준다.

ngrok을 사용하면 로컬환경을 인터넷으로 공유할 수 있다. https://ngrok.com./1. Mac 설치 방법❯ brew install ngrok/ngrok/ngrok 2. ngrok 회원가입한다. 3. Tunnel Agent Authtokens 를 만들어준다. 4. 터미널에 토큰을 저장해준다.     ngrok config add-authtoken '발급받은토큰'4. 프론트 로컬 서버를 띄어준다. 5. ngrok http (프론트서버 포트번호)를 터미널에 입력하여 사용한다.     ngrok http 8080

Jest자바스크립트 제일 유명한 테스트 프레임 워크프레임워크란? 테스트에 필요한 모든것을 갖춰두었다.babel, typescript, Node, React, Angular, Vue 테스트 할 수 있다.Jest (Javascript + Test) 대체제Vitest(Vite), Jasmine, Mocha + Sinon + Chai 등.. 테스트 커버리지테스트 코드가 내코드를 얼마나 커버하고 있나 테스트를 왜 해야하는지 ?예전에 났던 코드가 또 오류가 나는경우를 위해 회귀 테스트를 해야한다.회귀테스트 - 오류난 부분에서 오류 안나게 테스트하는 것코드가 복잡한데 많이 바뀌어야하는경우하나의 코드를 수정했더니 import 한 다른곳에서 에러가 나는 경우장시간에 걸쳐 내가 유지보수 해야하는 경우TDD - Test D..

서버에서 실행되는 비동기 함수서버컴포넌트에 비동기 함수를 작성, 함수 본문에 'use server'를 작성한다.클라이언트 컴포넌트에서는 서버액션 함수 작성불가, module로 작성 된 서버액션 함수를 import해서 사용 server action 함수 사용하는 곳form 태그 action propformAction propuseTransition() 훅에서 제공하는 startTransition과 사용 (suspense 폴백의 깜박임 없이 비동기로 데이터를 받아서 처리 가능)form 요소내에 , , 이렇게 3가지 요소에만 formAction prop 을 허용한다.서버 액션이 어떻게 작동하는가?빌드단계에서 서버액션마다 고유한 40자인 랜덤한 문자열이 생긴다.Request header에 Next-Actio..