프론트엔드 분야는 변화가 빠르고 새롭고 흥미로운 기술들이 끊임없이 등장하는 만큼, 꾸준한 학습과 실습이 무엇보다 중요합니다.
작은 예제부터 실무 수준의 프로젝트까지 다양한 과제를 경험해 보면, 해당 기술을 이해하는 데 큰 도움이 됩니다.
최근에 팀원들의 역량강화를 위해 커리큘럼을 준비하고 있는데요.
이번 글에서는 프론트엔드 개발 역량을 단계적으로 쌓을 수 있는 100가지 과제를 카테고리별로 정리해보았습니다.
1. HTML & CSS 기초 (1~10)
1. 시맨틱 태그 익히기
• <header>, <nav>, <section> 등을 활용해 자기소개 페이지를 만들어 보세요. 제목, 단락, 리스트 등 시맨틱 태그로 문서를 구조화하면 SEO와 접근성에 유리합니다.
2. CSS 박스 모델 체험
• 여러 개의 박스 요소에 패딩, 마진, 보더 등을 각각 다르게 적용해 시각적으로 어떻게 달라지는지 확인해 보세요.
3. Flexbox 레이아웃 구성
• 헤더, 네비게이션, 메인, 푸터를 모두 Flexbox만으로 나열하는 1페이지 사이트를 만들어 봅니다.
4. Grid로 갤러리 만들기
• CSS Grid로 이미지 혹은 카드 형태의 갤러리를 구성해 봅니다. grid-template-columns와 gap 등을 활용해 화면을 구성해 보세요.
5. 반응형 웹 디자인
• 미디어 쿼리를 써서 모바일, 태블릿, 데스크톱 해상도별로 레이아웃이 달라지는 페이지를 만들어 보세요.
6. 폼(Form) 유효성 검사
• 이메일 입력 폼 등에서 HTML5 속성(required, pattern 등)을 사용해 기본적인 유효성 검사를 적용해 봅니다.
7. 트랜지션과 애니메이션
• 버튼 호버 시 색이 부드럽게 바뀌거나, 특정 요소가 페이드 인/아웃되는 애니메이션을 CSS로 만들어 보세요.
8. 의사 클래스·의사 요소 연습
• :hover, :focus, ::before, ::after 등을 활용해 시각적 효과와 콘텐츠를 추가해 봅니다.
9. 시맨틱 구조 강화
• <article>, <aside>, <footer> 등 HTML5 태그로 웹 페이지를 구성하고, 각각의 의미를 살려 보세요.
10. 접근성(A11y) 고려
• 이미지에 alt 텍스트 넣기, 폼 요소에 라벨 연결하기, 색 대비 확인 등 접근성을 고려한 페이지를 만들어 봅니다.
2. JavaScript 기초 (11~20)
11. 변수·상수 제대로 알기
• var, let, const의 스코프와 재할당 가능 여부를 비교해 보고, 각 특징을 코드로 실습해 보세요.
12. 데이터 타입과 형 변환
• 문자열·숫자·불리언 등을 자유롭게 변환하고, typeof로 타입을 확인하는 스크립트를 작성해 봅니다.
13. 제어문 연습
• 1부터 100까지 반복하며, 3의 배수일 때만 다른 문구를 출력하는 for 혹은 while문 코드를 만들어 보세요.
14. 함수(Function) 기본기
• 화살표 함수, 함수 선언식, 함수 표현식 등 다양한 방식으로 함수를 작성해 보면서 차이를 확인해 봅니다.
15. 스코프(Scope)와 클로저(Closure)
• 내부 함수가 외부 함수의 변수를 참조해 사용하는 예시 코드를 만들어, 클로저 특성을 경험해 보세요.
16. 배열 조작 메서드
• push, pop, shift, unshift 등을 사용해 간단한 큐나 스택을 흉내 내는 코드를 작성해 봅니다.
17. 고차 함수(map, filter, reduce)
• 배열 데이터를 변환하거나 집계할 때 map, filter, reduce를 활용해 최소한의 코드로 원하는 결과를 얻어 보세요.
18. 객체(Object) 다루기
• 중첩된 객체를 생성·조회·수정하는 코드를 작성해 보고, for...in 등을 사용해 키를 순회해 봅니다.
19. 표준 라이브러리 이해
• Date 객체로 현재 시간이나 특정 날짜를 다뤄 보고, Math 객체로 난수 생성 등도 시도해 보세요.
20. DOM 제어 기초
• 버튼 클릭 시 DOM 요소가 생성·삭제되거나 스타일이 변경되는 간단한 예제를 작성해 봅니다.
3. TypeScript (21~30)
21. TypeScript 프로젝트 셋업
• tsconfig.json을 생성하고 컴파일해 실행해 보기. ESNext 기능이 어떻게 변환되는지 확인해 보세요.
22. 기본 타입 지정
• string, number, boolean, any, unknown 등을 코드로 테스트해 보고, 에디터에서 뜨는 에러 메시지를 살펴봅니다.
23. 인터페이스와 객체 타입
• 인터페이스를 이용해 객체 구조를 정의하고, 실제 객체가 이를 만족하는지 실습해 봅니다.
24. 함수의 타입 주석
• 파라미터와 리턴 타입을 명시한 함수를 만들고, 컴파일러가 타입 오류를 어떻게 잡아내는지 체험해 봅니다.
25. 제네릭(Generics)
• 재사용 가능한 함수나 클래스에 제네릭을 적용해 다양한 타입에 대응해 보세요.
26. 클래스와 상속
• 부모 클래스를 만들고, 자식 클래스가 이를 상속 받아 메서드를 오버라이드하도록 구성해 봅니다.
27. 접근 제한자(public, private, protected)
• 클래스에서 private로 선언된 속성을 외부에서 직접 접근하지 못하도록 설정해 보세요.
28. getter/setter
• 값을 읽고 쓸 때 검증이나 변환 로직을 넣기 위해 클래스에 getter, setter를 작성해 봅니다.
29. 모듈 시스템
• ES 모듈(import, export)로 여러 파일 간 코드를 나누고, 각 파일이 어떻게 상호작용하는지 학습해 봅니다.
30. 유니온 타입과 타입 가드
• string | number 같이 여러 타입을 허용하는 경우, 런타임에 타입 판별(typeof)로 분기 처리해 보세요.
4. 비동기 처리·API (31~40)
31. Promise 기초
• fetch나 가짜 비동기 함수를 만든 뒤, then과 catch 체인을 통해 결과를 처리해 봅니다.
32. async/await
• 동일한 로직을 async/await과 Promise 체인 방식 두 가지로 작성해, 가독성을 비교해 보세요.
33. 에러 핸들링
• try/catch 구조로 오류가 발생했을 때 사용자에게 메시지를 보여주는 간단한 예제를 만들어 봅니다.
34. 여러 API 동시 호출
• Promise.all을 사용해 여러 개의 API를 병렬로 호출해 보고, 결과를 한꺼번에 처리해 보세요.
35. AXIOS 사용
• axios 라이브러리를 설치해 GET/POST 요청을 보내 보고, 응답을 React나 Vue 컴포넌트에서 처리해 봅니다.
36. REST API 연습
• 간단한 CRUD 기능을 하는 서버(혹은 Mock API)에 GET/POST/PUT/DELETE를 요청해 보고, 결과를 화면에 뿌려 주세요.
37. GraphQL 기초
• 공개된 GraphQL API에 쿼리나 뮤테이션을 요청해 보고, JSON 형태로 반환되는 데이터를 확인합니다.
38. JSON 데이터 렌더링
• 서버에서 받아온 JSON을 HTML 리스트나 테이블 형태로 가공해 표시해 봅니다.
39. CORS 원리 이해
• 다른 도메인에서 API를 호출할 때 CORS 에러가 나는 상황을 재현하고, Access-Control-Allow-Origin 등을 확인해 보세요.
40. WebSocket 체험
• WebSocket 서버(또는 Firebase 같은 서비스)를 통해 실시간으로 메시지를 주고받는 작은 채팅 UI를 구현해 봅니다.
5. React 기초 (41~50)
41. Create React App으로 시작
• 빠르게 개발 환경을 구성하고, npm start로 브라우저에서 초기 화면을 확인해 봅니다.
42. 컴포넌트 분리
• 부모 컴포넌트에서 자식 컴포넌트로 props를 전달하고, 자식은 이를 화면에 렌더링하도록 만들어 보세요.
43. useState 사용
• 버튼을 클릭할 때마다 숫자가 증가하는 카운터 컴포넌트를 만들어, 상태 변경 흐름을 익힙니다.
44. useEffect 기초
• 컴포넌트가 마운트될 때 서버에서 데이터를 가져와 화면에 표시해 보세요.
45. 이벤트 처리
• 폼에 입력된 텍스트를 실시간으로 상태에 저장하고, 제출 시 콘솔에 출력해 봅니다.
46. 컴포넌트 재렌더링 분석
• 부모 상태가 변할 때 자식 컴포넌트가 불필요하게 렌더링되지 않는지 확인하고, 성능도 체크해 봅니다.
47. 커스텀 훅(Custom Hook)
• 공통 로직을 별도의 훅으로 분리해, 여러 컴포넌트에서 재사용할 수 있도록 만들어 보세요.
48. React Router
• SPA 형태로 여러 페이지를 구성하고, URL에 따라 다른 컴포넌트를 표시하는 라우팅 기능을 구현합니다.
49. Context API
• 전역 상태를 Context로 관리하고, 깊은 자손 컴포넌트까지 데이터를 전달하거나 업데이트해 보세요.
50. React + TypeScript
• TypeScript를 도입해 컴포넌트의 props와 state에 타입을 적용하고, 에디터에서 제공되는 자동 완성과 에러 검사를 체험해 봅니다.
6. Vue 기초 (51~60)
51. Vue CLI 혹은 Vite 프로젝트 생성
• Vue 3 프로젝트를 간단히 세팅하고, Hello World 화면을 띄워 봅니다.
52. 템플릿 문법과 반응형 데이터
• {{ }} 구문으로 data에 있는 변수를 표시하고, 값이 바뀌면 실시간으로 DOM이 갱신되는 과정을 살펴보세요.
53. v-bind / v-if / v-for / v-model
• Vue 디렉티브의 기본 패턴을 여러 가지 예제(리스트, 폼 입력, 조건부 렌더링 등)로 익혀 봅니다.
54. 컴포넌트 구조화
• 부모 자식 간에 props와 emit을 사용해 데이터를 주고받는 간단한 예제를 작성해 보세요.
55. 라이프사이클 훅(onMounted 등)
• Vue 3에서 제공하는 라이프사이클 훅을 사용해, 컴포넌트 초기화나 정리 작업을 시도해 봅니다.
56. Composition API
• Vue 3 고유의 Composition API를 이용해 setup 함수 안에서 reactive, ref 등을 정의하고, 로직을 분리해 보세요.
57. Vue Router
• 라우팅을 추가해, 여러 페이지가 하나의 Vue 앱 안에서 전환되는 SPA를 구성합니다.
58. Pinia 또는 Vuex
• 상태 관리 라이브러리를 도입해, 다수의 컴포넌트가 전역 상태를 공유하고 업데이트하게 만들어 보세요.
59. API 호출과 에러 처리
• axios로 서버에서 데이터를 가져오고, 실패할 때 메시지를 보여주는 로직을 구현해 봅니다.
60. Vue + TypeScript
• TypeScript 기반 Vue 3 프로젝트를 설정해 .vue 파일에서 타입 지원을 받고, 컴포넌트 로직에 타입을 적용해 봅니다.
7. 애플리케이션 구축 (61~70)
61. 간단한 Todo 앱
• 추가, 삭제, 완료 체크가 가능한 Todo 리스트를 만들어, 가장 기초적인 CRUD와 상태 관리를 연습합니다.
62. CRUD 앱 확장
• 로컬 스토리지나 Mock API를 이용해 데이터 생성(C), 읽기(R), 수정(U), 삭제(D)을 처리하고 화면에 반영해 보세요.
63. 인증 기능 구현
• 로그인 페이지를 만들고, 토큰이나 쿠키를 통해 사용자의 로그인 상태를 관리하는 간단한 방식을 시도합니다.
64. 대시보드 UI
• 차트 라이브러리(Chart.js 등)를 활용해 통계 그래프나 리스트가 있는 대시보드를 구성해 봅니다.
65. 이미지 업로드 & 미리보기
• 파일을 업로드하기 전에 화면에서 미리 확인할 수 있는 기능을 구현해, 폼 다루는 법을 익혀 보세요.
66. 디버깅 툴 활용
• 브라우저의 DevTools에서 Network, Performance 등 항목을 살펴보고, 자잘한 문제를 해결해 봅니다.
67. SPA 라우팅 관리
• URL 이동 시 서버가 아닌 클라이언트 라우터가 적절히 대응하도록 설정해, 페이지 전환 속도를 높여 보세요.
68. 서버 사이드 렌더링(SSR)
• Next.js나 Nuxt.js 같은 프레임워크를 사용해, 초기 페이지 로드를 서버에서 처리하는 방식을 체험해 봅니다.
69. 실시간 기능(WebSocket/Firebase 등)
• 채팅앱 혹은 알림 시스템처럼, 서버에서 변경 사항이 생길 때마다 자동으로 반영되는 기능을 개발해 보세요.
70. 다국어(i18n) 적용
• 화면 문구를 여러 언어로 전환할 수 있게 만들고, 한국어/영어/일본어 등을 스위치로 바꿔 보세요.
8. 테스트 & 품질 관리 (71~80)
71. 유닛 테스트 환경 세팅
• Jest나 Vitest 등을 설치해 간단한 함수 로직을 테스트하고, 테스트 스크립트를 돌려 봅니다.
72. 컴포넌트 테스트
• React Testing Library나 Vue Test Utils를 써서, 특정 컴포넌트가 기대한 대로 렌더링되는지 확인해 봅니다.
73. 스냅샷 테스트
• UI가 변경될 경우 테스트에서 감지하도록, 스냅샷을 생성하고 비교하는 방식을 익혀 보세요.
74. E2E 테스트
• Cypress나 Playwright를 사용해 실제 브라우저 상에서 사용자 행동을 자동화하고, 결과를 검증합니다.
75. Lint & Format 도입
• ESLint, Prettier를 설정해 일관된 코드 스타일을 유지하고, 사소한 문법 오류를 예방합니다.
76. Git Hooks 연동
• Husky 등을 사용해 커밋이나 푸시 전 자동으로 테스트와 린트가 실행되도록 세팅해 봅니다.
77. 타입 정의 파일 점검
• TypeScript 사용 시, 외부 라이브러리에 대한 @types 정의가 올바른지, 오류가 없는지 살펴봅니다.
78. 테스트 커버리지 측정
• 커버리지 도구(예: Istanbul)로 어떤 부분이 테스트가 부족한지 파악해 보세요.
79. 버그 트래킹 & 이슈 관리
• GitHub Issues나 Jira를 사용해 버그를 등록하고, 해결 과정과 테스트 케이스를 연결해 협업해 봅니다.
80. CI(Continuous Integration)
• GitHub Actions 같은 CI 툴을 이용해 Pull Request마다 자동으로 테스트를 수행해 품질을 점검합니다.
9. 퍼포먼스 최적화 (81~90)
81. 이미지 최적화
• Lazy Loading을 적용해 이미지가 화면에 등장하기 직전에 로드되도록 설정해 봅니다.
82. 코드 분할(Code Splitting)
• Webpack이나 Vite에서 특정 라우트나 모듈을 별도 번들로 분리하고, 필요할 때만 로드하도록 구성합니다.
83. 캐싱 전략 수립
• 브라우저 캐시나 Service Worker를 활용해 리소스 재다운로드를 최소화하고, 오프라인 지원도 고려해 봅니다.
84. Critical Rendering Path 단축
• CSS, JS 로드 순서를 최적화해 초기 렌더링을 빠르게 하는 방안을 실험해 보세요.
85. Lighthouse 점수 개선
• Chrome DevTools에서 Lighthouse를 돌려 보고, 성능, 접근성, SEO 점수를 올리기 위해 필요한 액션들을 해 봅니다.
86. 웹 폰트 최적화
• 웹 폰트를 지연 로드하거나, 폰트 표시 전략(FOUT/FOIT)을 제어해 레이아웃이 튀지 않도록 설정합니다.
87. HTTP/2, HTTP/3 이해
• 서버 설정에 따라 어떻게 전송 속도가 달라지는지 간단히 확인해 보세요.
88. 이미지 포맷 비교
• PNG, JPEG, WebP, AVIF 등을 비교하고, 각각의 파일 크기와 화질 차이를 테스트합니다.
89. PWA(Progressive Web App) 시도
• 웹 앱 매니페스트와 Service Worker를 추가해, 설치 가능하고 오프라인에서도 동작하는 앱을 만들어 봅니다.
90. 재렌더링 최적화
• React의 memo, Vue의 computed 등을 사용해 불필요한 렌더링을 줄이고, 성능 차이를 체감해 보세요.
10. 응용·실무 스킬 (91~100)
91. UI 라이브러리 활용
• Material UI, Vuetify, Chakra UI 등에서 제공하는 컴포넌트로 페이지를 간단하게 구성해 봅니다.
92. 디자인 툴 연동
• Figma나 Adobe XD에서 내보낸 디자인 파일을 참고해, 실제 마크업을 최대한 똑같이 재현해 봅니다.
93. 모듈 번들러(Webpack, Vite) 이해
• 직접 구성 파일을 작성해 리소스를 합치고 압축해 보는 과정을 체험해 보세요.
94. Git 브랜치 전략
• Git Flow나 trunk-based 개발 방식을 가상으로 적용해 보고, 협업 시 충돌을 어떻게 해결할지 연습합니다.
95. 코드 리뷰 문화 정착
• Pull Request 템플릿을 만들어, 리뷰어가 어떤 부분을 중점적으로 봐야 할지 안내하고, 체계적으로 피드백을 주고받습니다.
96. 보안 대책(XSS, CSRF 등)
• 입력 폼에 스크립트 태그를 삽입하는 시나리오를 테스트해 보고, 이를 방어하는 법을 알아봅니다.
97. 에러 모니터링 도구 연동
• Sentry나 Datadog을 붙여, 런타임 에러가 발생했을 때 바로 알림을 받거나 로그를 분석할 수 있도록 해 봅니다.
98. 지속적 배포(CD)
• Netlify, Vercel, GitHub Pages 등을 이용해 특정 브랜치에 머지되면 자동 빌드·배포가 이루어지도록 설정합니다.
99. i18n 확장
• 단순 번역뿐 아니라, 날짜/시간/통화 등 로케일별 포맷도 자동 처리되도록 구현합니다.
100. 협업형 프로그래밍(Mob/Pair)
• 팀원과 동시에 한 코드베이스를 공유해 실시간으로 수정·의견을 교환하면서 개발해 봅니다.
'IT 노트 > 프론트엔드스킬업' 카테고리의 다른 글
| 프론트엔드엔지니어가 갖춰야할 모션그래픽기술 (1) | 2025.02.28 |
|---|