No Story, No Ecstasy

15. Context API - Context API는 전역적으로 사용할 데이터가 있을 때 유용한 기능 - 예) 로그인 정보, 애플리케이션 환경 설정, 테마 등 - 새 Context 만들기 . import { createContext} from 'react'; . const ColorContext = createContext({ color: 'black' }); - Provider를 사용하면 Context의 value를 변경할 수 있다. . Provider를 사용할 때는 value 값을 명확히 명시해야 한다. - 동적 Context 사용하기 . Context의 value에 값이 아닌 함수를 전달할 수도 있다. . onClick: 좌클릭, onContextMenu: 우클릭 (e => {e.preventDe..

14. 외부 API를 연동하여 뉴스 뷰어 만들기 - 비동기 작업의 이해 > API 호출해서 데이터 받아오기 > API 키 발급받기 > 뉴스 뷰어 UI 만들기 > 데이터 연동하기 > 카테고리 기능 구현하기 > 리액트 라우터 적용하기 - 비동기 작업의 이해 . setTimeout(func, 3000) : 3초 후에 func 수행 - Promise: 콜백 지옥 코드가 형성되지 않도록 ES6에 도입된 기능 . then을 사용하며 그 다음 작업을 설정하기 때문에 콜백 지옥이 형성되지 않는다. function increase(number) { const promise = new Promise((resolve, reject) => { setTimeout(() => { const result = number + 10;..

13. 리액트 라우터로 SPA 개발하기 - SPA (Single Page Application)란? . 기존에는 사용자에게 보이는 화면은 서버 측에서 준비했다. . 리액트 같은 라이브러리를 사용하는 뷰 렌더링은 사용자의 브라우저가 화면 준비를 담당한다. . 인터랙션이 발생하면 필요한 부분만 자바스크립트를 사용하여 업데이트한다. (서버 API로 필요한 데이터만 새로 불러옴) . 라우팅(다른 주소에 다른 화면을 보여주는 것): react-router, reach-router, Next.js 등 - SPA의 단점 . 앱의 규모가 커지면 자바스크립트 파일이 너무 커진다. . 그러나, 코드 스플리팅을 사용하면 라우트 별로 파일들을 나누어서 트래픽과 로딩 속도를 개선할 수 있다. . 자바스크립트를 수행하지 않는 일..

12. immer를 사용하여 더 쉽게 불변성 유지하기 - 전개 연산자와 배열의 내장 함수를 사용하면 간단하게 객체를 복사 및 갱신이 가능하다. - 하지만, 객체의 구조가 엄청나게 깊어지면 불변성을 유지하면서 이를 업데이트하는 것이 힘들어진다. - immer를 사용하면 구조가 복잡한 객체도 매우 쉽고 짧은 코드를 사용하며 불변성을 유지하며 업데이트할 수 있다. - immer 설치 $ yarn create react-app immer-tutorial $ cd immer-tutorial $ yarn add immer - immer 사용법 Ex 1) import produce from 'immer'; const nextState = produce(originalState, draft => { // 바꾸고 싶은 ..

11. 컴포넌트 성능 최적화 - useState 기본값에 함수를 넣어주면, 처음 렌더링될 때만 함수가 실행된다. . ex) useState(createBulkTodos()) -> 리렌더링마다 호출, useState(createBulkTodos) -> 최초 렌더링 때만 호출 - 크롬 개발자도구 > Performance 메뉴에서 성능 모니터링 - 느려지는 원인 분석 (렌더링이 발생하는 상황) 1. 자신이 전달받은 props가 변경될 때 2. 자신의 state가 바뀔 때 3. 부모 컴포넌트가 리렌더링될 때 4. forceUpdate 함수가 실행될 때 -> 최대한 리렌더링 횟수를 줄여야 한다. - React.memo를 사용하여 컴포넌트 성능 최적화 . 리렌더링을 방지할 때는 shouldComponentUpdat..

book.interpark.com/product/BookDisplay.do?_method=detail&sc.shopNo=0000400000&sc.prdNo=331358159&sc.saNo=003002001&bid1=search&bid2=product&bid3=title&bid4=001 싸니까 믿으니까 인터파크도서 2만 5천원짜리 책 한 권으로 연봉을 1,000만원 이상 올릴 수 있을까? 영국의 'IT 잡 워치(itjobswatch.co.uk)'에 따르면 2020년 2월 타입스크립트의 평균 연봉은 자바스크립트보다 7천 500파운드(우리 돈 약 book.interpark.com . 개발 과정: nodejs 프로젝트 생성 > 개발 언어를 타입스크립트로 설정 (package.json 설정) # @types.no..

book.interpark.com/product/BookDisplay.do?_method=detail&sc.shopNo=0000400000&sc.prdNo=331358159&sc.saNo=003002001&bid1=search&bid2=product&bid3=title&bid4=001 싸니까 믿으니까 인터파크도서 2만 5천원짜리 책 한 권으로 연봉을 1,000만원 이상 올릴 수 있을까? 영국의 'IT 잡 워치(itjobswatch.co.uk)'에 따르면 2020년 2월 타입스크립트의 평균 연봉은 자바스크립트보다 7천 500파운드(우리 돈 약 book.interpark.com . 자바스크립트에는 3종류가 있다. 1. ES5: 웹 브라우저에서 동작하는 표준 2. ESNext: 매년 새로운 버전을 발표 (ES..

book.interpark.com/product/BookDisplay.do?_method=detail&sc.shopNo=0000400000&sc.prdNo=341567726&sc.saNo=003002001&bid1=search&bid2=product&bid3=title&bid4=001 싸니까 믿으니까 인터파크도서 “100명 중 1명만이 성공한다는 스타트업 창업,이것만 알고 시작하면 실패하지 않는다!“대한민국 스타트업 생태계 안에서 몸부림치며 플랫폼 비즈니스를 개발, 상용화, 매각한 저자가 던지는 book.interpark.com "그럼에도 스타트업을 한다면 이것만을 알고 시작하자" 스타트업을 꿈꾸는 사람이라면, 그럼에도 불구하고 스타트업을 시작하려는 사람이라면, 마지막으로 한 번 읽어보면 좋을 책이라는 ..