오늘 커리큘럼​

1. 과정 오리엔테이션 · 로드맵
2. AI 협업형 개발 관점 (의도·검증 vs 초안·탐색)
3. Claude Code 워크플로우 실습
   요청 → 생성 → 리뷰 → 수정 → 실행 → 메모
4. Slack 팀 · AI 커뮤니티 · GeekNews
5. 학습 레포·문서 사이트 세팅

세션 노트​

• Claude Code로 시작하는 AI 협업 개발 워크플로우

메모​

• Slack — 새싹 은평4기 자바팀 참여
• 스레드 AI 최신 정보 커뮤니티 (choi.openai)
• GeekNews

다음에​

• 08-03 컴퓨터 구조 기본기
• 08-05 운영체제 기본기

왜 지금 웹 기초인가​

Spring Boot로 REST API를 만들기 전에 알아두면 좋은 것들입니다.

나중에 나오는 React · Spring Security 로그인 연동, JSP/EL, REST API 연동 수업이 훨씬 수월해집니다.

정리해 둔 노트​

GitHub / Obsidian에서 바로 볼 수 있는 상대 링크 문서입니다.

1. 웹 기초 MOC — 맵
2. HTML 요약 — 시맨틱·폼·미디어
3. CSS3 요약 — 선택자·박스·transition
4. JavaScript 요약 — 문법·배열·함수·DOM

원본 슬라이드:

PDF는 용량이 커서 레포에는 넣지 않았고, 핵심만 MD로 압축해 두었습니다.

한 줄 암기​

HTML  = 뼈대 (무엇인지를 마크업)
CSS   = 옷   (어떻게 보일지)
JS    = 근육 (무엇이 일어날지)

HTML에서 꼭 잡을 것​

• DOCTYPE + html / head / body
• 시맨틱: header nav main section footer
• 폼: form + input + label

CSS에서 꼭 잡을 것​

• 선택자 (#id .class 후손/자손)
• 박스 모델 + box-sizing: border-box
• display / position / 간단한 transition

JavaScript에서 꼭 잡을 것​

• let / const, 조건·반복
• 함수·배열 map / filter
• DOM에서 요소 하나 바꾸고 클릭 이벤트 연결

최소 실습 (10분)​

브라우저 콘솔 또는 Node에서:

const items = ["HTML", "CSS", "JS"];
const lines = items.map((x, i) => `${i + 1}. ${x}`);
console.log(lines.join("\n"));

그다음 HTML 한 파일에 버튼 하나 두고:

<button id="btn">클릭</button>
<script>
  document.getElementById("btn").addEventListener("click", () => {
    alert("웹 기초 연결 완료");
  });
</script>

이 두 개가 되면 “구조 + 동작” 루프는 통과한 겁니다.

과정 사이트 쪽 진행​

문서 허브도 같이 다듬는 중입니다.

• Docusaurus 커리큘럼 사이트: https://sesac-java-backend.pages.dev
• 우측 그래프 뷰 (로컬/확장, 목차 전환)
• Cloudflare Pages Git 연동 → main 푸시 시 자동 배포
• 1차시 메모: Slack 팀, AI 커뮤니티, GeekNews 등

다음 할 일​

• HTML 시맨틱 구조로 자기소개 페이지 한 장
• CSS로 카드 레이아웃 + hover
• JS로 입력값 받아 목록에 추가
• 1차시 세션 노트 실습 메모 이어서 채우기

백엔드로 가기 전 웹 3종 세트를 짧게라도 한 바퀴 돌아 두면, 이후 Spring·React 수업이 훨씬 잘 붙습니다.

오늘 한 일​

• 과정 커리큘럼 MOC 정리
• Docusaurus 문서 사이트 스캐폴딩
• 1차시 세션 노트 템플릿 준비

다음​

• 1차시 · AI 협업 개발 워크플로우 실습 기록 채우기