장구루파의 개발 블로그

Jest jest는 자바스크립트 전반적인 기능을 테스트 할 수 있는 "테스트 러너" 이자 "프레임웍" 이다. jest matchers toBe: 동일성 비교 toEqual: 동등성 비교 동일은 값 또는 참조 주소가 완전 일치한치 여부. 동등은 객체가 같은형태인지 여부. 작성 규칙 관련 expect() 에는 테스트할 기능을 넣는다. 예시: expect(테스트할 표현식).toBe(테스터가 기대하는 결과값) 몰랐던 용어 code coverage : 테스트코드가 얼마나 많은 소스코드를 테스트 하는지를 나타내는 지표 @testing-library DOM을 테스트하기 위한 라이브러리. @testing-library는 테스트러너 또는 프레임웍이 아니기 때문에 jest 같은 도구와 함께 사용되어야 한다. 이런 것들을 ..

git checkout 의 기본 용도 현재 브랜치에서, 입력한 브랜치가 위치한 커밋으로 이동 시키는 용도. 이동하려는 브랜치는 local 또는 remote 브랜치 모두 가능하다. 아래와 같이 사용할 수 있다. git checkout other_branch 로컬 브랜치를 생성하면서 해당 브랜치로 이동하기 git checkout -b new_branch 원격 브랜치를 트래킹 하면서 원격과 동일한 이름의 로컬브랜치를 생성 및 이동 다음 조건을 만족할 때 사용할 수 있다. 원격에 origin/develop 과 같은 브랜치가 있을 때 로컬에 develop 브랜치가 없다면 git checkout develop 아래 명령과 의미가 같다. git checkout -b develop --track origin/devel..

babel이 typescript를 어떻게 해석하는지 찾아보기 위해 babeljs.io 에서 @babel/plugin-transform-typescript를 검색해봤다. @babel/plugin-transform-typescript @babel/plugin-transform-typescript · Babel Babel · The compiler for next generation JavaScript The compiler for next generation JavaScript babeljs.io 이 페이지에서 얻은 주요 힌트가 몇 가지 있다. 이 플러그인은 @babel/preset-typescript 프리셋에 포함 되어 있다. 이 플러그인은 타입 유형을 해석하기 위한 것이다. 타입스크립트가 제공하는?.,?..

git hooks 어떤 이벤트가 생겼을 때 자동으로 특정 스크립트를 실행하도록 할 수 있다. 훅은 Git 디렉토리 밑에 hooks 라는 디렉토리에 저장한다. 기본 훅 디렉토리는 .git/hooks 이다. 이 디렉토리에 가보면 Git이 자동으로 넣어준 매우 유용한 스크립트 예제가 몇 개 있다. Git - Git Hooks Git - Git Hooks 여기서 한가지 알아둘 점은 저장소를 Clone 해도 클라이언트 훅은 복사되지 않는다는 점이다. 만든 정책이 반드시 적용되도록 하려면 서버 훅을 이용해야만 하며 작성은 정책 구현하기 부분을 참 git-scm.com 훅의 종류는 클라이언트 훅과, 서버 훅으로 크게 나뉘는데 자세한 내용은 위 북마크를 참고하면 되고, 여기서는 클라이언트 훅 중에 commit 관련 훅..

배경 typescript는 javascript의 대부분의 기능을 포함하고있는 javascript의 범위를 감싸는 상위집합이다. 때문에 typescript를 사용하면 javascript의 모든 기능과 최신 ECMAScript 문법을 지원하면서 타입 지원까지 된다고 보면 된다. javascript 프로젝트에서는 eslint를 사용하고, typescript 프로젝트에서는 tsconfig.json 설정을 통해 자체적으로 타입 체크가 지원 된다. 둘 다 소스코드 작성중이거나 트랜스파일 시점에 소스코드를 체크한다는 점에서는 닮은 점이 있지만 eslint는 소스코드 컨벤션과 관련이 있고, typescript는 개발자들의 실수 방지를 위한 목적이 크다는 점에서 둘은 목적이 다른 도구라고 할 수 있다. 아무튼 types..

monorepo의 디렉터리구조 eslint 동작방식 설명에 앞서 monorepo 디렉터리 구조를 짚고 넘어가자. monorepo라 하면 루트 프로젝트 하위에 여러 패키지가 존재하여, 패키지가 각 패키지에 의존하고 재사용 할 수 있는 단일 웍스페이스라고 볼 수 있다. 개발자가 알아보기 쉽게 디렉터리 구조로 설명하자면 다음과 같다. /package.json /yarn.lock /node_modules /node_modules/cross-env /node_modules/workspace-a -> /workspace-a /workspace-a/package.json /workspace-b/package.json 여기서 루트에 위치한 package.json 파일이 workspaces 프로퍼티를 가진다면, 패키지 ..

Mono repository 여러 패키지를 포함하는 단일 저장소를 의미. 저장소 내에 로컬 패키지들은 필요에 따라서 특정 패키지에 의존하거나 공유될 수 있음. Poly repository monorepo와는 반대되는 개념으로 하나의 저장소에 하나의 단일 기능에만 초점을 맞춰 관리됨. 하나의 저장소가 의존하는 패키지들은 모두 원격 저장소에 있음. yarn workspace yarn 공식문서를 보면 yarn workspace에 대해서 간단 명료하게 잘 설명해주고 있다. Yarn 작업 공간은 모노레포 작업을 쉽게 하고 의 주요 사용 사례 중 하나를 yarn link보다 선언적인 방식으로 해결 하는 것을 목표로 합니다. 요컨대, 여러 프로젝트가 동일한 저장소에서 함께 살 수 있고 서로를 상호 참조할 수 있습니다..

monorepo를 프로젝트를 구성하는 가장 쉬운 방법은 yarn workspace를 이용하는 것이다. npm 또한 버전7 부터 지원한다고 알고 있으나 아직 구성해보진 않았다. 관심 있다면 글 하단의 링크를 참조! yarn workspace로 쉽게 monorepo 구성하기 프로젝트 루트에 workspace 설정하기 루트 package.json에 다음과 같이 설정한다. { "private": true, "workspaces": ["workspace-a", "workspace-b"] } 하위 패키지 구성 workspace로 설정된 패키지는 별도의 npm package로서 구성되어야 한다. workspace-a/package.json { "name": "workspace-a", "version": "1.0.0"..

프로젝트 루트에 의존패키지 추가하는 명령 예를들어 eslint-plugin-import를 추가한다면 아래처럼 설치 할 수 있다. 프로젝트 루트에서 다음 명령을 날린다. yarn add -D eslint-plugin-import --ignore-workspace-root-check package.json을 직접 수정하고 yarn install 명령을 날려도 된다. { "devDependencies": { "eslint-plugin-import": "^2.23.4" } } 하위 웍스페이스에 의존패키지 추가하는 명령 예를들어 하위 웍스페이스의 패키지이름이 work-a 라고 가정하고 eslinrt-plugin-import 패키지를 설치하고 싶다면 다음과 같이 명령할 수 있다. work-a/package.json..

Next.js by Vercel - The React Framework Next.js by Vercel - The React Framework Production grade React applications that scale. The world’s leading companies use Next.js by Vercel to build static and dynamic websites and web applications. nextjs.org 사이트 대문을 보면 프로덕션을 위한 리액트 프레임웍이라고 설명하고 있다. CRA와 같은 스타터 프로젝트로서 CNA를 사용할 수 있다. CRA와의 큰 차이점은 react 개발 경험을 프레임웍 형태로 짜임새 있게 코딩할 수 있게 해놨다는 점이다. CNA 사용으로 누릴..