기먕로기의 로깅

[애자일 & 스크럼] 고등학교 프로젝트 팀의 일일 스크럼

기먕로기 — Mon, 23 Oct 2023 12:21:24 +0900

나는 더모먼트라는 교내 프로젝트 팀에 속해 있다.

내가 개발에 참여한 프로젝트로는

광주소프트웨어마이스터고등학교 입학 지원 서비스 Hello, GSM
광주소프트웨어마이스터고등학교 공식 홈페이지 Official GSM
광주소프트웨어마이스터고등학교 동문 네트워킹 서비스 GSM Networking

등이 있다.

위 서비스들을 개발하며 스크럼을 적용한 경험을 공유하려고 한다.

스크럼 적용까지

스크럼과 XP

스크럼과 XP : 네이버 도서

네이버 도서 상세정보를 제공합니다.

search.shopping.naver.com

먼저 스크럼 적용에 앞서, 팀원들과 함께 스크럼과 XP라는 책을 가지고 스터디를 진행하였다.

스터디는 1주에 1번, 정해진 분량을 읽어와서 자신의 생각을 서로 공유하는 방식으로 진행되었다.

스터디 정리

해당 스터디로 우리 팀은 조금이나마 스크럼에 눈을 뜨게 되었다.

스크럼 적용

먼저, 스프린트를 기획한다.

스프린트 기획에서는 스프린트 목표와 기간, 백로그를 작성하고 본격적으로 스프린트를 시작한다.

일일 스크럼은 did와 to do 공유를 위주로 진행을 했다.

일일 스크럼을 통해, 진행 중인 스프린트의 백로그를 하나씩 옮긴다.

일일 스크럼을 진행하며 좋았던 점은 아래와 같다.

팀원들의 전반적인 진행을 파악할 수 있다.
팀원들과 공유한 to do를 무리해서라도 지킨다.
서로의 진행도에 따라 도움을 주고 받기 위한 자리가 되기도 한다.
(주로 스프린트 일정에 쫒기는 팀원의 ticket을 대신 맡아주는 경우가 있었다.)

반면에 조금 아쉬웠던 점은 아래와 같다.

누군가 일일 스크럼에 늦는다면, 모두가 그 사람을 기다리는 경우가 생겼다.
(오프라인 한정)
항상 해당 시간을 일정없이 비워둬야 하므로 조금의 개인 일정에 차질이 생기는 경우가 생긴다.
간혹 스크럼에 피로함, 지루함을 느끼는 팀원들이 있다.

아쉬웠던 점들은 충분히 해결이 가능한 부분들이고, 단점 대비 장점이 매우 크다고 판단되어 적극적으로 스크럼을 도입하였다.

개인적인 의견을 덧붙이자면 스크럼을 하며 백로그를 하나씩 지워가는 맛은 해본자들만이 안다.

스크럼, 아침 vs 저녁

책에 따르면, 스크럼 시간에 따른 장단점이 있다는 내용이 있다.

각 장단점을 직접 느껴보고자 우리 팀에서 아침과 저녁 각각 일일 스크럼을 진행해보았다.

내 경험에 의존하여 두 스크럼을 비교해보겠다.

아침 스크럼 vs 저녁 스크럼

아침	저녁
눈 뜨기도 힘든 아침, 스크럼에 참여하기 피곤하다.	모든 일과를 마친 후라 비교적 깨어있는 상태이다.
did 보단 to do 위주의 스크럼이 진행된다.	to do 보단 did 위주의 스크럼이 진행된다.
졸린 아침을 스크럼을 통해 극복할 수 있다.	해당 스크럼 시간 전에는 본인의 작업을 그쳐야 한다.
아침에 할 일들을 정리하며 개인적으로도 동기 부여가 된다.	저녁에 오늘 한 일들을 정리하며 일과를 마무리 할 수 있다.

개인적인 선호로는 아침 스크럼이 더 좋은 경험이였다.

졸리고 피곤한 아침에 팀원들과 함께 이야기를 나누며 잠을 깨고, 오늘 하루 to do를 세우며 스크럼으로 에너지를 얻을 수 있었다.

또한 한창 집중하여 작업을 하고 있을 때, 저녁 스크럼으로 인해 이 집중을 깨뜨리는 것이 좋지 못한 경험이였다.

반면에 아침에는 업무를 시작하기 전, 스크럼을 하여 오히려 좋은 효과를 가져왔다.

이건 팀의 문제였지만, 모두가 본인 작업에 열중한 나머지 저녁 스크럼을 깜박하는 경우가 발생한 적이 있었다.

반면 아침 스크럼은 지각하는 팀원은 있어도, 모두가 잊는 경우는 없었다.

정리하자면, 나와 우리 팀은 아침 스크럼이 적합했다.

애자일은 죽었다.

Agile is Dead
- Dave Thomas -

애자일 선언문 참여자 중 한 명인, 데이브 토마스의 강연의 제목이다.

이 강연의 주 내용은 애자일이라는 틀에 얽매일 필요 없이, 조직에 맞는 방법을 찾아 적용하는 것이 프로젝트 성공의 핵심이라는 내용이다.

애자일에 정답은 없다고 생각한다.

조직에 맞는 방법을 찾아, Agility(민첩성)을 유지하는 것이 중요하다고 생각한다.

[monorepo] pnpm workspace monorepo 모노레포 구축기 (official gsm)

기먕로기 — Thu, 6 Jul 2023 14:14:55 +0900

아래의 서비스(official gsm)의 환경을 세팅한 경험을 담았습니다.
해당 레포 구조를 참고하셔서 글 읽어주시면 감사하겠습니다.
https://github.com/themoment-team/official-gsm-front

GitHub - themoment-team/official-gsm-front: 광주소프트웨어마이스터고등학교 공식 홈페이지

광주소프트웨어마이스터고등학교 공식 홈페이지. Contribute to themoment-team/official-gsm-front development by creating an account on GitHub.

github.com

0. 구축 배경

official gsm이라는 광주소프트웨어마이스터고등학교 공식 홈페이지를 제작하며,
admin 서비스와 client 서비스를 분리하게 되었고,
admin과 client를 분리하였지만, 서비스 구조 상 두 서비스간의 중복되는 모듈이 많다고 판단되어 모노레포로 구축하게 되었습니다.

1. pnpm workspace 구조 세팅

workspace란, 직역하면 작업공간이고, 이 workspace로 인해 하나의 repository 안에서 여러 프로젝트 제작이 가능합니다.

workspace 안에 여러 package들을 위치시킬 수 있고,
a package와 b package 가 존재한다면, a 에서 b를 사용할 수도, b 에서 a를 사용할 수도 있습니다.

위 서비스의 경우 package들을 apps/*, packages/* 으로 분기하였습니다.
apps 디렉토리의 경우, 빌드 및 실행이 가능한 application을 위치시켰습니다. (client, admin, storybook)
packages 디렉토리의 경우, 위 application에서 공통적으로 사용되는 config나 모듈들을 위치시켰습니다. (ex. tsconfig, ui)

디렉토리 구조를 짰으면, 해당 package 들을 pnpm-workspace.yaml 에 아래와 같이 명시해주어야 합니다.

packages:
  - 'apps/*'
  - 'packages/*'

2. package 생성

원하는 위치에 directory 생성 및 pnpm init 해주면 됩니다.
아래는 root workspace/packages에 ui라는 package를 생성해주는 과정입니다.

$ cd packages
$ mkdir ui
$ cd ui
$ pnpm init

이후, 해당 디렉토리에 생성된 package.json을 목적에 맞게끔 수정해주면 됩니다.

3. dependency 세팅

- Root dependency

workspace의 root에 dependency를 설치하게 되면,
하위 packages에서 dependency를 설치하지 않아도 해당 dependency를 사용할 수 있습니다.

root에 dependency 설치 시, pnpm 에서 아래와 같은 에러를 띄웁니다

$ pnpm add [dependency]
# ERR_PNPM_ADDING_TO_ROOT  Running this command will add the dependency to the workspace root, which might not be what you want - if you really meant it, make it explicit by running this command again with the -w flag (or --workspace-root). If you don't want to see this warning anymore, you may set the ignore-workspace-root-check setting to true.

실수로 workspace root에 dependency를 추가함을 방지하는 것으로
우리가 root에 설치를 의도하였으므로 아래 커멘드로 root에 dependency를 설치합니다.

$ pnpm add [dependency] -w

※ trouble shooting

몇몇 의존성의 경우, root에 설치하지 않고 다른 package에 각각 의존성을 설치하는 경우 정상적으로 작동되지 않습니다.

emotion의 경우 package 마다 설치하여 사용하게 되면 아래와 같은 경고가 뜹니다.

You are loading @emotion/react when it is already loaded. Running multiple instances may cause problems. This can happen if multiple versions are used, or if multiple builds of the same version are used.

이미 emotion이 load 되었다는 뜻인데, 말 그대로 emotion이 단일로 실행되지 않았다는 것 입니다.

이 경고는 theme 같은 부분에 영향을 끼칩니다.
예시 케이스로, 각 애플리케이션(ex. apps/client)에서 theme 설정을 해둔 상태로,
package/ui에서 해당 theme을 사용하게되면, theme이 불러와지지 않는 문제가 발생합니다.

react-query의 경우도, 각 애플리케이션(ex. apps/client)에서 QueryClientProvider를 설정해두어도 아래와 같은 에러가 뜹니다.

Error: No QueryClient set, use QueryClientProvider to set one

그 이유는 useQuery custom hook을 제작해둔 package(packages/api) 에도 react-query가 설치되어 있어,
애플리케이션과 같은 dependency를 사용하지 않고, 서로 각각의 react-query를 사용하고 있어 해당 이슈가 발생하는 듯 합니다.

해결 방법이 두개정도가 있었는데,
1. packages/api에 react-query를 peerDependencies로 추가
2. workspace root에 react-query 추가
위 두 선택지를 활용하면 되겠습니다.

위 처럼 되도록 공통으로 사용되는 dependency들을 root에 설치하여 이러한 이슈를 막아야 합니다.

- workspace 내의 package 설치

workspace 내의 package를 workspace 내의 package에 설치하는 방법입니다.

$ pnpm --filter [package] add [another package] --workspace
$ pnpm --filter client add ui --workspace

위 커멘드로 가능합니다.

4. root package.json 세팅 [선택]

특정 package에 command를 입력하기 위해서는

$ pnpm --filter [package] [command]

위 같이 --filter filtering을 작성해주어야 한다.

특정 package에 명령어를 입력하는 경우가 많은데, 매번 --filter를 작성하기가 번거롭다고 생각되어

root package.json의 scripts 에 미리 --filter를 아래와 같이 매핑해두었습니다.

  "scripts": {
    "client": "pnpm --filter client",
    "admin": "pnpm --filter admin",
    "storybook": "pnpm --filter storybook",
    "api": "pnpm --filter api",
    "common": "pnpm --filter common",
    "ui": "pnpm --filter ui",
    "tsconfig": "pnpm --filter tsconfig",
    "eslint-config-custom": "pnpm --filter eslint-config-custom",
    "types": "pnpm --filter types"
  },

이런 식으로 미리 --filter를 매핑해두면, 특정 package 명령어를 아래처럼 사용 가능합니다.

$ pnpm client dev #pnpm --filter client dev
$ pnpm [package] [command] # command는 [package]/package.json의 scripts에 작성된 커멘드

정리

monorepo로 약 2달간 개발을 진행해보며 정말 많은 트러블 슈팅을 하였습니다.
ts 관련 문제나 dependency와 관련된 문제 등..

국내에 monorepo 관련 자료가 많이 없어 (아무래도 개인 프로젝트를 하며 monorepo를 구축하는 경우가 많이 없고, 작은 규모의 프로젝트에서는 monorepo를 사용하는 경우가 적기 때문이 아닌가 싶습니다.) 해외 article들과 친해지느라 조금 고생했습니다.

초기 구조 설계적인 부분에 있어서는 오픈 소스 repository를 많이 참고 하였습니다.
이 글을 읽게 되신다면 저랑 같은 고민들을 많이 하실텐데, 아래 repository 참고하시면 monorepo 설계에 도움받을 수 있을 듯 합니다.
https://github.com/calcom/cal.com

[React] Axios로 FormData 전달하기

기먕로기 — Sat, 8 Apr 2023 17:32:48 +0900

FormData?

FormData 클래스를 이용하면 html의 form 태그를 이용하여 보내는 데이터를 JavaScript에서 다룰 수 있다.

보통의 경우 JSON 구조로 데이터를 전송하므로 사용할 일이 많지는 않지만,

FormData를 이용하여 파일을 서버에 보낼 수 있다.

FormData() 클래스 사용법

const formData = new FormData(); // FormData 객체 선언

formData.append('key', value); // key: value 형식으로 append 가능

기본 사용법은 위와 같다.

React로 데이터 보내기

const imgInput = useRef(null); // Ref 선언

...

<input type="file" ref={imgInput} /> // Ref 할당

위처럼 input에 Ref를 연결해주고

const postImg = async () => {
    const formData = new FormData();
    
    formData.append('photo', imgInput.current.files[0]);
    
    axios.post('/url', formData, {
      headers: { 'Content-Type': 'multipart/form-data' },
    });
}

axios로 post 시, config에 header 설정을 위와 같이 넘겨준다.

[iTerm2] oh-my-zsh, powerlevel10k 로 mac 터미널 커스텀하기

기먕로기 — Thu, 30 Mar 2023 00:00:45 +0900

결과

cool

위 사진 같은 가독성 좋고, 사용하면서 즐거운 터미널을 만들어 보겠습니다.

iTerm2 설치

https://iterm2.com/

iTerm2 - macOS Terminal Replacement

iTerm2 by George Nachman. Website by Matthew Freeman, George Nachman, and James A. Rosen. Website updated and optimized by HexBrain

iterm2.com

위 링크에서 설치를 진행한다.

oh-my-zsh 설치

sh -c "$(curl -fsSL https://raw.github.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"

여러 테마와 플러그인을 사용할 수 있게 해준다.

powerlevel10k 설치 및 적용

git clone https://github.com/romkatv/powerlevel10k.git $ZSH/themes/powerlevel10k

위 커멘드로 powerlevel10k 테마를 설치한다.

vi ~/.zshrc

vi나 nano 같은 텍스트 에디터로 ~/.zshrc 파일을 수정할 것 이다.

ZSH_THEME="powerlevel10k/powerlevel10k"

.zshrc 파일의 ZSH_THEME 이라는 항목을 위 처럼 수정한다.

source ~/.zshrc

터미널에 위 명령어를 입력 하면 테마 초기설정 단계가 시작되고, 폰트를 설치하고, 터미널을 재시작 한 뒤 본격적인 테마 설정이 시작된다.

이후 재설정은 아래 커맨드를 입력하면 된다.

p10k configure

iTerm2 색상 바꾸기

색 조합 설치

curl을 이용할 것으로 curl을 설치한다.

brew install curl

https://iterm2colorschemes.com/

Iterm Themes - Color Schemes and Themes for Iterm2

iterm2colorschemes.com

이 곳에서 원하는 색 조합을 결정한다.

원하는 조합의 이름을 클릭하면 xml이 보여질텐데 이 xml의 URL을 복사한다.

복사한 URL을 이용하여 아래 명령어를 본인이 기억할 수 있는 위치에서 입력한다.

# 본인이 기억할 수 있는 위치
mkdir iTerm2-color && cd iTerm2-color

# 색 조합 설치
curl -LO "복사한 색 조합 URL"
# example
curl -LO https://raw.githubusercontent.com/mbadolato/iTerm2-Color-Schemes/master/schemes/Dracula%2B.itermcolors

색 조합 적용

cmd + comma(,) 조합으로 settings에 들어가 Profiles > Colors에 들어가 Color Presets를 클릭한다.

Profiles > Colors

Import를 누른다.

click Import

finder에서 아까 색 조합을 설치한 폴더에 접근하여 색 조합 선택 후 Open을 누른다.

finder

Dracula 테마가 Color Presets에 추가된 것을 볼 수 있고, 적용이 가능하다.

Dracula 색조합이 추가되었다.

커스텀 완료

complete

위와 같은 예뻐진 터미널을 만날 수 있다!

[TypeScript] vscode-styled-components 작동 안 될시

기먕로기 — Wed, 29 Mar 2023 09:47:41 +0900

문제상황

vscode-styled-components

vscode-styled-components
styled-components나 @emotion/styled의 자동완성 plugin.

not working

vscode-styled-components가 동작하지 않는다..

(위의 상황은 display 속성이 자동완성에 나타나는걸 기대했지만..)

내 프로젝트의 TypeScript 버전이 vscode에서 제공하는 typescript 버전보다 높을 때 발생하는 문제인 듯 하다.

vscode typescript 버전 확인

Status Bar 활용

확장자가 .ts 인 파일을 vscode에 띄우면, Status Bar에 TypeScript가 나타난다.

TypeScript

글자 왼쪽의 중괄호 클릭시 버전을 확인할 수 있다.

typescript version

추가적으로 옆에 핀 모양을 누르면 status bar에 고정된다!

Show All Commands 활용

Show All Commands

cmd + shift + p로 Show All Commands를 열고 아래를 입력한다.

>TypeScript: Select TypeScript Version

입력 시 아래와 같이 표시된다.

check version

Use VS Code's Version 옆에 버전이 기재된걸 확인할 수 있다. (예시에서는 4.9.5 이네요)

내 프로젝트 TypeScript 버전 확인

package.json의 typescript를 확인한다.

project typescript version

나의 경우는 5.0.2 버전이다.

해결

TypeScript의 버전을 다운그레이드 하였다.

github의 release note를 참고하였다.
https://github.com/microsoft/TypeScript/releases

yarn add typescript@4.9.5

welcome

자동완성이 돌아온 걸 확인할 수 있다.

여전히 안될 시

vscode를 완전히 종료하고 재시작하는 것으로 해결이 되기도 한다.

또는 위 상황에서 Use Workspace Version을 선택하여 해결되는 경우도 있었다.

[yarn berry + husky] chalk 관련 에러 해결

기먕로기 — Fri, 10 Mar 2023 13:50:17 +0900

상황

yarn berry가 적용된 프로젝트에 husky를 통한 pre-commit lint를 적용하려고 하다 에러가 발생하였다.

omg

Error: chalk tried to access #ansi-styles, but it isn't declared in its dependencies; this makes the require call ambiguous and unsound.

위와 같은 에러가 발생하였다

해결

solution

.yarnrc.yml에 위 내용을 추가하면 해결된다.

나 같은 경우는 구체적인 버전을 표기하지는 않았다.

...

packageExtensions:
  chalk@*:
    dependencies:
      "#ansi-styles": npm:ansi-styles@*
      "#supports-color": npm:supports-color@*

위 내용을 추가한 후 yarn에 적용시킨다.

$ yarn

이후 잘 작동하는 것을 확인할 수 있다.

해결

Ref.

https://github.com/chalk/chalk/issues/531

[TypeScript] npm 라이브러리 배포하기

기먕로기 — Fri, 20 Jan 2023 23:44:31 +0900

TypeScript로 만든 모듈을 npm에 배포까지 해보자

절차

1. 프로젝트 생성 및 세팅

2. ts 모듈 개발

3. ts 모듈 컴파일 - CommonJS, ES Modules 다중 지원

4. package.json 수정

5. 배포

사전 지식

모듈 방식

모듈 방식에는 Commonjs, ES Modules 방식이 존재한다.

CommonJS

const example = require('./example')
const {example} = require('./exmaple')

module.exports = {example}
module.exports = {default: example}

ES Modules

import example from './example'
import {example} from './example'

export {example}
export default example

위 처럼 불러오기, 내보내기 방식이 다르고 두 방식 모두 활발하게 사용 중 이라 두 모듈을 복수 지원해주는게 좋다.

프로젝트 생성 및 세팅

npm 사이트에 검색하여 중복 되지 않는 이름을 찾아 개발할 라이브러리 이름을 정하고

https://www.npmjs.com/

npm

Bring the best of open source to you, your team, and your company Relied upon by more than 11 million developers worldwide, npm is committed to making JavaScript development elegant, productive, and safe. The free npm Registry has become the center of Java

www.npmjs.com

npm init으로 초기 세팅을 한다.

mkdir ${project-name}
cd ${project-name}
npm init

초기 세팅 이후 package.json에 한 문장을 추가한다.

{
  ...,
  "type": "module",
}

프로젝트 내에서 ES modules 방식을 사용하기 위해 추가하였다.

typescript를 활용하기 위해 설치한다.

npm i -D typescript

ts 모듈 개발

src폴더를 만들고 그 안에 index.ts 모듈을 작성한다.

export const hello = (name: string): string => {
  return `hello ${name}`;
};

ts 모듈 컴파일

우리는 ts 파일을 컴파일 하여 dist 디렉토리에 저장하도록 할 것 이다.

그러기 위한 세팅 방법을 설명하겠다.

tsc로 ts 파일을 js를 변환을 할건데 이 때, 두번의 컴파일을 할 것 이다.

CommonJS 모듈에 맞게끔 한번, ES Modules에 맞게끔 한번.

프로젝트 루트에 3개의 tsconfig 파일을 만든다.

├── tsconfig-base.json
├── tsconfig-cjs.json
└── tsconfig.json

base는 tsconfig-cjs와 tsconfig에서 상속받아 사용할 공통 설정들을 담는다.

tsconfig-cjs는 CommonJS를 위한 파일이고, 일반 tsconfig는 ES Modules를 위한 파일이다.

(위 package.json 에서 기본 모듈 타입을 ES Modules로 지정했기 때문에 default config를 ES Modules에 맞게 작성하겠다)

tsconfig-base.json

{
  "compilerOptions": {
    "target": "ES5",
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "baseUrl": "src",
    "declaration": true,
    "esModuleInterop": true,
    "inlineSourceMap": false,
    "listEmittedFiles": false,
    "listFiles": false,
    "moduleResolution": "node",
    "noFallthroughCasesInSwitch": true,
    "pretty": true,
    "resolveJsonModule": true,
    "rootDir": "src",
    "skipLibCheck": true,
    "strict": true,
    "traceResolution": false
  },
  "compileOnSave": false,
  "exclude": ["node_modules", "dist"],
  "include": ["src"]
}

남은 두 파일은 compiler option을 다르게 작성한다.

tsconfig-cjs.json

{
  "extends": "./tsconfig-base.json",
  "compilerOptions": {
    "module": "commonjs",
    "outDir": "dist/cjs",
    "target": "es2015"
  }
}

tsconfig.json

{
  "extends": "./tsconfig-base.json",
  "compilerOptions": {
    "module": "esnext",
    "outDir": "dist/mjs",
    "target": "esnext"
  }
}

위 파일들을 작성 후 프로젝트 루트에 fixup.sh이라는 스크립트 파일을 만든다.

fixup.sh

cp dist/mjs/index.d.ts dist 

rm -rf dist/*/index.d.ts 

cat >dist/cjs/package.json <<!EOF
{
    "type": "commonjs"
}
!EOF

cat >dist/mjs/package.json <<!EOF
{
    "type": "module"
}
!EOF

index.d.ts 파일을 dist 아래 경로로 옮기고 (중복 제거) 빌드된 파일들이 저장될 디렉토리에 package.json을 생성하는 스크립트이다.

package.json 수정

빌드 커멘드를 추가하고, export 관련한 설정을 추가하겠다.

package.json

{
  "scripts": {
    "build": "rm -fr dist/* && tsc -p tsconfig.json && tsc -p tsconfig-cjs.json && ./fixup.sh"
  },
}

build 스크립트를 위와 같이 추가해준다.

dist 디렉토리를 지우고, tsconfig 파일을 이용하여 각 모듈에 맞게끔 컴파일 두번 한다.

fixup 스크립트로 dist/mjs/index.d.ts 파일을 dist/index.d.ts로 복사하고 각 디렉토리의 index.d.ts 파일을 삭제한다.

그 다음, dist 하위 각 디렉토리에 맞게끔 package.json을 추가한다.

여기 까지 완료했으면 마무리 export 관련 설정만 추가하면 배포 준비가 끝난다.

package.json

{
  ...,
  "main": "dist/cjs/index.js",
  "module": "dist/mjs/index.js",
  "types": "dist/index.d.ts",
  "exports": {
    ".": {
      "import": "./dist/mjs/index.js",
      "require": "./dist/cjs/index.js"
    }
  },
}

이 항목들을 추가해주면 각 모듈 환경에 맞게끔 불러오기가 가능하다.

npm에 배포

먼저 npm에 올릴 필요가 없는 파일들을 ignore 해주겠다.

.npmignore

**/*
!/dist/**

나의 경우는 전부 ignore 하고 컴파일된 파일만 unignore 하였다.

npm 홈페이지에서 가입을 한다.

https://www.npmjs.com/

npm

www.npmjs.com

터미널에서 npm login을 하고

npm login

npm publish만 입력하면 배포가 된다.

npm publish

Ref.

https://www.sensedeep.com/blog/posts/2021/how-to-create-single-source-npm-module.html

[Next.js + TypeScript] emotion 적용 방법

기먕로기 — Thu, 19 Jan 2023 16:00:54 +0900

emotion

css-in-js 라이브러리이다.

create next app

typescript 기반의 next app을 만든다.

yarn create next-app ${my-app} --typescript

install emotion

my-app에서 emotion을 설치한다.

yarn add @emotion/react @emotion/styled

babel config (optional)

emotion의 여러 기능을 사용하기 위해 바벨 설정을 한다.

emotion 8 버전 이상부터는 필요하지 않다고 하니 참고하시길 바란다.

아래 커멘드로 emotion의 babel plugin을 설치한 후

yarn add -D @emotion/babel-plugin

.babelrc 파일을 만들어 아래처럼 작성한다.

.babelrc

{
  "presets": [
    [
      "next/babel",
      {
        "preset-react": {
          "runtime": "automatic",
          "importSource": "@emotion/react"
        }
      }
    ]
  ],
  "plugins": ["@emotion/babel-plugin"]
}

typescript config

여기까지 진행 후 css props 기능을 사용하면 다음과 같은 오류를 맞이 한다.

issue!

이 경우 tsconfig.json을 수정하기만 하면 된다.

tsconfig.json

{
  "compilerOptions": {
    ...,
    "jsxImportSource": "@emotion/react" // Add this line.
  }
}

compilerOptions에 "jsxImportSource": "@emotion/react" 이 줄을 추가하면 된다.

Ref.

https://emotion.sh/docs/css-prop#babel-preset

Emotion – The css Prop

The primary way to style elements with emotion is the css prop. It provides a concise and flexible API to style your components. There are 2 ways to get started with the css prop. Both methods result in the same compiled code. After adding the preset or se

emotion.sh

https://emotion.sh/docs/typescript#emotionreact

Emotion – TypeScript

Emotion includes TypeScript definitions for @emotion/react and @emotion/styled. These definitions infer types for css properties with the object syntax, HTML/SVG tag names, and prop types. @emotion/react The easiest way to use the css prop with TypeScript

emotion.sh

https://emotion.sh/docs/@emotion/babel-plugin

Emotion – @emotion/babel-plugin

@emotion/babel-plugin is highly recommended, but not required in version 8 and above of Emotion. boolean, defaults to true. Note: Source maps are on by default in @emotion/babel-plugin but they will be removed in production builds 'dev-only' | 'always' | '

emotion.sh

[JavaScript] JS는 무슨 언어일까?

기먕로기 — Wed, 18 Jan 2023 16:27:13 +0900

JS는 프로토타입 기반의 다중(멀티) 패러다임 언어이다.
-mdn-

패러다임이란?

프로그래밍 언어의 패러다임이란 아래로 정리할 수 있다.

프로그래밍 언어를 사용하여 문제를 해결하는 접근 방식이거나 접근 방식에 따라 사용할 수 있는 도구와 기술을 사용하여 문제를 해결하는 방법

간단하게 프로그래밍 기법이라고 생각해도 좋을 것 같다.

프로그래밍 패러다임에 종류로는

- 명령형 프로그래밍

- 절차적 프로그래밍

- 객체지향 프로그래밍

- 함수형 프로그래밍

- 선언적 프로그래밍

위 뿐만 아니라 많은 패러다임들이 존재한다.

다중 패러다임?

단어 그대로 프로그래밍 언어가 여러 패러다임을 지원한다는 뜻이다.

이런 언어들의 설계 목표는 모든 문제를 가장 쉽고 효율적으로 풀 수 있는 하나의 패러다임은 없다는 것을 인정하고, 프로그래머가 자신의 일에 가장 적합한 것을 사용할 수 있게 하는 것이다.
- wikipedia

프로그래머가 유동적으로 자신의 개발 목적에 맞게끔 패러다임을 사용하면 된다.

js가 지원하는 패러다임은 mdn 문서에 따르면

- 객체지향

- 명령형

- 선언형

- 함수형

등이 존재한다.

그렇기 때문에 우리가 js에 대해서 이야기 할 때, 다른 언어(ex. java - 객체지향 언어, c - 절차지향 언어) 들 처럼 "js는 ㅇㅇ언어다" 라고 정의내리기 어렵다.

요약

- js는 프로토타입 기반의 다중(멀티) 패러다임 언어이다.

- 다중 패러다임 언어이므로 어떤 특정 패러다임의 언어라고 정의하기 어렵다.

[yarn berry + vscode] yarn berry 적용 방법 (with vscode setting)

기먕로기 — Tue, 17 Jan 2023 00:00:12 +0900

yarn berry? (yarn 2)

기존 node_modules의 문제점을 개선하기 위해 출시된 yarn의 상위 버전이다.

next.js 애플리케이션 생성

yarn create next-app ${project name}

yarn version 확인

생성한 애플리케이션으로 이동하여 프로젝트의 yarn 버전을 확인한다.

yarn -v 
// 1.22.19

간혹 가다 yarn berry를 적용도 전에 2.xx.xx 이상의 버전 (Major version이 2 이상일 경우 yarn berry에 해당된다.) 으로 확인되는 경우가 있는데, 이 경우는 상위 디렉토리에서 yarn 관련 설정이 되어있을 확률이 크다.

해결 방법은 프로젝트의 상위 디렉토리에 존재하는 .yarnrc.yml 파일을 삭제하면 된다.

버전 변경 전 정리

우리는 이제 node_modules로 부터 해방이므로 과감하게 node_modules를 삭제해준다

yarn berry로 버전 변경

yarn set version berry

위 커멘드를 프로젝트 내부에서 입력 시, 그 프로젝트에 한하여 yarn 버전을 berry로 변경이 가능하다.

자세한 yarn set version 커멘드 사용법은 아래 document를 참조하길 바란다.

https://yarnpkg.com/cli/set/version

`yarn set version`

Lock the Yarn version used by the project.

yarnpkg.com

yarn install

의존성 설치를 다시 해줄건데 바로 yarn install 키워드를 사용하면 삭제한 node_modules 디렉토리가 생성된다.

그러므로 위 작업으로 생성된 .yarnrc.yml 파일을 수정한다.

.yarnrc.yml

yarnPath: .yarn/releases/yarn-3.3.1.cjs
nodeLinker: pnp // Add this line!

nodeLinker에 pnp를 추가하여 헛수고를 막자.

파일을 수정한 후, install을 한다.

yarn install

git ignore 설정

zero install을 사용할건지 아닌지에 따라 .gitignore 작성법이 다르다.

using zero install

.yarn/*
!.yarn/cache
!.yarn/patches
!.yarn/plugins
!.yarn/releases
!.yarn/sdks
!.yarn/versions

not using zero install

.pnp.*
.yarn/*
!.yarn/patches
!.yarn/plugins
!.yarn/releases
!.yarn/sdks
!.yarn/versions

vscode setting

OMG..

불러오는 모든 module들이 에러를 내뱉고 있는 모습을 볼 수 있을 것 이다..

당황하지 않고 침착하게 아래의 extension을 설치해준다.

ZipFS

그리고 아래 커멘드를 터미널에 입력한다.

yarn dlx @yarnpkg/sdks vscode

그 후 아래의 모달이 뜨면 Allow를 클릭한다.

modal

만약 이 모달을 놓쳤어도 괜찮다. 다른 방식도 있으니.

View > Command Palette(shift + ⌘ + p)로 이동 하여 TypeScript: Select TypeScript Version를 검색한다.

shift + command + p

TypeScript: Select TypeScript Version

선택하여 들어가면 아래와 같은 선택 항목이 뜹니다.

select

아래 항목(Use Workspace Version) 을 선택한다.

clean~

깨끗해진 import 구문들을 만날 수 있다.

기존 node_modules 처럼 ⌥ option (⌘ command) + click 시 모듈 내부를 확인할 수 있다.

기먕로기의 로깅

[애자일 & 스크럼] 고등학교 프로젝트 팀의 일일 스크럼

스크럼 적용까지

스크럼 적용

스크럼, 아침 vs 저녁

아침 스크럼 vs 저녁 스크럼

애자일은 죽었다.

[monorepo] pnpm workspace monorepo 모노레포 구축기 (official gsm)

목차

0. 구축 배경

1. pnpm workspace 구조 세팅

2. package 생성

3. dependency 세팅

- Root dependency

- workspace 내의 package 설치

4. root package.json 세팅 [선택]

정리

[React] Axios로 FormData 전달하기

FormData?

FormData() 클래스 사용법

React로 데이터 보내기

[iTerm2] oh-my-zsh, powerlevel10k 로 mac 터미널 커스텀하기

결과

iTerm2 설치

oh-my-zsh 설치

powerlevel10k 설치 및 적용

iTerm2 색상 바꾸기

색 조합 설치

색 조합 적용

커스텀 완료

[TypeScript] vscode-styled-components 작동 안 될시

문제상황

vscode-styled-componentsstyled-components나 @emotion/styled의 자동완성 plugin.

vscode typescript 버전 확인

Status Bar 활용

Show All Commands 활용

내 프로젝트 TypeScript 버전 확인

해결

여전히 안될 시

[yarn berry + husky] chalk 관련 에러 해결

상황

해결

Ref.

[TypeScript] npm 라이브러리 배포하기

절차

사전 지식

모듈 방식

프로젝트 생성 및 세팅

ts 모듈 개발

ts 모듈 컴파일

package.json 수정

npm에 배포

Ref.

[Next.js + TypeScript] emotion 적용 방법

emotion

create next app

install emotion

babel config (optional)

typescript config

Ref.

[JavaScript] JS는 무슨 언어일까?

패러다임이란?

다중 패러다임?

요약

[yarn berry + vscode] yarn berry 적용 방법 (with vscode setting)

yarn berry? (yarn 2)

next.js 애플리케이션 생성

yarn version 확인

버전 변경 전 정리

yarn berry로 버전 변경

yarn install

git ignore 설정

vscode setting

vscode-styled-components
styled-components나 @emotion/styled의 자동완성 plugin.