2025-07-21

오늘 배운 것

• 웹 서비스에서 백엔드와 프론트엔드가 분리된 역사적 배경을 이해했다.
• 프론트-백엔드-인프라를 구성하는 기초 뼈대를 학습했다.

---

배움의 순서

1. 웹 서비스에서 백엔드와 프론트엔드가 분리된 배경
2. Next.js 기초 실습
   1. Next.js 프로젝트 생성하기
   2. 폴더 구조 및 App Router, Navigation 구현
   3. ‘style.module.css’로 모듈형 스타일링 실습
3. Docker & MySQL 환경 구축
   • Docker 기초 실습 후, MySQL 컨테이너 설치 → DB 환경도 "내가 띄우고 연결해본다"는 감각을 갖는 게 중요

4. 백엔드 기초 (Spring + Kotlin)
   1. 프로젝트 생성 → 기본 구조 파악
   2. REST API와 WebSocket의 차이점 이해
   3. HTTP 메서드(GET, POST, PUT, DELETE) 개념 정리
   4. PA/ORM 개념도 함께 스터디

[도움 받은 실습 코드]

• 프론트엔드 실습
• 백엔드 실습

---

오늘의 깨달음

웹서비스 구조의 진화

• 프론트/백의 구분은 역할 분리와 복잡도 대응의 결과다.

Next.js 기초 실습

프로젝트 만들기

• create-next-app으로 프로젝트를 쉽게 만들 수 있었다.
• 그런데 pages 폴더 대신 app 폴더를 쓰고, 폴더 이름이 곧 URL이 되는 구조가 신기했다.
• “페이지 하나 만들려면 폴더 하나 만든다”는 식이다. 자연스럽게 구조를 먼저 생각하게 됐다.

App Router + Navigation 만들기

• layout.tsx에 네비게이션을 넣어두면, 모든 페이지에 자동으로 들어가서 따로 중복 작성 안 해도 된다.
• Logo, Menu, 버튼 줄 이런 것도 컴포넌트로 나눠서 만들다 보니, 공통으로 쓰는 부분을 깔끔하게 처리할 수 있어 유지보수가 쉬울 것 같다.

style.module.css

• 평소에는 CSS 클래스 이름 겹치지 않게 짓는 게 은근 스트레스였는데,
• .module.css를 쓰니까 알아서 뒤에 이상한(?) 문자열을 붙여줘서 충돌이 안 난다.
• 그래서 이제는 클래스 이름 고민보다는 스타일을 어떻게 나눌지에 집중할 수 있을 것 같다.

Docker & MySQL 환경 구축

• 도커는 설치 자체보다도 실행할 때 옵션 설정이 더 중요하다! (비밀번호, 포트, 컨테이너 이름 등)
• 포트를 매핑하면 여러 개의 데이터베이스도 한 컴퓨터에서 동시에 돌릴 수 있다.
• 도커는 일종의 가상 서버이고, bash로 안에 들어가서 직접 조작도 가능하다.
• 컨테이너는 언제든 갈아끼울 수 있지만, 중요한 데이터는 따로 보관해둬야 한다!
• docker-compose는 여러 개의 컨테이너를 관리할 때도 아주 유용한 툴이다.

백엔드 기초 (Spring + Kotlin)

• Spring은 처음부터 역할 분담이 뚜렷한 구조로 시작한다.
  • Controller, Service, Repository, Entity 등 역할별로 나뉜 디렉터리 구조가 만들어진다.
• REST는 요청-응답 중심, WebSocket은 실시간 통신에 적합. 둘 다 상황에 따라 선택!
• GET(정보 가져오기), POST(새로 만들기, ADD), PUT (업데이트), DELETE(삭제)
• PA/DOM: 개념적으로는 객체 ↔ 테이블 매핑 기술이지만, 완전히 이해하지 못함.