Cycle 2
프론트엔드 기술 셋 개요
프론트엔드는 사용자가 직접 보는 화면을 만드는 영역입니다. 이 페이지는 "어떤 프레임워크를 먼저 배우면 덜 헤매는지"를 초보자 기준으로 정리합니다. 구현 코드를 따라치는 페이지가 아니라, 학습 순서와 판단 기준을 잡아주는 안내서입니다.
이 페이지를 이렇게 활용하세요
- 처음이면 React(Lv.1)부터 시작
- React가 익숙해지면 Vue(Lv.2)로 같은 기능을 다시 구현
- 각 레벨에서 막히면 마지막의 "자주 막히는 지점"부터 확인
레벨 구조 (무엇을 배우는가)
초보자가 덜 헷갈리는 학습 순서
1. 화면 구성 (컴포넌트)
버튼/목록/폼을 작은 조각으로 나누어 만드는 감각을 먼저 잡습니다. 이 단계가 약하면 이후 상태 관리와 라우팅에서 계속 꼬입니다.
2. 데이터 흐름 (state, props, API)
"어떤 값이 어디서 만들어지고 어디로 전달되는지"를 추적하는 연습입니다. 프론트엔드 디버깅의 80%는 데이터 흐름 이해에서 해결됩니다.
3. SPA 라우팅 (페이지 전환 + 새로고침)
URL은 바뀌는데 전체 페이지는 새로 불러오지 않는 구조를 이해합니다. 배포 후 새로고침 404 문제를 예방하려면 이 개념을 반드시 먼저 잡아야 합니다.
자주 막히는 지점
컴포넌트는 만들었는데 화면이 안 바뀜
대부분 state 변경 방식(불변성)이나 props 전달 경로 문제입니다.
로컬은 되는데 배포 후 링크에서 404
SPA 라우팅 리다이렉트 설정(`_redirects`)이 누락된 경우가 많습니다.
다음 액션 (바로 시작)
마지막 업데이트: 2026년 2월 22일 · 버전: v0.0.1
피드백 보내기
입력한 내용으로 새 이슈 페이지를 엽니다.
GitHub 이슈로 보내기