[나만무] 6/13. 프레임워크 학습 시작

나만무 기간동안은 매일 TIL을 적어볼 예정이다.

웹 개발 팀을 꾸리기 전, 역량 개발을 위한 일주일이 주어졌다.
파이썬과 C는 해봤지만 Java는 처음이라 두렵다..
짧은 시간 안에 흐름과 기술 기초를 익혀둬야 나중에 팀에 도움이 될 수 있으니 열심히 해보자.

오늘은 계획 짜고 개발 환경 세팅했다.
싹다 경험해보자 그냥...

IDE - cursor, intelij, vs code
AI - chatGPT, copilot, gemini, claude
front - HTML, CSS, JavaScript / React.js
back - Java / Spring Boot / MySQL
도구 - GitHub, Docker, AWS, Figma(+makereal tldraw)

---

주요 기술

🖥️ 프론트엔드

항목	기술	설명
언어	HTML, CSS, JavaScript, TypeScript	웹 UI 구현의 기초
UI 프레임워크	React.js, Vue.js, Angular	컴포넌트 기반 개발
서버 사이드 렌더링	Next.js (React), Nuxt.js (Vue)	SEO와 초기 로딩속도에 유리
스타일링/애니메이션	Tailwind CSS, Bootstrap, GSAP	UI/UX 향상
기타 도구	jQuery, Vanilla JS	간단한 DOM 조작 시 사용 가능

⚙️ 백엔드

항목	기술	설명
언어	Java, JavaScript/TypeScript (Node.js), Kotlin	다양한 서버 언어
프레임워크	Spring Boot, Spring Framework	Java 플랫폼의 표준 웹 백엔드
	Express.js, Nest.js	Node.js 기반 REST API 중심 프레임워크
보안/인증	Spring Security, JWT, OAuth2	인증·권한 관리
ORM / DB 연동	JPA/Hibernate, MyBatis	관계형 DB 연동 지원
DB	MySQL, PostgreSQL, Oracle, MSSQL, MariaDB	RDBMS
	MongoDB, Redis, Elasticsearch	NoSQL, 캐싱, 검색 엔진 등

인프라 / 배포 등 기타 기술

• CI/CD: Jenkins, GitHub Actions — 빌드 & 배포 자동화
• 컨테이너화: Docker — 환경 일관성 적용
• 오케스트레이션: Kubernetes — 대규모 서비스 운영
• 클라우드 플랫폼: AWS, GCP, Azure — 확장성 있는 서비스 배포
• 디자인/협업 툴: Figma — UI/UX 협업에 유용

요약

• 프론트엔드는 HTML/CSS/JS 기반 위에 React, Vue 같은 프레임워크와 스타일링 도구를 쓰면 UI 구성에 빠르고 편리하다.
• 백엔드는 Java(Spring)나 Node.js(Express/Nest) 환경에서 ORM과 DB를 연결해 API 형태로 기능을 제공한다.
• 인프라나 CI/CD, 컨테이너 관련 도구는 실제 서비스 운영/배포 단계에서 도움을 준다.

---

📅 개인 과제 개요 및 계획

[기능 요구사항]
회원가입/로그인
게시물 작성
게시물 목록보기
게시물 읽기
댓글 작성

[개발범위]
프론트: 게시판 UI를 구현
백엔드: 게시판 Server API 구현
추가적 구현 가능 (기술적 챌린지 요소)

[인원구성 (다음중 한가지 선택)]
혼자 fullstack 개발 가능
프론트 UI만 구현할 경우
게시판 데이터는 브라우저상에서만 존재하도록 구성
또는 postman mock server를 구성해서 사용
백엔드 ServerAPI만 구현한 경우
postman등으로 요청을 직접 보내서 시연
또는 원하는 사람과 2인팀을 구성하고, 프론트/백엔드를 나누어서 개발

📍 Day 1 - Java & 객체지향 기초 다지기

• Java 기본 문법 학습 (변수, 조건문, 반복문 등)
• 객체지향 개념 정리 (클래스, 상속, 다형성, 캡슐화 등)
• IntelliJ 셋업 및 사용법 익히기
• 콘솔 게시판 간단 구현 (객체지향 감 잡기용)

📍 Day 2 - Spring Boot로 게시판 백엔드 뼈대 만들기

• Spring Boot 프로젝트 생성 (Spring Initializr)
• 기본적인 REST API 구현 (회원가입, 게시글 등록 등)
• H2 DB 연결 및 JPA 사용해보기
• Postman으로 API 테스트
• MVC 구조 익히기 (Controller, Service, Repository)
• 핵심 개념: REST API, MVC, 의존성 주입

📍 Day 3 - React 기본 학습 & 프론트 구조 잡기

• React 앱 생성 (Vite)
• JSX, 컴포넌트 구조, props, useState 등 기본기 익히기
• 게시판 UI 구성 시작 (게시글 목록, 작성 폼 등)
• Axios로 백엔드 API 연동 테스트
• 핵심 개념: 컴포넌트 분리, 상태 관리, 이벤트 처리

📍 Day 4 - 프론트-백 연동 & 주요 기능 완성

• 로그인 / 회원가입 기능 연결
• 게시글 작성 / 조회 / 상세보기 구현
• 댓글 등록 기능 구현
• 전체 기능 연동 테스트
• 중점 포인트: API 연결 흐름 이해, CORS 설정, 에러 처리

📍 Day 5 - 디버깅 & 마무리

• 기능별 예외 처리 추가
• 프론트 간단한 CSS 정리
• GitHub 업로드 및 README 작성
• 선택: 로컬 배포 or GitHub Pages/Render 사용