Gani의 개발 기록

솔직히 이게 제일 헷갈렸다. req가 뭔지 res가 뭔지는 알겠는데 실제로 코드에서 어디서 어떻게 쓰이는지가 계속 안 잡혔다.req, resreq (request) : 클라이언트가 서버한테 보내는 요청. 뭘 해달라는 거. URL, HTTP 메서드, 헤더, 바디 다 여기 담겨 있다.res (response) : 서버가 클라이언트한테 돌려주는 응답. 처리 결과를 돌려주는 거. 상태코드, 헤더, 바디가 여기 담긴다.클라이언트 --[req]--> 서버클라이언트 프론트(Vue + axios)에서 req 보내기axios로 요청을 보내는 게 req를 만드는 거다.// GET 요청const res = await axios.get('/api/vehicles')// POST 요청const res = await axios...

오늘 IoC랑 DI 개념 정리했다.사실 그동안 그냥 @Service 붙이면 되는 거 아닌가 하고 넘겼는데 제대로 짚고 가야 할 것 같아서 정리한다.IoC (Inversion of Control) - 제어의 역전직역하면 제어의 역전인데 처음엔 이게 무슨 말인지 몰랐다.원래는 이렇게 쓴다.public class UserService { private UserRepository userRepository = new UserRepository();}내가 직접 new로 객체를 만드는 거다. 근데 Spring 쓰면 이걸 내가 안 해도 된다.@Servicepublic class UserService { private final UserRepository userRepository; public Use..

JWT 인증 방식이란?기존 세션 방식은 서버에 로그인 정보를 저장하는 반면, JWT는 토큰에 사용자 정보를 담아서 클라이언트가 들고 다니는 방식이다.서버는 stateless하게 유지되고, 매 요청마다 토큰만 검증하면 되니까 확장성이 좋다.전체 흐름1. 로그인 요청 (username, password) ↓2. 인증 성공 시 JWT 토큰 발급 ↓3. 클라이언트는 이후 요청마다 토큰을 헤더에 담아 전송 Authorization: Bearer {token} ↓4. 서버는 필터에서 토큰 검증 후 인증 처리 ↓5. 컨트롤러 접근주요 구성 요소1. JwtTokenProviderJWT 토큰 생성, 검증, 정보 추출 담당비밀키로 서명해서 위변조 방지주요 메서드:createToken(): 사용자 정보 →..

프론트엔드를 공부하다 보면 GET, POST, PUT, DELETE 같은 단어를 계속 보게 된다.처음에는 그냥 요청 방식 이름 정도로만 알았는데, 정리해보니 REST API는 프론트와 백엔드가 서로 대화하는 방식에 대한 규칙이라는 느낌에 더 가까웠다.REST API란?REST API는 프론트엔드와 백엔드가 데이터를 주고받기 위한 통신 규칙이다.프론트는 화면을 만들고 버튼을 누르면 요청을 보내고, 백엔드는 데이터를 가져오거나 수정해서 응답을 준다. 이 둘이 직접 데이터베이스와 연결되는 게 아니라 항상 서버를 거쳐서 통신하게 된다.구조를 단순하게 보면 이렇게 된다.프론트 → 백엔드 서버 → 데이터베이스프론트는 DB에 직접 접근하지 않고 백엔드에게 "이 데이터 줘", "이거 저장해" 같은 요청만 보낸다.프론트..

객체지향을 처음 배울 때는그냥 클래스 만들고 new 쓰는 문법 정도로만 생각했다.그런데 정리하다 보니 객체지향은 단순 문법이 아니라 코드를 어떻게 나눌 것인가에 대한 설계 방식이라는 게 더 중요하다는 걸 알게 됐다.객체지향이란?객체지향(Object Oriented Programming, OOP)은 프로그램을 기능 단위가 아니라 객체(Object) 단위로 나누어 설계하는 방식이다.객체는 단순한 데이터가 아니라 상태(데이터)와 행동(기능)을 함께 가지고 있는 하나의 단위라고 이해했다.예를 들어 자동차를 생각해 보면색상, 속도 → 데이터(필드)달린다, 멈춘다 → 기능(메서드)이렇게 현실 세계의 개념을 코드로 표현하는 방식이 객체지향의 기본 구조이다.클래스(Class)와 객체(Object)처음에 가장 헷갈렸던 ..

데이터베이스를 공부하다 보면 정규화, 정규형이라는 개념이 계속 나온다.처음에는 그냥 테이블을 나누는 거라고 생각했는데, 정리해보니 데이터 중복을 줄이고 이상현상을 막기 위한 설계 과정이라는 게 핵심이었다.정규화와 정규형이란?정규화(Normalization)는 데이터베이스를 설계할 때중복 데이터를 줄이고, 삽입·수정·삭제 시 발생하는 이상현상(아노말리)을 막기 위해 테이블을 분해하는 과정이다.단순히 테이블을 쪼개는 게 목적이 아니라, 데이터 사이의 관계를 명확하게 정리하는 것이 더 중요하다.예를 들어 고객 정보와 주문 정보를 한 테이블에 같이 넣으면, 고객 이름이나 전화번호가 주문할 때마다 계속 반복 저장된다.CREATE TABLE order_info ( order_id INT, customer..

최근에 데이터베이스를 배우면서 알게 된 개념들을 정리해 두고 싶다는 생각이 들었다.단순히 용어 외우기 수준이 아니라, 이게 왜 필요한지, 실제로 어떤 역할을 하는지 이해하고 넘어가는 게 중요할 것 같았기 때문이다.데이터베이스란 결국 데이터를 제대로 관리하기 위한 시스템데이터베이스를 한 줄로 표현하면,많은 데이터를 안전하게 저장하고, 필요할 때 빠르게 꺼내 쓰고, 믿을 수 있게 관리하기 위한 시스템이라고 생각하면 이해가 쉬웠다.단순히 파일에 저장하는 것이 아니라, 제대로 정리하고 구조화해서 관리하는 방식이기 때문에 현실 세계의 거의 모든 서비스가 데이터베이스 위에서 돌아간다고 해도 과장이 아닌 것 같다.회원 정보, 주문 기록, 결제 내역, 게시글 데이터 등 이런 모든 것들이 결국 데이터베이스에 저장된다.관..

Vue.js에서 컴포넌트를 사용하다 보면, 같은 컴포넌트를 상황에 따라 다르게 보여줘야 하는 경우가 많다. 예를 들어 글자 색만 다르게 보여주고 싶다거나, 같은 디자인의 카드인데 내용만 다르게 쓰고 싶을 때가 있다. 이럴 때 사용하는 것이 바로 Props이다.Props란 무엇인가?Props는 부모 컴포넌트가 자식 컴포넌트로 값을 전달하는 방법이다.한 문장으로 정리하면 이렇게 생각하면 된다.“Props = 부모가 주고, 자식이 받는 값”데이터 흐름은 항상 부모에서 자식 방향으로만 흐르는 단방향 구조이며, 자식 컴포넌트는 받은 값을 읽어서 사용만 할 수 있다.그래서 Props는 “읽기 전용”이라고 표현한다.Props가 필요한 이유컴포넌트를 사용하는 이유는 재사용성 때문이다.하지만 완전히 같은 UI만 계속 반..

오늘은 자바스크립트에서 정말 많이 쓰이고, 또 헷갈리기 쉬운 개념인 비동기 처리에 대해 정리해보려고 한다. 수업 들으면서도 그렇고, 직접 정리하면서 느낀 거지만, 이 개념이 정확히 잡히지 않으면 이후에 나오는 API 호출이나 서버 통신 같은 부분에서 계속 막히게 될 것 같아서 한 번 정리해 두면 좋을 것 같았다.비동기란 무엇일까?비동기 처리는 한 줄로 정리하면 기다리지 않고 다른 일을 먼저 하면서, 끝나면 다시 처리하는 방식이다.작업 중에 시간이 오래 걸리는 일이 있으면 그 자리에서 멈춰서 계속 기다리는 것이 아니라, 그동안 다른 코드부터 실행하고 있다가, 나중에 결과가 준비되면 그때 다시 처리한다.웹에서는 서버 요청, 데이터 불러오기, API 통신 같은 작업들이 시간이 걸리기 때문에 비동기 처리가 정말..