이 과제집은 오후 자기주도 시간(10:40–12:00, 13:00–16:30)에 쓰는 문서예요. 이번 주는 배정받은 첫 소과제가 메인이고, 이 문서는 그 소과제를 계획→구현→PR→리뷰 반영→회고로 끌고 가는 체크리스트와 양식을 담고 있어요. 매일 16:30 멘토 리뷰 때 제출할 산출물이 정해져 있으니, 하루를 시작할 때 그날의 산출물부터 확인하고 움직여 보세요.
3주차 내내 하루의 뼈대는 같아요. 오전 강의에서 배운 것을 오후에 소과제로 바로 이어가는 구조예요.
규칙 하나만 기억해요: 과제가 일찍 끝나면 놀지 말고 예비 과제로 — 예비 과제도 평가에 반영돼요.
오전 강의에서 첫 소과제를 배정받고 접근 방법을 공유했어요. 오후엔 그 접근 방법을 문서로 굳혀요.
코드를 치기 전에 "무엇을, 어떻게, 얼마나 걸려서" 할지 스스로 설명하는 힘을 길러요 — 실무에서 가장 먼저 배우는 습관이에요.
16:30까지 제출: 착수 계획서 1장 (아래 양식 그대로, 마크다운 파일 plan.md 또는 공유 문서)
# 소과제 착수 계획서 작성자: ______ 작성일: 2026-__-__ 과제명: ______________________ ## 1. 무엇을 (What) - 이 과제가 끝나면 사용자에게 무엇이 달라지나요? (1~2문장) → ________________________________________ - 현재 동작 스크린샷: (붙여넣기) ## 2. 어떻게 (How) - 고칠 것으로 보이는 파일/영역 후보: 1) ______________________ — 이유: __________ 2) ______________________ — 이유: __________ - 대략의 순서: ____________ → ____________ → ____________ ## 3. 예상 소요 - 화요일 오전: ______________________ - 화요일 오후: ______________________ - 수요일 오전: ______________________ (PR 올리기 포함) ## 4. 불확실한 점 (최소 2개) - ________________________________________ - ________________________________________ ## 5. 완료 기준 (Definition of Done) - [ ] ______________________ 가 화면에서 동작한다 - [ ] 기존 기능 __________ 이 깨지지 않았다 - [ ] PR이 올라가고 설명이 채워져 있다 ## 6. 멘토 피드백 (확인 후 기록) - ________________________________________
내일 구현을 시작할 파일들을 미리 읽어 두면, 화요일 아침의 나에게 큰 선물이 돼요.
화면 컴포넌트 → API 호출 함수 → 서버 컨트롤러제출: 탐험 노트(파일별 역할 1줄 + 화살표 그림 + 모르는 것 목록). 계획서 뒤에 붙여서 함께 내면 돼요. 일찍 끝났을 때만 하는 과제지만, 하면 화요일이 훨씬 편해져요.
구조는 같고 대상만 달라요. 개발자가 "코드 입구"를 찾는 자리에서, 디자이너는 "화면의 문제"를 찾아요. 계획서 양식도 같은 것을 쓰되 2번 항목을 아래처럼 바꿔서 채워요.
16:30까지 제출: 디자인 착수 계획서 1장 (현재 상태 캡처 + 문제 정의 1~2개 + 참고 사례 2개 + 일정)
오전 강의의 진행 포인트(작게 커밋하기)를 오후 구현에 바로 적용해요. 퇴근 전 중간보고까지가 오늘의 한 세트예요.
계획을 실제 코드로 옮기면서, 진행 상황을 남이 이해할 수 있게 보고하는 실무 사이클을 처음부터 끝까지 경험해요.
git switch -c feature/과제이름-이니셜 형태로. 브랜치 이름은 멘토가 봐도 무슨 작업인지 알 수 있게 지어요.feat: 목록 화면에 빈 상태 문구 추가 처럼요.16:30까지 제출: ① 오늘의 진행 커밋(브랜치에 3커밋 이상, 푸시 완료) ② 중간보고 메시지(아래 틀)
[중간보고] 과제명 — 구현 1일차 (화) ■ 오늘 한 것 (사실) - ________________________________________ - ________________________________________ - 커밋: N개 (브랜치: feature/______) ■ 진행률 (판단) - 계획 대비: 예정대로 / 조금 늦음 / 많이 늦음 중 하나 + 이유 1줄 - 계획과 달랐던 점: ________________________________________ ■ 내일 할 것 (다음 행동) - 오전: ______________________ - 오후: ______________________ + PR 올리기 ■ 도움이 필요한 것 - ________________ (없으면 "없음")
소과제가 일찍 끝났거나 멘토 답변을 기다리는 동안, 함수 작성 근육을 유지해요.
practice-w3-tue.js를 만들어요.console.log()로 예시 입력 2개 이상을 넣어 결과를 확인해요.// TODO: 왜 막혔는지 1줄을 남겨요.1. sum(a, b) — 두 수를 받아 합을 반환하는 함수를 작성하세요.
2. isEven(n) — 정수를 받아 짝수면 true, 홀수면 false를 반환하세요.
3. maxOfThree(a, b, c) — 세 수 중 가장 큰 값을 반환하세요.
(Math.max 없이 if문으로 먼저 풀고, 그 다음 Math.max로도 풀어 보세요.)
4. repeatText(text, n) — 문자열 text를 n번 이어붙인 문자열을 반환하세요.
예: repeatText("하", 3) → "하하하"
5. countVowels(str) — 영어 문자열에서 모음(a,e,i,o,u)의 개수를 반환하세요.
대문자도 세어야 합니다.
6. reverseWords(sentence) — 문장을 받아 단어 순서를 뒤집어 반환하세요.
예: reverseWords("나는 오늘 출근했다") → "출근했다 오늘 나는"
7. sumArray(numbers) — 숫자 배열의 합을 반환하세요.
for문으로 한 번, reduce로 한 번, 두 가지 방법으로 작성하세요.
8. filterLongNames(names, minLength) — 이름 배열에서 글자 수가
minLength 이상인 이름만 담은 새 배열을 반환하세요.
예: filterLongNames(["김", "이서연", "박준"], 2) → ["이서연", "박준"]
9. toPriceText(price) — 숫자를 받아 천 단위 콤마를 붙인 문자열에
"원"을 붙여 반환하세요. 예: toPriceText(1250000) → "1,250,000원"
10. findFirstIndex(arr, target) — 배열에서 target이 처음 나오는
인덱스를 반환하고, 없으면 -1을 반환하세요.
(indexOf 없이 직접 반복문으로 구현하세요.)
제출: practice-w3-tue.js 파일 링크(푸시된 커밋). 몇 번까지 풀었는지, 어디서 막혔는지를 중간보고 메시지 끝에 한 줄로 덧붙여요.
개발자의 "커밋"이 디자이너에겐 "시안 버전"이에요. 하루의 끝에 중간보고를 보내는 것은 동일하고, 커밋 개수 대신 시안 버전 수를 적어요.
16:30까지 제출: 시안 1차 링크(현재 화면 + 개선안 2방향 + 메모) + 중간보고 메시지
오전 강의에서 좋은 PR의 조건을 배웠어요. 오후엔 구현을 마무리하고 그 조건대로 PR을 올려요.
"동작하는 코드"를 "리뷰받을 수 있는 PR"로 포장하는 법을 배워요 — PR은 코드가 아니라 커뮤니케이션이에요.
16:30까지 제출: 올라간 PR 링크
제목: [과제] 목록 화면 빈 상태 안내 추가 ← 예시. 내 과제에 맞게 ## 무엇을 바꿨나요 - ________________________________________ - ________________________________________ ## 왜 바꿨나요 - 과제 배경 + 이 방법을 고른 이유: __________________ - 고민했지만 선택하지 않은 방법(있다면): __________ ## 스크린샷 | 변경 전 | 변경 후 | |---|---| | (이미지) | (이미지) | ## 확인 방법 (리뷰어가 따라 할 수 있게) 1. ______ 화면으로 이동 2. ______ 버튼 클릭 3. ______ 가 보이면 정상 ## 스스로 확인한 것 - [ ] 완료 기준 체크리스트 전부 통과 - [ ] 주변 기능 3개 정상 동작: __ , __ , __ - [ ] 콘솔 에러 없음
내가 바꾼 코드를 말로 설명할 수 있어야 진짜 이해한 거예요 — 내일 리뷰 코멘트에 답할 준비도 돼요.
제출: 설명 문서 1장(explain.md). PR 링크와 함께 내요. "정확히는 모름" 표시가 있는 문서가 없는 문서보다 좋은 평가를 받아요.
개발자의 "PR 올리기"가 디자이너에겐 "시안을 개발자에게 보여주기"예요. 리뷰받을 수 있는 형태로 포장한다는 점은 완전히 같아요.
16:30까지 제출: 시안 2차 링크(4개 상태 포함) + 개발자 피드백 3개와 반영 여부 메모
오전 강의에서 리뷰 코멘트를 읽는 법을 배웠어요. 오후엔 실제 코멘트를 하나씩 반영하고 머지까지 가요.
리뷰 코멘트를 감정이 아니라 정보로 받아들이고, "무엇을 왜 고쳤는지" 설명하며 반영하는 태도를 익혀요.
16:30까지 제출: ① 머지된 PR 링크 ② 반영 기록표 ③ 배포 확인 스크린샷
# 리뷰 반영 기록 — 과제명 | # | 코멘트 요약 | 무엇을 고쳤나 | 왜 그렇게 고쳤나 | 커밋 | |---|---|---|---|---| | 1 | ______________ | ______________ | ______________ | ____ | | 2 | ______________ | ______________ | ______________ | ____ | | 3 | ______________ | ______________ | ______________ | ____ | ## 반영하지 않은 코멘트 (있다면) - 코멘트: __________ / 이유: __________ / 리뷰어 합의: 예·아니오 ## 배포 확인 - 머지 시각: __:__ / 화면 확인 시각: __:__ - 확인한 화면·동작: ________________________ (스크린샷 첨부) ## 오늘 리뷰에서 배운 것 1가지 - ________________________________________
남의 PR을 읽는 것은 공짜 과외예요 — 같은 주에 같은 코드베이스에서 일어난 일이라 흡수가 빨라요.
제출: 메모 1장(PR 링크 + 1문장 요약 + 배운 점 3개 + 이해 못 한 줄 개수). 반영 기록표 뒤에 붙여 함께 내요.
개발자의 "머지"가 디자이너에겐 "핸드오프"예요. 어제 받은 개발자 피드백(애매하다던 부분)이 오늘 명세로 답해야 할 목록이에요.
16:30까지 제출: 핸드오프 문서 링크(간격 표기 + 상태 명세표 + 인터랙션 3개 + 개발자 확인 코멘트)
오전엔 한 주 마무리 강의와 1:1 면담이 있어요. 오후엔 이번 주 전체를 숫자와 문장으로 되돌아봐요.
예측과 실제의 차이를 직접 재 보면, 다음 과제의 예상 소요가 훨씬 정확해져요 — 이게 경력의 핵심 근육이에요.
16:30까지 제출: 회고 1장 (아래 양식, retro-w3.md)
# 3주차 회고 — 첫 소과제 ## 1. 계획 대비 실제 | 항목 | 예상 (월요일 계획서 원문) | 실제 | 차이·이유 | |---|---|---|---| | 구현 완료 시점 | ________ | ________ | ________ | | 고친 파일 | ________ | ________ | ________ | | PR 올린 시점 | ________ | ________ | ________ | | 리뷰 코멘트 개수 | ____개 예상 | ____개 | ________ | ## 2. 예상 못 한 문제 (전부) | 문제 | 얼마나 잡아먹었나 | 미리 알 수 있었나 | |---|---|---| | ____________ | 약 __시간 | 예 / 아니오 | | ____________ | 약 __시간 | 예 / 아니오 | ## 3. 다음에 다르게 할 것 3가지 (검증 가능한 행동으로) 1. ________________________________________ 2. ________________________________________ 3. ________________________________________ ## 4. 이번 주의 순간들 - 가장 뿌듯했던 순간: ________________________ - 가장 힘들었던 순간: ________________________ ## 5. 멘토에게 묻고 싶은 것 1가지 - ________________________________________
이번 주 아침 기본기 코너에서 배운 "프로그램의 변화(상태가 어떻게 바뀌어 가는가)"를 그림 한 장으로 남기면 오래 기억돼요.
제출: 그림 1장(사진 또는 파일). 회고와 함께 내요. 잘 그린 그림은 다음 기수 교육 자료로 쓸 수도 있어요.
회고 양식은 개발자용을 그대로 쓰되, 1번 표의 항목을 "시안 1차 완료 / 개발자 피드백 개수 / 핸드오프 완료 시점"으로 바꿔 채워요. 특히 "개발자가 애매하다고 한 것들을 처음부터 명세에 넣었다면?"을 2번 표에서 꼭 다뤄요.
16:30까지 제출: 디자인 회고 1장 (비교표 + 다르게 할 것 3가지)
매일 리뷰에서 확인할 것과 던질 질문이에요. 산출물의 완성도보다 "스스로 설명할 수 있는가"를 봐 주세요.