7/10 2주차 세션 : 해커톤

넥스터즈 19기 활동이 본격적으로 시작되었다. 2주차부터 해커톤을 시작하는데 밤을 새는 일정(!)이었다.

그렇지만 어디까지나 자유라서 우리 팀은 밤을 새진 않았다. (하루만 새도 다음주 평일이 힘들기 때문에 😢)

 

금요일에 아이스 브레이킹+아이디어에 관한 생각을 공유하면서 모두 같은 방향을 바라볼 수 있도록 의견을 맞추었다.

따라서 해커톤동안 아이디어를 구체화하면서 와이어 프레임이 나올 수 있었다. (다하고 나니 밤 12시가 되었다 😳)

 

우리는 밤을 새지는 않기 때문에 1차 목표를 '개발 환경 구축'으로 소신 정의하였다.

본격적인 개발에 착수하기 전, 기술 스택 확정 및 형상 관리 Setup을 진행하였다.

 

기술스택 (Frontend)

Nextjs 11 + Typescript

 

Data Fetching: Swr, Axios

CSS: tailwindCSS

UI Framework: Antd

CI: github Action

CD: Elastic Beanstalk

Kanban board : Github Project

State Management: Context API (혹은 Mobx 도입 고려)

 

8/26 업데이트

Category	Libraries & Skills
Framework (Language)	Nextjs 11.0.1, Typescript
Data Fetching	Axios, SWR
Design System	TailwindCSS, Emotionjs
Lint	ESLint, Prettier
Testing	Jest
Build & Deploy	Docker, Kubernetes
Communication	Github Project, Notion
Issue Tracking	Husky, Github Issue

 

 

동아리에서 내 포지션은 웹 프론트엔드라서 회사에서 곧 사용할 계획인 Nextjs와 Typescript로 정하였다.

(회사에서 사용전에 익숙해지기 위한 사심이 담긴 기술스택...)

회사에서는 Nextjs 10이지만 11이 release되었고, 더 발전된 기능을 제공하기 때문에 11로 정하였다.

 

Nextjs 11 소개

Next.js 11

 

 

Setup

먼저 Setup 과정으로 아래 네 가지 사항을 설정하였다.

Nexjs에서 default로 제공하는 기능이 잘되어있어서 공식문서 읽으면서 숟가락 얹기만 했다 🙄

 

1. lint, prettier

2. husky

3. 상대경로

4. jest

 

1. lint, prettier 설정

Nextjs 11에서는 내장된 린트를 제공하고 있어 아래 명령어로 간단하게 린트 검사를 수행할 수 있다.

Nextjs11 - ESLint

> npx next lint
info  - Using webpack 5. Reason: Enabled by default https://nextjs.org/docs/messages/webpack5
✔ No ESLint warnings or errors

또한 eslint-plugin-next에서 커먼 이슈에 관한 린트 설정을 제공하고 있다.

 

이 모든 설정은 create-next-app 으로 Nextjs 프로젝트를 생성하면 자동으로 설정되어 있다.

{
  "extends": ["next", "next/core-web-vitals"]
}

나는 여기에 추가로 typescript-eslint와 prettier, eslint 설정을 하고 싶었기 때문에 아래처럼 구성하였다.

extends: [
    'eslint:recommended',
    'next',
    'next/core-web-vitals',
    'plugin:react/recommended',
    'plugin:@typescript-eslint/recommended',
]

 

2. husky 설정

우리는 github을 적극적으로 활용하기로 해서 github issue에 feature들을 등록 후 이슈 기반으로 관리하기로 하였다.

(회사랑 똑같다)

 

그래서 회사에서 commit 메세지에 hook을 걸어 이슈 넘버링하는 것과 마찬가지로 husky 설정을 진행하였다.

(+ 린트 자동화를 위한 lint-staged)

 

3. 상대경로 설정

상대경로 설정을 위해서 따로 craco나 babel-plugin-root-import 등을 해줄 필요 없이 tsconfig.json, jsconfig.json에서 바로 설정할 수 있다. (사랑해요 Nextjs)

Nextjs 11 - Absolute Imports and Module path aliases

Next.js automatically supports the tsconfig.json and jsconfig.json "paths" and "baseUrl" options since Next.js9.4.

"compilerOptions": {
    "baseUrl": "src",
    "paths": {
        "$components/*": ["components/*"],
        "$utils/*": ["utils/*"]
    }
}

 

4. jest 설정

사이드 프로젝트에서도 TDD를 준수하기 위해 jest를 설정하였다. (Cypress까지는 필요없을거 같다.)

 

먼저 아래 라이브러리들을 설치한다.

> npm i -D jest @types/jest @testing-library/jest-dom @testing-library/react

 

그리고 jest --init으로 jest.config.js를 생성한다. 중간에 여러 설정들이 나오는데 나는 ts 버전으로 사용하였다.

> npx jest --init

 

jest.config.js 파일이 생성되면 내부에 내 프로젝트 구조에 맞게 설정을 해줄 수 있다.

const {pathsToModuleNameMapper} = require('ts-jest/utils')
const {compilerOptions} = require('./tsconfig.json')

module.exports = {
    roots: ['<rootDir>'],
    modulePaths: ['<rootDir>src'],
    setupFilesAfterEnv: ['<rootDir>src/setupTests.js'],
    testPathIgnorePatterns: ['<rootDir>/.next/', '<rootDir>/node_modules/'],
    moduleNameMapper: {
        '^.+\\.module\\.(css|sass|scss)$': 'identity-obj-proxy',
        ...pathsToModuleNameMapper(compilerOptions.paths),
    },
    testEnvironment: 'jsdom',
}

moduleNameMapper: 원래 jest에서는 정적 파일들을 바로 사용할 수 없으므로 mocking해야 한다. moduleNameMapper는 이 mocking을 쉽고 우아하게(공식문서에서 gracefully) 작성할 수 있게 한다.

 

그러나 CSSModule은 identity-obj-proxy를 사용하여 className에 import된 스타일명을 이름으로 mocking한다.

styles.root === 'root'

// original
import React, { Component } from 'react';

import styles from './App.css'; // CSS Modules here

export default class App extends Component {
  render() {
    return (
      <div className={styles.root}>
        <h1 className={styles.hello}>Hello, world!</h1>
      </div>
    );
  }
}

// snapshot
exports[`test App renders correctly 1`] = `
<div
  className="root">
  <h1
    className="hello">
    Hello, world!
  </h1>
</div>
`;

 

그리고 jest를 린트에 사전 정의한 전역변수로 등록해준다. 이제 jest.mock과 같이 static 메서드를 인식할 수 있다.

// .eslintrc
{
  env: {
    jest: true
  }
}

 

또한 jest에 tsconfig.json 설정 적용을 위해 tsconfig.json의 types에 jest를 추가한다.

types로 tsconfig.json이 포함될 파일들을 명시할 수 있다.

{
  "compilerOptions": {
    "types": ["jest", "react"]
  }
}

 

2주차를 마치며

역시나 Setup은 순탄하지 않았다. 그 중에 tsconfig.json 설정이 워낙 다양해서 다른 repo를 참고하면서 만들었는데 Type Checking, module 설정 등 더 많은 설정들로 configuration할 수 있었다. 개발하면서 있으면 좋겠다 싶은 설정들을 하나씩 수정해봐야겠다.

 

그리고 directory 구조를 설계해야 하는데 사내에서 사용하는 구조도 보고 github template도 서치해볼 것이다.

Data Fetch는 swr과 axios 조합을 사용할 것이다. 상태관리는 그렇게 큰 스펙의 서비스는 아니라서 별도 라이브러리없이 Context API만을 고려하고 있다. 간단한 기능하나 추가하면서 전반적인 구조를 설계해야겠다.

 

저장소

https://github.com/Nexters/covid-letter-web