
Figma 참조 - 반응형 쇼핑몰 웹사이트 만들기 완벽 가이드
이지웹
html,css, javascript(jquery) 기초가 있으신가요? 그런데 전체 웹사이트 전체를 어떻게 만들지 잘 모르시나요? 그렇다면 디자인을 참조해서 쇼핑몰 메인페이지 구현을 도전해보세요. 완성된 디자인을 참조하고 기획 의도와 디자인의 상세한 사항들을 파악하여 웹사이트를 구현하는 노하우를 알려드립니다.
초급
Figma, HTML/CSS, JavaScript
React + TypeScript를 활용하여 실무 감각으로 “할 일 관리 앱(ToDo List)”을 직접 만드는 프로젝트 중심 과정입니다. 단순히 문법을 배우는 데 그치지 않고, 컴포넌트 구조 설계 → 상태 관리 → 타입 적용 → 기능 구현 → 로컬 스토리지 연동 → 배포까지 실제 서비스 형태로 완성하면서 타입스크립트의 활용 감각을 익힐 수 있습니다.
React + TypeScript 개발 환경 구성
UI 컴포넌트 구조 설계 및 상태 관리 기초
할 일 추가 / 완료 / 삭제 기능 구현
타입스크립트 활용 로직 최적화
리팩터링과 유지보수에 강한 코드 구조 설계
학습 대상은
누구일까요?
TypeScript를 학습했지만 실제 프로젝트에 적용해보지 못한 분
React로 간단한 앱을 만들어봤지만 타입 안정성이 없는 코드에 불안감을 느끼는 분
포트폴리오용 React + TypeScript 미니 프로젝트를 완성하고 싶은 분
실무에서 요구되는 컴포넌트 기반 설계와 상태 관리의 기본기를 다지고 싶은 프런트엔드 입문자
선수 지식,
필요할까요?
html/css
javascript
typescript
2,615
명
수강생
54
개
수강평
3
개
답변
4.9
점
강의 평점
10
개
강의
■ [현재] 그린컴퓨터아트학원 웹퍼블리싱, 프론트엔드 강의
■ [현재] 웹 퍼블리싱 유튜브 채널 'Rock's Easyweb' 운영
■ 더조은 컴퓨터아카데미 웹 퍼블리싱 강사
■ 한빛 컴퓨터아카데미 웹 퍼블리싱 강사
■ 프론트엔드 퍼블리셔, 프론트엔드 퍼블리싱 전문강사
■ UI/UX 웹 디자인 포트폴리오 강의
[ 도서 ]
2021.07.19 출간 / 웹디자인 & 웹퍼블리싱을 위한 피그마 완벽 활용서 / 비제이퍼블릭
2022.08.25 출간 / 코딩을 처음이라 with 웹 퍼블리싱 / 영진출판사
2023.10 출간 /2024 SD에듀 유선배 웹디자인기능사 실기 과외노트 / 시대고시기획
2024.11 재판 /2025 SD에듀 유선배 웹디자인기능사 실기 과외노트 / 시대고시기획
[ 수상경력 ]
2022.08 그린컴퓨터 아트 학원 종로지점 - 우수강사 2021.06 그린컴퓨터 아트 학원 종로지점 - 우수강사 2018.06 그린 컴퓨터아카데미 신촌 지점 - 우수강사 2017.05 그린 컴퓨터아카데미 신촌 지점 - 우수강사 2016.05 그린 컴퓨터아카데미 신촌 지점 - 우수강사 2015.10 그린 컴퓨터아카데미 신촌 지점 - 우수강사
전체
14개 ∙ (3시간 23분)
해당 강의에서 제공:
1. 앱생성 및 공통 타입 설정
18:56
2. UI 생성
07:20
3. 타입활용 할일 목록 변수 생성
14:11
4. 새글입력 함수
26:15
5. 할일 완료/미완료 전환 함수
27:39
6. 수정, 삭제 함수
10:27
7. 할일 입력
25:37
8. 할일 출력
08:58
9. 할일 수정 - UI 구현
25:31
10. 할일 체크하기
07:04
11. 할일 수정하기
10:06
12. 할일 삭제하기
08:08
13. 앱 리뷰
07:46
14. 앱 배포 - vercel
05:49
2025 블랙 프라이데이 깜짝 연장 할인 중 (1일 남음)
₩24,750
25%
₩33,000
지식공유자님의 다른 강의를 만나보세요!
같은 분야의 다른 강의를 만나보세요!