공부 기록일지📚

Next.js로 어플리케이션을 만들던 중 Notion API를 통해서 기간 값을 받아오는 로직이 있습니다. 해당 데이터는 string 타입으로 오며 "2022-11-05" 이런 식으로 넘어오게 됩니다. start date와 end date를 받아오는데 end date를 설정해주지않으면 null으로 담겨오게 됩니다. end date를 받아오지 않으면 임의로 날짜를 넣어주어야 하는데, 직접 넣어주는 방식보단 오늘 날짜를 넣어주고 싶어서 로직을 짜게 됐습니다. start의 경우, null 병합연산자를 통해 왼쪽 값이 null이나 undefined일 경우, 오른쪽의 2022-11-12 를 하드코딩하는 식으로 넣어주었습니다. 이 부분도 변경하고 싶지만 우선 end 의 경우를 오늘 날짜를 기준으로 year-mont..

사용하기 이전에 여러분이 사용하는 테일윈드의 버전과 변경사항 그리고 docs는 어디를 기준으로 작성되어있는 지 확인하시는 작업이 필요합니다. 제가 사용한 테일윈드 버전은 3 이며, next는 12.2.2 입니다. 예시로 만약 제가 next13을 사용한다면 , app 경로의 파일들을 인식할 수 있게 "./app/**/*.{js,ts,jsx,tsx}"를 추가로 넣어주어야 겠죠. //tailwind.config.js //(코드 중략) content: [ "./app/**/*.{js,ts,jsx,tsx}", "./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}", ], 하지만 전 next12버전을 쓰기 때문에 app 관련 경로를 넣어줄 필요가 없..

ES6에서는 클라이언트 사이드 자바스크립트(브라우저)에서도 동작하는 모듈 기능을 추가했습니다. 2019년 11월 기준으로 모던 브라우저 (크롬 61, 파이어폭스 60, 사파리 10.1 엣지 16이상)에서 ES6모듈을 사용할 수 있습니다. ES6 모듈 기능을 사용하지 않으면 분리된 자바스크립트 파일에 독자적인 스코프를 갖지 않고 하나의 전역을 공유하게 된다. 이렇게되면 원치않는 오류나 오버라이딩, 충돌 등이 날 것입니다. ES6 모듈은 파일 자체의 스코프를 제공합니다. 즉, 모듈은 독자적인 모듈 스코프를 가지게 되는 것입니다. ES6 모듈 상세 export import 문은 파일 단위의 영역을 기준으로 Top-level 영역에서만 사용할 수 있습니다. -> 파일 단위 최상단을 말하는 것이 아니라 depth..

😉 2022 11 02 기준, 최근 Next 13버전이 대규모 업데이트를 했습니다. 저는 공식 홈페이지의 튜토리얼을 참고하고 있기 때문에 create-next-app으로 자동 설치됐던 next 13버전을 12버전으로 다운그레이드하여 사용했습니다. yarn 을 통한 패키지 다운그레이드 방법 yarn upgrade 패키지명@버전 yarn upgrade next@12.2.2 // upgrade 대신 add도 된다. Next.js 는 React로 SSR이 가능하게 도와주는 프레임워크입니다. Next에서는 퓨어한 React에 비해 많은 기능을 내부에 포함(폴더기반 라우팅 기능, Express.js 코드 스플리팅, 이미지 최적화 등)하고 있습니다. 세팅하고 시작하는 방법에 대해서는 언급하지 않겠습니다. Next.j..

Selector 선택자 Pseudo Class 가상 선택자 Pseudo Element 가상 요소 Property 프로퍼티 Value 값 declaration 선언 keyword 키워드

Redux, zustand, Recoil은 클라이언트의 상태를 관리한다면 React Query는 서버의 상태를 관리합니다. 프론트에서 사용하는 데이터는 크게 두 가지로 분류할 수 있는데 정말 프론트에서만 쓰는 view를 위한 데이터가 있고, API에서 가지고 온 데이터(실제로는 서버에 존재하는 데이터) 이렇게 두 가지 상대값이 존재합니다. 리액트 쿼리는 이 두 가지 중 서버의 상태를 관리하기 위한 상태관리 라이브러리 입니다. React-query 는 서버 상태를 관리하기 위한 상태 관리 라이브러리입니다. 우리가 어떤 데이터를 서버에 요청하고 나서부터 요청을 받은 후까지 데이터를 받아오기 전까지 참조 못하게 하는 기능, 게시글 목록 중 한 데이터 수정 api를 호출했다면 게시글 목록 자체를 리패칭하기 등 ..

무한 스크롤(Infinite Scroll)이란? 사용자가 특정 페이지 하단에 도달했을 때, API가 호출되며 컨텐츠가 끊기지 않고 계속 로드되는 사용자 경험 방식을 말합니다. 페이지를 클릭하면 다음 페이지 주소로 이동하는 페이지네이션(Pagination)과 달리, 한 페이지에서 스크롤만으로 새로운 컨텐츠를 보여주게 되므로, 많은 양의 콘텐츠를 스크롤하여 볼 수 있는 장점이 있습니다. 무한 스크롤을 구현하려면 가장 간단한 방법으로 스크롤 이벤트를 이용하여 구현할 수 있습니다. 하지만, 스크롤 이벤트를 사용하면 API 호출이 여러 번 갑니다. 이렇게 되면 documentElement.scrollTop과 documentElement.offsetHeight는 리플로우가 발생하기 때문에 개선하지 않으면 성능상 좋..

Portal 이란? 리액트에서는 root element에 모든 컴포넌트를 올리고 지우고 반복하면서 컴포넌트를 만들었습니다. 포탈은 루트 외의 요소에 컴포넌트를 띄울 수 있게 해줍니다. 공식문서에 따르면 부모 컴포넌트의 DOM 계층 구조 바깥에 있는 DOM 노드로 자식을 렌더링하는 최고의 방법이라고 합니다. div id="root 인 요소와 div id="portal"인 요소는 형제 관계처럼 보이지만 실제로 portal은 root안에서 보여지는 자식 컴포넌트이고, 렌더링만 root의 바깥에서 이뤄지고 있는 것입니다.(리액트의 tree구조가 리렌더링을 발생시키므로 이럴 때, 부모-자식 관계를 유지하면서 독립적인 위치에서 렌더링을 하면 편리한 경우에 사용, 부모 컴포넌트의 제약에서 벗어나기 위함) *root ..