기술 학습 가이드

선수 지식: 코드 편집기에서 파일을 만들고 브라우저로 열 수 있으면 시작할 수 있습니다.

직접 확인할 것 · 아래 실습을 연습에 활용해 보세요.

이름·이메일·문의 내용이 있는 문의 폼과 반응형 카드 목록을 만드세요.

label과 입력칸 연결, 키보드 이동, 좁은 화면의 가로 넘침 여부를 확인합니다.

선수 지식: HTML 요소와 폼의 기본 구조를 먼저 익힙니다.

직접 확인할 것 · 아래 실습을 연습에 활용해 보세요.

검색어로 목록을 필터링하고 결과가 없을 때 안내 문구를 표시하세요.

빈 검색어·일치 항목·일치하지 않는 항목을 각각 확인하고 함수의 입력과 반환값을 설명합니다.

선수 지식: JavaScript 함수·배열·객체·모듈을 사용할 수 있어야 합니다.

직접 확인할 것 · 아래 실습을 연습에 활용해 보세요.

상품 타입과 검색 함수를 만들고 unknown 입력의 유효성을 검사하세요.

strict 검사 통과, 잘못된 입력 거절, 불필요한 any 없이 분기별 타입 확인을 완료합니다.

선수 지식: HTML, JavaScript 배열·함수·모듈을 익히고 TypeScript 기본 타입을 확인합니다.

직접 확인할 것 · 아래 실습을 연습에 활용해 보세요.

상품 목록을 컴포넌트로 나누고 검색 입력과 선택 상태를 추가하세요.

props 전달 방향, 상태 소유 위치, 목록 key, 빈 결과 처리를 설명하고 직접 확인합니다.

선수 지식: React 컴포넌트와 state, JavaScript 비동기 처리, HTTP 기초가 필요합니다.

직접 확인할 것 · 아래 실습을 연습에 활용해 보세요.

목록·상세 경로를 만들고 로딩·오류·찾을 수 없음 화면을 연결하세요.

직접 URL 접근과 새로고침, 없는 ID, 실패 응답을 확인하고 실행 환경의 경계를 설명합니다.

선수 지식: CSS 박스 모델, Flex/Grid, 미디어 쿼리를 먼저 익힙니다.

직접 확인할 것 · 아래 실습을 연습에 활용해 보세요.

동일한 카드 목록을 모바일 1열·넓은 화면 다열로 구성하고 선택 상태를 표시하세요.

클래스가 소스에 완전한 문자열로 존재하는지, 키보드 포커스와 반응형 배치를 확인합니다.

선수 지식: React state·Effect, Promise·fetch, 응답 오류 처리를 먼저 익힙니다.

직접 확인할 것 · 아래 실습을 연습에 활용해 보세요.

목록을 조회하고 항목 변경 후 관련 queryKey의 데이터를 갱신하세요.

로딩·오류·빈 목록·성공 및 변경 후 재조회 결과를 각각 확인합니다.

선수 지식: React props·state와 불변 업데이트를 먼저 익힙니다.

직접 확인할 것 · 아래 실습을 연습에 활용해 보세요.

두 컴포넌트가 공유하는 선택 목록을 만들고 추가·제거 action을 분리하세요.

중복 추가·마지막 항목 제거·새로고침 이후 유지 범위와 selector 구독 대상을 확인합니다.

선수 지식: JavaScript 비동기 처리와 React, 인증·HTTP 기초가 필요합니다.

직접 확인할 것 · 아래 실습을 연습에 활용해 보세요.

개발용 환경에서 사용자별 메모 저장 흐름과 접근 권한 표를 작성하세요.

로그인 전후·다른 사용자 접근·오류 응답을 구분합니다. 실제 연동 실습은 본인 테스트 프로젝트에서 진행합니다.

선수 지식: React·Next.js, 비동기 요청과 인증 기초를 먼저 익힙니다.

직접 확인할 것 · 아래 실습을 연습에 활용해 보세요.

사용자별 메모 테이블과 본인 행만 접근하는 권한 규칙을 설계하세요.

익명·소유자·다른 사용자에게 허용할 동작을 표로 확인하고 테스트 프로젝트에서 검증합니다.

선수 지식: 폴더 이동과 코드 편집기 사용에 익숙하면 시작할 수 있습니다.

직접 확인할 것 · 아래 실습을 연습에 활용해 보세요.

작은 프로젝트의 설치·개발 실행·빌드 명령을 README에 기록하세요.

lockfile 하나를 기준으로 재설치하고 비밀값 없는 환경변수 예시를 구분합니다.

선수 지식: 파일 편집과 터미널의 기본 경로 이동을 익힙니다.

직접 확인할 것 · 아래 실습을 연습에 활용해 보세요.

연습 저장소에서 두 브랜치의 같은 줄을 수정하고 충돌을 해결하세요.

status·diff로 변경 범위를 확인하고 최종 파일과 커밋 기록을 설명합니다.

선수 지식: JavaScript 함수와 React 이벤트·폼 처리를 먼저 익힙니다.

직접 확인할 것 · 아래 실습을 연습에 활용해 보세요.

검색 함수와 검색 폼, 목록에서 상세로 이동하는 흐름에 각각 테스트를 작성하세요.

의도적으로 동작을 깨뜨렸을 때 실패하고 복구했을 때 통과하는지 확인합니다.

선수 지식: Git과 프로젝트 빌드 명령, HTTP 기초가 필요합니다.

직접 확인할 것 · 아래 실습을 연습에 활용해 보세요.

연습 앱의 정적/서버 배포 적합성을 정하고 배포·복구 절차를 작성하세요.

빌드 결과물 위치, 새로고침 경로, 공개 환경변수, 이전 버전 복구 방법을 확인합니다.

선수 지식: 수정 대상 언어의 기초와 Git diff를 읽을 수 있어야 합니다.

직접 확인할 것 · 아래 실습을 연습에 활용해 보세요.

작은 오류 하나의 재현 조건·수정 범위·완료 기준을 작성해 변경 결과를 검토하세요.

관련 없는 수정과 비밀값 노출 여부를 확인하고 실제 테스트 결과를 기록합니다.

선수 지식: 파일과 데이터의 기본 구조를 이해하고 코드 실습에는 JavaScript 기초가 필요합니다.

직접 확인할 것 · 아래 실습을 연습에 활용해 보세요.

동일한 입력을 두 번 처리해도 결과가 중복되지 않는 작은 자동화를 구성하세요.

정상 입력·빈 입력·재실행·실패 이후 복구 결과를 기록합니다.

선수 지식: HTML과 JavaScript 요청 코드의 기초를 익힙니다.

직접 확인할 것 · 아래 실습을 연습에 활용해 보세요.

개발자 도구에서 한 페이지의 요청 URL·상태·헤더·응답을 기록하세요.

서버 오류와 CORS 차단을 구분하고 쿠키·토큰이 전달되는 위치를 설명합니다.

선수 지식: 기본 사칙연산과 수식 읽기에 익숙하면 시작할 수 있습니다.

직접 확인할 것 · 아래 실습을 연습에 활용해 보세요.

간단한 조건문의 진리표와 집합 연산, 작은 그래프의 연결 관계를 직접 적으세요.

정의와 예시·반례를 함께 제시하고 계산 과정을 다른 사람에게 설명합니다.

선수 지식: JavaScript 배열·객체·반복문·함수가 필요합니다.

직접 확인할 것 · 아래 실습을 연습에 활용해 보세요.

중복 제거, 실행 취소 스택, 순서대로 처리하는 큐를 각각 구현하세요.

빈 입력·중복 값·연속 삽입과 제거를 확인하고 자료구조 선택 이유를 설명합니다.

선수 지식: JavaScript 조건·반복·함수·배열과 기본 자료구조를 익힙니다.

직접 확인할 것 · 아래 실습을 연습에 활용해 보세요.

이미 푼 문제 한 개를 해설 없이 다시 풀고 경계 입력 세 개를 추가하세요.

예상 출력과 실제 출력을 비교하고 시간 복잡도 및 다른 풀이의 장단점을 설명합니다.

선수 지식: React 컴포넌트·props·state와 TypeScript 기초를 익힙니다.

직접 확인할 것 · 아래 실습을 연습에 활용해 보세요.

목록과 상세 화면, 텍스트 입력, 안전 영역을 갖춘 작은 앱을 만드세요.

좁은 화면·키보드 표시·뒤로 이동을 확인합니다. 기기 설치와 원격 빌드는 별도 실행 항목으로 기록합니다.

선수 지식: 완벽한 문법보다 짧은 문장으로 의사를 전달하는 연습부터 시작합니다.

직접 확인할 것 · 아래 실습을 연습에 활용해 보세요.

작업 현황, 막힌 점 질문, PR 설명을 각각 영어 두 문장으로 작성하고 소리 내어 읽으세요.

무엇을 했는지·어디서 막혔는지·어떤 도움이 필요한지가 전달되는지 확인합니다.

선수 지식: 직접 설명할 수 있는 프로젝트나 업무 개선 사례 한 개를 준비합니다.

직접 확인할 것 · 아래 실습을 연습에 활용해 보세요.

사례 한 개를 문제·담당 범위·구현·결과의 네 문단으로 정리하세요.

실제 경험과 가정을 구분하고 확인 가능한 화면·코드·측정 근거를 연결합니다.