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

🗝️소프트웨어

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

Dev.Op 2022. 10. 29. 15:48

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

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

공부한 내용들에 대해서

✅

표시할 것~^^

공부해야할 것들

높은 우선순위

인프런 - 파이썬/장고 웹서비스 개발 완벽 가이드 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배포및테스트

저작자표시