남기면 좋잖아

DRF-React Study Chapter 9. 리액트 기초 익히기 CSS를 적용하는 다양한 방법 리액트에서의 CSS 전통적인 방법 CSS를 별도 파일에 저장 link태그를 통해 웹페이지에 포함 이는 전역설정이 되며 컴포넌트 간에 예기치 않은 스타일이 적용될 수 있음 컴포넌트 중심으로 생각하고 CSS도 컴포넌트 내부에서 관리/적용 CSS파일을 직접 적용 나중에 import한 css파일로 덮어씌워질 수있음 css-module 활용 모듈방식으로 접근하기에 클래스명 중복을 방지할 수 있음 Sass 활용 설치 yarn add --dev node-sass 변수, 연산, 믹스인/인자, 중첩, 문자 보간, 임포트, 각종 함수 등을 지원 나머지는 css module 방식과 동일 css-in-js 라이브러리 중 styl..

DRF-React Study Chapter 9. 리액트 기초 익히기 CSS를 적용하는 다양한 방법 리액트에서의 CSS 전통적인 방법 CSS를 별도 파일에 저장 link태그를 통해 웹페이지에 포함 이는 전역설정이 되며 컴포넌트 간에 예기치 않은 스타일이 적용될 수 있음 컴포넌트 중심으로 생각하고 CSS도 컴포넌트 내부에서 관리/적용 CSS파일을 직접 적용 나중에 import한 css파일로 덮어씌워질 수있음 css-module 활용 모듈방식으로 접근하기에 클래스명 중복을 방지할 수 있음 Sass 활용 설치 yarn add --dev node-sass 변수, 연산, 믹스인/인자, 중첩, 문자 보간, 임포트, 각종 함수 등을 지원 나머지는 css module 방식과 동일 css-in-js 라이브러리 중 styl..

DRF-React Study Chapter 9. 리액트 기초 익히기 상탯값 상탯값 UI(엘리먼트)로의 반영을 위해, 유지해야할 값들의 묶음 상탯값은 어디에 저장/관리되는가 각 컴포넌트 내에서만 사용되는 값들은 컴포넌트 안에서 생성/갱신 리액트 기본으로 동작 여러 컴포넌트에서 사용되는 값들은 별도 공간에서 생성/갱신 Redux, Context API, Mobx 등을 활용하면 편리 컴포넌트에서 상탯값에 대한 getter/setter 함수를 제공 상탯값을 직접 변경하진 말자 성능 하락 setState 비동기로 동작 변경할 특정 state값들이 담긴 object를 지정하거나 함수를 지정 가능 -> 매개변수로 호출되기 직전 상탯값을 받는다 (선호하는 방식) setter에 지정된 함수에서 상탯값을 직접 참조하고 있..

DRF-React Study Chapter 9. 리액트 기초 익히기 순수 함수와 커링 기법 리액트는 함수형 프로그래밍을 적극 활용 컴포넌트의 많은 루틴을 순수 함수로서 작성하기를 요구 상탯값/속성값이 같으면, 항상 같은 값을 반환해야함 다른 side effects를 발생시키지 않아야함(HTTP 요청, 데이터 저장, 쿠키 조작 등) 컴포넌트의 상탯값은 불변객체로 관리해야함 수정할때는 기존값을 변경하는게 아닌 같은이름의 새로운 객체를 생성해야함 순수함수 하나 이상의 인자를 받고, 인자를 변경하지 않고, 참조하여 새로운 값을 반환 Side Effects가 없도록 구성 순수함수를 활용한 데이터 변환 reduce, filter, map, join 등 커링 일부의 인자를 고정한 새로운 함수를 반환하는 함수를 만드는..

DRF-React Study Chapter 9. 리액트 기초 익히기 개발환경 세팅 node.js 설치 12.16.1 버전 설치 본인은 docker 이미지 사용 docker run -it --rm -d node:12.16.1 yarn 설치 npm install yarn react 프로젝트 설치 yarn create react-app [프로젝트명] 꼭 알아야할 ES6+ 문법 변수/상수 선언 var는 더 이상 쓰지 않는다. 변수 선언은 let Lexical Variable Scoping을 지원하는 변수 선언 문법 상수 선언은 const 재할당 불가. 내부 속성값은 수정 가능. const tom = {lang='python'} tom.lang = 'JavaScript' 객체 복사 J..

DRF-React Study Chapter 8. 장고 DRF를 활용한 웹 API 만들기 Token 인증 적용하기 DRF에서 지원하는 인증 Session 웹 프론트와 장고가 같은 호스트라면 사용가능 외부에선 못씀 Basic 외부에서 매번 user/password를 넘기는건 보안상 위험 Token 초기에 user/password로 token을 발급받고 이 토큰을 매 API요청에 담아서 보내어 인증을 처리 Token 모델 유저 모델과 1:1관계 각 유저별로 token은 수동으로 생성해줘야함 토큰만으로 인증을 수행 Token 생성 방법1 ObtainAuthToken 뷰를 통한 획득 및 생성 URL Pattern 매핑 필요 방법2 Signal을 통한 자동생성 방법3 Management 명령을 통한 생성 JWT 인..

DRF-React Study Chapter 8. 장고 DRF를 활용한 웹 API 만들기 Renderer를 통한 다양한 응답 포맷 지원 Renderer 같은 Endpoint에서 요청받은 타입에 맞춰, 다양한 응답 포맷을 지원 Content-Type, URL의 방법을 통해 Renderer 지정 가능 기본 지원 Renderer JSONRenderer : json.dumps를 통한 JSON 직렬화 디폴트 media_type : application/json format : json BrowsableAPIRenderer : self-document HTML 렌더링 디폴트 media_type : text/html format : api TemplateHTMLRenderer : 지정 템플릿을 통한 렌더링 media_..

DRF-React Study Chapter 8. 장고 DRF를 활용한 웹 API 만들기 mixins 상속을 통한 APIView DRF에서 지원하는 mixins CreateModelMixin ListModelMixin RetrieveModelMixin UpdateModelMixin DestroyModelMixin 다양한 View의 구현 방법 중복을 줄이기 상황에 맞춰 다양한 방법으로 View를 구현 생산성 극대화 ViewSet과 Router 단일 리소스에서 관련있는 View들을 단일 클래스에서 제공 2개의 URL이 필요 Post 리소스에 대한 2개의 URL ModelViewSet viewsets.ReadOnlyModelViewSet list 지원 : 1개의 URL detail 지원 : 1개의 URL vie..