Frontend 트랙

사용자 인터페이스를 구축하고 웹 애플리케이션을 개발합니다.

Frontend Backend Android iOS Design Game Data Analyst Product Manager Security

WHAT WE STUDY

확장성과 재사용성을 고려한 엔지니어링

React를 활용한 컴포넌트 기반의 UI 개발

새로운 기술 토픽 공유

지속적으로 발전하는 웹 트렌드에 맞춰 최신 기술 도입을 논의하고, 이를 프로젝트에 적용

사용자 경험 향상

웹 접근성, 크로스 브라우징, 검색엔진 최적화, 그리고 개인화된 경험 제공

Frontend 비기너
커리큘럼을 소개합니다

1주차

1

FrontEnd는 무엇을 배우는 것인가? (역할과 이해)

2

HTML

HTML이 뭘까?

Tag, Element, Attribute

HTML 문서 구조 (head, body)

3

CSS

CSS가 뭘까? (구조, 적용방식)

BOX Model

CSS Layout

2주차

1

JavaScript

표준 내장 객체

식, 연산자

선언문

함수와 화살표 함수

2

TypeScript

3주차

1

DOM

HTML 데이터 읽기, 변경

템플릿 리터럴

2

BOM

브라우저 API

BOM 객체

3

Event

Event binding

이벤트 종류와 객체

흐름과 제어

4주차

1

웹 동작 방식

웹 서버와 클라이언트

URL

HTTP

2

동기/비동기

Event Loop

3

AJAX, JSON

4

RESTful API

5

JS 비동기

callback

Promise, async/await

Fetch API, axios

debounce, throttle

6

loading

placeholder data, skeleton

lazy loading

5주차

1

Interactive Web 실습

6주차

1

FE Framework

2

node.js

3

Webpack

4

package manager

npm, pnpm

yarn, yarn berry

5

렌더링 방식

SPA, MPA

CSR, SSR

6

실습 : React 프로젝트 만들기

Vite

프로젝트 배포 (github actions, CI/CD)

package.json

구조 학습

7주차

1

Virtual DOM

2

JSX

html과의 차이

규칙과 attribute 작성

props 전달

event handling

key

3

Component(Class, Function)

4

Hooks

5

State

useState

불변성

6

Life Cycle

react의 life cycle

useEffect

7

ref

useRef

8주차

1

React router

React Router DOM

useParams

useLocation

useNavigate

2

React 스타일링

BEM이란?

React 스타일링 방법

(CSS module, Styled Components, Emotion, tailwind)

9주차

1

Component

조합과 상속

제어와 비제어

2

Reusing

HOC

Context API

Compound pattern

Custom Hooks

3

side Effect

4

React Fragment

5

Portal

10주차

1

useContext, useReducer

2

메모이제이션

useMemo

useCallback

3

라이브러리

Zustand

Recoil

Redux Toolkit

Jotai

11주차

1

useEffect 활용

2

api 모듈화

3

Fetching state, Server state

tanstack query

useSWR

4

Suspense

5

Error Boundaries

12주차

1

프로젝트에 TS 환경 추가하기

props, element, event type

hook, tanstack query type

2

브라우저 저장소

localStorage

sessionStorage

Cookie(jwt, session)

3

Fetching state, Server state

tanstack query

useSWR

4

Suspense

5

Error Boundaries

13주차

1

React 실습

배운 내용 바탕으로 React 프로젝트 진행

14~17주차

1

Frontend 개인 프로젝트

18주차

1

Frontend 응용 - 회고

사용하는 기술스택

함께 할 멤버들

REGULAR

김민재

REGULAR

김혜준

REGULAR

김도훈

REGULAR

정해성

REGULAR

곽승주

REGULAR

서예진

REGULAR

조정원

REGULAR

최정훈

REGULAR

김대관

REGULAR

심윤섭

REGULAR

채승윤

REGULAR

이해루

REGULAR

김대의

REGULAR

김하나

REGULAR

윤해진

REGULAR

정민구

REGULAR

이준영

REGULAR

박성주