개발 스터디

러닝 리엑트을 요약한 내용입니다. 코드의 품질을 유지하기 위한 방법중 하나는 단위 테스팅이다. 단위 테스팅을 통해 애플리케이션이 의도대로 작동하는지 검증할 수 있다. 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); }; 함수를 객체에 넣을 수도 있다..

Custom Validation 필요성 정의 되지 않은 Validation를 사용할 경우 필요 ex: 나이 입력값과 성인유무를 입력받는 경우 나이에 따라서 성인유무도 체크 해야함 Custom Validation 추가 @Documented @Constraint(validatedBy = [CustomValidator::class]) @Target(AnnotationTarget.CLASS) annotation class CustomValid( val message: String = "", val groups: Array = [], val payload: Array = [] ) class CustomValidator: ConstraintValidator { override fun isValid(value: Us..

Validation의 필요성 사용자 등록과 같은 API를 작성할 때 필수 값이 없으면 DB오류나 의미 없는 데이터가 생성 될수 있음 사용자 등록 API 사용자 이름은 공백이면 의미 없는 데이터가 생성 data class User( val id: Long?, val name: String? ) @GraphQLMutation(name = "createUser", description = "사용자 등록") fun createUser(user: User): User { return user } 의미 없는 사용자 추가 mutation { createUser(user: { id: 1 name: "" }) { id name } } 응답 { "data": { "createUser": { "id": 1, "name": ..