README.md
세션 소개
브라우저 화면에서 시작해 API 요청과 서버 응답까지 웹 서비스의 전체 흐름을 연결하는 4주 풀스택 입문 세션입니다. HTML·CSS로 화면을 만들고 JavaScript로 사용자 입력을 처리한 뒤 Fetch API와 Express 서버를 연결합니다.
각 주차의 결과를 하나의 방명록 프로젝트에 이어 붙여 클라이언트와 서버가 어떤 계약으로 통신하는지 확인합니다.
이런 분께 추천합니다
- HTML과 CSS를 학습한 뒤 다음 실습을 찾고 있는 분
- DOM 이벤트와 Fetch API를 실제 화면에서 사용해 보고 싶은 분
- 클라이언트와 서버의 역할을 한 번에 연결해서 이해하고 싶은 분
- 작지만 처음부터 끝까지 동작하는 웹 프로젝트를 완성하고 싶은 분
커리큘럼
| 주차 | 주제 | 내용 |
|---|---|---|
| 1주차 | HTTP와 정적 화면 | 브라우저가 URL을 요청하고 문서를 받는 흐름을 확인합니다. 시맨틱 HTML과 Flex·Grid로 방명록 목록과 작성 폼의 반응형 레이아웃을 만듭니다. |
| 2주차 | JavaScript와 DOM | 폼 제출과 클릭 이벤트를 처리하고 입력값을 검증합니다. 배열 데이터를 목록으로 렌더링하고 추가·삭제 시 화면을 갱신합니다. |
| 3주차 | Fetch와 API 계약 | Fetch API로 JSON을 요청하고 응답 상태를 확인합니다. 로딩, 오류, 빈 상태 UI를 만들고 요청·응답 필드와 오류 형식을 문서로 정합니다. |
| 4주차 | Express 서버 연결 | Express로 방명록 조회·작성·삭제 API를 만들고 프론트엔드와 연결합니다. 실행 순서와 API 예시를 README에 정리하고 다른 환경에서 재실행합니다. |
진행 방식
- 하나의 방명록 프로젝트를 화면, 상태, API, 서버 순서로 확장합니다.
- 세션에서는 브라우저 개발자 도구의 요소, 네트워크, 콘솔을 함께 확인합니다.
- 프론트엔드와 서버 코드는 같은 저장소에서 관리하고 API 계약을 README에 기록합니다.
- 마지막 주에는 새 환경에서 설치부터 실행까지 다시 확인합니다.
준비 사항
- 노트북, Git·GitHub 계정, Node.js LTS, pnpm
- Visual Studio Code와 최신 브라우저
- HTML 태그와 CSS 선택자에 대한 기본 이해