웹 개발 주간 6차 요약

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

- 대상자: 프론트엔드 개발자 (React 학습 중인 중급자)

- 난이도: React 기초 개념을 익힌 후 실무 연습이 필요한 단계

핵심 요약

• Scrimba의 "Learn React" 코스 (https://scrimba.com/learn-react-c0e)는 React 핵심 개념을 실습 중심으로 제공
• FrontendMentor에서 제공하는 4가지 주요 프로젝트:

- four-card-feature-section

- tip-calculator-app

- mortgage-repayment-calculator

- maker-pre-launch-landing-page

• 프로젝트 리소스는 GitHub 저장소 (https://github.com/UPinar/frontend_mentor)에 공개

섹션별 세부 요약

1. 학습 자료 (Tutorials)

• Scrimba의 React 코스는 상태 관리, 컴포넌트 분리, JSX 문법 등 기초부터 실무 적용까지 커버
• 코스는 코드 편집기 기반 실시간 학습이 가능하며, 예제 코드 제공
• 코스 완료 후 FrontendMentor 프로젝트를 통해 실습 강화

2. 프로젝트 리소스 (Resources)

• four-card-feature-section: 반응형 레이아웃과 CSS 애니메이션 구현 예제
• tip-calculator-app: 상태 관리와 입력 처리 로직에 초점
• mortgage-repayment-calculator: 수학적 계산 로직과 UI 연동
• maker-pre-launch-landing-page: 랜딩 페이지 디자인과 라우팅 구현

3. 추가 콘텐츠

• advice-generator-app: API 연동과 랜덤 데이터 처리 실습
• GitHub 저장소에는 각 프로젝트의 최종 코드와 중간 작업 파일이 포함
• 챌린지 완료 후 코드 리뷰 및 피드백을 통해 개선 가능

결론

• React 학습과 프로젝트 연습을 결합해 실무 기술을 향상시키는 것이 핵심
• Scrimba 코스를 통해 이론을 학습한 후 FrontendMentor 챌린지로 실전 적용
• GitHub 저장소의 코드를 기반으로 협업 및 테스트 환경 구축 권장