카카오 로그인 프로젝트에서 사용자가 별도의 회원가입 없이 간편하게 로그인할 수 있도록 하기 위해 카카오 로그인을 사용하기로 하였다. 구현을 해본 경험이 없고 개발 기간도 10일 밖에 되지 않았기 때문에 걱정이 많았지만 레퍼런스가 많아 어렵지 않게 적용시킬 수 있었다. 카카오 로그인 구현 방법에는 REST API와 Javascript SDK...

Vercel Vercel 은 Next.js 에서 제공하는 배포플랫폼으로 [빌드 + 배포 + 호스팅] 서비스를 제공한다. Next.js 공식문서에서는 Vercel를 통한 Front Project 배포를 권장하고 있으며, github의 레파지토리를 통해 쉽게 배포 할 수 있다. 진행하는 프로젝트도 Next 기반이기에 vercel로 간편하게 배...

에러 상황 에러 설명을 읽어보니 서버와 클라이언트의 클래스명이 다르다고 나왔다. 검색을 해보니 Next.js에서 styled-components를 사용하면 위와 같은 경고가 뜨곤 한다고 했다. 원인 그렇다면 next에서 스타일 적용 시, 왜 이런 에러가 발생할까? Next.js는 첫 페이지 로드가 SSR로 동작하기...

리다이렉션(Redirection)이란? 3xx 번대의 상태 코드들은 리다이렉션을 의미하며, 이는 요청을 완료하려면 추가적인 작업(페이지 이동)이 필요함을 의미한다. 클라이언트가 관심 있어 하는 리소스에 대해 다른 위치를 사용하라고 말해주거나 그 리소스의 내용 대신 다른 대안 응답을 제공한다. 웹 브라우저는 3XX응답의 결과에 Locatio...

캐시란? 캐시(cache)는 컴퓨터 과학에서 데이터나 값을 미리 복사해 놓는 임시 장소를 가리킨다. 같은 데이터에 반복적으로 엑세스하는 경우나 잘 변하지 않는 데이터의 경우 캐시를 사용하면 더 빠른 속도로 데이터에 접근할 수 있다. 그래서 데이터의 재사용 횟수가 한 번 이상이어야 캐시는 의미가 있다. 여러가지 캐시의 종류 ...

HTTP 헤더 HTTP 헤더는 클라이언트와 서버가 요청 또는 응답으로 부가적인 정보를 전송할 수 있도록 한다. HTTP 메시지는 보통 Header + Body로 이루어지고 헤더는 Request, Response로 나뉘어진다. 헤더는 크게 4가지로 분류되는데 이 항목에 대해서 알아보자 표현 헤더(Representation...

Stateful (상태유지) 상태 유지라 함은 클라이언트와 서버 관계에서 서버가 클라이언트의 상태를 보존함을 의미한다. 클라이언트와 서버 간에 송수신을 하며 단계별 과정을 진행하는데 있어, 서버에서 클라이언트가 이전 단계에서 제공한 값을 저장하고 다음 단계에서도 저장한 상태이다. 대표적으로 홈페이지에서 한번 로그인을 하면 페이지를 이동해도...

HTTP Method 종류 HTTP 메서드란 클라이언트와 서버 사이에 이루어지는 요청(Request)과 응답(Response) 데이터를 전송하는 방식을 일컫는다. 쉽게 말하면 서버에 주어진 리소스에 수행하길 원하는 행동, 서버가 수행해야 할 동작을 지정하는 요청을 보내는 방법이다. HTTP 메소드의 종류는 총 9가지가 있다. 이 중 주...

HTTP(HyperText Transfer Protocol) 란? HTTP는 서버와 클라이언트가 서로 데이터를 주고받기 위해 사용되는 통신 규약을 말일컷는다. 웹문서간에 링크를 통해 연결할 수 있는 프로토콜이며, 문서뿐 아니라 다음과 같은 여러 종류의 데이터들을 폭 넓게 전송할 수 가 있다. ​HTML, TEXT ...

URL의 웹 브라우저 요청 흐름 https://google.com/search?q=hello&hl=ko 어떻게 웹 브라우저가 요청해서 진행되는지 흐름을 파악해보자. DNS 서버를 조회해서 IP와 포트 정보를 받는다 정보를 토대로 HTTP 요청 메시지를 생성한다. ...