본문 바로가기
반응형

Frontend
120

[Node.js] OAuth2.0 - Kakao 실습 시작하기❯ npm init -y❯ npm i express cors axios OAuth 실습 카카오 로그인 네이버 로그인 로그인 정보 유저이름: 로그아웃 카카오로그인을 위한 앱 생성/설정(카카오 developers)https://developers.kakao.com/ 카카오로그인 활성화 설정을하고redirect uri는 사용할 로컬 주소 넣어줌이 redirect uri를 잘 설정하고 기억해둬야함http://localhost:5500로 설정했는데 http://localhost:5500/로 가도 400에러가남 동의항목은 닉네임, 프로필사진을 필수로 설정해둔다.앱키-REST API 키를 복사해 사용할 javasc.. 2025. 5. 16.
[Node.js] Session 3. 웹 인증 및 보안 기초세션(Session)이란?사용자의 로그인 상태 정보를 서버가 메모리나 저장소에 유지하는 방식세션 ID는 브라우저의 쿠키로 저장되어 클라이언트-서버 간 상태를 유지함무상태성(Stateless)인 HTTP 프로토콜의 단점을 보완세션기반 인증: 서버에 저장해서 관리하는 방식세션 기반 인증 흐름로그인클라이언트 → 서버 : 로그인 요청클라이언트가 ID/PW를 POST 요청으로 보냄서버 → 세션 저장소 : 유저 정보 저장 및 세션 ID 생성서버는 사용자를 검증한 후, 세션 저장소에 사용자 정보 저장하고, 고유한 session_id 생성서버 → 클라이언트 : 세션 ID 전달서버는 이 session_id를 Set-Cookie 헤더를 통해 브라우저에 전달브라우저는 이 쿠키(암호화)를 저장하고,.. 2025. 5. 15.
[Node.js] Cookie 3. 웹 인증 및 보안 기초1. 쿠키란?쿠키(Cookie)는 웹 브라우저에 저장되는 작은 데이터 조각으로, 사용자의 상태를 기억하기 위해 서버가 클라이언트에게 저장하게 하는 정보다. 쿠키는 "무상태성(statelessness)"을 보완하기 위해 사용된다.무상태성(Stateless)이란?HTTP 프로토콜은 기본적으로 이전 요청과 다음 요청 사이의 상태를 유지하지 않음.예를 들어 로그인한 사용자를 기억할 수 없음.이 때문에, 로그인 유지 / 장바구니 / 언어 설정 등을 기억하기 위해"쿠키"를 활용하여 상태(state)를 유지한다.2. 쿠키의 역할그래서 클라이언트측에서 모든정보를 담아 한꺼번에 요청한다.클라이언트측에서 모든정보를 가지고있기가 부담이되. 역할설명 사용자 인증로그인 시 쿠키에 세션 ID 또는 토큰.. 2025. 5. 14.
[Node.js] Node.js와 Fetch API로 만드는 간단한 Todo List (CRUD) Node.js와 Fetch API로 만드는 간단한 Todo List (CRUD 기능 포함)Node.js의 내장 http 모듈을 사용해 간단한 서버를 만들고, HTML + JavaScript로 구성된 클라이언트에서 fetch()를 이용해 CRUD 기능이 가능한 Todo List를 구현해보자.구성서버: Node.js의 http 모듈로 REST API 구성클라이언트: HTML + JS로 요청을 보내고 DOM 조작기능:Create (추가)Read (조회)Update (수정)Delete (삭제)Node.js 웹서버 만들어보기// 내장된 http 모듈을 가져온다.const http = require('http'); // 서버를 생성한다. req는 요청, res는 응답을 나타낸다.const server = http... 2025. 5. 13.
[React] Context API Context API란?1. Context API란?Context API는 리액트에서 컴포넌트 트리 전체에 데이터를 전달할 수 있도록 해주는 기능이다. 주로 부모 컴포넌트에서 하위 컴포넌트로 데이터를 전달하는 props의 대안으로 사용된다. Context API를 사용하면 중간에 있는 컴포넌트들을 거치지 않고도 상위에서 하위로 데이터를 전달할 수 있어, 깊은 컴포넌트 트리 구조에서 유용하다. Context API의 주요 구성 요소Context: 데이터를 공유하는 공간을 생성한다.Provider: Context의 데이터를 제공하는 컴포넌트로, 하위 컴포넌트들이 Context에 접근할 수 있게 만든다.Consumer: Context에 제공된 데이터를 사용하는 컴포넌트이다. (React 16.8부터는 useC.. 2025. 4. 21.
[React] 전역 상태관리1(Prop Drilling, 전역상태 관리의 필요성) 전역 상태관리의 장점1. Props Drilling이란?Props Drilling은 React 컴포넌트에서 하위 컴포넌트로 계속해서 props를 전달하는 과정에서 발생하는 문제다. 부모 컴포넌트에서 자식 컴포넌트로 props를 하나씩 전달하게 되면, 중간에 있는 컴포넌트들까지 해당 props를 계속 전달해야 하는 번거로운 상황이 발생할 수 있다. 이 방식이 계속 이어지면, 컴포넌트 계층이 깊어질수록 코드가 복잡하고 유지보수가 어려워진다.위 그림처럼 Child17과 Child19가 같은 상태를 사용하려면, Child1에서 상태를 만들고 내려줘야되고, Child6과 Child22에서 같은 상태를 사용하려면 최상위 App컴포넌트에서 상태를 만들어 내려줘야한다. 중간에 있는 컴포넌트들은 필요없는 상태가 오직 내.. 2025. 4. 18.
[React] TailwindCSS 소개와 리액트 vite 프로젝트에서 TailwindCSS v4 사용하기 Tailwind CSS 설치 & 사용 방법1. Tailwind CSS란?Tailwind CSS는 유틸리티 퍼스트(Utility-first) 접근 방식을 따르는 CSS 프레임워크이다. 이는 전통적인 CSS 프레임워크와 달리, 미리 정의된 클래스를 사용하여 스타일을 적용하는 방식으로, 별도의 컴포넌트나 디자인을 정의하지 않고 바로 필요한 스타일을 HTML 요소에 추가하는 방식이다.Tailwind CSS는 CSS 클래스를 통해 스타일을 직접 적용하므로, 재사용성이 높고 구조적이지 않지만 직관적인 스타일링을 제공한다. 이 접근 방식은 효율적이고 빠르게 UI를 구성할 수 있도록 돕는다. 2. Utility-First란?Utility-First는 Tailwind CSS의 핵심 개념으로, 스타일을 미리 정의된 유틸리.. 2025. 4. 17.
[React] 클래스, 함수형 컴포넌트 생명주기(Lifecycle)와 생명주기 함수(Hook) 컴포넌트의 생명주기는 React 애플리케이션에서 컴포넌트가 생성되고 업데이트되며 사라지는 과정을 의미한다. 먼저, 컴포넌트의 생명주기는 크게 3단계로 나뉜다.Mount(화면에 그려짐): 컴포넌트가 생성될 때.Update(화면 업데이트): 컴포넌트의 props가 변경되거나 setState()함수 호출에 의해 state가 변경되거나, forceUpdate()라는 강제 업데이트 함수 호출로 인해 컴포넌트가 다시 렌더링 될 때.Unmount(화면에서 사라짐): 상위컴포넌트에서 현재 컴포넌트를 더 이상 화면에 표시하지 않게 될 때.  생명주기 함수는 이 일련의 과정 속에서 특정 시점에 자동으로 호출되는 함수를 말한다. 생명주기 함수들을 사용하면 컴포넌트가 렌더링되기 전이나 후, 상태나 props가 변경될 때, 컴.. 2025. 4. 10.
반응형

최근댓글

최근글

© Copyright 2024 ttutta

티스토리툴바