남기면 좋잖아

DRF-React Study Chapter 9. 리액트 기초 익히기 클래스 컴포넌트, 생명주기 static getDerivedStateFromError(error) 오류정보를 화면에 보여주기 위한 state를 생성할 목적 children 컴포넌트의 생명주기 함수에서 오류가 발생했을때에만 호출 개발서버는 별도 오류화면이 보여지기에 커스텀 화면을 보기위해서는 프로덕션 빌드가 필요 componentDidCatch(error, info) 에러정보를 서버로 전송 생명주기 함수에서 오류가 발생헀을 떄에만 호출 errorinfo 정보가 추가로 전달 axios 라이브러리를 활용한 HTTP 요청 axios 라이브러리 설치 : yarn add axios django 서버로 ajax요청을 할 경우 장고가 서비스되는 호스트명..

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..

1. 기본 실행방법과 실습환경 크롬 개발자 도구 console 탭에서 실시간으로 JavaScript를 테스트, 실행 할 수 있음 디버거 공부 추가적으로 하면 매우 좋을듯 IDE Sublime Text, Pycharm 등 으로 선택 2. 숫자와 문자 수의 표현 숫자 : 정수, 실수 등 정수, 실수끼리 계산도 가능 수의 연산 Math console.log(Math.pow(3,2)); // 제곱 console.log(Math.round(10.6)); // 반올림 console.log(Math.ceil(10.2)); // 가장 가까운 윗쪽 정수로 올림 console.log(Math.floor(10.2)); // 가장 가까운 아랫쪽 정수로 올림 console.log(Math.sqrt(9)); // 제곱근 cons..