Property toBeInTheDocument does not exist on type JestMatchers<HTMLElement>

에러 발생 원인

이러한 에러가 발생하는 이유는 처음 리액트+타입스크립트 프로젝트를 만들었을 때 타입스크립트에 @tesing-library/jest-dom의 타입 정의(Type Definition)를 안 해주었기 때문이다. 타입스크립트에 Type definition을 주면 된다. 해결방법은 간단하다.

해결책

1. npm install --save-dev @tesing-library/jest-dom 을 실행하여 @tesing-library/jest-dom을 설치한다.
2. tsconfig.json의 compilerOptions에 다음을 추가한다.

{
  "compilerOptions": {
    // ...
    "types": ["@testing-library/jest-dom"],
    // ...
  }
}

[출처] https://github.com/testing-library/jest-dom/issues/546

그게 나다. 오늘 그랬다. 오늘 작업을 완료 했는데(심지어 파일이 10개나 되었다) 실수로 작업한 것들을 날렸다. 스터디 카페에 있었는데 울고 싶었다. 이전 커밋으로 되돌릴 때 이전 커밋 앞에 있는 모든 커밋들은 사라지는 git reset --hard 명령어 때문이었다.

멘탈이 나갔지만, 정신을 가다듬고 사라진 커밋을 복구할 해결 방법을 구글에 검색해보았다.

git reflog란?

Reflog는 HEAD의 상태가 변하거나 HEAD가 참조한 branch의 상태가 변할 때를 추적하고 기록으로 남긴다. 그렇다면 무엇이 HEAD의 상태와 HEAD가 참조한 branch의 상태를 변화시키는 것인가?

git reflog가 추적하고 기록으로 저장하는 명령어들

다음 명령어들이 git reflog가 추적하는 것들이다.

• git commit
• git reset
• git checkout
• git merge
• git rebase
• git cherrypick
• git pull

git reflog 사용법

git reflog와 사용하기 위한 명령어는 다음과 같다

git reflog show HEAD 

git reflog show HEAD 명령어와 같은 역할을 하지만 짧은 명령어는 다음과 같다.

git reflog

git reflog 명령어를 실행시키면 커밋 기록 뿐만 아니라 브랜치 업데이트 되는 상태까지 출력이 되는데 다음과 같은 화면이 나온다.

• HEAD@{숫자} (0부터 시작) - 가장 작은 숫자가 가장 최신의 기록이다.
• reset, commit, checkout - git reflog가 추적하고 기록한 git 명령어들이다.

내가 오늘 겪었던 일은 다음과 같다.

HEAD@{5} - 내가 작업하고 커밋한 내역이다. HEAD@{4} - 착오로 git reset --hard를 써서 작업한 커밋을 날려먹었다.

날려먹은 커밋을 복구하기 다음과 같은 명령어를 실행했다.

git reflog # 사라진 커밋 기록 가져옴
git reset --hard <SHA hash> # 사라진 커밋 복구

HEAD@{0} - git reset --hard 70b4011로 사라진 커밋을 복구하였고 없어져버린 10개의 파일도 그대로 복구가 되었다..

git reset --hard를 잘못 쓴 덕분에 git reflog라는 것을 처음 알게 되었고 정말 유용하게 쓰게 될 것 같다.

[출처]

• https://seosh817.tistory.com/297
• https://www.atlassian.com/git/tutorials/rewriting-history/git-reflog

1. craco 관련 패키지 설치

yarn add -D @craco/craco craco-alias

2. tsconfig.paths.json 파일 만들기

{
    "compilerOptions": {
        "baseUrl": ".",
        "paths": {
            "@/*": ["src/*"],
            "@components/*": ["src/components/*"],
          // alias를 주고 싶은 폴더를 추가하면 된다.
        }
    }
}

3. craco.config.js 파일 만들기

const CracoAlias = require('craco-alias')

module.exports = {
  plugins: [
    {
      plugin: CracoAlias,
      options: {
        source: 'tsconfig',
        tsConfigPath: 'tsconfig.paths.json',
      },
    },
  ]
}

4. tsconfig.json에 tsconfig.paths.js의 존재를 알게 해주기

"extends": "./tsconfig.paths.json"와 "tsconfig.paths.json"를 추가한다.

// tsconfig.json
{
  "extends": "./tsconfig.paths.json", // 추가
  "compilerOptions": {
    ...
  },
  "include": [
    ...
    "tsconfig.paths.json" // 추가
  ]
}

2. eslint, prettier 패키지 설치

다음 패키지 모듈을 설치한다.

yarn add -D eslint prettier eslint-plugin-prettier eslint-config-prettier eslint-plugin-react eslint-config-react-app

3. .eslintrc.json파일을 새로 만들고 Config 설정 분리

Create React App의 경우 package.json에 보면 eslint 설정이 이미 되어 있다.

// package.json
{
   ...
  "eslintConfig": {
      "estends": [
          "react-app",
          "react-app/jest"
      ]
  },
  ...
 }

가장 최상단 디렉토리에 .eslintrc.json 파일을 새로 만들고 위의 "estends":[]를 .eslintrc.json에 옮긴다.

4. .eslintrc.json 룰 설정

.eslintrc.json 에 "estends":[]를 포함해서 다음 룰을 적는다

// .eslintrc.json
{
    "extends": [
        "react-app",
        "react-app/jest",
        "plugin:prettier/recommended"
    ],
    "plugins": ["prettier"],
    "rules": {
        "prettier/prettier": "error"
    }
}

5. .prettierrc 설정

{
    "useTabs": false,
    "printWidth": 80,
    "tabWidth": 2,
    "singleQuote": true,
    "trailingComma": "all",
    "endOfLine": "lf",
    "semi": false,
    "arrowParens": "always"
}

6. setting.json 설정

command + ,를 눌러서 설정창을 연 후 종이를 뒤집는 듯한 아이콘을 클릭하면 setting.json이 연다.

setting.json에서 아래의 "editor.codeActionsOnSave"를 추가한다.

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
  ...
}

Mac이 아닌 Window를 사용하는 경우 setting.json에 "files.eol": "\n"도 추가한다.

7. vscode에 eslint와 prettier 적용하기

vscode가 eslint와 prettier를 인식해야하기 때문에 다음과 같은 명령어를 실행한다.

yarn dlx @yarnpkg/sdks vscode

8. package.json에 eslint 명령어 추가하기

.eslintrc.json을 통해 lint룰이 정해져서 lint 에러가 나는 파일들이 있을 것이다. 모든 파일 하나씩 lint 에러를 고치면 되겠지만, 파일이 많을 경우에는 귀찮으니 모든 파일을 eslint 룰에 맞춰서 수정해주는 명령어를 package.json 추가한다

// package.json
{
    "scripts": {
        "lint": "eslint \"src/**/*.{js,jsx,ts,tsx}\"",
        "lint:fix": "eslint --fix \"src/**/*.{js,jsx,ts,tsx}\""
    }
}

• "eslint \"src/**/*.{js,jsx,ts,tsx}\"" - src 폴더 안에 있는 모든 js,jsx,ts,tsx파일들의 lint를 검사하겠다는 의미이다.
• "lint:fix": "eslint --fix \"src/**/*.{js,jsx,ts,tsx}\"" - src 폴더 안에 있는 모든 js,jsx,ts,tsx파일들의 lint를 검사하고 lint 에러나면 고치겠다는 의미이다.

리액트 테스팅 관련 강의를 보게된 동기

• 테스팅 코드가 거의 없는(커버리지가 10%도 안되었다) 회사 솔루션에 새로운 기능을 넣을 때마다 기존 기능에서 발생하는 예상치 못한 에러, 버그의 원인을 찾고 고치는데 정말 힘이 많이 들었다.
  • QA 팀에서 하나씩 입력하고 눌러가면서 테스트를 할 때 처음에는 잘 작동 되었던 기능이 새로운 기능을 추가하고 나서부터는 작동이 잘 안되었던 기억이 있다.
• 테스트 코드를 작성한다는 것이 중요하다는 것을 인지하면서도 정작 리액트 테스팅 코드를 어떻게 작성하는지 하나도 몰랐다.

Why should you test?

• 우리가 만든 애플리케이션이 예상했던 대로 작동이 되는지 체크하기 위해
• 새로운 기능을 넣을 때마다 기존 기능에서 발생하는 예상치 못한 에러, 버그 원인을 바로 알아내려고 -> 이거는 너무나 공감한다. 테스트 코드 작성 안하게 되면 에러, 버그 원인 찾는데 너무나 많은 시간을 낭비하게 된다.

Why do I have Test Priorities?

• 프로젝트에 시간과 돈이 할당된 만큼만 소비 되어야 하기 때문이다. 예를 들어, 자동차 손 세차장에 왔다고 하자. 당장 돈은 2000원 밖에 없는데 내일 당장 자동차를 끌고 클라이언트와의 첫 미팅을 가야한다. 이렇게 주어진 시간과 돈이 부족할 때 자동차를 세차를 해야하는 부분은 차 유리랑 차체를 먼저 닦는 것이 급선무 일 것이다.

What should I test?(Test Priorities)

프로젝트의 목표와 할당된 시간, 예산에 따라 테스트를 해야하는 대상이 달라지고 테스트 우선 순위가 달라지는 것이 당연하다. 하지만 강의자는 다음 우선 순위가 잘 맞았다고 한다.

1. 프로젝트에서 회사의 수익이 가장 많이 나는 기능들 (High value features)
   • Amazon은 수익이 나기 위해 필수적인 기능은 상품들의 정보 페이지 그리고 결제 기능이다.
   • Spotify는 음악을 재생하는 기능과 구독 서비스 기능이 가장 중요하다.
2. 극한의 상황에서도, 즉 최대/최소의 값을 넣어도 서비스 정상 작동 여부(Edge cases in high value features)
   • Edge case는 극한의 상황을 테스트하는 케이스이다.
   • 예를 들어, 이커머스의 상품 100만개를 만들어 본래 기능이 정상 작동하는지 테스트한다.
3. 자주 망가지는 기능들(Things that are easy to break)
4. 기본적인 리액트 컴포넌트 테스팅 (Basic React component testing)
   • User interactions
   • Conditional rendering
   • Utils/Hooks

Types of Testing

테스트에도 3가지 종류가 있다. 단위 테스트(Unit Test), 통합 테스트(Integration Test), E2E(End to End)가 있다.

단위 테스트(Unit Test)

단위 테스트는 하나의 모듈을 기준으로 독립적으로 테스트 하는 것이다. 모듈은 하나의 함수 혹은 메소드를 각각 테스트를 하는 것이다. 예를 들어, 더하기 함수 function add(a, b){} 같이 가장 작은 단위를 테스팅 하는 것을 의미한다.

통합 테스트(Integration Test)

통합 테스트는 여러 개의 단위 테스트(모듈)를 모아서 더 큰 단위의 기능이 정상적으로 작동 되는지 확인하는 테스트이다. 예를 들어 로그인 기능을 테스트 할 때 아이디, 비밀번호의 validation에 대한 단위 테스트, 아이디, 비밀번호를 입력 후 로그인 버튼을 눌렀을 때 정상적으로 로그인이 되는 단위 테스트를 하나의 테스트로 묶어서 테스트 하는 것이 있다.

E2E 테스트 (End to End test)

프론트엔드에서의 E2E 테스트는 사용자의 입장이 되어 실제 웹페이지에서 원하는 행동이 나오는지를 테스트하는 것이다. 예를 들어, 로그인 화면에 아이디, 비밀번호를 입력하고, 로그인 버튼 눌렀을 때 로그인이 되어 있는 상태에서 메인 화면으로 이동으로 되는지를 테스트 하는 것이다.

단위 테스트, 통합 테스트, E2E 코드 작성

단위 테스트

리액트에서 단위 테스트, 통합 테스트를 할 때 주로 react-testing-library를 사용한다. react-testing-library를 많이 쓰는 이유에는 Enzyme라는 테스트 라이브러리와 비교해야 한다.

Enzyme vs react-testing-library

Enzyme는 컴포넌트 상태 변화 이전과 이후의 props, state의 변화를 비교하는 테스트라 props와 state를 조회해야 해서 테스트 코드를 작성에 복잡함이 추가된다. 반면, react-testing-library는 props, state 값의 변화보다는 사용자의 관점에서 컴포넌트의 동작/행위에 초점을 두는 라이브러리라서 테스트 코드를 작성할 때 좀 더 직관적으로 생각하면서 작성할 수 있는 것이 장점이다.

다음은 작은 단위(모듈 단위)로 테스트 코드를 작성한 단위 테스트 코드이다.

모듈 1: Pay 버튼은 비활성화 모듈 2: 조건에 부합되면 Pay 버튼은 활성화

test('모듈 1 - 처음 페이지를 렌더링할 때,  Pay 버튼은 비활성화 되어 있어야 한다', async () => {

    render(<TransactionCreateStepTwo sender={{ id: '5' }} receiver={{ id: '5' }} />);

    expect(screen.getByRole('button', { name: /pay/i }).toBeDisabled();
});

test('모듈 2 - amount와 note가 입력이 되었으면,  Pay 버튼은 활성화 되어 있어야 한다', async () => {
     // Arrange
    render(<TransactionCreateStepTwo sender={{ id: '5' }} receiver={{ id: '5' }} />);

    // Act
    userEvent.type(screen.getByPlaceholderText(/amount/i, "50");
    userEvent.type(screen.getByPlaceholderText(/add a note/i, "dinner");

    // Assert
    expect(screen.getByRole('button', { name: /pay/i }).toBeEnabled();
});

단위 테스트를 작성하기 위한 3단계(Three Test Phase) Arrange - 테스트를 판을 깔아주는 단계. 예를 들어 테스트하고 싶은 컴포넌트를 렌더링부터 먼저 해야 한다. Act - 유저가 직접 이벤트를 실행하는 단계 (User clicking button, User typing email and password) Assert - 유저가 어떤 이벤트를 하고 나서 결과가 예상되는 결과와 일치하는지를 검증하는 단계

통합 테스트

Pay 페이지 시나리오는 Amount, Add a note 인풋을 입력 안하면 Pay 버튼은 비활성화 되고 Amount 인풋을 입력하고 Add a note 인풋을 입력을 하고 나면 Pay 버튼이 활성화 되는 것이다. 결국은, 위 두 개의 단위 테스트들은 Pay 페이지 시나리오에서 바라봤을 때 하나의 테스트로 합쳐도 된다.

test('모듈 1 - 처음 페이지를 렌더링할 때,  Pay 버튼은 비활성화 되어 있어야 하고, amount와 note가 입력이 되어 있을 때 pay 버튼은 활성화 되어있어야 한다', async () => {

    render(<TransactionCreateStepTwo sender={{ id: '5' }} receiver={{ id: '5' }} />);

    expect(screen.getByRole('button', { name: /pay/i }).toBeDisabled();

    userEvent.type(screen.getByPlaceholderText(/amount/i, "50");
    userEvent.type(screen.getByPlaceholderText(/add a note/i, "dinner");

    expect(screen.getByRole('button', { name: /pay/i }).toBeEnabled();
});

이처럼, 단위 테스트들을 작성하다가 테스트 시나리오 상 하나로 합쳐도 된다는 생각이 들면 같은 테스트 단위에 넣으면 된다.

E2E 테스트

리액트에서 E2E 테스트는 주로 cypress를 이용한다.

다음은 결제하는 과정을 cypress로 작성한 코드이다

const { v4: uuidv4 } = require('uuid');

describe('payment', () => {
    it('user can make payment', () => {
        //  login
        cy.visit('/');
        cy.findByRole('textbox', { name: /username/i }).type('johndoe');
        cy.findByLabelText(/password/i).type('s3cret');
        cy.findByRole('checkbox', { name: /remember me/i }).check();
        cy.findByRole('button', { name: /sign in/i }).click();

        // check account balance
        let oldBalance;
        cy.get('[data-test=sidenav-user-balance]').then($balance => oldBalance = $balance.text());

        // click on new button
        cy.findByRole('button', { name: /new/i }).click();

        // search for user
        cy.findByRole('textbox').type('devon becker');
        cy.findByText(/devon becker/i).click();

        // add amount and note and click pay
        const paymentAmount = "5.00";
        cy.findByPlaceholderText(/amount/i).type(paymentAmount);
        const note = uuidv4();
        cy.findByPlaceholderText(/add a note/i).type(note);
        cy.findByRole('button', { name: /pay/i }).click();

        // return to transactions
        cy.findByRole('button', { name: /return to transactions/i }).click();

        // go to personal payments
        cy.findByRole('tab', { name: /mine/i }).click();

        // click on payment
        cy.findByText(note).click({ force: true });

        // verify if payment was made
        cy.findByText(`-$${paymentAmount}`).should('be.visible');
        cy.findByText(note).should('be.visible');

        // verify if payment amount was deducted
        cy.get('[data-test=sidenav-user-balance]').then($balance => {
            const convertedOldBalance = parseFloat(oldBalance.replace(/\$|,/g, ""));
            const convertedNewBalance = parseFloat($balance.text().replace(/\$|,/g, ""));
            expect(convertedOldBalance - convertedNewBalance).to.equal(parseFloat(paymentAmount));
        });
    });
});

마치면서

개인적인 생각으로 react-testing-library와 cypress 둘 다 사용자 관점에서 컴포넌트를 테스트하는 것이라 한 프로젝트에 둘 다 쓰기에는 중복되는 점이 너무 많다.

회사에서의 프로젝트들은 고유의 규칙, 철학에 따라 둘 다 쓰거나, 둘 중 하나를 선택하겠지만, 내 개인 프로젝트에서는 리액트 컴포넌트를 테스트하는 목적에서는 둘 중에 하나만 선택해서 쓸 생각이다.

왜냐하면 프로덕션 코드를 서포트 하기 위해 테스트 코드를 작성하는 것이지 사용자 관점에서 컴포넌트를 테스트하는 측면에서 중복되는 지점이 많은 두 테스트 라이브러리를 시간을 낭비하면서 동시에 쓸 필요가 없기 때문이다.

출처 Edge Case - https://daryeou.tistory.com/203 단위 테스트 - https://mangkyu.tistory.com/143

1. 리액트 프로젝트 만들기

// 타입스크립트가 탑재된 리액트 앱
yarn create react-app my-app --template typescript

2. node_modules 폴더 삭제하기

node_modules 폴더를 삭제한다.

3. Yarn Berry 버전 세팅

터미널 열어서

yarn set version berry

를 입력한다

4. Node Linker 설정

node_modules를 사용하지 않고 PnP 방식을 사용하기 위해 PnP 설정을 해줘야 한다. 폴더 트리에서 .yarnrc.yml을 열고 yarnPath 밑에 다음을 추가한다.

yarnPath: ...
nodeLinker: pnp <- 추가하기

5. 패키지 설치

패키지 설치를 위해 yarn install 명령어를 실행한다.

➤ YN0000: · Yarn 4.0.2
➤ YN0000: ┌ Resolution step
➤ YN0082: │ @types/jest@npm:*: No candidates found # 에러 메시지
➤ YN0000: └ Completed in 1s 344ms
➤ YN0000: · Failed with errors in 1s 358ms

만약 이러한 에러 메시지가 나왔다면 package.json에서

...
"@types/jest": "버전", <- 지우기
...

"@types/jest": "버전"을 지운다.

6. 'ZipFS' 익스텐션을 설치한다.

• vscode를 사용하는 경우 ZipFS 익스텐션을 사용해야 한다. 프로젝트 내에 .ts, .tsx 파일을 열어보면 빨간 밑줄이 그려지면서 깨지는 현상이 보인다. 그 이유는 타입스크립트 관련 패키지가 .yarn/cache 폴더 아래에 zip파일들로 만들어져 있는데 vscode는 zip파일들을 인식 못하기 때문이다. 따라서 vscode가 zip 파일들을 인식시키기 위해 ZipFS 익스텐션을 사용한다.

7. 명령어 'yarn dlx @yarnpkg/sdks vscode' 실행

yarn dlx @yarnpkg/sdks vscode

vscode가 .yarn/cache 폴더 아래에 있는 타입스크립트 관련 패키지들을 알아차리게 되었다. .vscode/settings.json을 열어보면 "typescript.tsdk": ".yarn/sdks/typescript/lib"가 입력이 되어있는데 이는 .yarn 폴더 안에 있는 타입스크립트 패키지들을 읽어오겠다는 의미이다.

주의! 프로젝트 디렉토리에 공백 문자가 있으면 에러가 발생해서 명령어가 작동이 안되니 공백문자를 꼭 없앤 상태에서 명령어를 실행해야 한다. 예를 들어, 프로젝트 디렉토리가 'chelsoo-macbook-pro/React Projects/...'에서 'React Projects'에 공백 문자가 있으면 'ReactProjects'나 'React_Projects'로 바꿔주어야 한다!

8. 워크스페이스 버전에 맞는 타입스크립트 버전 허용

.ts, .tsx 파일에서 여전히 빨간색 줄이 그려져 있는 것이 보일 것이다. 이를 없애기 위해 vscode에서 cmd + p 누른 다음 > 를 입력해서 Typescript: Select TypeScript Version을 입력해서 선택해준다. 그런 다음, Use Workspace Version을 선택한다.

9. App.test.tsx 에러 고치기

App.test.tsx에서 타입 에러가 뜨는데 이를 고치기 위해서

1. yarn remove @testing-library/jest-dom을 입력해서 @testing-library/jest-dom을 지운다.
2. 그런 다음 다시 설치한다.

   yarn add -D @types/testing-library__jest-dom @testing-library/jest-dom

10. .gitignore에 git이 무시해야할 파일들 추가

yarn berry로 세팅하면서 생긴 dependency들을 git에서 제외시킨다.

# yarn zero-install
.yarn/*
!.yarn/cache
!.yarn/patches
!.yarn/plugins
!.yarn/releases
!.yarn/sdks
!.yarn/versions

이 글은 Getting Started with Sequelize and Postgres를 참고해서 작성하였습니다.

Sequelize가 뭐지?

• Sequelize는 관계형 데이터베이스(MySQL, Postgres, MS SQL)을 위한 Node.js용 ORM입니다
• Promise 기반입니다

• ORM(Object Relational Mapping)은 SQL 대신에 데이터베이스와 소통할 수 있게 해주는 프로그래밍 언어입니다. 즉 SQL 대신에 코드로 쿼리문을 작성할 수 있게 해줍니다.

Sequelize-cli는 뭐지?

• cli에서 알 수 있듯이 윈도우의 cmd나 Mac의 Terminal에서 Sequelize 관련 명령어를 쓸 수 있게 해주는 도구입니다.
• 대표적으로 Model을 만들거나 Migration이나 Seed를 할 때 사용합니다.

Model은 뭐고 Migration은 뭐고 Seed는 뭐지?

• Model은 Column 이름, 데이터 타입, Foreign Key 설정, 제약 조건 등 테이블의 스키마를 정의한 것입니다.
• Migration은 Model에서 정의된 스키마를 바탕으로 실제 DB 서버에 테이블을 만들어주는 과정입니다.
• Seed는 실제 데이터를 데이터베이스에 넣는 것을 과정입니다.

개발환경은 node.js를 사용하고, PostgreSQL을 사용합니다. npm 혹은 yarn, pgAdmin을 설치했다는 것을 가정합니다.

1. Dependency 설치

npm install sequelize sequelize-cli pg pg-hstore dotenv

혹은

yarn add sequelize sequelize-cli pg pg-hstore dotenv

을 입력해서 dependency들을 설치해주세요

• sequelize는 sequelize 라이브러리 사용 및 PostgreSQL DB서버와 연결하게 해줌
• sequelize-cli는 sequelize 관련 명령어로 데이터베이스 작업을 해주는 툴

2. .sequelizerc를 통해서 sequelize config 만들기

새로 .sequelizerc라는 파일을 만들고 다음과 같이 코드를 작성합니다.

const path = require('path')

module.exports = {
  'config': path.resolve('./database/config', 'config.js'),
  'models-path': path.resolve('./database/models'),
  'migrations-path': path.resolve('./database/migrations'),
  'seeders-path': path.resolve('./database/seeders')
}

'config': PostgreDB 서버와 연결할 connection string를 설정하는 폴더를 sequelize-cli가 생성하도록 해줌 'models-path': 테이블의 스키마를 정의해준 디렉토리. sequelize-cli가 이 파일을 바탕으로 마이그레이션 파일을 생성. 'migrations-path': 실제로 cli가 DB서버에 테이블을 만들도록 도와주는 디렉토리. 'seeders-path': 실제 데이터들을 넣는 폴더. cli가 데이터들을 보고 DB의 테이블에 데이터들을 넣음.

다음 명령어를 실행합니다. npx sequelize init

./node_modules/.bin/sequelize 쓰는 대신에 npx가 ./node_modules/.bin을 가리키게 해줍니다. ./node_modules/.bin/sequelize 를 실행해야 하는 이유는 sequelize-cli가 global하게 설치 하지 않고 로컬에 설치했기 때문입니다. Global하게 설치하면 sequelize init으로 실행시킬 있습니다. Sequelize CLI를 사용하여 User API 만들기 참고

database/config/안에 config.js를 밑의 코드로 대체해줍니다

require('dotenv').config()

module.exports = {
  development: {
    url: process.env.DEV_DATABASE_URL,
    dialect: 'postgres',
  },
  test: {
    url: process.env.TEST_DATABASE_URL,
    dialect: 'postgres',
  },
  production: {
    url: process.env.DATABASE_URL,
    dialect: 'postgres',
  },
}

3. DB서버에 데이터베이스 만들기

방법 1) pgAdmin에 들어가서 왼쪽에 Servers-PostgreSQL 12-Databases에 마우스 우클릭 하고 my_db라는 이름으로 Database를 만듭니다

방법 2) cli를 이용해서 Database를 만듭니다. Database를 만들기 위해 아래의 명령어를 입력합니다.

npx createdb my_db -U <db_user>

는 Datases의 properties에서 볼 수 있습니다.

npm install dotenv 혹은 yarn add dotenv를 입력하여 dotenv를 설치하고 .dotenv 파일을 생성하여 아래와 같이 입력합니다.

DEV_DATABASE_URL=postgres://<db_user>:<db_password>@127.0.0.1:5432/my_db

방법2 에서 가 어떤 것인지 확인해주세요

4. Model, Migration 만들기

테이블 시나리오

예를 들어 레딧 같은 커뮤니티 웹사이트를 만들어 본다고 가정해봅시다. 우리는 User, Post, Comment라는 테이블이 필요합니다. 그러면 다음과 같은 관계가 생깁니다.

• User는 여러개의 Post를 가집니다. (One To Many)
• User는 여러개의 Comment를 가집니다. (One To Many)
• Post는 여러개의 Comment를 가집니다. (One To Many)

이러한 테이블 관계를 만들기 위해 계속해서 봅시다.

User, Post, Comment 모델 만들기

sequelize-cli로 User, Post, Comment 모델을 만들어 볼까요?

npx sequelize model:generate --name User --attributes name:string,email:string

npx sequelize model:generate --name Post --attributes title:string,content:text,userId:integer

npx sequelize model:generate --name Comment --attributes postId:integer,comment:text,userId:integer

위의 명령어들을 통해 /database/migration과 /database/model 디렉토리에 Migration과 Model을 생성해줍니다.

주의 : attirbute를 입력할 때 space 없이 입력합니다. ex) name:string,email:string

Foreign Key(userId, postId)에 NOT NULL이라는 제약조건을 넣습니다. 모델을 Eager loading 하기 위해서 입니다

userId: {
      type: Sequelize.INTEGER,
      allowNull: false,
    },

postId: {
      type: Sequelize.INTEGER,
      allowNull: false,
    },

/database/models/에 다음과 같은 코드를 추가합니다.

// database/models/user.js

module.exports = (sequelize, DataTypes) => {
  const User = sequelize.define('User', {
    name: DataTypes.STRING,
    email: DataTypes.STRING
  }, {});
  User.associate = function(models) {
    // associations can be defined here
    User.hasMany(models.Post, {
      foreignKey: 'userId',
      as: 'posts',
      onDelete: 'CASCADE',
    });

    User.hasMany(models.Comment, {
      foreignKey: 'userId',
      as: 'comments',
      onDelete: 'CASCADE',
    });
  };
  return User;
};

// database/models/post.js

module.exports = (sequelize, DataTypes) => {
  const Post = sequelize.define('Post', {
    title: DataTypes.STRING,
    content: DataTypes.TEXT,
    userId: DataTypes.INTEGER
  }, {});
  Post.associate = function(models) {
    // associations can be defined here
    Post.hasMany(models.Comment, {
      foreignKey: 'postId',
      as: 'comments',
      onDelete: 'CASCADE',
    });

    Post.belongsTo(models.User, {
      foreignKey: 'userId',
      as: 'author',
      onDelete: 'CASCADE',
    })
  };
  return Post;
};

// database/models/comment.js

module.exports = (sequelize, DataTypes) => {
  const Comment = sequelize.define('Comment', {
    postId: DataTypes.INTEGER,
    comment: DataTypes.TEXT,
    userId: DataTypes.INTEGER
  }, {});
  Comment.associate = function(models) {
    // associations can be defined here
    Comment.belongsTo(models.User, {
      foreignKey: 'userId',
      as: 'author'
    });
    Comment.belongsTo(models.Post, {
      foreignKey: 'postId',
      as: 'post'
    });
  };
  return Comment;
};

마이그레이션 하기

테이블의 스키마도 다 정의 했으니(모델링) DB에 테이블을 만들어 봅시다. npx sequelize db:migrate 성공했다면 DB에 User, Post, Comment 테이블이 만들어졌을 겁니다.

5. 데이터 Seed 하기

sequelize-cli를 이용하여 seed 파일을 만들어 봅시다.

npx sequelize seed:generate --name User

npx sequelize seed:generate --name Post

npx sequelize seed:generate --name Comment

위의 명령어를 실행하면 /database/seeders/ 디렉토리 안에 YYYYMMDD-User.js, YYYYMMDD-Post.js, YYYYMMDD-Comment.js 가 만들어집니다.

실제 데이터를 테이블에 넣어 봅시다. 아래와 같이 작성하여 DB에 넣을 데이터를 만듭니다.

// database/seeds/YYYYMMDD-User.js

module.exports = {
  up: (queryInterface, Sequelize) => queryInterface.bulkInsert(
    'Users',
    [
      {
        name: 'Jane Doe',
        email: 'janedoe@example.com',
        createdAt: new Date(),
        updatedAt: new Date(),
      },
      {
        name: 'Jon Doe',
        email: 'jondoe@example.com',
        createdAt: new Date(),
        updatedAt: new Date(),
      },
    ],
    {},
  ),

  down: (queryInterface, Sequelize) => queryInterface.bulkDelete('Users', null, {}),
};

// database/seeds/YYYYMMDD-Post.js

module.exports = {
  up: (queryInterface, Sequelize) =>
    queryInterface.bulkInsert(
      "Posts",
      [
        {
          userId: 1,
          title: "hispotan de nu",
          content:
            "Nulla mollis molestie lorem. Quisque ut erat. Curabitur gravida nisi at nibh.",
          createdAt: new Date(),
          updatedAt: new Date()
        },
        { 
          userId: 2,
          title: 'some dummy title',
          content:
            "Maecenas tincidunt lacus at velit. Vivamus vel nulla eget eros elementum pellentesque. Quisque porta volutpat erat.",
          createdAt: new Date(),
          updatedAt: new Date()
        }
      ],

      {}
    ),

  down: (queryInterface, Sequelize) =>
    queryInterface.bulkDelete("Posts", null, {})
};

// database/seeds/YYYYMMDD-Comment.js

module.exports = {
  up: (queryInterface, Sequelize) =>
    queryInterface.bulkInsert(
      "Comments",
      [
        {
          userId: 1,
          postId: 2,
          comment:
            "Nulla mollis molestie lorem. Quisque ut erat. Curabitur gravida nisi at nibh.",
          createdAt: new Date(),
          updatedAt: new Date()
        },
        {
          userId: 2,
          postId: 1,
          comment:
            "Maecenas tincidunt lacus at velit. Vivamus vel nulla eget eros elementum pellentesque. Quisque porta volutpat erat.",
          createdAt: new Date(),
          updatedAt: new Date()
        }
      ],
      {}
    ),

  down: (queryInterface, Sequelize) =>
    queryInterface.bulkDelete("Comments", null, {})
};

sequelize-cli를 이용하여 데이터를 DB에 Seed 해봅시다 npx sequleize db:seed:all

성공했으면 데이터가 실제 테이블에 들어간 것입니다. 여기까지 Sequelize와 Sequelize-cli를 이용하여 Model, Migration 그리고 Seed까지 해봤습니다. 끝!

출처 - How to setup a Typescript React Native App by Ben Awad

들어가기 전

node.js가 설치되어 있어야 하고 yarn 환경에서 진행할 예정할 예정이다.

• node.js 설치하기
• npm에서 yarn 패키지 모듈 관리 도구 설치하기 - npm install -g yarn

리액트 네이티브 프로젝트를 expo 라는 도구를 설치해야 한다. expo는 React의 'create-react-app'처럼 새로운 리액트 네이티브 프로젝트를 만들때 쉽고 빠르게 해주는 도구이다. 또한 안드로이드의 안드로이드 스튜디오나 아이폰의 XCode 설치 없이 실제 Device에서 앱을 실행하기 쉽게 해주는 도구이다.

프로젝트 만드는 순서

1. expo-cli를 설치한다 yarn global add expo-cli

2. cli를 열어서 expo init myReactNative를 실행한다. expo init은 리액트 네이티브 프로젝트를 만드는 명령어이다. 프로젝트 이름은 myReactNative 말고 다른 것을 사용해도 된다.

3. 다음 dependencies를 설치한다. yarn add -D react-native-typescript-transformer typescript @types/react @types/react-native

• react-native-typescript-transformer 리액트 네이티브 프로젝트의 .ts|.tsx 파일들을 .js로 transpiling 해주는 도구
• typescript 타입스크립트를 지원해주는 도구
• @types/react 처음 리액트 프로젝트를 만들 때는 리액트의 타입이 지원되지 않은 채로 만들어진다. 그렇게 되면 타입스크립트 컴파일러가 리액트가 무슨 타입인지 몰라서 에러를 발생한다. 타입을 지원하기 위해 설치한다.
• @types/react-native 마찬가지로 타입을 지원하기 위해 설치한다.

4. ./myReactNative/App.json을 열고 가장 하단에 다음 옵션을 추가한다.

5. 타입스크립트를 컴파일 하기 위해 tsconfig.json 파일을 생성한다. npx tsc --init

6. tsconfig.json에서 "jsx": 'preserve"을 "jsx": "react-native"로 변경한다.

7. cli을 열고 리액트 네이티브 프로젝트를 실행한다. yarn start 프로젝트를 실행하면 다음과 같이 엑스포 dev tool이 나온다.

8. 개발하는 동안 핸드폰에서 어플을 개발되는 과정을 볼 수 수 있어야 한다. 따라서 핸드폰에서 Expo 앱을 설치한다. Expo 앱은 다음과 같이 생겼다.

*9. 설치를 했으면 Expo에 *필수로 회원가입하고 로그인을 해야한다. 로그인을 안하면 휴대폰에서 프로젝트 빌드가 안된다. **

*10. 안드로이드 유저는 엑스포 앱을 켜서 QR코드로 스캔하면 앱이 휴대폰에서 빌드가 된다. (아이폰 유저는... 아이폰이 없어서 잘 모르겠다.. 댓글로 알려주면 감사하겠다.) *

11. 휴대폰 화면에 "Open up App.js to start working on your app!"이 나오면 리액트 네이티브 프로젝트를 성공적으로 만든 것이다. 이제부터 개발을 시작하면 된다.

못다한 말

실제 기기로 개발하면 편리하고 좋지만 안드로이드 혹은 아이폰이 없을 수도 있을 것이다. Expo에서 아이폰/안드로이드 에뮬레이터를 제공하여 실제 컴퓨터에서도 아이폰/안드로이드 환경에서 개발을 할 수 있다고 한다. 다음 기회에 에뮬레이터를 설치하는 방법을 찾아서 알리도록 하겠다.

0. 사전준비

다음 2개의 패키지를 설치한다.

npm install @babel/core @babel/cli --save-dev 혹은 yarn add @babel/core @babel/cli --dev

1. 해당 프로젝트에 src 폴더를 만든다.

src 폴더를 만드는 이유는

ES2015로 변환시키기 위한 .js파일들만 모으기 위해서이다. 만약 현재 진행하고 있는 프로젝트에 src 폴더가 없으면 새로 생성해서 옮겨도 무방하다.

2. ES2016+코드로 간단한 Express.js 웹앱을 만든다.

import express from "express"      // ES2016 코드
import morgan from "morgan"        // ES2016 코드
const app = express();

app.get('/', (req, res) => {
  res.send('Hello World!');
});


const PORT = 8080;
app.listen(PORT, () => {
  console.log(`Server listening on port ${PORT}...`);
});

Note: ES2015 코드로 컴파일 하기 위한 예시코드이다. 코드를 이해할 필요없다.

3. package.json을 열어 "script" 부분을 다음과 같은 명령어를 추가한다.

• "build:server": "babel src --out-dir build"

1. "babel src --out-dir build" : src 폴더 안에 있는 모든 .js 파일들을 ES2015 코드로 컴파일한다. 그리고 src 폴더의 상위 디렉토리에 build라는 폴더를 만들고 컴파일된 파일들을 build 폴더 안에 넣는다. 폴더이름을 build말고 lib이나 dist 같이 다른 이름을 써도 괜찮다.

   Note: "babel src --out-dir build"을 여러번 실행해도 덮어쓰기가 안된다. This doesn't overwrite any other files or directories in lib. - babel 문서

2. "build:server" 말고 "complile:server", "transpile:server" 등등 자기가 알아보기 쉬운 명령어로 적어도 된다.

• "build": "npm run build:server" 위에서 추가한 "build:server" 를 실행시키기 위한 명령어이다. 없어도 괜찮지만 컴파일하려면 PowerShell이나 cmd에 "npm run build:server" 라는 명령어를 직접 입력해야 한다. React.js에서 build할 때 명령어가 npm run build라서 명령어를 통일하고 싶었다.

1. "prebuild": "rd /s "build"" 업데이트 된 코드를 다시 컴파일 하려면 build 폴더를 지워야 하는데 직접 마우스 클릭해서 지우기 귀찮다. 또한 babel src --out-dir build 은 덮어쓰기가 안된다고 했다. 따라서 컴파일된 코드를 build 폴더에 넣기 전 기존에 있었던 build 폴더 및 build폴더에 있었던 모든 파일들을 삭제시킨다. 따로 npm run prebuild 를 입력할 필요 없이 npm run build 명령어를 입력하면 알아서 npm run prebuild 를 하게 된다. prebuild가 말 그대로 빌드하기 전에 하는 것이니까.

주의

1. rd /s는 윈도우의 cmd에서 쓰는 명령어이다. 리눅스를 쓰는 사용자라면 "prebuild": "rm -rf build"를 쓰자.
2. 빈 build 폴더를 우선 만들자. 만들지 않으면 build라는 폴더를 못찾아서 실행이 되지 않는다.

#ES2015로 컴파일 결과..

• 컴파일 되기 전..

• 컴파일 후..

에필로그

node app.js으로 실행이 되서 서버가 작동이 되어야 실제 웹앱을 구글 클라우드나 AWS에 배포할 때도 작동이 되는데 node app.js는 ES2016+ 문법을 이해못한다는 사실을 알았다. 그래서 ES2016+ 문법을 컴파일 하는 방법을 찾았고 의외로 간단하게 컴파일 할 수 있다는 것도 깨달았다.

0) 들어가기 전..

웹팩 설정, npm package 설치 그리고 어떠한 configuration이 전혀 없다! 정말 쉽다.

1) .storybook 디렉토리에 preview-head.html 파일을 생성한다

웹팩 설정 없이 preview-head.html파일을 만들어 준다. preview-head.html 파일은 마치 리액트 프로젝트의 public/index.html에서 부트스트랩을 CDN을 통해(를 통해) 가져올 때 처럼 스토리북 프로젝트에도 CDN을 통해 가져올 때 쓰도록 해주는 파일이다.

2) 부트스트랩 CDN을 복사해서 preview-head.html에 붙여넣는다.

Bootstrap CSS CDN 링크: https://getbootstrap.com/docs/4.4/getting-started/introduction/

위의 스크린샷 처럼 단순히 CDN을 복사+붙여넣기 한다. 스토리북 프로젝트가 실행되어 있는 상태에서 CDN을 적용했다면 CLI에서 ctrl+c를 눌러 종료시킨 후 다시 실행시켜야 Bootstrap의 스타일이 적용된 스토리북 프로젝트를 볼 수 있다.

3) Bootstrap CDN 적용 전 / 적용 후

• 적용 전 -

  

• 적용 후 -

  

• 또한 Bootstrap JS의 CDN을 가져와서 적용이 가능하다. 이때는 태그의 가장 아랫부분에 Bootstrap JS의 CDN을 import를 해야할 필요가 있을 것이다. 스토리북 공식 문서에 Add Custom Body 를 참고하면 된다.

• 부트스트랩 뿐만 아니라 다른 CSS Framework 또한 CDN을 가져와서 스토리북에 적용할 수 있다.

4) 여러분의 시간은 소중합니다...

how to import bootstrap in storybook 으로 구글링 하면서 찾아보니까 대부분 하는 말들이 '웹팩 설정을 다시해야 한다', '어떤 npm package를 설치해야한다' 이었다. 설정하느라고 고생은 다했지만 제대로 된 것은 하나도 없었고 개발자에게 삽질이 중요한 미덕이라고 생각하지만 삽질도 각 개발자마다 우선순위가 있다고 생각한다. 이 글을 보는 분들의 덜 삽질을 위해 이 글을 쓴다.