분류 전체보기

저희 팀은 query와 mutation 관련된 함수들을 src > api 폴더로 만들어 따로 관리하였었는데요, 로직을 나누고 작업을 하면서 각자 작업하다보니 중복이 생긴지 모른채 작업했었답니다ㅠ_ㅠ;; 게다가 작업을 같이 병행하면서 중복을 제거하는게 쉽지 않았기때문에 프로젝트가 마무리되기 이전에도 수정하지 못했었어요. 배포 후 터진 에러들이 많았기 때문에.. 그래서 프론트엔드 팀원이신 한분과 함께 같이 리팩토링을 진행하게 되었습니다. ● 1일차 작업 분배 ❍ queryfn.ts (준석) 중복되는 로직 삭제 (getWalkmateList ) ❍ mutationfn.ts (다은) post, patch, delete 요청에 맞춰서 함수명 통일하기 (현재 add, edit, delete.. 마구잡이임) + 겹치..

● Link 태그로 url 변경 시, 스크롤 유지를 하고 싶다면? 공식문서에서 Link태그의 속성으로 scroll이 있네요 ㅎㄷㄷ 기본적으로는 true로 되어있고 false인 경우 다음/링크는 탐색 후 페이지 상단으로 스크롤되지 않는다고 합니다. import Link from 'next/link' export default function Page() { return ( Dashboard ) } 리액트 환경에서는 일일이 이벤트태그를 달아서 (스크롤 이동을) 해주어야했는데, 이런점이 좋네요.. Components: | Next.js Using App Router Features available in /app nextjs.org

템플릿은 레이아웃과 유사하게 각 자식 레이아웃이나 페이지를 감싸는 역할을 합니다. 그러나 레이아웃과는 다르게 템플릿은 탐색할 때마다 자식 요소마다 새로운 인스턴스를 생성합니다. 이는 사용자가 템플릿을 공유하는 라우트 간에 이동할 때 컴포넌트의 새로운 인스턴스가 마운트되고, DOM 요소가 다시 생성되며, 상태가 보존되지 않고 효과가 다시 동기화된다는 것을 의미합니다. 아래와 같이 일부 특정 동작이 필요한 경우에는 레이아웃보다 템플릿이 더 적합한 옵션이 될 수 있습니다. Enter/exit animations using CSS or animation libraries: 템플릿을 사용하여 CSS 또는 애니메이션 라이브러리를 활용한 입/출입 애니메이션을 구현할 수 있습니다. 예를 들어, 페이지 간 전환 시 페이..

● 왜 서버 컴포넌트를 사용해야하는가? CSR같은 경우, 렌더링을 클라이언트 측에서 하기때문에 자바스크립트를 받아오는데 있어서, 시간이 오래걸릴 수 있다는 단점이 있지만, 서버 컴포넌트를 활용했을 시 번들의 크기도 줄어들 수 있고 더빠르게 렌더링할 수 있습니다. 기본적으로 'use client'를 작성하지 않으면 서버컴포넌트로 작성됩니다. ● 언제 서버컴포넌트를 사용해야하고, 클라이언트 컴포넌트를 사용해야하는가? 공식문서에서는 그냥 일반적으로 서버컴포넌트와 클라이언트 컴포넌트를 사용할지 고민하고 있다면, 대체적으로 서버컴포넌트를 쓰라고 권장하고 있습니다. (app 디렉토리를 사용했다는 가정하에,) 공식문서에서는 아래와 같이 언제 서버 컴포넌트를 써야하고 클라이언트 컴포넌트를 사용해야하는지 요약해두었는데요..

vite나 next.js로 프로젝트를 생성했을 시, vite는 SWC를 적용할건지 선택해 프로젝트를 생성할 수 있고 next.js같은 경우는 next.js 12버전부터 swc가 도입되었다. 늘, vite로 프로젝트를 생성할때마다 궁금했던 swc.. 도대체 뭘까? 우리는 swc를 접하기 이전에, babel과 terser에 대해서 가볍게 알아보고자 한다. ● Babel babel은 트랜스파일러로, 우리가 최신자바스크립트로 코드를 작성했다면 IE호환성을 위해서 옛자바스크립트 문법으로 변환해준다. 기본적으로 babel은 여러 플러그인을 통해서 어떤 문법들을 어떻게 변환할 건지 하나씩 조합할수도 있고 기본적으로 플러그인을 조합해서 만들어놓은 프리셋이 있기때문에 (기본설정) 대체적으로는 프리셋을 활용하여 옛문법으로..

아무고토 하고 싶지 않다.. 하지만 해야죠? 이펙티브 타입스크립트 스터디에 참여하게 되엇읍니다. 참여하는 김에, 블로깅도 같이 남기면서 하면 좋을 것 같아 오느른 tsconfig.json에 대해서 공부해볼까합니다. 이전에 프로젝트에서 참여할 때 프로젝트 생성 시, 기본적으로 깔려있는 typscript 설정들로만 항상 활용해왔는데, 책에서는 적극적으로 활용해볼 것을 권장하고 있네요. ● noImplicitAny, strictNullChecks 를 사용하자! 책에서는 noImplicitAny와 strictNullChecks를 프로젝트에 꼭 사용해보길 권장하고 있습니다. noImplicitAny: true로 설정 시,any 타입을 지정할 수 없음 strictNullChecks: null과 undefined가 ..