JH 개발 블로그

Apollo Client 는 GraphQL을 사용하여 로컬 및 원격 데이터를 모두 관리할 수 있는 JavaScript 용 포괄적인 상태 관리 라이브러리입니다. 이를 사용하여 UI를 자동으로 업데이트하면서 애플리케이션 데이터를 가져오고, 캐시하고, 수정합니다. Apollo Client는 최신 개발 방식과 일치하는 경제적이고 예측 가능하며 선언적인 방식으로 코드를 구성할 수 있도록 도와줍니다. 핵심 @apollo/client 라이브러리는 React와의 내장 통합을 제공하며 더 큰 Apollo 커뮤니티는 다른 인기 있는 보기 계층에 대한 통합을 유지 관리 합니다. Apollo Client 는 useQuery, useLazyQuery 를 제공한다. src/apolloClient.t..

Context API props 드릴링을 막아준다. (= import 해와서 props 내려줄 필요가 없다) 최대한 상위에서 다 관리해주는 것이 좋다. (리덕스와 다른 점은 리덕스는 promise 를 제공하지 않는다. 그래서 리덕스 사가를 써야 한다. 또한 리덕스는 모든걸 상위에서 관리하지만 Context API 는 위에서 관리하되, 너무 불필요하게 위까지 가지 않도록 한다고 한 것 같다.) 이전 게시물의 정리를 참고하면 해당 context 파일에서는 provider 를 반환한다. 이 provider 를 최상위 app.tsx 에 감싸주면 그 아래 컴포넌트에서는 provider 의 value 에 접근할 수 있게 된다. // 해당 context 파일 interface ContextType { state: S..

https://velog.io/@junsikchoi/TIL-Git-%EC%BB%A4%EB%B0%8B-%EC%97%86%EC%9D%B4-Checkout-%ED%95%98%EB%A9%B4-%EC%96%B4%EB%96%A4-%EC%9D%BC%EC%9D%B4-%EC%9D%BC%EC%96%B4%EB%82%A0%EA%B9%8C [TIL] Git 커밋 없이 Checkout 하면 어떤 일이 일어날까? 뒤에 두고 가는 것들은 항상 아쉽다. velog.io

브랜치와 Merge 의 기초 실제 개발과정에서 겪을 만한 예제를 하나 살펴보자. 브랜치와 Merge는 보통 이런 식으로 진행한다. 웹사이트가 있고 뭔가 작업을 진행하고 있다. 새로운 이슈를 처리할 새 Branch를 하나 생성한다. 새로 만든 Branch에서 작업을 진행한다. 이때 중요한 문제가 생겨서 그것을 해결하는 Hotfix를 먼저 만들어야 한다. 그러면 아래와 같이 할 수 있다. 새로운 이슈를 처리하기 이전의 운영(Production) 브랜치로 이동한다. Hotfix 브랜치를 새로 하나 생성한다. 수정한 Hotfix 테스트를 마치고 운영 브랜치로 Merge 한다. 다시 작업하던 브랜치로 옮겨가서 하던 일 진행한다. 먼저 지금 작업하는 프로젝트에서 이전에 master 브랜치에 커밋을 몇 번 했다고 가..

이 게시물에서 포스팅할 주제는 개발자라면 알아두어야 할 Git 이다. 필자는 부트캠프에서 Git 에 대해서 배우긴 하였지만 단기간 안에 배워야 했기 때문에 개념을 제대로 배우지 않고 넘어갔다. 그래서 회사에서 Git 쓰다보면 헷갈릴 때가 많았다. (에러는 무조건 구글링 하는 인생을 살았다..) 그래서 주말을 이용해 아예 git 공식문서를 통해 정리를 해보려고 한다. Git CVS, Subversion, Perforce, Bazaar 등의 시스템은 각 파일의 변화를 시간순으로 관리하면서 파일들의 집합을 관리한다 (보통 델타 기반 버전관리 시스템이라 함). Git은 이런 식으로 데이터를 저장하지도 취급하지도 않는다. 대신 Git은 데이터를 파일 시스템 스냅샷의 연속으로 취급하고 크기가 아주 작다. Git은 ..

let arr = [{ a: 1 }]; let [{a}] = arr; console.log(a) // 1 let arr2 = [{first: 1},{second: 2},{third: 3}] let [{first}]= arr2 console.log(first) // 1

미들웨어 미들웨어라는 것은 세가지 파라미터를 받는 함수를 말한다. next 인자는 통과시킬 때 사용한다. 미들웨어 함수는 요청 오브젝트(req), 응답 오브젝트 (res), 그리고 애플리케이션의 요청-응답 주기 중 그 다음의 미들웨어 함수 대한 액세스 권한을 갖는 함수입니다. 그 다음의 미들웨어 함수는 일반적으로 next라는 이름의 변수로 표시됩니다. 현재의 미들웨어 함수가 요청-응답 주기를 종료하지 않는 경우에는 next()를 호출하여 그 다음 미들웨어 함수에 제어를 전달해야 합니다. 그렇지 않으면 해당 요청은 정지된 채로 방치됩니다. 인증이 되었는지 안되었는지, 어떤 특정한 request 가 왔다 하면 검증이라던지, Controller 무조건 response 를..

class 는 객체를 만들어준다. class Person { } let kim = new Person(); console.log(kim); 실행결과 Prototype 이 객체임을 보여준다. Class 초기값 설정해주기 Constructor(생성자)를 이용하면 class 객체의 초기 값을 설정해 줄 수 있다. new 있으면 construtor 실행 (생성자 실행) 이거는 타입스크립트 문법이 혼용됨 class Danbibase { name= ""; contructor(name: string){ this.name = name; } } const jihyun = new Danbibase("이지현"); class Person { constructor (name,age, city) { this.name = name..

useQuery useQuery React hook 은 Apollo 애플리케이션에서 쿼리를 실행하기 위한 기본 API 입니다. React 컴포넌트 내에서 쿼리를 실행하려면 useQuery GraphQL 쿼리 문자열을 호출하고 전달합니다. 컴포넌트가 랜더링되면 UI 를 랜더링하는데 사용할 수 있는 useQuery 는 아폴로 클라이언트로부터 객체를 리턴한다. loading, error, data 예를 들어 보겠습니다. GET_DOGS 라는 GraphQL 쿼리를 생성합니다. import { gql, useQuery } from '@apollo/client'; const GET_DOGS = gql` query GetDogs { dogs { id breed } } `; 다음으로 Dogs 라는 구성요소를 만들고, ..

reducer 이전에는 주요 상태 업데이트(useState 등)를 컴포넌트 내부에서 했다면, 이번에는 컴포넌트와 상태 업데이트 로직을 분리시킬 수 있는 방법이 있는데 이 함수가 바로 useReducer 이다. 이 훅 함수를 통해서 상태 업데이트를 바깥에 작성할 수도 있고 심지어 다른 파일에 작성 후 불러와서 사용할 수도 있다. useReducer Hook 함수를 사용해보기전에 우선 reducer 가 무엇인지 알아보겠다. reducer 는 현재 상태와 액션 객체를 파라미터로 받아와서 새로운 상태를 반환해주는 함수이다. function reducer(state, action) { // 새로운 상태를 만드는 로직 // const nextState = ... return nextState; } reducer 에..