넥스트스텝 블랙커피JS level 1 (1)

소문으로만 들었던 넥스트스텝의 블랙커피JS 레벨1 과정을 드디어 신청하게 되었습니다. 꽤 오래전부터 레벨1부터 3까지 다 해보고싶었는데 항상 때를 놓쳤었는데 올해가 가기전에 드디어 레벨 1 스터디에 참여하게 되었네요.

 

참여계기

• 커뮤니티 스터디를 통한 피드백 필요
• 프로젝트 구조와 코드 작성에 대한 깊은 고민
• 자바스크립트 라는 언어에 대한 더 깊은 이해

이런 이유로 참여하게 되었습니다. 총 4주간에 걸쳐 프로젝트를 진행하게되고 3개의 step 이 존재합니다. 4주인데 스텝은 3개인 이유는 1주는 일부러 여유분 시간을 둔다고 하네요. 이 기간에 리팩토링이나 버그수정 혹은 미처 구현하지못한 부분을 추가로 진행하면 된다고 합니다. 

 

첫주 첫 모임 OT 때 임의로 여러 사람들과 팀으로 묶어주고 팀명을 정하게됩니다. 프로젝트는 각자 진행하지만 팀끼리 진행상황도 체크해주고 코드리뷰도 서로 할 수 있습니다. html / css 구조는 이미 짜여져있고 오직 자바스크립트 작성에만 신경쓰면 되는 프로젝트입니다. 참여하게되면 깃헙 아이디로 브랜치를 생성해주고 해당 브랜치를 클론하여 진행합니다. 

 

git clone -b {본인_아이디} --single-branch <https://github.com/{본인_아이디}/>{저장소 아이디}

 

위와같은 명령어로 클론을 하게되는데 JS 폴더에 index.js 파일만있고 다른 스크립트코드나 파일이 없어야 합니다. 저는 이미 완성된 프로젝트가 클론이 됬었는데 알고보니 제 아이디로 브랜치가 생성되었을때 프로젝트 초기화가 제대로 안되서 생성된것 같더라구요.

 

제 기준으로 봤을때 구현내용은 그렇게 어렵지 않다 생각되었습니다. 그러나 어쨋든 저도 학습을 위해 참여한 스터디이고 얻어가는 부분이 있어야하기때문에 자체적으로 프로젝트의 난이도를 올려보기로 했습니다. 

 

목표

• 타입스크립트로 작성
• 테스트코드 작성 TDD 방식?
• 디자인 패턴을 적용하면서 구조화

현업을 하고있지만 한번도 제대로 적용해서 작성해본적 없는 방법들이고 앞으로 필요한 부분이라 생각되어서 해당 목표를 잡았습니다. 

 

환경설정

npm init -y
npm i -g live-server
npm i -g typescript
npm i -d concurrently

// package.json
{
   "script": {
      "dev": "concurrently \"npm run live\" \"npm run type\"",
      "live": "live-server --port=8080 --browser=chrome",
      "type": "tsc --watch"
   }
}


// tsconfig.json
{
  "compilerOptions": {
    "target": "es5",
    "lib": ["es2015", "dom", "dom.iterable"],
    "outDir": "./dist",
    "moduleResolution": "Node",
    "sourceMap": true,
    "strict": true,          
  },
  "include": ["src/**/*"],
  "exclude": [
    "node_modules",
    "**/*.(spec|test).ts",
  ],
}


// src/js/index.ts
console.log(123)

 

세팅보다는 구현과 작성에 집중하고싶어 webpack 세팅 대신에 간단하게 live-server 라이브러리를 활용하여 tsc --watch 와 함께 사용하기로 결정했습니다. 컴파일과 적용과정이 약간 엇박자이긴한데 뭐 그럭저럭 쓸만한것같습니다.

 

이슈발생

Uncaught ReferenceError: exports is not defined

이게 무슨소리인가 찾아보니 

Object.defineProperty(exports, "__esModule", { value: true });

여기서 exports 가 정의되지 않았다면서 발생하는 에러인데 정확한 이유는 모르겠는데 어쩃든 타입스크립트를 모듈로서 사용하려면 바벨같은 컴파일러를 사용해야하고 결국 웹팩을 설정해야 하는것같습니다.

 

간단한 세팅을 통해서 step1을 진행해보려고했는데 몇가지 이슈로인해 우선 테스트코드와 타입스크립트가 적용안된 순수 자바스크립트만으로 step1 을 구현하였습니다. 

 

첫주 후기

해당 스터디의 방향성 자체가 스터디를 진행하는 사람들끼리의 커뮤니케이션과 피드백을 통해 함께 성장하는것이 목적이라고 이해하고 있습니다. 이말은 참여하는 참여자들의 적극성이 매우 필요한 스터디입니다. 아쉬운점은 첫 리뷰 모임을 진행하기 전에 6명중 두명의 이탈자가 나왔고 스터디 당일날 남은 4명중 참석자는 저를 포함 두명이었습니다.

첫주인데 마지막주같은 느낌을 받아 조금 다운되는 감이 있는것같습니다. 적극적인 참여와 활동을 기대하고 신청한 스터디인데 이런 부분은 아쉬움이 남는것같습니다. 앞으로가 어떻게될지 잘 모르겠지만 완주는 하려고 합니다.

 

해당 프로젝트코드와 진행상황은 

https://github.com/kangyongseok/moonbucks-menu/tree/kangyongseok

GitHub - kangyongseok/moonbucks-menu

여기에서 확인가능합니다.