JH 개발 블로그

브랜치와 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 에..

리액트에서 데이터 흐름을 컨트롤 하는 방법(state 관리하는 법)은 여러가지가 있다. state 와 props 를 사용해서 컴포넌트 간에 전달 React Context 사용 mobx 사용 redux를 사용 등등등... 이중에서 우리는 Context 에 대해서 알아보자. Context context를 이용하면 단계마다 일일이 props를 넘겨주지 않고도 컴포넌트 트리 전체에 데이터를 제공할 수 있다. 일반적인 React 애플리케이션에서 데이터는 위에서 아래로 (즉, 부모로부터 자식에게) props를 통해 전달되지만, 애플리케이션 안의 여러 컴포넌트들에 전해줘야 하는 props의 경우 (예를 들면 선호 로케일, UI 테마) 이 과정이 번거로울 수 있다. context를 이용하면, 트리 단계마다 명시적으로 ..

https://momentjscom.readthedocs.io/en/latest/moment/05-query/06-is-between/ Is Between - momentjs.com From here you can search these documents. Enter your search terms below. momentjscom.readthedocs.io https://velog.io/@dojunggeun/JavaScript-Moment.js%EB%A5%BC-%EC%9D%B4%EC%9A%A9%ED%95%98%EC%97%AC-Date-Time-%EA%B4%80%EB%A6%AC%ED%95%98%EA%B8%B0 [JavaScript] Moment.js를 이용하여 Date 다루기 자바스크립트에서 날짜, 시간..

타입 추론 let bool = true; const arr = [1, 2, 3]; const tuple = [true, 1]; // bool = 1; // Error! 3번째는 배열의 요소가 각각 boolean과 number이기에 최종적으로 추론되는 타입은 boolean과 number의 유니온 타입의 배열, 코드로 나타내면 (boolean | number)[] 이다. 여기에서 배열에서 사용된 요소들의 타입을 각각 추론하여 유니온 타입으로 만들어 내는 방식을 TypeScirpt 에서는 Best common type이라고 부른다. Best common type Best common type 은 말 그대로 가장 일반적인 타입이다. 여러가지 자료형이 배열 내부에서 사용되고 있을 때, 그 여러가지 자료형을 포괄할..