서론 리액트를 사용하면서 무심코 넘어갔던 렌더링 방법에 대해 정리해보고자 한다. 일상적으로 '렌더링 한다' 라고 하면 HTML, CSS, JavaScript 를 가지고 화면을 그리는 과정을 의미한다. 하지만, 리액트에서의 렌더링은 화면을 그리는데 필요한 DOM Tr

서론 우리가 사이트로 이동하기 위해 브라우저에 URL 주소를 입력하게 되면 실제 페이지가 화면에 나타게 되는데, 이 과정에 대해 정리하려고 한다. URL 주소를 입력하게 되면 크게 아래와 같은 과정이 발생한다. 1. 웹 서버와 연결하기 > 2. 화면 정보 요청하기

프론트엔드에서 많이 사용하고 있는 아키텍처 중 하나인 FSD에 대해 정리해보려고 한다.FSD 는 Feature Sliced Design 의 약자로, 기능 분할 설계를 의미하며이론과 함께 FSD로 설계된 오픈소스를 통해 알아가보자FSD는 Layer(레이어), Slice(

유동적인 타입 설정이란, 상황에 따라 타입을 지정해 줄 수 있는 것을 말한다.이전에 정리했던 제네릭 도 그 방법 중 하나이며순서대로 사용법을 정리해보고자 한다.객체, 배열, 튜플 타입으로부터 특정 프로퍼티나 특정 요소의 타입만 추출하는 것이다.post 객체의 autho

타입 변수를 통해 매개변수의 타입과 반환값의 타입을 지정할 수 있는 함수를 말한다.하나 이상의 타입을 사용하려면 UNION 타입 이나 any 타입 을 사용했어야 했는데,타입 변수를 사용하면 함수가 호출되는 시점에 타입이 지정되므로 더 안전하게 사용할 수 있다.함수 이름

기존의 타입 별칭 처럼, 타입에 이름을 지어주는 또다른 문법이다.객체 구조를 정의하는데 특화된 문법이며 상속, 합침 등 특수한 기능을 제공 해준다.문법은 아래와 같다.인터페이스 간의 상속을 통해 중복된 프로퍼티를 정의하지 않도록 도와주는 문법이다.이처럼 Dog, Cat

함수에서 타입을 저의 할 때에는 매개변수 의 타입을 지정해주고 반환값 에 맞는 타입을 지정해주면 된다.( 전에 배운 타입추론 에 의해 함수의 반환값 타입은 생략이 가능하다. )함수에서 매개변수를 받을때 필수로 받지 않아도 되는 경우에 사용한다.undefined 값이 올

TypeScript 는 타입이 정의되어있지 않은 변수의 타입을 자동으로 추론해주는 기능이 있다.이러한 기능으로 모든 변수에 일일이 타입을 정의하지 않아도 돼서 간결한 코드를 만들 수 있다.어떠한 상황에서 타입 추론이 가능하며, 어떤 원리로 추론을 하는 지에 대해 알아보

타입간의 합집합 개념으로, 두개 이상의 타입을 | 기호로 연결해 사용한다.하지만 객체 타입의 경우 주의 해야할 점이 있다.위와 같이 3가지 경우에 대해서는 정상적으로 처리된다.하지만 아래의 경우 처럼 name 값만 정의 할 경우 에러가 발생한다.위에서 선언한 union

타입 호환성 이란, A, B 두개의 타입이 존재할 때 A타입의 값을 B 타입으로 취급해도 괜찮은지 판단하는 것을 의미한다.아래의 타입 계층도와 같이 타입스크립트가 제공하는 기본 타입들간에는 부모-자식 관계가 존재한다.자식 타입 값을 부모 타입 값으로 취급하는 업 캐스팅

TypeScript 는 기존의 JavaScript를 더 안전하게 사용할 수 있도록 Type 관련된 여러 기능들이 추가된 언어이다.Tpye 이 추가되면서 좀 더 엄격한 문법이 적용되지만 그만큼 안정적이고 버그 발생 가능성을 낮출 수 있다.대부분의 프로그래밍 언어로 작성된

클라이언트(웹 브라우저) 로 부터 HTTP 요청을 받아 HTML, 이미지 등과 같은 정적인 콘텐츠 를 응답해주는 역할을 한다. 주로 WAS와 함께 구성되기 때문에 정적인 컨텐츠 요청시 : WAS를 거치지 않고 정적 컨텐츠를 제공한다.동적인 컨텐츠 요청시 : 요청을 WA

SWC(Speedy Web Compiler)

Babel ⚡️ 바벨의 공식 홈페이지에 따르면 바벨은 자바스크립트 컴파일러이다. 라고 나와있다. 모든 브라우저가 최신 문법, 기술을 지원하지 않기 때문에 보여지는 모습이 환경에 따라 다르게 보여지는 크로스브라우징 이슈 가 발생한다. 바벨은 이러한 이슈를 해결하기

Webpack 웹 어플리케이션은, 역할에 따라 여러개의 다양한 모듈 로 구성되어있다. 이러한 모듈들을 웹 브라우저에서 사용 가능한 형태로 만들어주기 위해서는 모듈 번들러 가 필요하며, Webpack 은 프론트엔드에서 가장 많이 사용하는 모듈 번들러 이다. ✅ 즉,

라우팅 방식이 page router 에서 app Router 로 전환되면서렌더링 종류에 따라 구현하는 방법이 변경되어 정리해보고자 한다.렌더링 종류에는 크게 CSR | SSR | SSG | ISR 4가지 종류가 있다.page router 에서는 getServerSid

이전 카카오 로그인 포스팅과 같이 네이버 로그인도 어렵지 않게 구현할 수 있다.네이버 개발자 센터에서 앱 등록부터 시작해보자!먼저, 네이버 개발자 센터에 들어가 앱 등록을 해야한다.홈 페이지 > 네이버 로그인 > 오픈 API 이용 신청 > 약관동의 > 본인인증 까지 완

Next-Auth란? 에서 정리한 내용과 같이, Next-Auth 는소셜 로그인을 간편하게 구현할 수 있도록 다양한 Provider를 제공해준다.먼저, 가장 많이 사용되는 카카오 아이디 로그인 부터 적용해보고자 한다.카카오 서비스를 이용하기 위해서는 카카오 개발자 사이

NextAuth는 로그인, 로그아웃, 에러 등 간단한 인증 페이지를 제공해 준다.기본으로 제공하는 화면들을 커스텀 페이지로 대체할 수 있는데, pages:{} 를 사용하면 된다./app/(beforeLogin)/signin 경로에 파일을 만들어준다.참고Next-Auth

/app/api/user/\[id] 경로에 route.ts 파일을 만들어 준다.API 에서도 페이지와 같이 Dynamic Route 를 사용할 수 있다.여기서는 \[id] 값을 slug로 사용한다.findMany 는 조건과 일치하는 데이터들을 전부 가져오는 함수이다.p