기타

HTML + CSS + Vanilla JS vs React vs NextJS 차이점

HTML + CSS + Vanilla JS:기능: 작은 프로젝트나 간단한 웹 페이지에 적합하며, 정적 사이트를 손쉽게 구성할 수 있음.한계: 단일 페이지 애플리케이션(SPA)을 구축하거나, 동적인 기능이 많은 대규모 프로젝트에 사용하기 어려움. 상태 관리, 데이터 바인딩, UI 업데이트가 수동으로 처리되어야 하므로 비효율적임.결과물: HTML + CSS + JS로 이루어진 정적 파일.장점: 가벼워서 가장 빠르게 동작함. 브라우저에서 모든 기능이 기본적으로 지원되기 때문에 추가적인 러닝 커브 없이 간단한 웹 페이지 구축 가능.단점: 큰 프로젝트 개발이 어렵고, 유지보수가 매우 힘듦. 모듈화된 컴포넌트나 상태 관리를 구현하기가 어려움.React:SPA (Single Page Application): Reac..

2024. 11. 28. 23:32
기타

Postman 토큰 자동 주입

프로젝트를 진행하다 보면 Postman을 사용해 API 테스트를 자주 하게 되는데요, 최근에 코드팩토리님의 NestJS 강의를 보다가 정말 유용한 기능을 발견했습니다. 바로 Postman을 이용해 JWT 토큰을 자동으로 관리하는 방법입니다.대부분 로그인 후 발급된 JWT 토큰을 API 요청에 사용하는 경우가 많습니다. 예를 들어 글을 작성하거나 수정, 삭제할 때마다 매번 로그인해서 받은 토큰을 헤더의 Authorization에 일일이 넣어야 했죠. 이렇게 작업하다가 토큰이 만료되면 다시 로그인해서 새로운 토큰을 복사하고, 다시 헤더에 붙여넣는 불편함을 반복했습니다.그런데, Postman에서는 이러한 과정을 자동으로 처리할 수 있다는 것을 이제야 알았습니다. 저처럼 매번 토큰을 수동으로 붙여넣기하며 테스트..

2024. 11. 17. 02:06
기타

Refresh Token & Access Token

두 토큰 모두 JWT 기반이다.Access Token은 API 요청을 할때 검증용 토큰으로 사용된다. 즉, 인증이 필요한 API를 사용할때는 꼭 Access Token을 Header에 넣어서 보내야한다.Refresh Token은 Access Token을 추가로 발급할때 사용된다. Access Token을 새로고침(Refresh)하는 기능이 있기 때문에 Refresh Token이라고 부른다.Access Token은 유효기간이 짧고 Refresh Token은 유효기간이 길다.자주 노출되는 Access Token은 유효기간을 짧게해서 Token이 탈취되도 해커가 오래 사용하지 못하도록 방지할 수 있다.상대적으로 노출이 적은 Refresh Token의 경우 Access Token을 새로 발급받을때만 사용되기 때..

2024. 11. 13. 00:05
기타

Session vs JWT Token 정리

Session이란유저의 정보를 데이터베이스에 저장하고 상태를 유지하는 도구Session의 특징Session은 특수한 ID값으로 구성되어있다.Session은 서버에서 생성되며 클라이언트에서 쿠키를 통해 저장된다.클라이언트에서 요청을 보낼때 Session ID를 같이 보내면 현재 요청을 보내는 사용자가 누구인지 서버에서 알 수 없다. (요청마다 매번 아이디와 비밀번호를 물어볼 필요 없음)Session ID는 데이터베이스에 저장되기 때문에 요청이 있을때마다 매번 데이터베이스를 확인해야한다.서버에서 데이터가 저장되기때문에 클라이언트에 사용자 정보가 노출될 위험이 없다.데이터베이스에 Session을 저장해야하기때문에 Horizontal Scaling이 어렵다.JWT Token 이란?유저의 정보를 Base64로 인..

2024. 11. 12. 23:33
기타

Data Model 정리

DAO, VO, DTO는 모두 비슷한 개념처럼 보일 수 있지만, 서버 애플리케이션 아키텍처에서 각각의 역할과 목적이 명확히 다릅니다. 스프링 부트를 포함한 다양한 백엔드 프레임워크에서 이 용어들은 데이터 관리와 로직 분리를 위해 자주 사용됩니다. 각 용어의 의미와 차이를 정리해 보겠습니다.1. DAO (Data Access Object)역할: 데이터베이스와 직접 상호작용하는 객체로, 데이터베이스 접근 로직을 캡슐화하여 데이터 조작(CRUD 작업)을 담당합니다.특징:주로 데이터베이스 연결, 쿼리 실행 등의 작업을 수행합니다.SQL 쿼리문이나 ORM을 통해 데이터베이스로부터 데이터를 읽어오거나 저장합니다.예시: public class UserDao { public User getUserById(i..

2024. 11. 4. 00:53
기타

RESTful API으로 개발하기

RESTful API의 주요 원칙을 프로젝트에 적용하기1. 클라이언트-서버 구조 (Client-Server Architecture)설명: 클라이언트(사용자 인터페이스)와 서버(데이터와 비즈니스 로직)는 독립적으로 작동합니다. 서버는 데이터를 관리하고 클라이언트는 사용자와 상호작용합니다.프로젝트에서의 적용:백엔드와 프론트엔드를 분리하여 각각 독립적으로 개발하세요.백엔드 서버는 데이터베이스와 비즈니스 로직을 처리하고, 프론트엔드는 **사용자 인터페이스(UI)**를 다루게 합니다.예를 들어, React를 프론트엔드로 사용하고, Node.js(Express)를 백엔드로 사용하여 두 부분을 명확히 구분할 수 있습니다.2. 무상태성 (Statelessness)설명: 각 API 요청은 완전한 정보를 담고 있어야 하며..

2024. 10. 29. 22:02