학습 지도

실행 → 통신 → 화면 → 데이터 → 사용자 → 검증의 흐름으로 학습합니다. 날짜가 아니라 선행 개념을 이해한 정도에 따라 다음 단계로 갑니다.

전체 목적은 AI와 함께 웹을 만들고, 구조와 결과를 이해하며 확인하는 것입니다. AI는 각 단계에서 설명·오류 분석·작은 확장을 도울 수 있습니다. 짧은 실험에서는 핵심을 직접 바꾸고 관찰합니다. 수업 안내에서 왜 스택과 CS를 함께 배우는지 살펴보세요.

지금 제공하는 실습

모두 학생용 안내와 실습 ZIP을 제공합니다. 01·02·03의 첫 코드는 ASCII 중심의 작은 독립 예제이며, 통신의 메시지 경계와 한글·UTF-8은 별도 실험입니다. 완성 예제를 먼저 실행한 뒤 작은 조건을 바꿉니다. 오류 복구와 React TODO는 의도된 미완성 과제임을 해당 페이지에서 표시합니다.

03은 03-0 소켓 채팅 → 03-1~03-3 HTTP → 03-6 가짜 로그인 관찰입니다. 에코가 된 뒤 on은 등록하고 데이터가 도착하면 Node가 함수를 호출한다는 흐름만 짧게 짚고 채팅으로 이어갑니다. 함수 전달·실행 순서 실험은 궁금할 때 선택하며, 하지 않아도 기본 진도와 완료 여부에 영향을 주지 않습니다. 중계와 메시지 규칙을 이해한 다음 HTTP로 넘어갑니다. 기존 03-4 친구 서버·03-5 서버 중단은 선택입니다. 03-6에서는 가짜 비밀번호를 HTTP 본문에서 찾고, 04에서 같은 입력을 HTTPS로 보냅니다. 한 번에 끝낼 목록이 아니며 각 단계의 작은 성공을 남기면 됩니다.

02에서 배운 이벤트·Promise·await는 소켓과 화면/API 실습에서 다시 사용합니다. 콜백·대리자·코루틴·스레드 등의 넓은 비교는 02의 선택 참고 자료에 두었습니다. 처음부터 모두 외우거나 끝내야 하는 단원이 아닙니다.

이어질 단원 · 실습 준비 중

아래에는 학습 방향만 마련되어 있습니다. 상세 실습과 실행 예제는 아직 제공하지 않습니다. 준비되는 대로 이 자료실에 연결합니다.

06 · 데이터와 관계

사용자·목록·할 일을 ERD로 연결하고 기본 키와 외래 키, 1:N 관계를 이해합니다. SQL 조회·저장과 제약을 확인한 뒤 Drizzle 스키마·마이그레이션으로 연결합니다. 여러 저장 중 하나가 실패했을 때 트랜잭션이 무엇을 되돌리는지도 다룹니다.

07 · 인증과 권한

03·04의 가짜 로그인에서 다시 출발해 비밀번호 저장용 해시 → 쿠키·세션 → 데이터 소유권을 이어갑니다. Better Auth가 확인한 사용자를 06의 메모 소유자와 연결합니다. 로그인한 것과 다른 사람의 데이터를 바꿀 권한이 있는 것은 별개입니다. 학생 활동안과 강사 설계를 준비했으며 실행 예제는 제작 예정입니다. OAuth 2.0·OIDC·SSO는 기본 흐름 뒤의 선택 심화입니다.

08 · 검증과 AI 코딩

입력부터 서버·DB·응답·화면까지 한 요청을 추적합니다. 정상·실패·권한 없는 요청을 확인하고, AI에게 작은 변경을 맡긴 뒤 바뀐 코드와 동작을 검토합니다. AI 도움 자체는 앞 단원에서도 배운 범위 안에서 사용할 수 있습니다.

09 · AI 도구와 에이전트

작은 읽기 도구 또는 학습 계획 생성 기능으로 마무리합니다. 모델이 제안한 요청과 실제 함수 실행을 구분하고 입력·권한·결과를 확인합니다. 필요한 인증과 권한을 아직 배우지 않았다면 가상 데이터로 진행합니다.

수업 뒤 자율 프로젝트 · 선택학습 (필수 아님)

더 만들어 보고 싶다면 자율 프로젝트에서 하나만 골라 보세요. 다음 필수 단계가 아니며 기본 진도·완료율·교사 확인에 들어가지 않습니다. 시간이 남거나 궁금할 때 열어 보고 작은 결과 하나에서 멈춰도 좋습니다.

• 내 웹 채팅과 WebSocket: 라이브러리로 채팅한 뒤, 원하면 같은 화면을 TCP에서 직접 만든 서버에 연결합니다.
• Java·Spring·MCP 연결: 같은 조회 함수를 HTTP와 MCP 도구로 부르고 요청이 함수까지 오는 길을 찾아봅니다.

두 프로젝트 모두 설명과 시작 예제를 제공합니다. 막히면 관찰한 결과를 바탕으로 AI나 교사에게 도움을 요청해도 됩니다. 자세한 준비와 실행 범위는 각 프로젝트 안내에서 확인하세요.

어디까지 이해하면 넘어갈까요?

문서와 예제를 보면서 핵심 조건 하나를 바꿀 수 있고, 성공한 이유와 실패한 이유를 설명할 수 있으면 됩니다. 심화 내용을 모두 완벽하게 알아야 하는 것은 아닙니다.

막혔다면 먼저 같은 구조의 작은 입력을 다시 따라갑니다. 여유가 있다면 같은 구조에 기능 하나를 더합니다. 각자의 속도가 달라도 수업이 끝날 때 실행 가능한 결과물을 남기는 것이 목표입니다.