Kimyerim1935 / JavaScript_session

프로그래머스 프론트엔드 세션을 들으며 실습한 내용입니다.

프로그래머스 - 프론트엔드 개발을 위한 자바스크립트 (feat. VanillaJS)

세션을 들으며 진행했던 과제를 모아둔 레포입니다.

🗓 Chapter 1

첫 번째 미션: ES6 문법을 활용해 JS로 한 페이지(SPA)에서 동작하는 TodoApp 만들기

UI 구현 요청사항이 들어왔는데, 내가 직접 만들 줄을 몰라 외부 라이브러리 스펙에 맞춰야만 한다면? 특수한 상황을 제외하고서는 정상적인 개발 프로세스라고 보기 어렵다. 이 미션에서는 SPA 기반의 TodoApp을 제작하고, 화면 구성 컴포넌트를 모두 JS로만 만들어본다.

다룰 내용

• ✅ JS를 활용해 화면 컴포넌트를 직접 만들기
• ✅ 헷갈리는 this 제대로 활용하는 법
• ✅ Closure, Context

[첫 세션] 9/5 20:00~

🗓 Chapter 2

두 번째 미션: TodoApp 기능 강화해주기

1주차 때 구현한 TodoApp은 컴포넌트만 그려진, 기본적인 기능이 없는 상태였다. 여기에 수정, 삭제 기능 등을 통상적인 TodoApp이 가져야 할 기능을 구현해주며, Event 에 대해 자세히 배워본다.

다룰 내용

• ✅ addEventListner, removeEventListner
• ✅ 이벤트가 복잡해질 때 꼭 알아야 할 Bubbling, Capturing
• ✅ Event Deligation
• ✅ Custom Event

🗓 Chapter 3

세 번째 미션: 비동기적 처리를 위한 공연 검색기 제작

fetch, Promise, await를 중심으로 이디어츠 공연 검색기를 만들어봅니다. 리더가 하고 있는 밴드 이디어츠의 공연을 검색해서 공연 포스터 이미지를 비동기적으로 화면에 뿌려줍니다.

다룰 내용

• ✅ fetch API를 이용해, 이디어츠 공연 API와 연동하여 각종 포스터 모셔오기
• ✅ 모셔온 포스터들을 비동기적으로 화면에 그려주기
• ✅ fetch, Promise, await
• ✅ callback 방식에 대한 이해

🗓 Chapter 4

마지막 미션: 미니 트렐로(Trello) 만들기

1~3주차에 배운 내용들을 전반적으로 활용하여 트렐로의 기본 기능을 그대로 구현해보자. 리더가 주어주는 API를 활용해 dummy Todo 목록을 화면에 그리고 시작. 보너스 미션도 놓치지 말자!

다룰 내용

• ✅ 드래그를 통한 상태 변경, 투두 내용 추가/수정/삭제 등 트렐로 기본 기능 구현
• ✅ 1주차에 배운 JS로 컴포넌트 그리기, 2주차의 비동기 처리, 3주차의 Event 처리 기법 등을 모두 활용한다.
• ✅ 보너스 미션! 직접 서버에 Todo 내용을 전달하는 기능 구현하기