취미 공부/Daily

개발 공부 다시 시작!!17강Creat React App: https://create-react-app.dev/ react 프로젝트 만드는 법1. npx create-react-app my-app: 'my-app' 은 프로젝트 이름을 뜻함: 사용자가 임의로 지정할 수 있는 부분이다.: 터미널을 실행한 후 위 명령어를 입력하면 프로젝트가 설치가 된다. 2. cd '프로젝트 이름': 해당 경로로 이동한다 3. npm start: 리액트가 실행 된다  리액트가 컴포넌트를 사용하는 이유1. 재사용성: 코드를 반복해서 쓰지 않기 위해: 하나의 코드를 만들어서 여기저기 사용할 수 있게 만들기! 2. 관심사 분리: 하나의 컴포넌트에 너무 많은 걸 담지 않기: 관리를 수월하게 만드는 이유 Component 구성1. H..

60강HTTP 통신 Part 1.- GET Request- 비동기 (콜백, 프로미스, async/await) GET 요청을 직접 보내보기필요한 것- url- (브라우저에서 제공하는) fetch API- (선택) header 등 다른 옵션들  비동기하나의 프로세스가 완료되기 전에 다음 프로세스를 시작하는 방식 콘솔은 어떻게 찍힐까?  콜백 함수setTimeout() 같이 특정 함수 안에 매개변수 형태로 전달받은 함수를 의미  PromiseES6(ECMAScript2015)에서 등장한 자바스크립트에서 비동기를 처리하기 위해 사용하는 객체   Async/awaitES7(ECMAScript2016)에서 등장한 자바스크립트에서 Promise를 가지고 비동기를 동기처럼 사용하는 문법   61강HTTP 통신 Part..

58강최적화 기법 Part 4.- useMemo useMemo같은 객체를 매번 컴포넌트 리렌더링이 일어날 때마다 새롭게 생성해 줄 필요는 없고 이를 위해 useMemo 훅을 사용할 수 있다useMemo는 useCallbck에 비해서 사용하는 빈도가 적다   59강HTTP 통신 Part 1.- Client vs Server- HTTP 요청 내보내기 Client vs Server  HTTP(HyperText Transfer Protocol)웹에서 정보를 주고 받을 수 있는 프로토콜으로, 일반적으로는 HTML 문서를 주고 받는 데 사용한다.  HTTP 요청  HTTP 응답  HTTP 요청을 보내보기구글에 free api 이런 키워드로 검색을 해 보면 무료로 사용할 수 있는 api들이 정말 많다.

55강최적화 기법 Part 1.- 리액트의 동작 원리- Virtual DOM Diffing  리액의 동작 원리React Component- state(값 조작 가능), props (부모-자식 서로 값 전달 가능)- context (다른 component 사이에서 값 전달 가능)- Real DOM을 매번 업데이트가 된다 컴포넌트가 재실행 되는 구조 vs 브라우저가 재실행되는 구조  Virtual DOM Diffing바뀌는 부분만 리랜더링을 시킨다    56강 최적화 기법 Part 2.- React.memo() React.memo()부모 컴포넌트에서 자식 컴포넌트로 props를 내려줄 때, Props가 바뀌지 않으면, re-rendering을 시켜주지 않는다 왜 모든 컴포넌트에 memo() 적용 안하는가?-..