깃허브 주소

진행방식

프론트엔드 개발자로써 어플리케이션 만드는 역량을 키우고자 약 2주단위로, 토이프로젝트를 하나씩 만들기로 했습니다. 기존에 진행하던 면접 스터디에서 이야기가 나와, 다들 흔쾌히 참여해 서로 완성이 되면 리뷰를 하는 방식으로 진행하고 있습니다. 주제는 우와코스 커리큘럼의 토이 프로젝트들을 난이도 순서대로 해나가기로 했습니다.

리뷰 완성을 했을때 PR을 날리면 팀원끼리 서로 리뷰를 남겨주는 방식입니다.

프로젝트

개요

우선 커리큘럼 중 가장 쉬운 난이도의 숫자 야구 게임입니다. 간단하게 규칙을 설명드리자면, 컴퓨터가 무작위로 뽑은 세자리 숫자를 알아내는 게임입니다. 이때 세자리의 각숫자는 1~9로 이루어지고 고유합니다. 또한 각 자리를 맞추었다면 1스트라이크, 해당 숫자가 정답속에 존재하나 자리가 틀렸을경우에는 1볼로써 힌트를 줍니다.

리뷰 숫자 1개는 자리까지 맞추고, 1개는 자리수는 틀린 상황

리뷰 정답을 맞춘 상황. 재시작을 눌러 게임을 초기화 할 수도 있다.

사용언어

타입스크립트만을 사용하여 어플리케이션을 만들었습니다. 타입스크립트의 사용법과 웹팩세팅에 익숙해지려는 목적입니다. 특히 리액트와 같은 라이브러리들을 이용하면 타입스크립트는 물론이고 자동으로 컴파일과 번들링을 해주기 때문에 실제 어떻게 구현됬는지 잘 몰랐었는데요. 이번 기회에 좀 더 친해질 수 있었습니다.

우테코는 순수 자바스크립트를 상정해 과제를 내서 세팅할때는 조금 달랐지만 이후 코드 구현에서 크게 다를건 없었습니다.

고민했던 사항

로컬에서 발생한 CORS

Access to script at ‘file:///경로/javascript-baseball-precourse/index.js’ from origin ‘null’ has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, brave, chrome-untrusted, https.

로컬에서 html을 실행했을때 CORS 에러가 발생했습니다. fetch를 통해 요청을 보낸 것도 아니고, 동일경로의 js를 불러왔을텐데 어째서 발생하는 지 혼란스러웠습니다.

Other differences between modules and standard scripts

JavaScript modules - JavaScript | MDN

  • 로컬 테스트에서의 주의 사항 — HTML파일을 로컬(예를들어 file:// URL)에서 로드하려고 하면, 자바스크립트 모듈 보안 요구 사항으로 인해 CORS오류가 발생합니다. 서버를 통해 테스트 해야 합니다.

MDN을 확인해보면, type module 을 사용시, 로컬에서 테스트를 진행하면 CORS 오류가 발생한다고 합니다. 서버를 통해 테스트 해야함을 알 수 있습니다. 위의 에러에서 origin이 ‘null’ 인 걸 확인할 수 있는데, 이것이 보안정책을 따르기 위해 브라우저가 선택한 방법임을 알 수 있습니다. 그래서 초기에는 VSC 확장인 live-server 를 이용해서 테스트했고, 이후에는 웹팩을 세팅해서 해결했습니다.

타입스크립트 적용

타입스크립트 설치

  1. 타입스크립트 설치

     npm i -g typescript

  2. index.ts 및 tsconfig.json 생성

     {
     "compilerOptions": {
         "strict": true, // 엄격모드
         "lib": ["ES6", "dom"], // 코드가 실행될 환경. 브라우저에서 실행한다면 DOM 추가. 자동완성 기능 제공.
         "target": "ES6", // 변환될 자바스크립트 버젼. 모든 최신브라우저는 ES6를 지원하므로, ES6 권장.
         "outDir": "dist", // 결과물 저장될 폴더
     },
     "exclude": ["node_modules"], // 제외
     "include": ["src"] // 변환할 파일 혹은 폴더
 }

  3. 컴파일

     tsc
    • index.ts ⇒ index.js, index.js.map 파일이 생성됨.

    • 노드가 필요할 경우, package.json 수정

        {
    "name": "typescript_download_settings",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1",
      "start":"node index.js",
      "prestart":"tsc" // node 실행전에 ts 컴파일
    },
    "author": "",
    "license": "ISC"
  }

위와 같은 기초적인 세팅만으로 진행이 될 것 같아 우선 코딩에 집중했습니다. 웹팩을 세팅한건 프로젝트가 완성된 이후입니다.

타입스크립트(TypeScript) 시작하기

Lecture - 노마드 코더 Nomad Coders

구문 시그니처? 
interface guide {
  new ({ target }: AppProps): AppInterface;
}
  • 생성자 함수에 타입을 지정해주려는데 애를 먹었습니다. 좋은 해결방법이라곤 할 수 없지만, 생성자 함수 대신 클래스를 사용하면서 해결되었습니다.
웹팩적용

webpack + typescript 개발환경 설정하기

소소한 문제로 경로문제가 발생했었으나 import 뒤의 확장자인 .js를 제거해주니 해결되었습니다.

babel-loader vs ts-loader

바벨로더는 빌드시간이 짧은 반면 타입검사가 약하고, ts로더는 반대로 빌드시간이 길지만 타입검사가 강합니다. 저는 ts-loader를 사용했습니다.

lodash?

자바스크립트 라이브러리 중 하나. array, collection, data 등 데이터의 필수적인 구조를 다루는데 사용됩니다.

  • _.findIndex(array, [predicate=.indentity],[thisArg])

HRM (Hot module Replacement)

mode: "development",
  devtool: "inline-source-map",
  devServer: {
    host: "localhost",
    port: 3000,
    hot: true,
  },

모듈 전체를 다시 로드하지 않고, 어플리케이션이 실행되는 동안 교환, 추가 또는 제거하는 기능입니다. devServer 내 옵션으로 설정할 수 있습니다.