[10/29] 어느 프론트엔지니어의 일주일

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

 

이번주 완수해야 할 공부 목록들이다.

 

공부한 내용들에 대해서

 

✅

 

표시할 것~^^

---

---

공부해야할 것들

• 높은 우선순위

인프런 - 파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트

패스트캠퍼스 - Vue.js 강의(110여개) ~  전체 110여개

패스트캠퍼스 - CSS framework Bootstrap(10여개)

• 중간 우선순위

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

netlify 이용해서 스타벅스 홈페이지 꾸미기

크롤러 스케쥴러 완성하기(크롤러 제작 ✅, 파일 수집 ✅, 엑셀 변환 함수 ✅, 스케쥴러 미완성) 

 

목표 학습 시간 : 12시간

 

---

[인프런] 파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트 

• 오리엔테이션

  • 웹 프레임워크의 필요성과 장고에 대한 소개

    15분

  • 웹 프론트엔드 패러다임의 전환과 SPA 그리고 리액트 소개

    16분
• 장고 Overview

  • 파이썬 설치 (윈도우)

    11분

  • 장고 프로젝트 생성

    9분

  • Visual Studio Code 설치

    5분

  • 장고 주요 구성요소

    9분

  • 장고앱과 블로그 코딩쇼

    15분
• 장고 Models를 활용한 데이터베이스 처리

  • 장고 모델 (ORM) 소개

    15분

  • 장고 모델 필드

    13분

  • 장고 admin을 통한 데이터 관리

    22분

  • 장고가 media 파일을 다루는 방법

    31분

  • 장고 쉘

    8분

  • 모델을 통한 조회 (기초)

    21분

  • Queryset을 통한 간단 검색 구현

    17분

  • Queryset의 정렬 및 범위 조건

    9분

  • django-debug-toolbar를 통한 SQL 디버깅

    11분

  • 관계를 표현하는 모델 필드 (ForeignKey)

    30분

  • 관계를 표현하는 모델 필드 (OneToOneField)

    12분

  • 관계를 표현하는 모델 필드 (ManyToManyField)

    15분

  • 마이그레이션을 통한 데이터베이스 스키마 관리 (1)

    20분

  • 마이그레이션을 통한 데이터베이스 스키마 관리 (2)

    12분
• 장고 Views를 활용한 HTTP 요청 처리

  • 다양한 응답의 함수 기반 뷰 (1)

    24분

  • 다양한 응답의 함수 기반 뷰 (2)

    9분

  • URL Dispatcher와 정규 표현식

    27분

  • 클래스 기반 뷰 시작하기

    21분

  • 장고 기본 CBV API (Base Views)

    20분

  • 장고 기본 CBV API (Generic display views) (1)

    15분

  • 장고 기본 CBV API (Generic display views) (2)

    12분

  • 장고 기본 CBV API (Generic display views) (3)

    5분

  • 뷰 장식자

    18분

  • 장고 기본 CBV API (Generic date views)

    24분

  • 적절한 HTTP 상태코드로 응답하기

    9분

  • URL Reverse를 통해 유연하게 URL 문자열 및 응답 생성하기

    26분
• 웹 프론트엔드 기초 및 장고에서 static 파일을 처리하는 방법

  • Overview

    24분

  • CSS (Layout) (1)

    14분

  • CSS (Layout) (2)

    16분

  • JavaScript와 jQuery

    22분

  • 휴대폰 망을 통해 로컬 개발서버에 접속하는 방법

    14분

  • 장고가 static 파일을 다루는 방법

    22분
• 장고 Forms를 활용한 효율적인 데이터 유효성 검사 및 저장

  • HTML Form

    23분

  • HttpRequest와 HttpResponse

    20분

  • Django Form

    27분

  • Cross Siste Request Forgery

    14분

  • ModelForm

    21분

  • Form Validation

    19분

  • Messages Framework

    24분

  • Form을 통한 삭제 구현

    6분

  • 장고 기본 CBV API (Generic editing views)

    25분
• 장고 기본 인증 구현하기

  • 로그인 처리

    11분

  • 사용자 프로필 페이지 및 프로필 수정

    15분

  • 템플릿 레이아웃에 링크 추가하기

    5분

  • 퀴즈를 맞춰야 로그인

    3분

  • 회원가입

    9분

  • 회원가입하자마자 로그인하기

    5분

  • 로그아웃 처리

    6분
• 비 SPA 방식으로 장고 Forms/Views를 적극 활용한 인스타그램 St 만들기

  • Overview

    11분

  • 프로젝트 생성 및 초기 프로젝트 환경설정

    33분

  • Bootstrap4를 활용한 기본 레이아웃 구현

    22분

  • 커스텀 유저 지정 및 회원가입 구현

    36분

  • 회원 가입 환영 이메일 보내기

    23분

  • SendGrid API Key 획득하고 환경변수에 저장하기

    7분

  • 로그인/로그아웃 구현 그리고 회원 가입과 동시에 로그인

    17분

  • django-pydenticon을 활용하여 프로필 디폴트 이미지 구현

    7분

  • 프로필 수정 구현과 장고3에서 추가된 TextChoices 활용

    27분

  • auth앱의 PasswordChangeForm 커스텀을 통한 암호 수정 구현

    19분

  • instagram 앱 생성과 포스팅 쓰기 구현

    27분

  • instagram post_detail 뷰 구현

    17분

  • 유저 페이지 구현

    24분

  • easy-thumbnails를 활용한 유저페이지 썸네일 처리 구현

    8분

  • Timeline sidebar 템플릿 및 스타일 구현

    19분

  • User 모델에 Follow-Unfollow 관계 필드를 구현하고, Follow 기능 구현

    20분

  • Timeline에 Follow하는 유저들의 포스팅 만을 노출하기

    6분

  • 유저페이지에서 Unfollow 구현

    8분

  • Timeline 포스팅 목록 조건에 날짜 범위 지정하기

    4분

  • 포스팅 좋아요/취소 구현

    25분

  • 장고 만으로 댓글 쓰기 구현

    19분

  • 자바스크립트없이 포스팅 화면에서 댓글 쓰기 UI 개선

    11분

  • 장고 위주로 jQuery를 통한 Ajax 댓글 쓰기 구현

    25분
• 장고 django-rest-framework (이하 DRF)를 활용한 효율적인 웹 API 만들기

  • API 서버와 REST

    35분

  • JSON 응답뷰 만들기

    36분

  • JSON 직렬화

    46분

  • APIView를 활용한 뷰 만들기

    31분

  • mixins 상속을 통한 APIView 로직 재사용

    12분

  • ViewSet과 Router

    22분

  • Renderer를 통한 다양한 응답 포맷 지원

    19분

  • Form과 Serializer 관점에서 DRF 비교

    11분

  • Serializer를 통한 유효성 검사 및 저장

    20분

  • Authentication과 Permission

    30분

  • 필터링 (Filtering)과 정렬 (Ordering)

    12분

  • 페이징 (Pagination) 처리

    4분

  • 유저/IP 별 API 최대 호출 횟수 제한하기 (Throttling)

    20분

  • Token 인증 적용하기

    17분

  • JWT 인증

    24분
• ES6+ 문법 및 리액트 기초 익히기

  • 개발환경 세팅

    28분

  • 꼭 알아야할 ES6+ 문법 (1)

    33분

  • 꼭 알아야할 ES6+ 문법 (2)

    20분

  • 순수 함수와 커링 기법

    8분

  • babel과 webpack, 그리고 create-react-app

    21분

  • CRA 프로젝트에 Ant Design 적용하기

    11분

  • 리액트 엘리먼트

    32분

  • 상탯값

    39분

  • 속성값

    19분

  • 속성값 타입 및 디폴트값 정의하기

    17분

  • 이벤트 처리하기

    21분

  • 첫 리액트 컴포넌트 만들기 (클릭 카운터)

    18분

  • CSS를 적용하는 다양한 방법

    28분

  • 샘플 Todo List

    23분

  • immer를 활용한 손쉬운 불변객체 다루기

    18분

  • 클래스 컴포넌트, 생명주기

    24분

  • 클래스 컴포넌트를 통한 에러 처리

    13분

  • Axios 라이브러리를 활용한 HTTP 요청

    29분

  • 함수 컴포넌트와 필수 Hook

    48분

  • 커스텀 Hook 만들기

    11분

  • 리듀서와 useReducer 훅

    20분

  • Context API

    25분

  • Context API와 Reducer 패턴

    13분

  • 라우터로 SPA 만들기

    37분
• 리액트와 함께 SPA 방식으로 인스타그램 만들기

  • 프로젝트 생성 및 기본 환경 설정

    28분

  • 포스팅 목록 API를 구현하고 리액트에서 받아서 표현하기

    46분

  • react-router-dom을 활용한 라우팅 처리

    22분

  • CSS Grid와 Ant Design을 활용한 레이아웃

    40분

  • 회원가입 API 만들기

    9분

  • 리액트 기본 기능으로 회원가입 폼 만들기

    26분

  • Ant Design Form을 활용한 회원가입 폼 만들기

    20분

  • 장고에 JWT 토큰 발급 붙이기

    6분

  • 로그인 폼을 만들고 로컬 스토리지에 jwt 저장하기

    11분

  • Context API와 Reducer를 활용하여 JWT Token 공유하기

    22분

  • LoginRequiredRouter 구현하기

    11분

  • 포스팅 목록 API에 JWT 인증하기

    7분

  • Suggestion 목록 API 및 화면 구현

    17분

  • useAxios 훅을 통한 보다 손쉬운 조회 API 요청

    5분

  • 유저 Follow 리액트 화면 구현

    8분

  • 유저 Follow API 구현

    10분

  • 포스팅 목록 API 및 화면 정리

    9분

  • 포스팅 쓰기 화면 및 API 구현

    46분

  • 포스팅 좋아요 화면 및 API 구현

    17분

  • 댓글 쓰기 화면 및 API 구현

    30분

  • 환경변수를 통한 API HOST 지정

    12분
• 컨테이너 기반으로 AWS/Azure 인프라에 장고/리액트 서비스 배포하기

  • Overview

    22분

  • 눈송이 서버 패턴과 피닉스 서버 패턴

    3분

  • Azure, AWS, Google의 Container 관련 서비스

    17분

  • 개발 머신에 Docker 설치하기

    21분

  • Docker 놀이터

    26분

  • Docker Hub에 빌드한 장고 이미지 올리기

    5분

  • AWS VM에서 Docker Swarm을 통한 서비스 운영

    23분

  • Azure 무료체험 구독 가입하기

    6분

  • Azure 배포를 위해 Azure Storages Accounts로의 static media 설정

    19분

  • 실서비스용으로 장고 프로젝트를 도커로 빌드하기

    19분

  • PostgreSQL DB와 연동하고 도커를 통해 마이그레이션 수행하기

    11분

  • Azure PaaS 서비스에 도커 장고 서비스 배포하기

    13분

  • 리액트 프로젝트를 Azure Storage에 배포하기

    14분

  • 감사의 말

    4분
• 보너스: 파이썬/장고 개발환경 구축하기 (2022년 버전)

  • README

    1분미만

  • 윈도우 개발환경 구축

    10분

  • 맥 개발환경 구축

    6분

  • PyCharm Professional 체험계정 활성화

    2분

  • 프로젝트 생성 및 파이참에서 이쁘게 개발하기

[패스트캠퍼스] Vue.js

• CH02. Vue문법

01.인스턴스와 라이프사이클

 

02.템플릿문법

 

03.Computed

 

04.Computed캐싱

 

05.Getter,Setter

 

06.Watch

 

07.클래스와스타일바인딩

 

08.조건부렌더링

 

09.리스트렌더링

 

10.이벤트핸들링

 

11.이벤트핸들링-이벤트수식어

 

12.이벤트핸들링-키수식어

 

13.폼입력바인딩

 

14.v-model수식어

 

15.컴포넌트-기초

 

16.컴포넌트-속성상속

 

17.컴포넌트-Emit

 

18.컴포넌트-Slot

 

19.컴포넌트-Provide,Inject

 

20.컴포넌트-Refs

 

• Ch03.컴포지션API

 

01.개요

 

02.반응형데이터(반응성)

 

03.기본옵션과라이프사이클

 

04.props,context

 

 

• Ch04.영화검색사이트 예제

 

01.소개

 

02.VueRouter구성

 

03.Bootstrap구성

 

04.Header-Nav

 

05.Header-Logo및GoogleFonts

 

06.Headline

 

07.Search-필터

 

08.Search-버튼

 

09.Vuex(Store)개요

 

10.Vuex(Store)구성

 

11.영화 검색

 

12.영화 검색 추가 요청

 

13.영화 목록에서 ID 중복제거

 

14.비동기-콜백과 프로미스 객체의 이해

 

15.비동기-예외 처리(then,catch,finally)

 

16.비동기-API 비동기 처리연습

 

17.영화 검색코드리팩토링

 

18.영화 아이템-기본출력

 

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

 

20.Container너비사용자지정

 

21.에러메시지 출력과 로딩 애니메이션

 

22.Footer

 

23.단일영화상세정보가져오기

 

24.스켈레톤UI

 

25.Loader

 

26.영화상세페이지정리

 

27.Ratings데이터출력

 

28.더 높은 해상도의 영화 포스터 가져오기

 

29.Vue플러그인(이미지 로드 이벤트)

 

30.영화포스터가없는경우예외처리

 

31.Nav경로일치및활성화

 

32.About

 

33.404PageNotFound

 

34.부트스트랩Breakpoint(반응형)

 

35.모든컴포넌트에서전역스타일가져오기

 

36.VuexHelpers

 

37.Vuex핵심정리

 

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

 

39.VueRouter정리

 

40.Netlify배포(CD)

 

41.SPA개요

 

42.NetlifyServerlessFunctions

 

43.Netlify-CLI구성

 

44.영화 정보 반환 API 만들기

 

45.로컬 및 서버의 환경 변수 구성

 

46.포트 수정 및 배포

 

 

• Ch05.단위테스트

 

01.테스트개요

 

02.테스트환경구성

 

03.첫테스트

 

04.JestGlobals

 

05.JestMatchers이해

 

06.비동기테스트

 

07.모의(Mock)함수

 

08.VTU첫테스트

 

09.VTUAPI

 

10.mountvsshallowMount

 

11.Header컴포넌트

 

12.Search컴포넌트

 

13.Movie컴포넌트

 

14.movie스토어1부

 

15.movie스토어2부

 

• Ch06.E2E테스트

 

01.Cypress설치및환경구성

02.첫테스트

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

04.CypressAPI

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

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

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

 

• Ch07.Nuxt

01.CSRvsSSR

 

02.SEO

 

03.OpenGraph

 

04.Nuxt와Heroku소개

 

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

 

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

 

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

 

08.ServerMiddleware로백엔드API만들기1부

 

09.ServerMiddleware로백엔드API만들기2부

 

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

 

11.Heroku배포및테스트