개발 스터디

모던 자바스크립트 Deep Dive을 요약한 내용입니다. 10.1 객체란? 자바스크립트는 객체 기반의 프로그래밍 언어이며, 자바스크립트를 구성하는 거의 “모든 것"이 객체다 원시 값을 제외한 나머지 값(함수, 배열, 정규 표현식 등)은 모두 객체 원시 타입은 단하나의 값만 나타내지만 객체 타입은 다양한 타입의 값을 하나의 단위로 구성한 복합적인 자료구조다 원시 타입의 값은 변경 불가능한 값이지만 객체 타입의 값은 변경가능한 값이다. 객체는 0개 이상의 프로퍼티로 구성된 집합이며, 프로퍼티는 키와 값으로 구성된다. 자바스크립트에서 사용할 수 있는 모든 값은 프로퍼티 값이 될 수 있다. 자바스크립트의 함수는 일급 객체이므로 값으로 취급 할 수 있다. 프로퍼티의 값이 함수일 경우 일반 함수와 구분하기 위해 메..

모던 자바스크립트 Deep Dive을 요약한 내용입니다. 9.1 타입 변환이란? 값의 타입은 개발자의 의도에 따라 다른 타입으로 변환할 수 있다. 개발자가 의도적으로 값의 타입을 변환하는 것을 명시적 타입 변환 또는 타입 캐스팅이라 한다. var x = 10 // 명시적 타입 변환 var str = x.toString() console.log(typeof str, str) console.log(typeof x, x) 개발자의 의도와 상관없이 자바스크립트 엔진에 의해 암묵적으로 타입이 자동으로 변환하는 것을 암묵적 타입 변환 또는 타입 강제 변환 이라 한다. var x = 10 // 암묵적 타입 변환 var str = x + '' console.log(typeof str, str) console.log(t..

러닝 리엑트을 요약한 내용입니다. 리액트는 뷰 계층이므로 브라우저에서 모든 것을 처리하는 것이 타당하다. 리액트는 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는 대부분의 문..