yarn berry를 사용하여 typescript 개발 환경을 만들어보자 yarn berry 설정 패키지 매니저 버전을 yarn berry로 변경하기 위해, 아래 명령어를 수행한다. yarn set version berry 위 명령어가 수행이 되면, .yarn 폴더, .yarnrc.yml 파일이 생성된다. 프로젝트 생성 yarn init 명령어를 사용하여, 프로젝트를 생성한다. yarn init -y package.json을 보면 packageManager 부분이 yarn@3.x.x과 설정되어 있는 것을 확인 할 수 있다. (3버전이 berry) { ... "packageManager": "yarn@3.3.1", ... } typescript 설정 기본적으로 프로젝트가 설정되었으니 typescript를 ..

monorepo 프로젝트 구성 프로젝트의 디렉토를 생성해준다. mkdir typeorm-apollo-server-example yarn berry를 사용할 예정이기 때문에, 아래 명령어로 berry 버전으로 변경해준다. yarn set version berry 아래에서 apollo server를 오류없이 원활하게 구축하기 위해, .yarnrc.yml의 nodeLinker를 node-modules로 수정해준다. nodeLinker: node-modules yarnPath: .yarn/releases/yarn-3.2.3.cjs yarn init 명령어로 monorepo 프로젝트를 초기 설정한다. yarn init -y package.json이 생성이 되면, workspace 경로를 정의하고, 편의를 위해 s..

환경 nodejs: v16.15.1 (lts) yarn version: berry 프로젝트 구조: monorepo Framework: apollo-server-express 기타 사용 모듈: typescript, Knex DB: postgresql monorepo 프로젝트 생성 graphql 서버 구축 전에 yarn workspace를 활용하여 monorepo 프로젝트 생성을 한다. mkdir knex-apollo-server-example yarn berry를 사용하기 위해 버전을 변경한다. 그리고 yarn init 명령어로 프로젝트 초기 설정을 한다. yarn set version berry yarn init -y .yarnrc.yml에서 nodeLinker에 node-modules를 추가한다. no..

styled-components 의존성 설치 styled-component를 사용하기 위해 styled-components와 @type/styled-components 를 의존서에 추가해야 한다. # with npm npm install --save styled-components # with yarn yarn add styled-components javacript에서 사용한다면 문제는 없지만, typescript에서 오류없이 사용하기 위해서는 styled-component의 type들을 가지고 와야한다. # with npm npm i --save-dev @types/styled-components # with yarn yatn add --dev @types/styled-components 첫 styl..

오류 내용 rollup으로 공통으로 사용할 ui 모듈을 생성하여, web app에 가져다가 사용하는 도중에 아래와 같은 오류가 발생했다. Uncaught TypeError: Cannot read properties of null (reading 'useState') 오류 내용은 null에서 useState를 읽으려고 하다보니 발생한다. 공통 모듈 개발 당시에는 문제없이 동작을 했는데, rollup 번들링을 하고 나면 오류가 발생한다. 공통 모듈 개발 당시 정상 동작 확인 오류 조치 rollup 빌드시 external 옵션에 react, react-dom을 추가해줘야 한다. (만약 styled-components를 사용한다면, 같이 포함해줘야 함) rollup.config.js // ... export d..

프로젝트 생성 본 글에서는 ui라는 이름의 디렉토리를 생성하여, esm 모듈을 만든다. mkdir ui cd ui 패키지 관리툴은 yarn berry 버전을 사용하기 위해, 아래 명령어를 수행한다. yarn set version berry package.json을 생성한다. yarn init -y { "name": "ui", "packageManager": "yarn@3.2.1", "version": "0.0.1", "main": "lib/index.js", "scripts": { "build": "" } } react 모듈을 만들기 위해, react와 react-dom을 의존성에 추가한다. yarn add --dev react react-dom package.json 에 react와 react-dom에..

Typescript 기본 타입 Typescript에서 사용할 수 있는 기본 타입은 아래와 같다 number: 정수, 소수 등 숫자 타입 string: 문자열 타입 boolean: 불리안 타입 (참, 거짓) object: 객체 타입 symbol: 심볼 타입 enum: enum 타입 any: any 타입은 모든 기본 타입의 상위 타입 tuple: tuple 타입 ... 숫자 타입 (number) 숫자 타입은 정수(양수, 0, 음수), 소수 값을 할당할 수 있다. 키워드는 number를 사용한다. let numValue: number; numValue = 3; console.log(numValue); // 3 numValue = 3.14; console.log(numValue); // 3.14 쉼표를 이용하여..

Typescript 란? Typescript는 Javascript의 상위 집합(SuperSet)인 오픈소스 프로그래밍 언어이다. Microsoft에 개발 및 유지 보수를 하고 있으며, 엄격한 문법을 지원하여, 대규모 애플리케이션을 개발하기에 용이하다. 기존 javascript의 문제 Javascript에서 변수는 타입을 지정하지 않고, 하나의 변수에 여러 타입의 값을 할당할 수 있어서 오류가 발생하기 쉽다. 예를들어, let greet = 'hello world'; greet = 50; // ...중략... console.log(greet.split(' ')); // ERR 문자열 값을 기대했지만, 중간에 number 값이 할당되어 오류 발생 코드가 길어지고 여러 개발자가 같이 개발을 하다보면, 변수에 ..

기존 React App에 Typescript 적용하기 Typescript 의존성 추가 타입 스크립트를 적용하기 위해 필요한 라이브러리들을 package.json에 의존성을 추가한다. (아래 명령어 참고) $ yarn add typescript @types/node @types/react @types/react-dom @types/jest --dev 위 명령어를 수행하면 아래와 같이 package.json > devDependencies 에 의존성 라이브러리들이 추가된다. { ... "devDependencies": { "@types/jest": "^27.4.1", "@types/node": "^17.0.21", "@types/react": "^17.0.39", "@types/react-dom": "^17..