개발 스터디

러닝 리엑트을 요약한 내용입니다. 리액트는 뷰 계층이므로 브라우저에서 모든 것을 처리하는 것이 타당하다. 리액트는 UI 랜터링을 위한 라이브러리다. 대부분의 서비스는 백엔드로부터 데이터를 가져올 필요가 있다. HTTP 요청과 관련한 지연 시간 문제를 해결하기 위한 라이브러리들이 존재한다. 리액트를 아이소모픽하게 랜더링할수 있다. 아이소모픽하다는 말은 브라우저가 아닌 플랫폼에서 리액트를 랜더링한다는 뜻이다. UI를 서버에서 렌더링 한 결과를 브라우저에 보내서 표시한다. 서버 렌더링의 강점은 성능, 이식성, 보안을 향상시킬 수 있다. 12.1 아이소모피즘과 유니버설리즘 비교 아이소모픽과 유니버설이라는 말은 클라이언트와 서버 양쪽에서 작동하는 애플리케이션을 의미한다. 아이소모픽 애플리케이션은 여러 플랫폼에서 ..

러닝 리엑트을 요약한 내용입니다. 페이지 기반 웹사이트의 경우 이전 페이지나, 다음 페이지, 브라우저 주소 등을 사용해서 페이지 이동이 가능하다 단일 페이지 웹사이트에서는 페이지 이동 기능이 문제가 된다. 한 페이지 안에서 모든 일이 벌어지기 때문에 브라우저 방문 기록, 채깔피, 이전페이지, 다음 페이지 등의 기능은 라우팅 솔루션을 사용해야 한다. 라우팅은 클라이언트의 요청을 처리할 종말점을 찾는 과정이다. 앵귤러, 엠버, 백폰과 달리 리액트는 표준 라우터가 없다. 마이클 잭슨, 라이언 플로렌스는 리액트 라우터라는 이름의 라우터를 만들었다. 우버, 젠데스크, 페이팔, 비메오 등의 회사가 리액트 라우터를 채택했다. 1.1.1 라우터 사용하기 리액트 라우터의 기능을 보여주기 위해 회사 소개, 이벤트, 제품,..

러닝 리엑트을 요약한 내용입니다. 코드의 품질을 유지하기 위한 방법중 하나는 단위 테스팅이다. 단위 테스팅을 통해 애플리케이션이 의도대로 작동하는지 검증할 수 있다. 10.1 ESLint 자바스크립트를 분석하는 과정을 힌팅(hinting) 또는 **린팅(Linting)**이라고 부른다. JSHint와 JSLint는 원래 자바스크립트를 분석하고 형식에 대한 제안을 제공하는 도구였다. ESLint는 최신 자바스크립트 문법을 지원하는 코드 린터다. ESLint는 플러그인을 추가할 수 있다. 기능을 확장하기 위해 플러그인을 만들어서 공유할수 있다. 다른 사람이 만든 플러그인을 활용할 수 있다. create-react-app을 사용하면 ESLint를 즉시 사용할 수 있다. eslint-plugin-react라는 ..

러닝 리엑트을 요약한 내용입니다. Suspense는 대규모 앱에서 겪은 문제를 해결하기 위해 설계됐다. 모두가 페이스북과 같은 문제를 겪지는 않는다. 우리가 직면한 문제에 대한 해법으로 선택하기 전에 여러번 더 생각해보기 바란다. 이러한 도구를 채택하면 불필요한 복잡도가 추가될 수 있다. 동시성 모드는 실험적인 기능이고, 리액트 팀은 프로덕션 환경에서 동시성 모드를 사용하지 말라고 엄중히 경고한다. 매일 매일 커스텀훅을 개발하는 것이 아니라면 아마도 이런 기능을 결코 알 필요가 없을 것이다. Suspense와 관련한 대부분의 기계장치는 훅을 통해 추상화 가능하다. 여러 단점을 고려하더라도 이번장에서 다루는 주제는 흥미진진한 주제이다. 기능을 제대로 사용한다면 더 나은 사용자 경험을 만들어낼 수 있다. 훅..

8.1 데이터 요청하기 자바스크립트에서 HTTP 요청을 수행하는 가장 유명한 방법은 fetch이다. GitHub에 clghks에 대한 정보를 요청하고 싶다면 fetch 요청을 보낼 수 있다. fetch 함수는 프라미스를 반환한다. API에 비동기 요청을 보낸 이후 응답이 오기 전까지 기다린다. 응답 값이 도착하면 .then(callback)을 통해 callback에 정보가 전달 된다. GitHub API에서는 JSON 데이터로 응답하기 때문에 response.json()을 호출해서 JSON으로 파싱한다. 데이터를 정상적으로 받게 되면 .then(console.log)가 호출되고 오류가 발생하면 .catch(console.error)가 호출된다. fetch(`https://api.github.com/use..

러닝 리엑트을 요약한 내용입니다. 프롭, 상태가 바뀌면 컴포넌트 트리가 다시 렌더링되면서 최신 데이터를 반영한다. useState를 사용해서 컴포넌트를 재렌터링을 하는 순간을 기술하는 주된 수단이였다. 6장에서 살펴본 useState, useRef, useContext 이외에 원래부터 제공하고 있는 useEffect, useLayoutEffect, useReducer를 살표 보자 컴포넌트 성능 최적화를 위한 useCallback과 useMemo를 살펴보자 7.1 useEffect 소개 렌더링이 끝난 다음에 무언가를 하고 싶으면 어떻게 해야할까? Checkbox를 체크하거나 해제할때 alert를 띄워주는 예제 App.js 컴포넌트 코드 import './App.css'; import CheckBox fro..

러닝 리엑트을 요약한 내용입니다. 컴포넌트 트리는 프로퍼티를 통해 데이터가 흘러갈 수 있는 컴포넌트 계층 구조를 뜻한다. 상태와 프로퍼티는 서로 관계가 있다. 컴포넌트 트리의 상태가 바뀌면 프로퍼티도 바뀐다. 새로운 데이터는 컴포넌트 트리를 타고 흐르고, 콘텐츠에 새로 반영되도록 한다. 반영된 데이터를 가지고 다시 랜더링 된다. 6.1 별점 컴포넌트 만들기 StartRating 컴포넌트를 통해 사용자는 콘텐츠에 별의 개수를 바탕으로 점수를 매길수 있다. 별에 대한 icon은 react-icons에서 설치해서 사용한다. // 프로젝트 생성 create-react-app star-rating // 별 아이콘을 가져오기 위한 라이브러리 설치 npm install react-icons 별 다섯 개 렌더링하는 S..

러닝 리엑트을 요약한 내용입니다. JSX는 자바스크립의 JS와 XML의 X를 합친 말이다. JSX는 자바스크립트 코드 안에서 바로 태그 기반의 구문을 써서 리액트 엘리먼트를 정의할 수 있게 해주는 자바스크립트 확장 이다. JSX가 HTML과 닮았기 때문에 때로 이 둘을 혼동하기도 한다. JSX는 단지 복잡한 createElement 호출에서 빠트린 콤마(,)를 찾는것을 줄여준다. 5.1 JSX로 리액트 엘리먼트 정의하기 페이스북의 리액트 팀은 리액트를 내놓으면서 JSX도 함께 내놨다 JSX는 속성이 붙은 복잡한 DOM 트리를 작성할 수 있는 간편한 문법을 제공 JSX 엘리먼트에 다른 JSX 엘리먼트를 작식으로 추가할 수 있다. JSX는 컴포넌트와도 잘 작동한다. 5.1.1 JSX 팁 JSX는 대부분의 문..

러닝 리엑트을 요약한 내용입니다. 리액트를 사용할 때는 JSX로 앱을 만들 가능성이 커진다. JSX는 HTML과 아주 비슷해 보이는 태그를 기반으로 하는 자바스크립트 구문이다. 리액트의 기본요소를 알아보고, 컴포넌트와 엘리먼트를 합성하는 커스텀 컴포넌트를 만드는 방법을 살펴봄으로써 리액트 컴포넌트에 대해 알수 있다. 4.1 페이지 설정 리액트를 브라우저에서 다루려면 React와 ReactDOM 라이브러리를 불러와야 한다. React는 뷰를 만들기 위한 라이브러리 ReactDOM은 UI를 실제로 브라우저에 렌더링할때 사용하는 라이브러리 리액트를 사용하기 위한 최소한의 요구 사항 코드 4.2 리액트 엘리먼트 HTML을 브라우저가 문서 객체 모델인 DOM을 구성하기 위해 따라야하는 절차라고 간단히 말할 수 있..

러닝 리엑트을 요약한 내용입니다. 3.1 함수형이란 무엇인가? 자바스크립트에서는 함수가 1급 시민이기 때문에 함수형 프로그래밍을 지원한다고 말할 수 있다. 1급 시민이라는 말은 정수나 문자열 같은 다른 일반적인 값과 마찬가지로 함수를 취급할 수 있다는 뜻 이다. var 키워드를 사용해서 함수를 정의할 수 있다. var log function(message) { console.log(message); } log("자바스크립트에서는 함수를 변수에 넣을 수 있습니다."); 화살표 함수를 사용해 같은 함수를 정의할 수 있다. const 키워드를 사용하면 log 변수를 덮어쓰지 못하게 막아준다. const log = message => { console.log(message); }; 함수를 객체에 넣을 수도 있다..