728x90
반응형
구글 소셜 로그인 구현하기
구글 소셜 로그인 구현하기
Next.js
2024.02.06 21:10
현재 나는 Next.js 14를 사용한 플레이리스트 프로젝트를 진행 중이다. 여기서 Google과 Kakao 소셜 로그인을 구현하기로 결정을 했고, 이와 관련된 여러 문서들을 찾아보았다. 구글 로그인 API의 흐름은 이러하다. 구글 로그인 창을 클라이언트에게 보여준다. => client는 로그인을 시도한다. => 동의 항목을 체크하여 네이버 API 서버에 넘긴다. => 전달 받은 정보를 가지고 구글 API 서버는 인가 코드를 발급해준다. => 인가 코드를 통해 로그인을 유지할 수 있는 토큰을 발급해준다. 나는 여기서 구글 access token이 아닌 구글 id token을 발급 받아 그거로 회원가입을 진행할 예정이다. 소셜 로그인의 경우, 각 플랫폼으로 부터 발급받은 id token을 프로젝트의 acc..
React 4. 리액트 프로젝트 만들기 - 리액트 프로젝트 생성 / 빌드(배포) 모드
Concept
2024.06.25 00:51
2. React 프로젝트 만들기 드디어 React 프로젝트를 하나 생성했다.기존의 rcp - ch01 폴더 내에 ch01_5라는 프로젝트명으로 프로젝트를 생성했다.앞서 설명했듯이 npm보다 npx가 낫다고 판단을 하여 npx를 사용하여 프로젝트를 생성했다. npx create-react-app ch01_5 --template typescript React 프로젝트는 기본적으로 Node.js 프로젝트이다.모든 Node.js 프로젝트는 '루트 디렉토리(ch01_5)'에 항상 package.json 파일이 있다. 이제 프로젝트를 실행해야 하는데, 실행시키기 위해서는 터미널에 명령어를 입력해야 한다.package.json 폴더 내에 "script" 항목에서 이와 관련된 명령어들을 확인할 수 있다. npm run..
Next.js 14) 클라이언트 컴포넌트 아래의 서버 컴포넌트? (오늘의 삽질
Next.js 14) 클라이언트 컴포넌트 아래의 서버 컴포넌트? (오늘의 삽질
Next.js
2024.02.24 08:32
서버 컴포넌트는 서버에서 렌더링되고 클라이언트로 전달되며, 클라이언트에서는 JavaScript가 실행되지 않습니다. 반면 클라이언트 컴포넌트는 클라이언트에서 렌더링되고 JavaScript가 실행됩니다. 서버 컴포넌트 내부에 클라이언트 컴포넌트가 있는 것은 허락이 되나, 클라이언트 컴포넌트 내부에 서버 컴포넌트를 둘 수는 없습니다. (사실상 클라이언트 컴포넌트 내부에 서버 컴포넌트랍시고 "use client"를 선언하지 않고 컴포넌트를 내부에 둬도 결국 클라이언트 컴포넌트로 동작하게 되는 것 같았습니다. 그래서 제가 서버 컴포넌트라고 생각한 곳에서 async, await를 사용하여 데이터 패칭을 진행하려고 했으나, 클라이언트 컴포넌트 내부에서는 async, await를 사용할 수 없다는 에러가 떴습니다.)..
Next.js 14) 대충 내가 헷갈려서 적어본 url 받는 방법.
Next.js 14) 대충 내가 헷갈려서 적어본 url 받는 방법.
Next.js
2024.02.24 09:57
일단 "http://localhost:3000/album/272a8c26-96f7-489b-86b4-537189bfc654" 라는 주소가 있다고 가정을 해보겠다. 사실 내가 지금 프로젝트에서 생성해둔 주소이다. 클라이언트 컴포넌트에서 url 받는 방법 : 1. 동적(id)으로 생성된 세그먼트 값 얻기. 보다시피 /272a8c26-96f7-489b-86b4-537189bfc654 이 부분은 [id]라는 동적 세그먼트를 통하여 생성된 것이다. 이 값을 얻기 위해서는 useParams()를 사용하면 된다. useParams() : 현재 URL로 채워진 경로의 동적 매개변수를 읽을 수 있게 해주는 클라이언트 구성 요소 후크. const params = useParams(); console.log(params);..
HTTP Request, Response 구조
HTTP Request, Response 구조
Node.js
2024.08.29 13:14
- HTTP Request 구조 HTTP 요청을 의미.  1. Starter linehttp method 종류, request target(url), http version 정보를 담고 있다. 2. HeadersKey : Value 값으로 해당 request에 대한 추가 정보를 담고 있다. 3. Body해당 request가 전송하는 데이터가 담겨 있는 부분. 전송하려는 데이터가 없다면 비어 있게 된다.   - HTTP Responese 구조 HTTP 응답을 의미.  1. status lineHTTP version, Status Code, Status Text를 나타낸다. 2. headersRequest의 headers와 동일하다.하지만 Response Headers에서만 쓰이는 값도 있다. 3. body..
Concept2025.02.17 20:37slice()와 splice()의 차이점

slice(), splice() 메서드는 상당히 비슷한 쓰임새를 가지고 있다.하지만, 둘은 차이점이 분명 존재한다.  splice새로운 배열을 반환하는 동시에 원래 배열을 수정한다. 제거된 요소를 포함할 수 있고, 새로 삽입된 요소들 또한 포함할 수 있다.array.splice(start, deleteCount, item1, item2, ...)=> 1. start(필수):변경을 시작할 index 번호.이 index부터 요소가 제거되거나 새로운 요소가 삽입되게 된다.음수 값을 사용하면 배열의 끝에서부터 역방향으로 계산하게 된다. => 2. deleteCount(옵션):제거할 요소의 갯수.생략하면 start index부터 배열의 끝까지 모든 요소가 제거되게 된다. => item1, item2, ...(옵션..

Coding Test2025.02.14 06:43배열 비교하기

- 문제이 문제에서 두 정수 배열의 대소관계를 다음과 같이 정의합니다.두 배열의 길이가 다르다면, 배열의 길이가 긴 쪽이 더 큽니다.배열의 길이가 같다면 각 배열에 있는 모든 원소의 합을 비교하여 다르다면 더 큰 쪽이 크고, 같다면 같습니다.두 정수 배열 arr1과 arr2가 주어질 때,위에서 정의한 배열의 대소관계에 대하여 arr2가 크다면 -1, arr1이 크다면 1, 두 배열이 같다면 0을return 하는 solution 함수를 작성해 주세요. - 입출력 예 arr1 arr2 result [49, 13] [70, 11, 2] -1 [100, 17, 84, 1] [55, 12, 65, 36] 1 [1, 2, 3, 4, 5] [3, 3, 3, 3, 3] 0 - 해결 방법 이 문제는 비교적 쉬웠..

Coding Test2025.02.14 04:56배열의 길이에 따라 다른 연산하기

- 문제 정수 배열 arr과 정수 n이 매개변수로 주어집니다. arr의 길이가 홀수라면 arr의 모든 짝수 인덱스 위치에 n을 더한 배열을,arr의 길이가 짝수라면 arr의 모든 홀수 인덱스 위치에 n을 더한 배열을return 하는 solution 함수를 작성해 주세요.  - 입출력 예arrnresult [49, 12, 100, 276, 33] 27 [76, 12, 127, 276, 60] [444, 555, 666, 777] 100 [444, 655, 666, 877]  - 해결 방법 처음에는 조건에 맞게 if문과 for문을 나열했는데,그럴 경우 코드가 길어질 뿐더러 중복되는 코드가 많아진다는 문제점이 생겼다.게다가 처음에는 새로운 빈 배열을 만들어 값을 담아주는 형태로 갔기 때문에 더 코드가 길어졌..

Express.js2024.12.17 18:09req.params

.

Express.js
Express.js2024.12.16 22:28Express.js

- Express.js란?express는 웹 및 모바일 애플리케이션 구축을 위한 광범위한 기능을 제공하는node.js 웹 애플리케이션의 프레임워크다.다중 페이지 및 하이브리드 웹 애플리케이션을 빌드하는데 사용된다. server와 경로를 관리하는 데 도움이 되는 Node.js 상단에 구축된 레이어 이다. =>한 마디로,Node.js의 API를 단순화하고 유용한 기능들은 더 추가시켜Node.js를 더 편리하고 유용하게 사용할 수 있게 해주는 프레임워크라는 얘기다. - Express.js를 사용하는 이유는?1. Node.js의 API를 쉽게 사용할 수 있게 해준다.express를 사용하는 방법 역시 쉽게 배울 수 있다. 2. 굉장히 많은 사람들이 사용하고 있다.전체 웹 프레임워크 중에서 세 번째로 사람들이 많..

Node.js2024.12.15 03:13Node.js로 웹 서버 만들기

이전에 포스팅을 했었기 때문에 이 부분은 건너뛰도록 하겠다. 1. 웹 서버란? 1. 웹 서버란?브라우저를 통해서 naver에 들어가게 되면DNS Server는 naver url이 연결되어 있는 IP address를 저장해뒀다가 알려준다. 만약 DNS Server가 없다면 사용자가 naver에 접속하기 위한 IP address를 외우고 있어야dnjfht.tistory.com 2. HTTP Requests HTTP Requests- HTTP란? (Hypertext Transfer Protocol) HTTP는 HTML 문서와 같은 리소스들을 가져올 수 있도록 해주는 프로토콜(약속)이다.HTTP는 웹에서 이루어지는 모든 데이터 교환의 기초이며, 클라이언트 · 서버 프로dnjfht.tistory.com 3. St..

Node.js package 관리
Node.js2024.12.15 00:50Node.js package 관리

1. npm이란?npm은 node package manager를 의미한다.npm은 이렇게 두 가지 역할로 나뉘어져 있다. npm은 오픈 소스 Node.js 프로젝트 게시를 위한 오프라인 리포지토리(저장소)이다.이 말을 풀어서 설명하면 이러하다. 애플리케이션에 어떠한 package가 필요할 경우,npm install package-name을 통하여 package를 설치할 수 있다.그때, 이 package(npm 레지스트리 모듈들)를 가져오는 곳, 즉 저장되어 있는 곳을 npm이라고 한다. 그리고 또한,npm install, npm run start 등... npm을 사용해서 원하는 작업을 처리를 해준다.package 설치, 버전 관리 및 종속성 관리를 지원하는 해당 저장소와 상호작용하기 위한 명령줄 유틸리..

Index.js 파일
Node.js2024.12.15 00:26Index.js 파일

- Index.js 파일Node.js를 만든 개발자는 index.js 파일을 만든 것을 후회한다고 하였다.이 index.js 파일이 module의 로딩 시스템을 굉장히 복잡하게 만든다는 얘기다.지금까지 했던 프로젝트의 리팩토링을 통하여 어떻게 module 시스템을 복잡하게 만드는지 살펴보겠다.  lib 폴더를 하나 생성하고, 내부에 index.js 파일과 request.js, response.js 파일을 넣어준다.만약, 기능별로 나눠둔 module 파일이 많아진다면 그때 index.js 파일을 사용할 수 있다. 폴더 안에 각 module을 담은 파일이 너무 많을 경우, index.js에서 처리한다.방법은 여러 가지가 있다.1.// index.jsmodule.exports = {  request : req..

728x90
반응형
image