개발자 박가나

Next.js는 대부분의 영억에서 fetch 함수를 기반으로 캐싱을 하는데, 여기에서의 fetch 함수는 브라우저의 fetch API를 기반으로 Next.js에서 확장한 새로운 fetch API를 뜻한다. 그 중에서도 빌드할 때와 요청할 때, 이렇게 크게 두 가지 포인트에서 캐싱을 진행한다.  Full Route Cache빌드 시점에 페이지를 렌더링한 결과를 캐싱한다. 이를 통해, 서버는 매 요청마다 페이지를 다시 렌더링할 필요없이 미리 생성된 HTML과 데이터를 빠르게 사용자에게 제공할 수 있기 때문에 페이지 로딩 속도가 크게 향상된다. 주로 SSG 방식의 페이지에서 사용된다.  Data Cachefetch 함수를 기반으로 데이터를 캐싱하고, 서버 요청 간에도 데이터를 지속적으로 활용할 수 있게 해준다..

CSR (Client Side Rendering)브라우저에서 JavaScript를 이용하여 동적으로 페이지를 렌더링하는 방식으로, 렌더링의 주체가 클라이언트이다. 장점사용자와의 상호작용이 빠르고 부드럽다.서버에 추가적인 요청을 보낼 필요가 없기 때문에 사용자 경험이 좋다.서버 부하가 적다. 단점첫 페이지 로딩 시간(TTV)이 길다.JavaScript가 로딩되고 실행되기 전까지는 페이지가 비어있기 때문에 SEO에 불리하다.'use client';import { Product } from '@/types';export default function Home() { const [products, setProducts] = useState([]); useEffect(() => { fetchDa..

Generic클래스나 함수 등에서 타입을 마치 파라미터처럼 사용하는 것을 의미한다. 아래 코드의 경우, 두 함수의 로직은 동일하지만 각각 string과 number 타입만 처리할 수 있기 때문에 중복 코드가 발생하게 된다.function printStrings(arr: string[]): void { for (let i = 0; i  이러한 경우, 아래 코드처럼 Generic을 사용해서 여러 타입을 처리할 수 있다.function printAnything(arr: T[]): void { for (let i = 0; i   Utility Type타입 변환을 용이하게 하기 위해서 TypeScript에서 지원하는 문법이다. PickT에서 프로퍼티 K의 집합을 선택해서 타입을 구성한다.interfac..

제출 직전까지 계속해서 코드 디버깅을 하고 PPT를 만드느라 정신없었던 아웃소싱 프로젝트가 끝이 났다. 오늘은 프로젝트 회고로 TIL을 대신 하고자 한다. 시야 넓히기각자 담당할 파트를 분배하고 코딩을 진행한 뒤 발표 전날 최종적으로 병합을 하고 배포를 하기로 하였는데, 병합을 하는 과정에서 구현이 누락된 부분이 발견되었다. 협업은 각자 담당하기로 한 부분만큼은 확실히 책임을 지고 구현을 해낼 것이라는 믿음을 가지고 진행되는 것이기 때문에 언뜻 보면 해당 부분을 담당하기로 한 사람의 잘못으로 볼 수 있겠지만 오히려 그러한 무조건적인 믿음만을 가지고 다른 사람의 업무 진행도는 어떻게 되는지, 혹시 놓친 부분은 없는지에 대한 확인을 제대로 하지 않은 것이기 때문에 팀원들에게도 조금의 책임은 있다는 생각이 들..

'마운틴듀' 프로젝트에서 겪은 트러블슈팅을 기록하고자 한다.  메인 페이지의 지도에서 특정 장소 클릭 시 상세 페이지로 이동다음과 같은 로직으로 구현하고자 하였다.메인 페이지에서 id 값을 상세 페이지로 넘겨주기id 값을 이용해서 클라이밍장의 상세 정보를 받아와서 보여주기하지만 카카오 지도 API에서 id 값을 이용해서 장소의 상세 정보를 받아오는 API를 지원해주지 않았기 때문에 다음과 같은 로직으로 변경하였다.메인 페이지에서 id와 place_name 값을 상세 페이지로 넘겨주기place_name 값으로 장소 검색하기검색 결과 중에서 넘겨받은 id 값과 동일한 id 값을 가지는 장소의 상세 정보를 보여주기  상세 페이지로 이동상세 페이지에 접속하면 다음과 같은 로직이 수행되도록 구현하였다.places..

'야구 캘린더' 프로젝트에서 겪은 트러블슈팅을 기록하고자 한다.  경기 일정 등록하기 경기 일정을 등록할 때, 홈/원정 여부와 상대 팀을 선택한다.홈 경기일 때, team_home은 내가 응원하는 팀 / team_away는 상대 팀 / stadium은 내가 응원하는 팀의 구장원정 경기일 때, team_home은 상대 팀 / team_away는 내가 응원하는 팀 / stadium은 상대 팀의 구장즉, 상대 팀을 선택하는 순간 여러 개의 값을 변경해 주어야 한다.  시행착오 1단순하게 useForm에서 선언한 handleSelect를 여러 번 호출하는 방식으로 구현했는데 값이 제대로 변경되지 않았다.export function useForm(initialValues) { const [values, se..

Funnel 패턴Funnel은 깔대기를 의미한다. 즉, Funnel 패턴은 마치 깔대기 모양처럼 사용자가 단계를 거치면서 정보를 입력하는 UI 설계 방식을 말한다. 사용자가 여러 정보를 입력할 때, 모든 것을 한 번에 입력하는 것이 아니라 단계를 나눠서 하나씩 처리하기 때문에 깔대기처럼 점점 좁아지는 형식처럼 보인다. 기존 방식각 단계별로 별도의 컴포넌트를 만들고 전역 상태를 사용해서 데이터를 관리한다. 페이지 간의 이동은 라우터로 처리하고, 최종 단계에서 모든 데이터를 수집해서 API를 호출한다.각 단계가 별도의 파일이나 컴포넌트로 분산되어 있어 흐름 파악이 어려움상태 변경이 여러 컴포넌트에서 이루어지기 때문에 데이터 흐름을 추적하기 어려움코드 수정 시 여러 파일을 수정해야하기 때문에 유지보수가 어려움..

TanStack Query에서 제공하는 Hook으로, 페이지 단위로 데이터를 가져오는 기능을 제공한다. useInfiniteQuery는 각 페이지 데이터를 data.pages 배열에 누적해서 저장한다. 이를 위해서 API 응답 값에는 각 페이지의 데이터와 다음 페이지에 대한 정보가 포함되어 있어야 한다. 필수 데이터data : 현재 페이지의 데이터 배열nextPage : 다음 페이지 번호 (없을 경우 null 또는 undefined)선택 데이터totalPages : 전체 페이지 수totalItems : 전체 데이터 항목 수 작동 방식초기 로드queryFn이 실행되어 첫 페이지의 데이터를 가져와서 data.pages[0]에 저장된다. 다음 페이지 로드fetchNextPage 호출 시 queryFn이 실행되..

HTTP (Hyper Text Transfer Protocol)서버/클라이언트 모델에서 데이터를 주고받기 위한 프로토콜이다. 데이터를 암호화되지 않은 텍스트 형태로 주고 받기 때문에 중간에서 누군가 데이터를 탈취해서 악용할 위험성이 있다. 동일한 아이디와 비밀번호를 여러 개의 사이트에서 사용을 하는 경우가 많은데, 이 중 HTTP 방식으로 통신을 하는 사이트가 있다면 개인 정보 유출로 인한 피해를 입을 수 있을 것이다.  HTTPS (HTTP + Secure)이름 그대로 HTTP에 암호화가 추가된 프로토콜이다. 한 쪽에서 데이터를 암호화해서 보내고, 다른 한 쪽에서 해당 데이터를 복호화해서 사용한다.  대칭키클라이언트와 서버가 동일한 키를 가지고 암호화 및 복호화를 진행한다. 특정 키로 암호화된 데이터는..

챌린지반에서 TanStack Query 실습을 진행하였다. TanStack Query를 사용하는 이유를 이해하고 사용법에 익숙해지는 것이 목적이었기 때문에 초기에는 App.jsx 파일에 모든 코드가 모여있는 상태였고, 다음과 같은 순서에 따라 코드 리팩토링을 진행하였다. API 관련 코드를 별도의 파일로 분리Axios Instance 생성Axios Interceptor 생성useQuery 구현useMutation 구현invalidateQueries 사용useQuery를 Custom Hook으로 분리useMutation을 Custom Hook으로 분리7~8단계에서 생성한 Custom Hook을 하나의 Hook으로 통합낙관적 업데이트 적용 초기 코드/* App.jsx */function TodoList() ..