Frontend

Overview 스코프란? 스코프의 종류 전역과 전역 스코프 지역과 지역 스코프 스코프 체인 스코프 체인에 의한 변수 검색 스코프 체인에 의한 함수 검색 함수 레벨 스코프 렉시컬 스코프 스코프란? 모든 식별자(변수 이름, 함수 이름, 클래스 이름 등)는 자신이 선언된 위치에 의해 다른 코드가 식별자 자신을 참조할 수 있는 유효 범위가 결정된다. 이를 스코프라 한다. 즉, 스코프는 식별자가 유효한 범위를 말한다. 만약 식별자가 각기 다른 스코프에 선언되었을 때 자바스크립트 엔진은 어떤 변수를 참조해야할 것인지 스코프를 통해 결정한다. 따라서스코프를 '식별자를 검색할 때 사용하는 규칙'이라고도 할 수 있다. 렉시컬 환경: 자바스크립트 엔진은 코드를 실행할 때 코드의 문맥context을 고려한다. 코드가 어디..

Caching Data Next.js는 개별요청에 관한 caching과 route segment단위의 caching을 지원한다. (공식문서에서는 개별요청단위로 caching을 다루기를 추천한다.) Per-request Chching fetch() 기본적으로 fetch()의 request는 응답데이터가 cache되며, 중복제거가 된다. 즉, fetch로 두번이상의 같은 요청을 할때 두번째이상의 요청에 대한 응답데이터는 첫번째 요청의 응답데이터를 재사용한 데이터이다. async function getComments() { const res = await fetch('https://...') //이 요청의 응답데이터틑 자동 caching된다. return res.json() } // 이 함수는 두번 호출되었지..

Data Fetching Next.js의 App router에서는 async와 await개념을 통해 promise기반의 데이터통신을이전 Next.js버전(Pages router)과 달리 페이지단위가 아니라 컴포넌트단위로 데이터를 fetch할 수 있다. Next.js의 Data fetching은 웹 API인 fetch API와 React의 Sever components에 기반한다. fetch API를 사용할 경우 자동적으로 중복된 요청이 제거된다. Next.js fetch API는 fetch 옵션객체에 caching옵션과 revalidating옵션을 설정할 수 있게 했다. async and await in Server Components async와 await를 통해 Server Components안에서 ..

Data Fetching - 개요 서버컴포넌트를 사용하며 서버에서 데이터받아오기 병렬적 fetch data를 통해 waterfalls를 예방, 로딩타임 줄이기 레이아웃 및 페이지단위에서 중복된 요청 제거하기 로딩UI, 스트리밍 및 서스펜스를 이용해서 점진적으로 렌더링하기 The fetch() API - Next.js의 fetch와 native fetch와의 차이점 Next.js에서 쓰이는 fetch API는 브라우저에서 제공하는 그 fetch API가 맞다. 하지만 Next.js에서 쓰일때 조금 더 확장된 기능을 사용가능하다. React는 중복된 요청을 제거하기 위해 fetch를 확장적용했다. Next.js는 각 요청이 자체적으로 caching 및 revalidating 규칙을 적용할 수 있도록 옵션객체..

fetch() 메소드는 자바스크립트에서 제공되는 내장함수로 웹 브라우저의 'window'객체에 정의되어있다. 즉, Next.js에서 제공하는 메서드는 아니다. 평소 편리성에 의해 Axios만 사용하다보니 fetch API를 사용할 기회가 많이 없었지만 Next.js 13버전에서 데이터를 받을때 캐시 혹은 revalidate옵션을 fetch API와 함께 이용하므로 이참에 공식문서를 이해하기위해 예습삼아 MDN문서를 읽고 정리하는 글이다. HTTP HyperText Transfer Protocol (HTTP)를 사용하여 웹 서버에게 특정한 동작을 수행하도록 요청하는 메시지입니다. HTTP 요청은 클라이언트(예: 웹 브라우저)가 서버에게 정보를 요청하거나, 서버에 데이터를 전송하거나, 서버의 동작을 수행하도..

Static and Dynamic Next.js에서의 렌더링방식은 정적으로 렌더링되거나, 동적으로 렌더링되는 방식으로 분화된다. static route 에서의 컴포넌트들은 빌트타임때 렌더링되며, 서버통신의 결과물은 재사용을 위해 캐시된다. dynamic route 에서의 컴포넌트들은 클라이언트의 요청에 따라 그때그때 서버에서 렌더링된다. Static Rendering 기본적으로 Next.js는 퍼포먼스를 위해 경로들을 정적으로 렌더링한다. 즉, 렌더링의 작업물은 클라이언트가 요청하기전에 이미 준비되어있고, 요청에 의해 즉각 제공되는 방식을 사용하는 것이다. 이 방식은 *CDN을 이용해 이루어진다. *CDN: 물리적으로 먼 거리일수록 통신속도가 늦어지므로 교차지점에서 자주 이용되는 서버결과물을 캐시해뒀다가..

overview OAuth 용어정리 OAuth의 인증 프로세스 Refresh Token OAuth 용어정리 Client: 서비스제공자 Resource Owner: 유저 Rsource Server: 유저가 보유한 계정의 사이트측 서버 (i.e Face book, Kakao, Google...etc) Authorization Server: 인증처리를 전담하는 서버 - (Rsource Server와 같은 경우도, 별개로 존재하는 경우도 있다.) Access token: 직접적인 id, pw의 문자열이 아닌 암호화된 비밀번호. 계정의 모든 권한이 아닌 일부기능. Client가 OAuth에게 access token을 발급받아 Rsource Server에 접근하여 Resource Owner가 실행하고자 하는 정보 ..