10/22 어느 프론트엔지니어의 하루

이제부터는 할 일을 선정하고, 해당 내용을 얼마나 잘 완수하는지 하루하루 점검하자.

---

---

공부해야할 것들

• 높은 우선순위

스파르타 코딩 클럽 - 이모티콘 프로필 만들기

패스트캠퍼스 - Vue.js 강의 Slot 부터 시작 ~  전체 110여개..

 

• 중간 우선순위

패스트캠퍼스 - 자바스크립트 Essential 강의 28개 듣고 정리하기

유튜브 - 도커 따라하기 강의 듣고 정리하기

 

목표 학습 시간 : 12시간

 

---

+ 크롤링

+ RPA

Part 3. JavaScript Essentials

• Ch 2. JS 시작하기

 

01. 개요(ECMAScript) 및 프로젝트 초기화10:30✅

 

 

02. 데이터 타입 확인15:17✅

 

 

03. 산술, 할당 연산자7:27✅

 

 

04. 비교, 논리 연산자14:07✅

 

 

05. 삼항 연산자3:30✅

 

 

06. 조건문 If Else6:39✅

 

 

07. 조건문 Switch4:11✅

 

 

08. 반복문 For11:05✅

 

 

09. 변수 유효범위5:34✅

 

 

10. 형 변환7:50✅

 

 

• Ch 3. JS 함수

 

01. 함수 복습10:38✅

 

02. 화살표 함수5:39✅

 

03. IIFE3:49✅

 

04. 호이스팅4:09✅

 

05. 타이머 함수6:42✅

 

06. 콜백4:59✅

 

 

 

[스파르타] 나만의 프로필 링크 페이지 만들기

1-1

오늘 배울 것

07:58✅

 

 

1-2

 

HTML, CSS 기초

08:13✅

 

 

1-3

 

프로필 만들기

07:13✅

 

 

1-4

 

링크 만들기

11:09✅

 

 

1-5

 

배포하기

12:04✅

 

 

[스파르타] axios 통신 방법 (복습)🖐

- 복습 완료

4-4

Flask 시작하기 - 본격 API 만들기

08:02✅

 

4-5

[화성땅 공동구매] - 프로젝트 세팅

02:09✅

 

4-6

[화성땅 공동구매] - 뼈대 준비하기

02:04✅

 

4-7

[화성땅 공동구매] - POST 연습(주문 저장)

07:32✅

 

4-8

[화성땅 공동구매] - GET 연습(주문 보여주기)✅

 

 

Ch 2. Vue 문법

19. 컴포넌트 - Provide, Inject11:48✔️

 

20. 컴포넌트 - Refs7:53✔️

Ch 3. 컴포지션API✔️

Ch 4. 영화 검색 사이트 예제

01. 개요6:39✔️

 

02. 반응형 데이터(반응성)5:40✔️

 

03. 기본 옵션과 라이프사이클18:59✔️

 

04. props, context7:23✔️

 

01. 소개3:14✔️

 

02. Vue Router 구성14:38✔️

 

03. Bootstrap 구성13:17✔️

 

04. Header - Nav18:56✔️

 

05. Header - Logo 및 Google Fonts16:03✔️

 

06. Headline12:52✔️

 

07. Search - 필터25:28✔️

 

08. Search - 버튼19:56✔️

 

09. Vuex(Store) 개요9:33✔️

 

10. Vuex(Store) 구성15:25✔️

 

11. 영화 검색22:04✔️

 

12. 영화 검색 추가 요청12:34✔️

 

13. 영화 목록에서 ID 중복 제거6:21✔️

 

14. 비동기 - 콜백과 프로미스 객체의 이해23:07✔️

 

15. 비동기 - 예외 처리(then, catch, finally)21:36✔️

 

16. 비동기 - API 비동기 처리 연습16:34✔️

 

17. 영화 검색 코드 리팩토링14:25✔️

 

18. 영화 아이템 - 기본 출력10:36✔️

 

19. 영화 아이템 - 텍스트 말줄임 표시와 배경 흐림 처리11:45✔️

 

20. Container 너비 사용자 지정6:03✔️

 

21. 에러 메시지 출력과 로딩 애니메이션14:48✔️

 

22. Footer4:06✔️

 

23. 단일 영화 상세 정보 가져오기18:27✔️

 

24. 스켈레톤 UI9:00✔️

 

25. Loader11:12✔️

 

26. 영화 상세 페이지 정리17:46✔️

 

27. Ratings 데이터 출력12:02✔️

 

28. 더 높은 해상도의 영화 포스터 가져오기6:36✔️

 

29. Vue 플러그인(이미지 로드 이벤트)23:31✔️

 

30. 영화 포스터가 없는 경우 예외 처리5:49✔️

 

31. Nav 경로 일치 및 활성화8:19✔️

 

32. About12:48✔️

 

33. 404 Page Not Found7:54✔️

 

34. 부트스트랩 Breakpoint(반응형)19:52✔️

 

35. 모든 컴포넌트에서 전역 스타일 가져오기6:20✔️

 

36. Vuex Helpers13:34✔️

 

37. Vuex 핵심 정리6:33✔️

 

38. 검색 정보 초기화 및 페이지 전환 스크롤 위치 복구6:32✔️

 

39. Vue Router 정리7:31✔️

 

40. Netlify 배포(CD)4:13✔️

 

41. SPA 개요15:36✔️

 

42. Netlify Serverless Functions11:30✔️

 

43. Netlify-CLI 구성8:46✔️

 

44. 영화 정보 반환 API 만들기20:23✔️

 

45. 로컬 및 서버의 환경 변수 구성9:37✔️

 

46. 포트 수정 및 배포5:28✔️

 

 

Ch 5. 단위 테스트

 

01. 테스트 개요3:56

 

02. 테스트 환경 구성8:41

 

03. 첫 테스트12:46

 

04. Jest Globals8:03

 

05. Jest Matchers 이해12:14

 

06. 비동기 테스트13:29

 

07. 모의(Mock) 함수21:32

 

08. VTU 첫 테스트12:46

 

09. VTU API17:36

 

10. mount vs shallowMount9:10

 

11. Header 컴포넌트24:14

 

12. Search 컴포넌트7:58

 

13. Movie 컴포넌트16:52

 

14. movie 스토어 1부16:06

 

15. movie 스토어 2부16:55

 

Ch 6. E2E 테스트

01. Cypress 설치 및 환경 구성6:56

 

02. 첫 테스트10:20

 

03. 영화 검색 시나리오 테스트17:58

 

04. Cypress API7:17

 

05. About 페이지 이동 시나리오 테스트7:32

 

06. Headless 테스트 및 테스트 동영상 생성6:01

 

07. 단위 테스트 충돌 방지 및 배포3:05

 

Ch07. Nuxt

 

01. CSR vs SSR14:08

 

02. SEO7:23

 

03. Open Graph11:26

 

04. Nuxt와 Heroku 소개12:51

 

05. Nuxt 프로젝트 생성 및 기존 프로젝트(Vue2) 가져오기7:15

 

06. 프로젝트 이전(Migration) 1부17:15

 

07. 프로젝트 이전(Migration) 2부17:40

 

08. Server Middleware로 백엔드 API 만들기 1부18:33

 

09. Server Middleware로 백엔드 API 만들기 2부18:46

 

10. 동적으로 Meta 정보 생성하기10:18

 

11. Heroku 배포 및 테스트12:06