이번 주의 목표는 두 가지예요. 하나, 코드와 화면을 "읽는" 눈을 만드는 것. 우리 React 웹과 Spring Boot 서버가 어떻게 생겼고, 화면이 서버에 어떻게 말을 거는지 눈으로 확인해요. 둘, 지난주에 배운 예절과 질문법을 매일 반복해서 몸에 붙이는 것. 아직 뭔가를 "만들지" 않아도 괜찮아요. 잘 읽는 사람이 결국 잘 만듭니다.
6블록 틀(학습목표 · 진행표 · 멘토 스크립트 · 실습 · 이해 확인 · 흔한 실수)은 1주차 강의안과 동일합니다. 각 세션 카드를 위에서 아래로 그대로 읽어 내려가며 진행하세요.
「CS 기본기 4주 커리큘럼」 문서의 2주차 1~2일차를 그대로 진행합니다.
"자, 오늘은 코드를 고치지 않아요. 그냥 구경만 할 거예요. 새 학교 첫날 건물 한 바퀴 도는 거랑 똑같아요. 어디가 교실이고 어디가 급식실인지만 알면 돼요."
"React 웹부터 볼게요. src 폴더 안에 components, pages, api 이런 게 보이죠? components는 버튼·카드처럼 화면 조각이고요, pages는 그 조각을 모아 만든 한 화면이에요. 레고 블록(components)이랑 완성품(pages) 관계라고 생각하면 돼요."
"이제 서버 쪽. Spring Boot는 controller가 손님을 맞는 안내데스크예요. service는 실제로 일을 처리하는 주방이고요. 안내데스크가 주문을 받아 주방에 넘기는 거예요. 지금은 이 두 개만 기억해도 충분해요."
수습생이 "이게 다 뭔지 모르겠어요"라고 하면 — "당연해요! 오늘은 이름이랑 위치만 익히는 날이에요. 뜻은 이번 주 내내 천천히 붙일 거예요." 라고 안심시킨다.
손으로 그리는 게 핵심입니다. 종이·화이트보드·아이패드 무엇이든 좋아요. 오후에 각자 자기 지도를 완성해 서로에게 30초씩 설명합니다.
[ 나의 코드베이스 지도 ] ■ React 웹 components/ → ( ) 을(를) 담는 곳 pages/ → ( ) 을(를) 담는 곳 ( )/ → API 호출을 모아둔 곳 ■ Spring Boot 서버 controller → ( ) 역할 service → ( ) 역할 ■ 화살표: 화면이 서버에게 ( ) 를 보낸다.
다음을 각자 말로 답하면 통과예요.
「CS 기본기 4주 커리큘럼」 문서의 2주차 3일차를 그대로 진행합니다.
F12 → Network 탭. 다 함께 열고 화면을 새로고침해 요청이 주르륵 뜨는 걸 본다."어제는 코드가 어디 있는지 지도를 그렸죠? 오늘은 그 지도 위에서 편지가 오가는 걸 직접 볼 거예요. 화면이 서버한테 '이 데이터 좀 주세요' 하고 편지를 보내거든요."
"키보드에서 F12 눌러보세요. 창이 하나 뜨죠? 위에 Network라고 적힌 탭을 눌러요. 그리고 화면을 새로고침. 자, 줄이 좍 뜨죠? 이게 전부 방금 오간 편지예요. 하나하나가 화면과 서버의 대화예요."
"아무거나 하나 클릭해볼게요. Request URL — 이게 편지를 보낸 주소예요. Request Method가 GET이면 '주세요', POST면 '이거 저장해주세요'라는 뜻이에요. 밑에 Response는 서버가 보낸 답장이고요."
수습생이 요청이 너무 많아 혼란스러워하면 — "필터 칸에 'Fetch/XHR'를 눌러보세요. 진짜 데이터 편지만 남아요. 이미지·폰트 같은 건 잠깐 무시해도 돼요." 라고 안내한다.
요청 하나를 골라 아래 표를 채우면 끝입니다. 어려운 요청 말고, 목록 조회처럼 답이 눈에 잘 보이는 GET 요청을 고르라고 안내하세요.
[ 내가 관찰한 요청 ] 이 요청은 (어떤 화면 / 버튼) 에서 발생했나요? → ___________________________ Request Method : GET / POST (동그라미) Request URL : _______________________ Status(상태코드): ___ (200이면 성공!) Response(답장)에서 눈에 띄는 값 하나: → ___________________________ 한 줄 소감: 이 요청은 서버에게 무엇을 부탁한 걸까? → ___________________________
발표할 때 다음이 담기면 통과예요.
「CS 기본기 4주 커리큘럼」 문서의 2주차 4일차를 그대로 진행합니다.
"오늘은 여러분이 탐정이에요. 기능 하나를 골라서 '얘가 대체 어떻게 움직이는 거지?'를 캐내는 거예요. 코드를 고치는 게 아니라 설명하는 게 목표예요."
"기능은 작은 걸 고르는 게 좋아요. '좋아요 버튼', '검색창', '로그인' 이런 거요. 화려한 화면 말고, 눌렀을 때 뭔가 딱 벌어지는 단순한 걸로요."
"순서는 세 칸이에요. ①내가 무엇을 눌렀나 → ②화면이 어떻게 변했나 → ③그때 Network 탭에 어떤 편지가 갔나. 이 세 칸만 채우면 훌륭한 분석이에요."
"막히면 물음표로 남기세요"를 반복 강조. 모르는 걸 솔직히 적는 게 감점이 아니라 오히려 좋은 리포트라고 알려준다.
이 리포트가 이번 주 공식 산출물입니다. 오전에 초안, 오후 리뷰 후 보완해 완성하세요.
# 기능 분석 리포트 분석한 기능 : _______________________ 작성자 : _______________________ ## 1. 내가 한 동작 - (예: 검색창에 "KT"를 입력하고 엔터를 눌렀다) ## 2. 화면에서 벌어진 일 - (예: 목록이 KT 관련 항목으로 바뀌었다) ## 3. 그때 오간 요청 (Network 탭) - Method / URL : ___________________ - 서버가 준 답 : ___________________ ## 4. 아직 모르는 것 (물음표 환영!) - ? ___________________________
오후 1:1 리뷰에서 다음을 확인합니다.
「CS 기본기 4주 커리큘럼」 문서의 2주차 5일차(복습·문제)를 그대로 진행합니다.
feat: · fix: · docs:)에 맞춰 커밋 메시지를 쓴다."Git은 게임의 세이브 파일이랑 비슷해요. 실수해도 이전 세이브로 돌아갈 수 있어요. 그래서 하나도 안 무서워요. 오늘 마음껏 실수해도 돼요 — 연습용 저장소니까요."
"먼저 브랜치를 만들어요. 이건 원본을 안 건드리는 '나만의 연습장'이에요. 여기서 파일을 고치고, 다 됐으면 커밋으로 '여기까지 저장!' 도장을 찍어요."
"커밋 메시지에는 규칙이 있어요. 새 기능이면 feat:, 고친 거면 fix:, 문서면 docs:를 앞에 붙여요. 지난주에 봤던 그 규칙이에요. 예: docs: 내 소개 파일 추가."
"마지막은 PR. '제가 이렇게 고쳤어요, 봐주세요'라고 손드는 거예요. PR을 올리면 리뷰어가 확인하고 합쳐줘요. 오늘은 올리는 것까지가 목표예요."
이 PR이 이번 주 공식 산출물입니다. 아래 순서를 그대로 따라오게 하세요. 명령어는 멘토가 화면에 크게 띄워둡니다.
# 1) 내 연습용 브랜치 만들기 git checkout -b practice/이름-week2 # 2) 파일 수정 후, 바뀐 걸 담기 git add 파일이름 # 3) 도장 찍기 (컨벤션 지키기!) git commit -m "docs: __________ 추가" # 4) 내 브랜치를 원격으로 밀어올리기 git push -u origin practice/이름-week2 # 5) 브라우저에서 "Pull Request" 버튼을 눌러 PR 생성 # PR 제목도 컨벤션으로! 예) docs: 수습 자기소개 추가
PR 링크를 멘토에게 공유하며 다음을 확인합니다.
main이 아닌 연습용 브랜치인지main에서 바로 작업한다.git checkout -b를 다 함께 소리 내어 확인하고 시작한다."개발자 친구들이 코드를 '읽는' 동안, 디자이너는 화면을 '읽어요'. 우리 서비스에 쓰인 색이 몇 개인지, 글자 크기가 몇 종류인지, 버튼 모양이 제각각인지 하나하나 세어보는 거예요."
"세다 보면 '어? 이 버튼만 색이 다르네?' 같은 게 보여요. 그게 바로 개선점이에요. 5개만 찾아서 '어디가, 왜 아쉽고, 어떻게 바꾸면 좋을지'를 적어주면 훌륭한 리포트예요."
화면을 눈으로 훑으며 빈칸을 채웁니다. 스크린샷을 붙여두면 근거가 더 명확해져요.
# UI 인벤토리 ## 색 (Colors) - 주 색 : #______ / 보조 : #______ ## 타이포 (Typography) - 제목 __px / 본문 __px / 캡션 __px ## 컴포넌트 (Components) - 버튼 종류 __개, 카드 __종류 ... # 개선점 5가지 1. 어디가? → ______ 왜 아쉽나? → ______ 어떻게? → ______ (2~5 동일 형식)
「CS 기본기 4주 커리큘럼」 문서의 2주차 미니 퀴즈를 진행합니다.
"한 주 정말 고생했어요. 오늘은 '내가 뭘 했지?'를 정리하는 날이에요. 딱 두 가지만 적어요 — 잘한 것 하나, 다음에 더 잘하고 싶은 것 하나. 많이 안 적어도 돼요."
"'잘한 것'은 아주 작아도 좋아요. '처음으로 Network 탭을 열어봤다'도 훌륭한 성취예요. 개선점도 자책이 아니라 '다음 주엔 이걸 해보자' 같은 방향이면 돼요."
1:1에서는 이번 주 산출물 두 개(기능 분석 문서, 연습 PR)를 함께 열어보고, 이해력·질문의 질(30분 룰·질문 3요소)·예절 정착도를 부드럽게 피드백한다. 지적보다 성장을 먼저 짚는다.
두 칸이면 충분합니다. 다음 주 1:1에서 이 시트를 이어서 봅니다.
# 2주차 회고 — 이름: ______ ■ 이번 주 잘한 것 1가지 → ___________________________ ■ 다음 주 더 해보고 싶은 것 1가지 → ___________________________ ■ 멘토와 합의한 다음 주 목표 → ___________________________ [ 산출물 체크 ] □ 기능 분석 문서 1개 □ 연습 PR 1개
멘토는 1:1에서 세 가지 축으로 관찰 기록을 남깁니다.
다음 주 예고 · 3주차 — 읽는 눈에서 손으로 바꾸는 힘으로. 아주 작은 이슈 하나를 골라 직접 코드를 고치고 진짜 PR을 올리는 "첫 기여" 주간이 시작됩니다. (KT엠모바일·KT알파·핀업과 함께 만드는 실제 화면을 소재로.)