공부 기록일지📚

＊5의 3제곱 곱하기 4가 100이다 라고 오타가 있습니다. 5의 2제곱이 맞습니다. ( 5의 3제곱 -> 5의 2제곱 )

😉 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 키워드

용어 설명 ▶ 웹 브라우저란 동기적으로 HTML, CSS ,JS 언어를 해석하여 내용을 화면에 보여주는 응용 소프트웨어이다. ▶ 렌더링 엔진은 HTML, XML, 이미지 등 요청받은 내용을 브라우저에 화면에 표시하는 엔진입니다.( 브라우저마다 렌더링 엔진이 다름) ▶ 렌더 트리 - DOM요소를 기반으로 만들어지지만 완전 1:1대응 구조는 아닙니다. DOM 트리가 문서의 구조를 나타낸다면 렌더 트리는 "문서의 시각적 구조"를 나타냅니다. 웹 브라우저 동작원리 설명 사용자가 어떤 사이트에 접속할 때, 브라우저(클라이언트)는 사이트의 주소로 네트워크 요청을 보냅니다. 해당 요청은 DNS(domain name server)서버에 들려 도메인(사람이 이해하기 쉬운 영문 주소)과 매핑되는 IP주소로 HTTP 요청을..

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 ..

axios는 클라이언트와 서버가 서로 요청과 응답을 주고 받을 수 있게 도와주는 HTTP 클라이언트 패키지입니다. axios는 여러 기능을 제공하는데 (그래서 fetch보다 개인적으로 더 선호합니다.) 이 중 interceptor에 대해서 배워봅시다. axios interceptor 기능이란 "어떤 요청을 보낼 때 그리고 어떤 응답을 받아와서 처리할 때, 직전에 요청과 응답을 가로채주는 기능입니다. 클라이언트에서 서버에 요청을 보내기 직전 서버에서 응답을 받아와 클라이언트에서 사용하기 직전(.then. catch라는 후속처리 메서드를 실행하기 직전)에 가로챈다고 생각하면 됩니다. axios를 사용하기 전엔 당연히 npm or yarn(패키지 매니저) 로 설치해줘야 겠죠? * axios 써드 파티 라이브러..