DP 900 ... 어렵지 않다. 개인적인 견해로는 전공자라면 기출문제 두어번 보면 충분히 딸 수 있다. ⠀ ⠀

🖥️ 시험 신청

https://learn.microsoft.com/ko-kr/credentials/certifications/azure-data-fundamentals/?practice-assessment-type=certification

MS사이트에서 <시험 예약> 을 하면 된다. 환율 기준 9만원 넘었다. 빨리 따는게 이득.

시험 신청 할 때 언어를 *한국어로 해도 상관 없다! *

⠀ ⠀ ⠀

👩‍🎓 시험 준비

Course

꼭 뭔가를 들어야겠다면 MS 교육 센터에서 제공하는 트레이닝 코스를 추천.

https://learn.microsoft.com/ko-kr/training/courses/dp-900t00

⠀

Dumps

초급 시험에 돈 안쓰고 싶어서 무료 덤프만 여럿 찾아봤다.

1) Examtopics

60문항인가 70문항 정도 Free. Free만 써도 충분! https://www.examtopics.com/exams/microsoft/dp-900/

2) MS 러닝 센터 50문제

안내 페이지 하단에 있는 <실습 평가> 로 진입하면 된다.

들어갈 때 마다 랜덤하게 50문제씩 나온다. 중복도 있고 처음보는 문제도 섞여나오고... 쭉~ 풀어보고 답변도 체크할 수 있어서 좋다. https://learn.microsoft.com/en-us/credentials/certifications/azure-data-fundamentals/practice/assessment?assessment-type=practice&assessmentId=24&practice-assessment-type=certification

3) 혼밥맨 블로그

여기 답 틀린거 엄청 많으니 유의해서 풀어야 한다. https://gogetem.tistory.com/entry/DP-900-%EB%8D%A4%ED%94%84-%E3%85%A3DP900-%EB%8D%A4%ED%94%84%E3%85%A3Microsoft-Azure-Data-Fundamentals-%EB%8D%A4%ED%94%84-

⠀ ⠀ ⠀

시험 보기

온라인으로 하면 카메라 켜고 끝없이 의심 받는거 같아서 오프라인으로 시험치기로 했다. 강남역 12번 출구 HWG Testing Center 가 제일 자주 열리고 접근성이 좋았다.

건물에 안 써져 있어서 헷갈리는데 갓덴스시 옆에 있는 출입구로 들어가면 된다.

10층 내려서 왼쪽으로 꺾으면 테스팅 센터가 있다. 신분증 검사하고 카메라에 얼굴 스캔하고(?) 락커에 휴대폰 포함 모든 짐을 다 넣어두고나면 시험볼 준비 진짜 끝!

🔔 아 맞다 민증 대신 면허증 가져갔는데 이거 보조 증명이라 체크카드나 신용카드가 추가로 필요하다고 하니 알아두세요.

8시 50분쯤 갔는데 바로 시험이 시작됐다. 나보다 먼저 온 사람도 2명이나 있었다.

시험장은 컴퓨터 10대 정도 있는 컴퓨터실이었고 칸막이에 cctv 가 칸마다 달려있다. 귀마개도 주던데 안 썼다. 숨막히게 조용했다....

시험 다 치고 그자리에서 합격판정이 나오기 때문에 쫄린다... 시험치고 나가면 또 뭐 서명하고 그럼 진짜로 끝! 나갈때 요청하면 프린트 해주시는것 같았다.

⠀ ⠀ ⠀

아 맞다 🐯 시험치는 UI에서 언어 toggle 됨

공부는 영어로 했는데 시험은 한국어로 신청한 나.... 어떻게든 되겠지 했는데 다행히 toggle 기능이 있었다.

샌드박스 테스트 UI 랑 똑같다 옆에 지구본 누르면 영어 <-> 한국어 바꿀 수 있다. 시험지에 번역 상태가 좋은건 아니라서 영어로도 읽어보고 한국어로도 읽어보는게 좋을 것 같다.

https://go.microsoft.com/fwlink/?linkid=2226877 시험 UI를 테스트해볼 수 있게 샌드박스를 제공중! 해당 링크로 들어가면된다.

Dump 에서 100% 안 나옴

체감상 한 8문제 정도는 아예 초면이었다. 그래도 실수만 안 한다면 합격할 수 있는 정도이다.

합격화면 보고 1시간 정도 지나면 메일로 날아오고 홈페이지에서도 확인할 수 있다.

끝~~

했는데... 설치/실행이 여간 어려웠음. 너무 힘들었어요. 나같이 포기하는 사람이 없도록... 기록을 남겨본다.

1. storybook 설치하기

Storybook init 은 빈 프로젝트를 위한 명령어가 아니다. 설치 전 반드시 React 프레임워크 세팅이 되어있어야 한다. CRA 로 프로젝트를 생성한 다음, 프로젝트 경로 안에서 설치를 진행한다.

다행히(?) 나는 진행 중인 프로젝트에 추가하고 싶었던 것이기 때문에... 집도를 시작한다.

최신 버전 설치 시도: 실패 🍎

# 프로젝트의 root 경로 (package.json 파일이 있는) 에서 실행한다.
npx storybook@latest init

결과:

어 그래.. 한 번에 안 될 줄 알았어. 아래와 같은 에러가 났다.

 Adding Storybook support to your "Create React App" based project
     Error: Storybook 7.0+ doesn't support react-scripts@<5.0.0.

찾아보니 storybook blob에 이런 문장이 있었다. storybook 7.0 이상은 CRA 4를 지원하지 않으니 업그레이드 하거나 6.x 버전을 사용하라는 것이다. 너무해!!!

기존 프로젝트에 갈 영향을 최소화 하려면 CRA 업그레이드보다는 낮은 버전을 설치하는게 좋을 것 같았다. 그래서 ** CRA 4를 지원하는 버전인 v6.5을 설치하기로 했다.**

storybook repo에 가서 tags 를 확인해보면 7.0 정식 릴리즈 이전 마지막 6.5 버전대가 6.5.15이다.

설치합시다

6.5.15 설치 시도: 성공 🍏

npx storybook@6.5.15 init
# npx storybook@6.5.15 init -f

위 명령어를 사용해서 6.5 버전을 설치했다.

설치 과정에서 There seems to be a Storybook already available in this project. 어쩌고 에러가 난다면 명령어 뒤에 -f 옵션을 붙여서 재시도 하시면 된다. 이전에 설치했던 잔여물이 남은 거다.

이번엔 설치가 무사히 완료되었다.

2. storybook 실행하기 (v6.5.15)

1차 시도: 실패 🍎

무사히 설치는 했는데 npm run storybook 에서 또 에러가 났다..

Ξ dev/ndc-ui git:(storybook) ▶ npm run storybook

> ndc-ui@1.0.0-rc2 storybook /home/cindy/dev/ndc-ui
> start-storybook -p 6006 -s public

sh: 1: start-storybook: not found
npm ERR! code ELIFECYCLE
npm ERR! syscall spawn
npm ERR! file sh
npm ERR! errno ENOENT
npm ERR! ndc-ui@1.0.0-rc2 storybook: `start-storybook -p 6006 -s public`
npm ERR! spawn ENOENT
npm ERR!
npm ERR! Failed at the ndc-ui@1.0.0-rc2 storybook script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/cindy/.npm/_logs/2023-08-25T11_06_35_438Z-debug.log

start-storybook 스크립트가 없다는데? 아오 스토리북.. 너 뭐 돼?

찾아봤더니 7.0 이상 버전에서 start-storybook 대신 storybook 또는 sb 명령어를 쓰도록 변경되었다고 한다. (참고: storybook repo)

근데 이상하잖아. 난 6.5를 깔았다고.

혹시나 싶어 package.json 을 열었더니 @storybook 이하 모듈들이 전부 7.3 버전으로 설치되어 있는것이 아닌가.

야 이놈들아 내가 6.5.15 버전 설치한다고 했잖아... 내가 잘못했나 싶어서 다시 시도해봤지만 늘! 언제나! 올웨이즈! 7.3을 설치해주고 있었다.

결국 수동으로 package.json을 열어 @storybook 의존성 모듈 버전을 변경해주고 npm install을 다시 해주기로 한다.

2-1. package.json > devDependencies 수정

    "@storybook/addon-actions": "^6.5.15",
    "@storybook/addon-essentials": "^6.5.15",
    "@storybook/addon-interactions": "^6.5.15",
    "@storybook/addon-knobs": "^6.4.0",
    "@storybook/addon-links": "^6.5.15",
    "@storybook/builder-webpack4": "^6.5.16",
    "@storybook/manager-webpack4": "^6.5.16",
    "@storybook/node-logger": "^6.5.15",
    "@storybook/preset-create-react-app": "^3.2.0",
    "@storybook/react": "^6.5.15",

@storybook 으로 시작하는 애들 싹 수동으로 버전을 명시했다. (진짜 귀찮네) testing-library 어쩌고는 중간에 에러 나서 지워버렸는데, 걔는 버전 그대로 둬도 상관 없다.

2-2. node_modules 제거

rm -rf node_modules

# 다른거 영향 가는게 싫으면 아래 명령어로 storybook 만 지우기
# rm -rf node_modules/@storybook

2-3. 의존성 모듈 재설치

npm install

2-4. src/stories 삭제

샘플로 코드 넣어주는 것 같은데, 이것도 7.3.0 기준으로 작성한 건지 뭔지 실행하면 에러가 난다. 에러나는 샘플 필요 없어!!! 싹 지워버리자.

그런 다음 마지막 실행.

npm run storybook

떴다! 하지만 아직 아무 스토리 파일이 없기 때문에 화면에는 아래와 같은 에러가 뜬다.

그래도 서서히 끝이 보인다.. 셀프로 샘플 스토리를 짜고 긴 여정을 끝내보자.

3. stories 짜기

3-1. story 파일 만들기.

6.5 버전 도큐먼트를 참고해서 내 컴포넌트 중 하나의 테스트 코드를 짜보았다. (참고 링크는 여기)

Emptybox 는 비어있는 화면을 대체하는 공통 컴포넌트 중 하나인데, 별다른 액션 없이 visualization만 하는 컴포넌트니까 간단하게 짤 수 있었다.

stories 디렉토리 안 만들고 그냥 소스파일 옆에 하나 만들었다. 1뎁스 까지는 자동으로 인식하는거 같다.

import { ComponentStory, ComponentMeta } from '@storybook/react';
import EmptyBox from './EmptyBox';
import type { EmptyBoxProps } from './EmptyBox';

export default {
  title: 'EmptyBox',
  component: EmptyBox,
} as ComponentMeta<typeof EmptyBox>;

const Template: ComponentStory<typeof EmptyBox> = (args) => <EmptyBox {...args} />;
export const FirstStory = Template.bind({});

FirstStory.args = {
  title: '타이틀 예제',
  message: '메세지 예제',
  inTable: false,
  hasAction: false,
};

3-1. alias 적용하기

난관 끝에 난관 오는구만... 기존 프로젝트가 상대 경로 alias@를 쓰고 있었는데 이걸 storybook 에서 사용하려면 또 별도로 사용 설정을 해주어야 한다.

우선 tsconfig-paths-webpack-plugin 을 설치한다.

npm install -D tsconfig-paths-webpack-plugin

프로젝트 루트 경로에 .storybook 폴더가 있는데 이 안에 있는 main.js 파일을 열어 아래 내용을 추가해준다.

// 요거랑
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');

module.exports = {
  "stories": [
    // 수정하는 김에 따로 폴더 쓸거면 여기 수정해도 된다.
    "../src/**/*.stories.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions",
    "@storybook/preset-create-react-app"
  ],
  "framework": "@storybook/react",

  // 여기 아래를 추가 
  "webpackFinal": async (config) => {
    config.resolve.plugins.push(new TsconfigPathsPlugin({}));
    return config;
  },
}

다행히 이건 문제 없이 잘 됐다. 다시 npm run storybook 을 해주면...

축하합니다. 먼 길 돌아서 드디어 storybook 6.5 버전을 사용할 준비가 되었다.

끝

콘솔 로그를 뽑아보니 아래와 같은 에러가 발생중이었다.

path.js:25 Uncaught ReferenceError: process is not defined
    at ./node_modules/path/path.js (path.js:25:1)
    at options.factory (react refresh:6:1)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:62:1)
    at ./node_modules/keycloakify/lib/getKcContext/kcContextMocks/urlResourcesPath.js (urlResourcesPath.ts:1:1)
    at options.factory (react refresh:6:1)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:62:1)
    at ./node_modules/keycloakify/lib/getKcContext/kcContextMocks/kcContextMocks.js (kcContextMocks.ts:6:1)
    at options.factory (react refresh:6:1)

다른 때도 아니고 핫로딩때에만 발생하는 것이니 개발 환경에 관련된 것으로 추정. 서치해보니 react-scripts 와 react-error-overlay의 버전 때문이라고들 한다.

최신 버전 설치하라는 말도 있고 한데, 우선 react-scripts 는 4.0.3 버전을, react-error-overlay 는 6.0.9 버전을 설치하기로 했다.

중간에 그냥 명령어로 이리저리 재설치 해봤더니 깔끔하게 안되더라. 아싸리 싹 지우고 다시 하는 것을 추천한다.

1_ package.json 수정하기

 "react-scripts": "^4.0.3",

react-scripts 만 있고 react-error-overlay 는 없었다. 상위 버전 호환 되는 캐럿(^) 문자를 빼고 내가 원하는 버전을 직접 명시해준다.

"react-scripts": "4.0.3",
"react-error-overlay": "6.0.9",

명령어로 해도 됨.

2_ node_modules 지우기

rm -rf node_modules

기존에 설치된 패키지들을 싹 지워준다. rm -rf 가 두려우면 GUI 로 ...

3_ 재설치

npm install

install 명령어로 새로 정의된 package.json을 활용한 의존성 모듈들을 설치했다.

설치가 끝나면 package-lock.json 파일을 열어서 react-scripts랑 react-error-overlay 버전을 확인해준다.

4_ 로컬 서버 재시작

다시 웹서버를 띄운 다음 핫로딩 상황을 재현한다.

잘 해결 되었다!

주워먹기 레쯔고

8 MUST-KNOW TIPS FOR WRITING CLEAN CODE WITH JAVASCRIPT

자바스크립트(이하 JS)가 놀라운 언어이긴 하지만, 클린한 JS 코드를 작성하는 것은 어려운 일입니다. 노련한 개발자에게도 말이죠.

"클린한" JS 코드는 어떤 것일까요? 다음의 조건을 충족해야 합니다.

1. 읽기 쉽다
2. 디버깅이 쉽다
3. 효율적이고 고성능이다

이에 유용한 툴과 트릭 몇 개를 알려드리겠습니다. 이들이 당신의 JS 코드 품질을 한 단계 발전 시킬거예요.

1_ API를 호출하거나 JSON 함수를 사용할 때 try-catch를 사용하기

데이터를 가져오기 위해 API에 요청을 보낼 때에는 많은 것들이 잘못될 수 있습니다. 그러니 호출 시나리오를 관리하는 건 필수죠. JSON을 다룰 때에도 결과값을 무조건적으로 신뢰하지 말고, 가능한 예외 사항들을 처리하도록 해서 당신의 코드를 좀 더 견고하게 만드세요.

2_ Linter 사용하기 ( ESLint / TSLint )

Linter는 미리 정의해둔 규칙과 설정을 기반으로 프로그래밍 방식 또는 코드의 스타일 상 에러를 체크하는 코드 분석 툴입니다. 짧게 말하자면, 린터는 당신의 JS 또는 TS를 개선하고 통일성을 유지할 수 있도록 도와줄 겁니다.

3_ JS 이슈를 에디터(편집기, IDE)로 관리하기

당신의 JS 코드를 클린하게 관리하는 주된 방법 중 하나는 코드 자체의 이슈를 추적하기 쉽게 만들어두고 코드 내부에서 그 이슈를 보는 것입니다.

코드 베이스 이슈들을 에디터로 관리하면:

• 기술 부채와 같은 큰 이슈에서의 전체적인 시각을 가질 수 있다.
• 각 코드 베이스 이슈에 대한 맥락을 볼 수 있다.
• 컨텍스트 스위칭을 줄인다.
• 지속적으로 기술 부채를 해결할 수 있게 한다.

기술 부채를 트래킹 하기 위해 다양한 툴을 사용할 수 있지만, 당장 시작하기에 가장 빠르고 쉬운 방법은 Jira, Linear, Asana 등 프로젝트 관리 툴과 연계되어 있는 VSCode나 JetBrains 의 무료 Stepsize 확장 앱을 사용하는 것입니다.

4_ Template string 사용하기

템플릿 스트링은 문자열 사이에 어떤 값을 주입하는 동시에 문자열의 형태를 유지하게 하고, 직접 문자열 연산을 수행하는 것 보다 가독성이 좋습니다.

5_ 문자열 검색을 할 때에는 정규식 사용하기

비록 정규식이 밖에서 보기엔 다소 난해할지 몰라도, 아주 강력한 문자열 처리 툴입니다. 심지어 양도 많고 어려운 문자열 일치 시나리오가 있을 때, 이를 설명하기 위한 복잡한 패턴을 구성할 수 있습니다.

6_ optional chining 사용하기 (물음표 연산)

긴 논리적 접속사를 쓰는 걸 그만두세요. 그리고 optional chining으로 당신의 코드를 간결하게 만드세요.

7_ 중첩문 지양하기

중첩은 코드의 복잡성을 증가시키고, 읽고 이해하기 어렵게 만드는 가장 확실한 방법입니다. 2번 이상 중첩 되는 코드가 있다면 최상위 레벨 반환문, 더 짧은 블록들, 그리고 중텁된 로직을 각각의 기능으로 추상화 하는 방식으로 리팩토링 하는 것을 고려해보세요.

(참고. 가장 많은 추천을 받은 댓글 중에 4-5 개의 중첩 정도는 허용해야 한다는 의견이 있습니다. 글쓴이 역시 프론트엔드의 특성상 중첩을 강박적으로 제거하지 않아도 된다는 생각입니다. 중첩문 내부에 독자적인 로직이 있다면 떼어내고, 그렇지 않다면 그냥 두기.)

8_ 모든 비전형적 코드에 주석을 달되, 코드 가독성을 이걸로 대체하려고 하지 않을 것

정해진 규칙 없이, 일반적이지 않은 시나리오를 처리해야 하는 순간이 몇 번 있을 겁니다. 이 때 내 코드가 무슨 일을 하는 것이고 어떤 환경적 상황을 고려하고 있는지 설명하는 주석을 달아 두면 다른 개발자들에게 어마무시한 도움이 될겁니다. 뿐만아니라 나중에 당신 자신이 이 코드를 다시 보게 되었을 때에도 도움이 되겠죠. 하지만 처음 코드를 짤 때 가독성에 대해 제대로 고민하지 않는 것을 무마하기 위한 목발(crutch)로 사용해서는 안 됩니다!

뭐라고 쓰다가 날려먹어서 기력없음.. 끝

$ serve -d dist
WARNING: Checking for updates failed:
TypeError: Cannot read property 'code' of undefined
    at getMostRecent (/home/cindy/.npm-packages/lib/node_modules/serve/node_modules/update-check/index.js:125:11)
    at async module.exports (/home/cindy/.npm-packages/lib/node_modules/serve/node_modules/update-check/index.js:185:12)
    at async updateCheck (/home/cindy/.npm-packages/lib/node_modules/serve/bin/serve.js:39:12)
    at async /home/cindy/.npm-packages/lib/node_modules/serve/bin/serve.js:396:3
ERROR: Cannot copy to clipboard: Couldn't find the required `xsel` binary. On Debian/Ubuntu you can install it with: sudo apt install xsel

xsel 이 없댄다.

나는 Windows10 환경에서 개발 중이긴 하지만 WSL을 사용중이므로 yum 으로 설치할 수 있다.

sudo yum install xsel

실행해서 설치해주면 끝 잘 돌아간다.

오늘의 목표

💬 AWS 에 내 웹 앱 올리기 (백엔드 없음)

AWS에 내 웹 앱 올리기 (백엔드 없음)

우선 AWS Console 에 계정을 만들어야 한다. 귀찮으니 가입 과정은 적지 않겠음. 개인 프로젝트 정도는 프리티어(무료 회원)로 충분히 가능하니까 겁먹지 말고 조인.

AWS 콘솔에서 Amplify 를 검색해서 AWS Amplify 서비스로 진입한다.

시작하기를 누르면 자동으로 스크롤이 스르륵 되면서

이런 화면이 나오는데, Amplify Hosting 을 선택한다.

github 으로 하겠슴다. 계속.

이미 git hub 로그인 연동 하신 분은 약간의 딜레이가 있고 다음 페이지로 자동으로 이동되므로 여러번 클릭하지 말기. (AWS 의 모든 페이지가 이런 식이다... UX 𝙒̲̅𝙝̲̅𝙮̲̅𝙧̲̅𝙖̲̅𝙣̲̅𝙤̲̅ .̲̅.̲̅.̲̅ )

로그인 하고 권한을 나눠 가지면 여기로 온다. 리포지토리 선택 에서 진행할 프로젝트를 선택하자.

🐅 여기서 선택 가능하려면 해당 리포에 <관리자 권한>이 있어야 한다.

권한 변경 후에는 옆에 있는 새로고침 버튼으로 리로드 하면 변경사항이 반영된다.

repo 선택하면 아래에 브랜치 선택 화면이 뜬다. 골라주고 다음.

앱 이름을 써준 다음, 서비스 역할을 생성하라고 나온다. 하단의 새 역할 생성 버튼을 클릭해서 새 창으로 IAM 관리자 화면을 띄운다.

AWS 서비스 -> 사용 사례는 다른 AWS 서비스의 사용 사례 에서 Amplify를 검색해서 선택한다. 그러면 아래에 Amplify - Backend Deployment 라고 뜨는데 이걸 선택해서 다음 버튼을 눌러 진행한다.

자동으로 Amplify 권한이 선택되어 있을것이다. 다른 권한은 필요 없으므로 다음.

역할의 이름을 알맞게 지어주고 생성을 완료하자. 기존의 Amplify 탭으로 돌아와서 새로고침 버튼을 누르면

방금 만든 역할이 보인다. 선택하고 아래로 내려 (혹은 다음으로 진행) 빌드 설정을 하자.

이 화면에서 빌드 스크립트가 자동으로 채워지는 프로젝트도 있고, 비어있는 것들도 있다. 위 캡쳐 화면은 비어있을 때 경고가 뜬 모습이다.

만약 본인 프로젝트의 ampllify.yml 파일이 이상하다면 아래 내용을 복사해서 적용하면 된다. (npm 기준)

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - npm install
    build:
      commands: 
        - npm run build
  artifacts:
    baseDirectory: .
    files:
      - '**/*'
  cache:
    paths: 
      - node_modules/**/*

완료하고 다음 단계로 넘어가자.

지금까지의 설정을 확인하고 배포를 시작하는 페이지이다. 하단의 저장 및 배포 버튼을 누르면 바로 최초 배포가 시작된다.

이런 화면에서 프로비저닝(배포 준비), 빌드(npm run build), 배포(deploy) 를 포함해서 총 4단계가 진행된다.

에러 확인 방법

보통 빌드 단계에서 에러가 발생한다. 로그만 잘 봐도 뭐가 문제인지 알 수 있다.

빌드 에러난 페이지에서

빌드 탭을 눌러 해당하는 모듈의 로그를 확인할 수 있다.

(여기요🖐) 여러가지 빌드 에러 해결 FAQ

내가 앱을 배포하면서 겪은 몇가지 빌드 에러와 해결법을 정리한다.

1. (Next.js) SSR Lambda error

2022-02-23T06:43:32.602Z [ERROR]: Error encountered importing modules into your SSR Lambda functions. Check out our FAQ for suggestions on how to resolve the issue: https://github.com/aws-amplify/amplify-console/blob/main/FAQ.md#webpack-modulenotfound-errors
Terminating logging...

Next.js 로 만든 프로젝트를 올렸는데 SSR Lambda 어쩌구 에러가 나는 경우엔 환경 변수를 추가하면 해결할 수 있다.

현재 앱의 환경 변수 메뉴로 진입한다.

변수 관리 메뉴 클릭

하단의 변수 추가 버튼을 클릭한 다음 변수는 AMPLIFY_NEXTJS_EXPERIMENTAL_TRACE, 값은 true 를 입력한다.

이렇게영. 그 다음 다시 배포하면 해결된다.

2. npm ERR! spawn ENOENT

                                 # Starting phase: build
                                 # Executing command: npm run build
                            npm ERR! spawn ENOENT
                                    npm ERR!
                                    npm ERR! Failed at the keycloakify-sample@0.1.0 build script.
                                    npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
2022-02-26T09:03:19.083Z [WARNING]: npm
2022-02-26T09:03:19.083Z [WARNING]: WARN Local package.json exists, but node_modules missing, did you mean to install?
2022-02-26T09:03:19.083Z [WARNING]: npm ERR! A complete log of this run can be found in:
                                    npm ERR!
2022-02-26T09:03:19.083Z [WARNING]: /root/.npm/_logs/2022-02-26T09_03_19_078Z-debug.log
2022-02-26T09:03:19.086Z [ERROR]: !!! Build failed
2022-02-26T09:03:19.088Z [ERROR]: !!! Non-Zero Exit Code detected
2022-02-26T09:03:19.088Z [INFO]: # Starting environment caching...
2022-02-26T09:03:19.088Z [INFO]: # Environment caching completed
Terminating logging...

중간에 WARN 로그를 보면 Local package.json exists, but node_modules missing, did you mean to install? 라고 묻는다.

이건 amplyfi.yml 에서 당신이 작성한 빌드 명령어가 뭔가 이상하다는 뜻이다. 이럴 때에는 빌드 명령어를 다시 확인하자.

내 경우는 비슷한 에러를 총 3번 만났다.

1) preBuild 가 prebuild 로 CamelCase 가 잘못 적혀 있었음 2) 남의 거 복사 하다가 npm 대신 yarn을 썼음 🤗 3) buildDirectory 에 애매하게 build 이런거 썼음. (. 이면 된다.)

끝

이렇게 갖가지 빌드로 고생을 하다가 전부 성공하고 나면 도메인에 보이는 링크로 내 웹 앱에 접근할 수 있다.

PR 미리보기도 쓰고 싶었는데 조금 지쳤다. 내일 써야지

끝

알아두기 : next-i18next 동작방식

기본적으로 URL 을 통해 적용된다. 기존 Vue나 CRA 프로젝트로는 이렇게 안하고 store에 변수 저장해놓고 어쩌고... 방식에 익숙해서 처음엔 이렇게 하기 싫었다.

근데 일단 하고 나니까 쉬워서 괜찮아졌다 ^.^ 인간은 적응의 동물!

🌐 URL 방식으로 동작해요

hostname 과 path 사이에 언어가 들어간다. 이런 식.

company 라는 페이지를 영문으로 보고 싶으면 위와 같이 접근하면 되는 식이다. 물론 한글로 보려면 localhost:3000/ko/company 이렇게 접속하면 된다.

만약 언어 설정 없이 localhost:3000/company 로 접근한다면? 기본 값으로 설정된 언어가 자동으로 적용 된다.

이렇게요

그럼 이렇게 쉬운 언어설정

레쯔고🛫

1. i18n 설치

npm install --save next-i18next

2. 폴더 만들기

public 경로 아래에 locales 폴더를 만들고 제공할 언어 별로 또 다시 폴더를 만든다.

.
└── public
    └── locales
        ├── ko
        |   └── common.json
        └── en
            └── common.json

common.json 은 공통으로 사용하는 문구를 관리하며, 동일 경로에 페이지 별로 문구들을 묶어놓을 수도 있다.

💌 이전에 프로젝트를 해보니까 이렇게 페이지 별로 관리하는 게 좋다는 생각. 여러명이서 작업하는 프로젝트의 경우 매번 conflict 나는 것도 문제고, 불필요한 문구를 제거할 때도 힘들다.

그러니까 페이지 별로 분리하자면 이런 식.

기본 구조는 이렇고, 물론 변경 가능하다. 단, 구조를 변경 했을 경우 다음에 설정할 config 파일에서 localePath 와 localeStructure 를 설정해주어야 함.

3. 이제 설정 파일을 만들자

폴더를 만들었으니 이게 읽히도록 하자. 프로젝트 루트에 next-i18next.config.js 파일을 만들고 다음과 같이 내용을 적는다.

module.exports = {
  i18n: {
    defaultLocale: 'ko',
    locales: ['ko', 'en'],
  },
};

그리고 위에서 기본 경로가 아닌 다른 경로에 언어 파일을 배치한 경우 아래처럼 추가 설정을 해주면 된다.

const path = require('path');

module.exports = {
  i18n: {
    defaultLocale: 'ko',
    locales: ['ko', 'en'],
  },
  localePath: path.resolve('./my/custom/path'), // 요렇게
};

더 많은 옵션들이 있다.

repo에서 확인하기

4. next.js 가 다국어 설정을 사용하도록 하자

next.config.js 파일을 열어서 i18n 을 사용하도록 설정한다.

const { i18n } = require('./next-i18next.config');

module.exports = {
  i18n,
};

여기서 잠깐! 🍒 만약 내 프로젝트가 webpack 설정을 쓰느라 next.config.js가 좀 복잡하다?

이렇게 하면 됩니다. (주석참조)

/** @type {import('next').NextConfig} */
const path = require('path');

// 똑같이 import 해서 
const { i18n } = require('./next-i18next.config');

const nextConfig = {
  reactStrictMode: true,
  webpack(config) {
    config.resolve.alias = {
      ...config.resolve.alias,
      components: path.resolve(__dirname, 'components/'),
      styled: path.resolve(__dirname, 'styled/'),
      utils: path.resolve(__dirname, 'utils/'),
    }
    return config;
  },
  i18n, // 요기에 넣어주면 끝! 
};

module.exports = nextConfig;

5. App 이 번역 기능을 사용하도록 하자

pages/_app.tsx 파일을 열어 다음과 같이 수정한다.

import { appWithTranslation } from 'next-i18next';

const MyApp = ({ Component, pageProps }) => <Component {...pageProps} />;

export default appWithTranslation(MyApp);

사실상 가운데 과정은 프로젝트 별로 다를 수 있고,

🍋 중요한 것은 export default 로 내보내는 MyApp 이라는 root component 가 appWithTranslation() 으로 감싸져야 한다는 것이다.

서버 사이드 렌더링은 사용하지 않았다.

6. 이제 페이지에서 사용하자

사용법은 짱 쉽다.

1. useTranslation 을 import한다.
2. Component 안에서 useTranslation() hook을 사용해서 t 라는 API 를 받는다.
3. 사용한다.

import { useTranslation } from 'next-i18next';

export const Footer = () => {
  // json 파일 명. common 또는 footer 같은거
  const { t } = useTranslation('footer'); 

  return (
    <footer>
      {/* json 파일 안에 있는 key 값 */}
      <p>{t('description')}</p>
    </footer>
  );
};

여기 useTransaltion('footer') 의 footer 는 앞에서 만든 json 파일명이다.

t('description') 의 description 은 json 파일 안에 있는 key값이다.

(🛑) 끝일 줄 알았는데 안 될 때

각 페이지 코드에 getStaticProps 를 만들어주어야 한다. 이 함수는 Next.js 내용이라 정확히 알지는 못하지만 빌드 할 때 실행되는 코드라고 한다.

props 의 기본 값을 전달하기 위해 페이지에 아래 코드를 넣어주자.

@/pages/index.tsx

// ... 
// 위에 앱 코드가 막 있으면 그 아래에

export const getStaticProps = async ({ locale }) => ({
  props: {
    // common 은 위 locales/ko 아래에 만든 json 파일 명이다. 다른 파일을 사용한다면 바꿔주자.
    ...(await serverSideTranslations(locale, ["common"])),
  },
});

이렇게 해야 i18n 에 기본 언어 값이 적용되어 다국어 설정이 된다. 그리고 이건 pages 내의 모든 페이지 index.tsx 파일에 들어가야 하는 듯..

아래 코드를 참조하세요.

// REACT
import { NextPage } from 'next';
import { serverSideTranslations } from "next-i18next/serverSideTranslations";

const MySample: NextPage = () => {
  return (
    <div className="mysample">
    </div>
  )
};

export const getStaticProps = async ({ locale }) => ({
  props: {
    ...(await serverSideTranslations(locale, ["common"])),
  },
});

export default MySample;

끝

✔ 로컬 서버에 keycloak 설치하기 ✔ 로그인 화면에 신규 테마 적용하기

이 시리즈에서 개발한 키클락 앱 코드는 깃헙에 올려두었다. 👉 https://github.com/cindy-choi/keycloak-sample-ts

오늘은 이전 글에서 빌드한 새로운 테마를 키클락 서버에 적용한다.

이전 글: keycloakify 로 새로운 로그인 화면 빌드하기

로컬 서버에 keycloak 설치하기

keycloak 설치는 전래 쉬움. 가능하면 keycloakify 가 테스트 완료한 버전을 확인하는 것이 좋다.

가장 최신 버전은 아직 테스트가 안되었다. 직접 테스터가 되고 싶은 경우에만 keycloak 17.0을 설치하자...

1. keycloak 다운로드

키클락 버전 별 다운로드 링크 : https://www.keycloak.org/downloads-archive.html

나는 회사에서 15.0.2를 사용해서 그걸로 했고,개인적으로 16 버전에서도 테스트를 해봤다. 다 잘되니까 아무거나~

2. 압축 풀기

원하는 경로에 다운받은 zip 파일을 두고 압축을 풀면 된다.

 unzip keycloak-15.0.2.zip

3. 실행

압축 푼 폴더의 bin 경로에 있는 standalone.sh를 실행하면 끝!

sh ./bin/standalone.sh

4. 키클락 admin 페이지 들어가기

키클락 서버를 띄우면 admin 페이지에 접근할 수 있다.

보통 8080 포트로 뜨는데 그게 아니면 로그 확인해서 무슨 포트로 떴는지 확인하면 된다. 근데 로그가 무수히 많으므로.... 눈을 크게 떠야 함

브라우저로 localhost:8080 에 접속한다.

최초 설치 시에는 admin 용 username 과 비밀번호를 결정해주어야 한다. 적은 다음 꼭 외우세요... 저는 까먹어서 다시 설치함

사용자가 잘 만들어졌다면 바로 아래에 있는 Administration Console 눌러서 이동한다.

그럼 또 이렇게 로그인 화면이 뜨는데, 방금 만들었던 admin 계정 정보 입력해서 들어가면 된다.

기본적으로 master 라는 이름의 렐름으로 접속되고, 키클락의 모든 설정이 가능하다.

5. sample 렐름 만들기

좌측 위에 있는 메뉴에서 Master 위로 포인터를 얹으면 Add realm 메뉴가 나타난다.

sample 이라는 이름의 렐름을 생성해준다.

생성된 sample 렐름을 선택한 상황에서 Clients - Create 메뉴를 눌러 우리 UI 가 접근할 클라이언트를 생성하자.

우리 서버 개발자가 처음에 이름을 public-client 라고 해뒀길래 나도 따라함... 클라이언트 ID 만 입력하고 save.

생성한 public-client 를 눌러서 설정 화면으로 진입한다.

다른건 됐고 위의 URL들을 설정을 해주어야 한다. 로컬에서 띄운 keycloakify-sample 프로젝트의 URL 을 입력하자. 나는 3000.

(🍊) Valid Redirect URLs 의 path 쪽에 * 을 허용해주면 서비스 UI 의 어느 path 에서든 로그인을 요청하고 해당 페이지로 돌아갈 수 있다.

보안상 * 로 해주기 싫으면 필요한 path 들을 각각 개별 등록하면 된다.

이런식으로. 만약 여기서 리디렉션 URL 이 허용되지 않는 범위에서 로그인을 시도하면 에러가 발생하면서 로그인 페이지에 진입할 수 없으니(404 난다) 유의.

여기까지가 키클락 로컬 세팅이다.

진짜 마지막. 테마 적용하기

Realm Settings > Themes 메뉴로 진입한다.

login, account, admin console 등 여러가지 화면에 각기 다른 테마를 적용할 수 있음. 로그인, 회원가입, 비밀번호 재설정... 등 대부분의 화면은 login theme 로 설정 가능하다.

우선 메뉴를 열어보면 base 와 keycloak 딸랑 두개 있는데 이제부터 지난 글에서 만든 테마를 적용해보자.

1. 테마 옮기기

지난 글에서 npm run keycloak 명령어를 때려서 만든 build_keycloak 폴더를 기억하시는지. 이제 만들어둔 build_keycloak/src/main/resources/theme/keycloakify-sample 을 복사해서 키클락이 설치된 경로의 themes/login 아래에 붙여넣자.

 cp -rfp ./src/main/resources/theme/keycloakify-sample ~/dev/keycloak-15.0.2/themes/.

내 경우 명령어는 위와 같지만 상황에따라 다르므로 잘.. 복사합니다.

2. 테마 선택하기

별도로 키클락을 재기동할 필요 없이! 바로 아까의 테마 메뉴에서 방금 복사한 테마를 확인할 수 있다.

클릭해서 선택하고 적용해주면, 이제 이 키클락 렐름을 통해 로그인 하러 오는 사람들은 새로운 테마의 화면을 볼 수 있게 된다.

키클락 테마 세팅까지 해주었다. 여기까지 하면 끝인 줄 알겠지만, 이제

1) 서비스 UI 에서 private 페이지와 public 페이지를 구분해주고 2) 로그인이 필요한 페이지에 인증 없이 접근하면 로그인 화면으로 리디렉션 .. 처리를 해주어야 한다.

이것도 만만찮게 길기 때문에 다음 글에 계속

끝

✔ keycloakify 설치하기 ✔ 로그인 화면 커스텀 하기 ✔ 회원 가입 화면 커스텀 하기

이 시리즈에서 개발한 키클락 앱 코드는 깃헙에 올려두었다. 👉 https://github.com/cindy-choi/keycloak-sample-ts

완성된 코드 말고 처음부터 따라하고 싶은 사람은 아래에 나오는 보일러플레이트를 사용해도 된다.

프로젝트 구조 설명

다음은 keycloakify 의 메인 페이지에서 확인 할 수 있는 gif 이다.

gif를 보면 Onyxia 라는 이름의 검은색 테마의 페이지들이 있고, 쌩뚱맞은 파란색 테마의 로그인 페이지가 보이는데

검은 페이지들이 일반 서비스 UI 이고, 테마가 맞지 않은 파란 페이지들이 Keycloak UI이다.

잘 보면 keycloak UI 에 진입했을 때 URL이 기존과는 다르게 몹시 긴 것을 볼 수 있다. 완전히 다른 두 개의 UI를 개발해야 하는 것이다.

이 시리즈에서 진행하는 프로젝트는 하나의 repository에 서비스 UI 와 Keycloak UI 코드를 한 번에 관리&빌드 할 수 있도록 구성했다.

시작하자

시작하기 전에, 개발 하기 전에 세팅해놓는 것을 좋아해서 미리 만들어둔 boilerplate 를 사용했다.

샘플 코드를 만드는 사람이라면 이 보일러플레이트를 클론 받아서 같이 시작하면 되겠다.

👉 https://github.com/cindy-choi/cindy-boilerplate-ts

git clone https://github.com/cindy-choi/cindy-boilerplate-ts.git

1. keycloakify 설치하기

다음의 명령어로 keycloakify 와 친구들을 설치한다.

npm install --save-dev keycloakify @emotion/react tss-react powerhooks

2. keyclok context 사용하기

keycloak 관련 전역 변수 등을 관리하기 위해 매니저 파일을 만든다. 파일 명과 경로는 마음대로..

@/utils/keycloakManager.ts

import { getKcContext } from 'keycloakify';

export const { kcContext } = getKcContext<{
  pageId: 'login.ftl',
}>({ 
  mockData: [
    {
      pageId: 'login.ftl',
    },
  ],
});

const keycloakManager = {
  kcContext,
};

export type KcContextType = NonNullable<typeof kcContext>;
export default keycloakManager;

keycloakify 로 UI를 빌드할 때 kcContext 값을 사용해서

• 어떤 페이지를 빌드 할 건지
• 빌드 디버깅 옵션을 사용할 것인지
• 빌드 시 mockData를 적용할 건지, 적용한다면 어떤 값인지

등등을 결정한다.

3. 로그인 페이지 개발하기

이렇게 생긴 로그인 페이지를... 만들어보자. 프론트엔드 개발자 타이틀 달고 퀄리티가 말이 아니다. 아무튼...

keycloak 관련 페이지는 keycloak 경로에 다 묶어두었다. 서비스 UI 랑 같이 하나의 repo 에서 관리하려면 이 방법이 편하다.

@/pages/keycloak/Login.tsx

import React, { useState, useRef, memo, useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import styled from 'styled-components';
import { Button, TextField } from '@mui/material';

import type { KcProps } from 'keycloakify/lib/components/KcProps';
import type { KcContextType } from '@/utils/keycloakManager';

type KcContext_Login = Extract<KcContextType, { pageId: 'login.ftl' }>;

const StyledLogin = styled.div`
  min-width: 100vw;
  min-height: 100vh;
  background-image: url(${bg});
  background-size: cover;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
`;

const LoginForm = styled.form`
  width: 25rem;
  height: 15rem;
  background-color: white;
  border-radius: 5px;
  box-shadow: 2px 2px 8px 0px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
`;

const LoginInput = styled(TextField)`
  width: 20rem;
  margin-bottom: 8px !important;
`;

const LoginButton = styled(Button)`
  width: 20rem;
`;

export const Login = memo(({ kcContext, ...props }: { kcContext: KcContext_Login } & KcProps) => {
    const { t } = useTranslation();
    const form = useRef<HTMLFormElement>(null);
    const { social, url, message, realm, } = kcContext;
    const isSessionOut = message?.summary.includes('attempt timed out') || message?.summary.includes('Timeout');

    console.log(kcContext);

    const handleSubmit = () => {
      form?.current?.submit();
    };

    return (
      <StyledLogin>
        <LoginForm ref={form} method="post" action={url.loginAction}>
          <LoginInput
            id="username"
            name="username"
            size="small"
            label={t('id')}
          />
          <LoginInput
            label={t('password')}
            id="password"
            name="password"
            type="password"
            size="small"
          />
          <LoginButton variant="contained" onClick={() => handleSubmit()}>{ t('login') }</LoginButton>
        </LoginForm>
      </StyledLogin>
    );
  },
);

export default Login;

벨로그에서는 line number 기능이 없군요

하여간 코드를 보면 알 수 있듯, 기존 React로 개발하던 방식 그대로 로그인 페이지를 만들 수 있다. no more ftl!

keycloak 서버가 UI를 렌더링 할 때 전달하는 변수들은 모두 kcContext 객체 안에 들어있다.

예를 들어 위 코드에서 다국어 지원을 i18next 로 하고 있지만, 서버에서 atrribute 로 전달하는 것을 사용해도 무방할 것이다. 난 안해봄. 잘되면 알려주세요.

4. 로그인 페이지 사용하기

로그인 페이지를 만들었으면, 이제 keycloakify 가 이걸 빌드하도록 설정 해주어야한다.

프로젝트의 root 디렉토리에 KeycloakApp.tsx 파일을 만들자.

@/KeycloakApp.tsx

import { memo } from 'react';
import { defaultKcProps } from 'keycloakify';
import { useTranslation } from 'react-i18next';
import type { KcContextType } from '@/utils/keycloakManager';

import Login from '@/pages/keycloak/Login';
// import Error404 from '@/pages/common/Error404';

import './KeycloakApp.scss';

export const KeycloakApp = memo(({ kcContext }: { kcContext: KcContextType; }) => {
  const { t } = useTranslation();

  console.log(kcContext);

  switch (kcContext.pageId) {
    case 'login.ftl':
      return <Login {...{ kcContext, ...defaultKcProps }} />;

    default:
      return undefined;
  }
});

export default KeycloakApp;

switch를 보면 서버에서 넘겨주는 kcContext의 pageId 에 따라 어떤 페이지를 렌더링 할지를 결정하는 것을 알 수 있다.

추후 추가로 회원 가입 페이지나, 404 에러 페이지를 개발하게 될 경우 swtich case 에 추가해주면 된다.

그리고 이 KeycloakApp.tsx 를 사용하도록 설정해주자.

@/index.tsx

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import reportWebVitals from './reportWebVitals';

// service ui
import App from './App';
// keycloak ui
import KeycloakApp from '@/KeycloakApp';
import { kcContext } from '@/utils/keycloakManager';


/**
 * keycloak 서버에서 제공할 때에만 kcContext 값이 활성화되며, 기본적으로는 App을 렌더링합니다.
 */
ReactDOM.render(
  <React.StrictMode>
    {
      // kcContext가 존재하면 키클락 App 을 렌더링하고, 그렇지 않으면 App을 렌더링합니다.
      kcContext !== undefined ? (
        <KeycloakApp kcContext={kcContext} />
      ) : (
        <App />
      )
    }
  </React.StrictMode>,
  document.getElementById('root'),
);

reportWebVitals();

App.tsx 와 KeycloakApp 을 상황에 따라 다르게 사용하는 것을 볼 수 있다.

구체적으로 말하자면 이 다음에 나오는 npm run keycloak 명령어를 때리면 keycloakify 로 우리가 개발한 웹 페이지를 빌드하는데, 이 때 kcContext가 전달된다고 보면 된다.

개발된 페이지를 keycloak theme로 내보내기

그냥 만들면 짠하고 keycloak UI 가 spa 로 동작하면 얼마나 좋을까. 이제 실제로 keycloakify 를 사용해서 키클락 theme 파일을 만들어보자.

우선 빌드 명령어를 추가해주어야 한다.

package.json

  "scripts": {
    "keycloak": "craco build && build-keycloak-theme",
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
  },

맨 위에 있는 keycloak 을 추가해주면 된다. 나는 craco 를 쓰는데 npm을 사용중이라면 다음과 같이 변경하면 된다.

"keycloak": "npm build && build-keycloak-theme"

그리고 명령어를 때려보자. 우선 npm build 때린 것 처럼 빌드를 먼저 하고 진행하기 때문에 제법 오래 걸린다.

이렇게 긴~ 과정을 끝내면

프로젝트의 root 경로에 build_keycloak 이라는 경로가 생성되고 그 안에 keycloak 적용에 필요한 것들이 모두 포함되어 나온다.

그 중 우리에게 필요한 건 theme 폴더! build_keycloak/src/main/resources/theme/ 경로 안에 있는 keycloakify-sampe 경로를 확인하자.

참고로 이 폴더의 이름은 package.json 에 명시된 프로젝트의 name 을 따라간다.

이 keycloakify-sample 폴더를 키클락이 설치된 곳에 복사해두면 끝! 다른 jar 파일들이 많이 생기는데, 내 경우 혹시 몰라서 jar 파일만 서버에 적용 해주었고 나머지는 손대지 않았지만 잘 동작했다.

여기까지 keycloakify 로 UI 빌드까지 끝냈다. 이제 로컬에 키클락을 띄우고 로그인이 필요한 페이지에서 리디렉션을 걸어서 실제 UI랑 연동을.. 내일 해보자.

끝

✔ 키클락이 뭔지 알아보기 ✔ 키클락 theme 기능은 어떻게 동작하나 ✔ keycloakify 소개

다음글: keycloakify 로 react 로 개발한 로그인 페이지 빌드하기!

Keycloak 은 무엇인가

Keycloak은 오픈소스 인증/접근 관리 솔루션이다.

로그인 관련 기능을 직접 구현하는 대신 Keycloak을 이용하면 보다 간단히 서비스의 인증 기능을 구축할 수 있다. 쿠버네티스 환경에 서비스를 제공하는 입장에서 realm 별로 인증/인가 기능을 대신 처리해주므로 편리하여 여기저기 쓰이는 추세인듯.

다만 UI 개발자 입장에서는 Keycloak 이 그다지 반가운 선택은 아니었다.

키클락 관련 UI 가 모두 서버 렌더링 방식으로 동작하는데다 *화면을 직접 수정 개발할 수 없었기 때문에... *

옛날 바닐라 시절 문법을 끌어내는 수 밖에 없었다. 그리고 난 정말 그것을 하고 싶지 않았음...

바닐라를 쓰지 않고 기존 서비스 화면과 따로 노는 키클락 기본 테마를 어찌저찌 하는 방법은 대체 무엇이란 말인가.

Keycloak 의 theme 기능 이해하기

키클락 공식 문서를 보면 theme 기능이라는 항목이 있다.

앞서 말했듯 서버 렌더링 방식으로 동작하는 UI를 내가 직접 수정할 수는 없기 때문에 Keycloak 은 ftl이라고 하는 프리마커를 사용해서 스타일을 조절하도록 해두었다.

목차에서 조차 'Server Developer' 챕터에 theme 기능이 들어있는 것을 보면 전적으로 FE 개발자를 위한 솔루션은 아닌 것같지...

아무튼 Keycloak 의 공식 문서 중 theme 에 관련된 내용을 살펴보면, Keycloak 이 제공하는 화면의 구성은 동일하되 css 외 리소스들로 화면의 스타일을 변경할 수 있다고 한다.

ftl + resources = UI 인 것이다. 그림으로 표현하자면 아래와 같다.

여기서 단순히 css를 수정하는 것만으로 요구사항을 만족할 수 있다면 그냥 이렇게 진행하는 것도 괜찮다. 변수명을 변경하거나 추가/삭제 하는 것도 어지간하면 키클락에서 제공해준다.

다만 나는 다음의 상황을 마주쳤고, 당신도 그럴 수 있다...

문제상황

위는 키클락에서 제공하는 회원가입 기본 화면이다.

• 입력 : first name, last name, email, password, confirm password
• 액션: 로그인 화면으로 돌아가기, 회원가입을 완료하기

입력 5개와 액션 2개가 전부로 아주 조촐하다.

하지만 내가 받은 기획서에는

무려 약관 동의에, 인증 메일 주고 받는 기능이 들어가야한다.

앞서 말했다시피 Keycloak 의 theme 기능에 의존하여 UI를 직접 수정하려면 ftl을 포함한 바닐라 방식을 사용하지 않을 수가 없는데....

정말 하기 싫었다.

방법은 있어

선택지는 두 개다.

1) 기획자를 찾아가 무릎을 꿇거나.. 2) 방법을 찾는다.

눈물의 리서치를 하다가 구세주같은 툴을 발견했다. 바로 keycloakify !

구세주에게 바로가기

keycloakify 는 Keycloak theme 때문에 골치가 아픈 먹이사슬 최하위 프론트엔드 개발자를 위한 빌드 툴이다. 할 수만 있다면 star를 열개 쯤 때렸을텐데...

서툰 ftl과 css를 직접 사용할 필요 없이, 우리가 react.js 나 Vue.js 를 사용하던 방식 그대로 앱을 개발한 다음 keycloakify 로 빌드를 해주면 Keycloak theme 에 사용할 수 있는 ftl 과 resources 를 만들어준다. 그럼 그걸 Keycloak 서버의 theme 폴더에 넣으면 그걸로 끝!

사용방법

1) CRA 프로젝트에 keycloakify 를 설치한다. 2) Reack.js 로 필요한 Keycloak 화면을 개발한다. 3) 개발 완료한 테마를 빌드한다. 4) 키클락에 적용한다.

초 쉽죠?

간단해보이는데 키클락 UI 와 관련한 한글 문서는 거의 없어서 좀 헤멨다. 그래서 간단히 정리를 해두려고 함.

이 글을 서비스에서 Keycloak 을 사용하게 된 힘 없는 프론트엔드 개발자분들께 바칩니다. 그런데 곧 바이올린 연습하러 가야해서요. 다음 글에 계속됩니다.

안녕 ftl🥺

개요

딱히 할 것도 없는 차에 React 18 버전 업데이트 소식을 뒤늦게 접하였고, 몇 가지 흥미로운 기능들이 보여 공식 discussion의 몇가지 내용을 번역/정리합니다.

링크의 내용을 참조했습니다.

아직 18 버전은 Alpha, Beta 를 거쳐 현재 RC 상태. 따라서 아래에서 소개하는 기능은 최종 릴리즈 당시 바뀔 수 있음을 알립니다.

많은 블로그 포스트에서 18버전을 아우르는 키워드는 동시성이라고들 해요.

아래에서 다루겠지만 렌더링 순서에 우선순위를 부여(startTransition)한다던가, SSR (Server-Side Rendering) 구조를 개선했다던가 하는 내용이 주를 이룹니다. 싱글 스레드 JS로 개발하는 웹 어플리케이션에 동시성을 부여함으로써, 개발 방식(workflow)과 성능을 개선한다는 것이죠.

미리 써볼 수 있나요?

다음의 방식으로 RC 버전을 설치해 사용할 수 있습니다.

npm install next@latest react@rc react-dom@rc

추가(변경) 되었어요

• (out-of-the-box) Automatic batching
• (out-of-the-box) SSR support for Suspense
• (out-of-the-box) Fixes for Suspense behavior quirks (제외)
• startTransition
• useDeferredValue
• <SuspenseList>
• Streaming SSR with selective hydration

어쨌든 본 문서에서는

• Automatic batching
• startTransition
• useDeferredValue

이 세 가지에 대해 알아보기로 합니다.

SSR (Server-Side-Rendering) 관련 내용은 기회가 된다면 다음에...

1. Automatic batching

Batching 이 뭔데요?

Batching is when React groups multiple state updates into a single re-render for better performance.

다시 말해 여러 개의 state 업데이트 상황을 하나의 re-render로 묶어 더 빨리 처리하자! 하는 것입니다.

useState 를 사용하신 분들이라면 이 구문이 비동기로 동작한다는 사실을 이미 알고 계실거에요.

한 번의 클릭 이벤트로 2개의 state 가 변경된다고 칩시다. count 와 flag 가 변경되면 <h1> 태그가 변경될테고, 그럼 화면을 다시 렌더링 해야겠죠. React 는 항상 이 변경 사항(update)들을 하나의 리랜더링(re-render)에 모아서 처리합니다.

아래의 코드를 보세요.

function App() {
  const [count, setCount] = useState(0);
  const [flag, setFlag] = useState(false);

  function handleClick() {
    setCount(c => c + 1); // 아직 렌더링 안했어요!
    setFlag(f => !f); // 아직 렌더링 안해요!!
    // React는 이 끝에서 리-렌더링을 한번만 합니다. (that's batching!)
  }

  return (
    <div>
      <button onClick={handleClick}>Next</button>
      <h1 style={{ color: flag ? "blue" : "black" }}>{count}</h1>
    </div>
  );
}

그러므로 Batching 은 성능에 어마어마한 영향을 줍니다. 그렇지 않나요?

당장 위의 20줄 짜리 코드에서도 2번 렌더링 할 것을 단 한 번으로 줄여주었으니까요.

🤚 또 있습니다. batching 을 하지 않으면 count 가 바뀌었을 때 <h1>을 새로 렌더링 될 거고, 동 순간 개발자가 의도한 대로 color는 변경되지 않을 겁니다.

이건 버그에요. Batching 은 이런 버그를 예방하는 효과도 있습니다.

그런데 말입니다. 🤔

예를 들어 데이터를 fetch한 다음 state를 업데이트 해야하는 상황에서는 Batching 이 적용되지 않아요. 두 번의 독립적인 update 가 실행되는 거죠.

왜 그럴까요?

👉 보통 리액트는 브라우저의 이벤트가 일어나는 동안에만 batching을 하기 때문입니다.

위의 예시에서는.... 그냥 한 번 더 코드로 다시 보겠습니다.

function App() {
  const [count, setCount] = useState(0);
  const [flag, setFlag] = useState(false);

  function handleClick() {
    fetchSomething().then(() => {
      // 그동안의 React 는 여기서 batch 하지 않아요.
      // 이유는.. 위에 적어뒀습니다.
      setCount(c => c + 1); // re-render 를 유발하는 구문
      setFlag(f => !f); // 역시 re-render를 유발하는 구문
    });
  }

  return (
    <div>
      <button onClick={handleClick}>Next</button>
      <h1 style={{ color: flag ? "blue" : "black" }}>{count}</h1>
    </div>
  );
}

요약하자면, 그동안의 React (17) 는 이벤트 핸들러의 밖에서는 Batch 처리를 하지 않았습니다. 이벤트를 핸들링하는 동안에만 일괄 업데이트(batching)를 했어요.

따라서 기본적으로 Promise 구문, setTimeout, native event handlers, 또는 등등의 모든 이벤트 내에서 발생하는 변경사항(update)는 Batch 처리 되지 않았습니다.

지금까지는요. 😉

진짜 진짜 Automatic batching

이제 18이 나옵니다!

React 18의 createRoot 를 사용하면, 모든 변경사항(update)은 자동으로 batch 처리 될 거에요! 변경사항이 어디에서 수행되든지 상관 없어요.

즉, promise건 timeout 이건 native 이벤트이건 모든 이벤트가 React 자체 이벤트와 같은 방식으로 변경사항을 일괄 처리(batch)한다는 거죠. 일관성이 생긴 겁니다.

function App() {
  const [count, setCount] = useState(0);
  const [flag, setFlag] = useState(false);

  function handleClick() {
    fetchSomething().then(() => {
      // 이제 여기서 batching 이 일어납니다.
      setCount(c => c + 1);
      setFlag(f => !f);
      // 이 끝에서 배치 처리 되어 한 번에 업데이트 될거에요!
    });
  }

  return (
    <div>
      <button onClick={handleClick}>Next</button>
      <h1 style={{ color: flag ? "blue" : "black" }}>{count}</h1>
    </div>
  );
}

이제 React 는 자동으로 모든 변경사항을 Batch 처리 할거에요. 변경(update)가 어디서 일어나든 상관 없이 말이죠.

그래서!

function handleClick() {
  setCount(c => c + 1);
  setFlag(f => !f);
  // React will only re-render once at the end (that's batching!)
}

이것도

setTimeout(() => {
  setCount(c => c + 1);
  setFlag(f => !f);
  // React will only re-render once at the end (that's batching!)
}, 1000);

이것도

fetch(/*...*/).then(() => {
  setCount(c => c + 1);
  setFlag(f => !f);
  // React will only re-render once at the end (that's batching!)
})

이것도

elm.addEventListener('click', () => {
  setCount(c => c + 1);
  setFlag(f => !f);
  // React will only re-render once at the end (that's batching!)
});

그리고 이것도! 모두 동일하게 atching 됩니다.

물론 이런 상황을 의심 많은 사람들을 위한 데모 코드도 있습니다. 아래 샌드박스로 들어가 Console log 를 확인해보세요.

React 17 : 배치 처리 되지 않고 2번 렌더링 되는 예제 React 18 : event handler 밖에서도 완벽하게 배치 처리되는 예제!

Automatic batching 적용하는 법 : createRoot 사용하기

일단 "root"가 뭔지부터 짚고 갈까요.

React에서 root는 rendering Tree(다들 아는 그것)를 트래킹 하기 위해 사용하는 데이터 구조의 최상위를 가리킵니다.

일반적으로 사용하는 index.js 의 root 코드를 보겠습니다.

import * as ReactDOM from 'react-dom';
import App from 'App';

const container = document.getElementById('app');

// 최초의 렌더링
ReactDOM.render(<App tab="home" />, container);

// 변경사항이 발생하면, React 는 DOM 객체의 root 에 접근합니다.
ReactDOM.render(<App tab="profile" />, container);

렌더링 할 때 ReactDom.render() 라는 API 를 사용하는 것을 볼 수 있을텐데요, 공식 문서에서는 이것을 Legacy root API 라고 부릅니다.

ReactDom.render() 에서 "root"는 DOM 객체에 이어붙이는(attached) 용도이고 여기에 접근하기 위해서 역시 DOM 노드를 사용하기 때문에 "root"라는게 뭔지 알 수 없습니다.

지금부터 우리가 사용하려는 New Root API, 즉 createRoot() 에서는 이렇게 바뀔거에요.

import * as ReactDOM from 'react-dom';
import App from 'App';

const container = document.getElementById('app');

// root 를 명시적으로 생성합니다.
const root = ReactDOM.createRoot(container);

// 최초의 렌더링: 객체를 root 에 렌더링하기
root.render(<App tab="home" />);

// 변경 사항이 발생하면 container 에 root 를 다시 전달 할 필요가 없습니다.
root.render(<App tab="profile" />);

이해가 되시나요?

개발자의 입장에서 대체 뭔 소리야 싶었던 root 가 짜잔🎉, 하고 명시적으로 등장했습니다. 덕분에 렌더링 할 때 마다 container 를 매번 render()함수에 전달 할 필요가 없어졌어요.

Batch 처리하기 싫어요!

가끔은 state 가 변경되는 즉시 DOM 에 반영해야 할 상황이 생깁니다. Batching 하기엔 빠른 반영이 필요한 것들.

그런 상황을 위해 Batch에서 제외할 수 있는 API 를 제공합니다. 바로 flushSync 에요.

import { flushSync } from 'react-dom'; // Note: react-dom, not react

function handleClick() {
  flushSync(() => {
    setCounter(c => c + 1);
  });
  // 여기서 바로 DOM을 업데이트 합니다.
  flushSync(() => {
    setFlag(f => !f);
  });
  // 여기서도 마찬가지.
}

여기까지 batching 관련한 내용이었습니다.

정리하느라 생략된 내용들이 많습니다. 공식 Github 문서에서 나머지 내용을 살펴보세요.

2. startTransition

React 18 에서 소개하는 새로운 API 입니다. 이 API는 대량의 update 를 처리하는 와중에도 우리의 어플리케이션이 응답성을 유지할 수 있게 도와줍니다.

startTransition()을 사용하면 특정 update를 'transitions'로 표시해서 UI를 개선할 수 있습니다. 따라서 이를 이용하명 state 가 변경되는 중에 시각적 피드백을 제공하게 하고 브라우저의 응답성을 유지할 수 있습니다.

무슨 말인지는, 아래의 동영상을 보면 확실히 알 수 있습니다. (출처 : 공식 discussion))

클릭해서 보기

코드로도 볼까요.

function FastSlider({defaultValue, onChange}) {
  const [value, setValue] = useState(defaultValue);
  const timeout = useRef(null);

  return (
    <Slider
      value={value}
      onChange={(e, nextValue) => {
        clearTimeout(timeout.current);

        // Update the slider.
        setValue(nextValue);

        // 슬라이더가 100ms 이상 움직임이 없으면
        // 값이 변경된 걸로 칩니다.
        timeout.current = setTimeout(() => {
          onChange(nextValue);
        }, 100);
      }}
    />
  );
}

상단의 슬라이더로 value를 변경할 수 있으며, 변경된 value를 참조하는 하단의 그래프가 re-rendering되는 UI입니다.

일반적으로는 문제가 없을 수 있지만, 그래프가 대량의 update를 처리하는 경우라면 동영상에서 처럼 화면 자체가 멈춰버리는 현상이 생깁니다.

  ![](https://images.velog.io/images/cindy-choi/post/cdfedd6c-c559-4113-b407-f40f655c6c0a/image.png)

그러면 위의 코드를 개선해보겠습니다.

참고로 startTransition을 사용하기 위해서는 섹션 1에 언급 된 New Root API 를 사용해야 하기 때문에, index.js 파일의 root 를 아래와 같이 바꿔주세요.

// 이거를
ReactDOM.render(<App />, document.getElementById('root'));

// 이렇게
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

이제 코드에 직접 startTransition()을 사용해보겠습니다.

import { startTransition } from 'react';

// ...그 외 생략

function FastSlider({defaultValue, onChange}) {
  const [value, setValue] = useState(defaultValue);

  return (
    <Slider
      value={value}
      onChange={(e, nextValue) => {
        {/* 여기에서 slider의 값(value)이 변경됩니다. */}
        setValue(nextValue);
        onChange(nextValue);
      }}
    />
  );
}

// 버블 차트 부분
function ClassicAssociationsBubbles({associations}) {
  const [minScore, setMinScore] = useState(0.1);

  const data = computeData(minScore);

  return (
    <>
      <FastSlider defaultValue={0.1} onChange={val => {
        {/* Update the results, in a transition. */}
        startTransition(() => {
          setMinScore(val);
        });
      }/>
      <ExpensiveChart data={data}/>
    </>
  );
}

여기까지만 해도 적용 되지만, 하나만 더 개선해볼게요.

사용자에게 현재 차트가 그려지는 중에는 차트의 투명도를 낮추어 펜딩 상태를 가시적으로 표현해보겠습니다.

import { useTransition } from 'react';

// FastSlider 부분은 놔두고 아래의 버블 차트 부분만 변경합니다.

function ClassicAssociationsBubbles({associations}) {
  // New hook in React 18
  const [isPending, startTransition] = useTransition();

  const [minScore, setMinScore] = useState(0.1);
  const data = computeData(minScore);

  return (
    <>
      <FastSlider defaultValue={0.1} onChange={val => {
        /* transition 내부에서 값을 변경합니다. */}
        startTransition(() => {
          setMinScore(val);
        });
      }/>
      <ExpensiveChart
        // pending class 적용하기.
        className={isPending ? 'pending' : 'done'}
        data={data}
      />
    </>
  );
}

// index.css
.pending {
  opacity: 0.7;

  // 너무 빨리 렌더링되면
  // 보이지 않을 수 있으므로 0.4s 지연을 줍니다.
  transition: opacity 0.2s 0.4s linear;
}

.done {
  opacity: 1;
  transition: opacity 0s 0s linear;
}

여기까지! 수정된 코드의 결과 역시 아래의 동영상으로 확인하세요.

그래프가 렌더링 되는 동안에도 슬라이더는 사용자의 움직임에 반응하며, 차트가 렌더링 되는 동안 투명도 값이 조절되므로 사용자는 그래프의 로딩 상황을 알 수 있습니다. 🧐

startTransition에 대해 더 알고 싶다면 공식 discussion을 참조하세요.

3. useDeferredValue

'use'로 시작하는 걸로 봐서는 hook이에요. 이쪽은 정보가 많이 없었습니다. 많이 주목받지 못하는 자그마한 어쩌고,,,

useDeferredValue 는 말 그대로 어떤 변수의 deferred 된 값을 반환하는 hook입니다.

react 가 deferred 개념을 처음 사용한 것은 아닙니다.

기존에도 HTML 의 <script> 태그에 defer 옵션이 있었고, jQuery의 promise를 공부할 때면 근근히 따라 다니는 것이 deferred 개념이었죠.

가장 쉬운 서치바를 만들 때에도 이 개념은 유효합니다. 저는 직접 구현하기도 했지만 주로 lodash 의 debounce() API 를 사용했었습니다.

아래는 간단한 예시입니다. input 에 100ms 동안 변경사항이 없으면 searchQuery에 검색어를 저장하여 MyList에서 필터링합니다.

function FastSlider() {
  const [value, setValue] = useState('');
  const [searchQuery, setSearchQuery] = useState('');
  const timeout = useRef(null);

  return (
    <input
      value={value}
      onChange={(e, nextValue) => {
        clearTimeout(timeout.current);
        setValue(nextValue);

        {/* 100ms 이상 값이 변하지 않으면 검색어를 업데이트합니다. */}
        timeout.current = setTimeout(() => {
          setSearchQuery(nextValue);
        }, 100);
      }}
    />

    <MyList text={searchQuery} />
  );
}

그러나! 이제 React에서 제공하는 hook을 사용해서 아주 짧은 코드로 대체가 가능합니다.

function App() {
  const [text, setText] = useState("hello");
  const deferredText = useDeferredValue(text, { timeoutMs: 2000 });

  return (
    <div className="App">
      {/* input에 현재 텍스트를 계속 전달합니다. */}
      <input value={text} onChange={handleChange} />
      ...
      {/* 하지만 이 목록은 필요한 경우 "뒤처질" 수 있습니다. */}
      <MySlowList text={deferredText} />
    </div>
  );
 }

짠. 코드가 매우 심플해졌죠. 또 기존에 lodash 의 debounce()를 사용하시던 분들이라면 외부 라이브러리 의존성을 하나 덜었습니다.

물론 useDeferredValue()의 두번째 매개변수 timeoutMs 는 ms 단위로 사용자가 얼마든지 조절이 가능합니다.

여기까지 RC 단계에 있는 React 18의 일부 기능에 대해 알아봤습니다. 그럼 이만.

끝

개발 중 다음과 같은 stream error 가 발생 했을 때

cindy {~/dev/ndc-ui}±(dev); greetings, earthling [8.449Mb]$ ☞ git push
error: inflate: data stream error (unknown compression method)
error: unable to unpack 6f9633f847dcc930d15d7b1e781a4cc4895de56b header
fatal: loose object 6f9633f847dcc930d15d7b1e781a4cc4895de56b (stored in .git/objects/6f/9633f847dcc930d15d7b1e781a4cc4895de56b) is corrupt
fatal: the remote end hung up unexpectedly
fatal: the remote end hung up unexpectedly
fatal: the remote end hung up unexpectedly
error: failed to push some refs to 'http://gitlab.~~~~~~.git'

.git 디렉토리의 hash 파일이 깨진 것이 원인. 혹시 모르니 백업을 해두길 권장합니다.

해결 방법

git fsck --full

해당 명령어를 치면 결과로 깨진 파일들이 쭉 표시됩니다.

error: inflate: data stream error (unknown compression method)
error: unable to unpack header of .git/objects/07/0649ca71bd2ba71f71ee215a731e7b03d287a7
error: 070649ca71bd2ba71f71ee215a731e7b03d287a7: object corrupt or missing: .git/objects/07/0649ca71bd2ba71f71ee215a731e7b03d287a7
error: inflate: data stream error (unknown compression method)
error: unable to unpack header of .git/objects/47/24a71d103cdde9789786e2d0c70f4751531a1d
error: 4724a71d103cdde9789786e2d0c70f4751531a1d: object corrupt or missing: .git/objects/47/24a71d103cdde9789786e2d0c70f4751531a1d
error: inflate: data stream error (unknown compression method)
error: unable to unpack header of .git/objects/6f/9633f847dcc930d15d7b1e781a4cc4895de56b
error: 6f9633f847dcc930d15d7b1e781a4cc4895de56b: object corrupt or missing: .git/objects/6f/9633f847dcc930d15d7b1e781a4cc4895de56b
Checking object directories: 100% (256/256), done.
error: a508fcd0e5c9573604ab8c338380e504b942718d: invalid sha1 pointer in cache-tree
error: inflate: data stream error (unknown compression method)
error: unable to unpack 6f9633f847dcc930d15d7b1e781a4cc4895de56b header
fatal: loose object 6f9633f847dcc930d15d7b1e781a4cc4895de56b (stored in .git/objects/6f/9633f847dcc930d15d7b1e781a4cc4895de56b) is corrupt

깨졌다고 표시되는 .git/objects/{index} 파일을 모두 제거해준 다음 리셋해주면 끝!

git reset

이후에는 같은 문제 없이 git이 잘 동작하는 것을 확인할 수 있습니다.

☑️ (지난번에 이어) 로그인 후 발급받은 토큰을 로컬 스토리지에 저장하고 관리하기 ☑️ Vue에 api 모듈 추가하기 ☑️ Google이 제공하는 People API 로 사용자 연락처 받아오기📌

문서가 잘 되어있는듯 안 되어있어서 너무 힘들었다 ㅜㅜ people API 가 아니라도 Google이 제공하는 모든 open API 는 같은 방식으로 사용할 수 있다.

저번에 로그인 한 거 있잖아요

그 때 받아온 AuthToken을 AuthManager를 만들어서 관리하기로 했었는데 포스트로 정리 안하고 그냥 했었다.....

벨로그를 오픈한김에 정리 하자면

frontend/src/plugins/AuthManager.js 파일을 만들어서 아래처럼 구현한다.

대충 내용은 로그인 후 발급받은 access token 을 브라우저의 로컬 스토리지에 저장해두고 AuthManager를 통해 관리하겠다는 것이다.

import moment from 'moment';
const AUTH_SECRET_KEY='secret';
const AUTH_EXPIRED_KEY='expired';

const AuthManager = () => {
  let state = {
    [AUTH_SECRET_KEY]: null,
    [AUTH_EXPIRED_KEY]: null,
  };

  const initialize = () => {
    state[AUTH_SECRET_KEY] = null;
    state[AUTH_EXPIRED_KEY] = null;

    localStorage.removeItem(AUTH_SECRET_KEY, null);
    localStorage.removeItem(AUTH_EXPIRED_KEY, null);
  };

  const save = (params) => {
    console.log(params);
    state[AUTH_SECRET_KEY] = params.token;
    state[AUTH_EXPIRED_KEY] = params.expired;

    localStorage.setItem(AUTH_SECRET_KEY, params.token);
    localStorage.setItem(AUTH_EXPIRED_KEY, params.expired);
  };

  const load = () => {
    state[AUTH_SECRET_KEY]  = localStorage.getItem(AUTH_SECRET_KEY);
    state[AUTH_EXPIRED_KEY] = localStorage.getItem(AUTH_EXPIRED_KEY);
  };

  const getToken = () => {
    return state[AUTH_SECRET_KEY];
  };

  const getExpired = () => {
    return state[AUTH_EXPIRED_KEY];
  };

  return {
    initialize,
    save,
    load,
    getToken,
    getExpired,
    //TODO isValid, 
  };
};

export default AuthManager();

그리고 로그인 화면에서 로그인 성공 시 토큰과 만료시간을 저장해준다. frontend/src/views/Login.vue

    async handleLogin() {
      try {
        const GoogleUser = await this.$gAuth.signIn(() => {}, (e) => {console.log(e);});
        if (!GoogleUser.Bc.access_token) throw new Error('로그인에 실패했습니다.');

        // 저장중
        this.googleUser = GoogleUser;

        // AuthManager를 통해 로컬 스토리지에 저장
        AuthManager.save({
          token: GoogleUser.Bc.access_token,
          expired: GoogleUser.Bc.expires_at,
        });

        this.$router.push('/main');
      } catch (e) {
        if (e.error === 'popup_closed_by_user') {
          // 로그인 취소, 에러 아님
          return;
        }
        console.error(e);
      } finally {
        this.getLoginInfo();
      }
    },

내 프로젝트의 경우 직접 구현하는 서버는 폐쇄망에 설치 될 예정이라 별도로 인증 기능은 구현하지 않기로 했다.

단, 저장된 access token의 expired를 체크하여 만료되는 순간 자동으로 AuthManager.initialize()를 호출하여 정보를 클리어해주고 로그인 화면으로 이동 시킬 예정이다.

Vue에 api 모듈 세팅

frontend/src/api 경로를 만들고 다음과 같이 구성한다.

frontend/src/api/index.js

import axios from 'axios';
const client = axios.create({
  headers: {
    ['Content-Type']: 'application/json;charset=UTF-8',
  },
});

client.interceptors.request.use(
  (request) => {
    if (!request.data) {
      request.data = {};
    }

    return request;
  },

  (error) => {
    Promise.reject(error);
  },
);

client.interceptors.response.use(
  (response) => {
      // 200 이 아니면 에러로 처리
    if (response && response.status !== 200) {
      return Promise.reject(response);
    }
    return response;
  },
  (error) => {
    throw error;
  },
);

export default client;

다음은 google 로 api를 던질때와 내 서버로 api 를 던질때 사용할 url을 정의한다.

frontend/src/api/url.js

export default {
  server: `${process.env.VUE_APP_SERVER_URL}`,
  google: {
    base: 'https://www.googleapis.com',
  },
};

이제 나머지에서 가져다 쓰기만 하면 끄읏 😊

✨ 이제 진짜로 구글API를 써보자!

Google API 에서 내가 쓸 라이브러리 골라 권한 얻기

지난번에 console.developers.google.com 에서 내 어플리케이션이 사용할 프로젝트 생성하는 방법을 링크로 대체했었다.

그 때 생성했던 프로젝트로 돌아가서 API 추가 버튼을 누르자.

그럼 멋진 구글 API 고르기 화면이 나온다.

여기서 내 앱에 붙여줄 마음에 드는 API 를 하나하나 둘러볼 수도 있지만 우리는 👥 연락처 데이터를 받아올 것이기 때문에 'people' 을 검색한다.

** 주의!** 기존에는 연락처 정보를 관리하기 위해 Contract API 를 사용했었지만 이제 그건 사라졌고 People API 를 사용해야 한다.

찾아 들어가서

사용 버튼을 누르면 내 프로젝트(neti)에 로그인한 사람의 연락처 정보를 얻어올 권한이 생긴다.

OAuth 에 People API scope 추가하기

지난번 포스팅에서 발견한 vue3 전용 oauth2를 아직 안붙였음... 아무튼 각자의 방식으로 oauth 모듈에 people 스콥을 추가해주자.

frontend/src/main.js

// set auth config
const prompt = 'select_account'
const GoogleAuthConfig = Object.assign({ scope: 'profile email' }, {
  clientId: process.env.VUE_APP_OAUTH_CLIENT,
  // 여기가 스콥 추가 부분 
  scope: 'profile email https://www.googleapis.com/auth/plus.login https://www.googleapis.com/auth/calendar https://www.googleapis.com/auth/directory.readonly',
});

(잘보면 내가 캘린더 API 도 몰래 추가해놓은 것을 알 수 있다)

API 로 요청을 날려보자

내가 사용할 API는 이거! People API 페이지 가기

해당 화면 우측에 보면 Try it 버튼이 있는데 일단 이걸로 제대로 사용법을 간단히 익혀보자.

문서가 잘 정리된 듯 잘 정리되어있지 않다... 눈에 안들어와.

Query parameters 를 보면 필수인 애들은 Required 라고 명시 되어있다. Try this API 에서 필수인 파라미터를 눈치껏 넣어준 다음

우린 OAuth만 쓸거니까 아래건 체크 해제를 해주고 (사실 뭔 차이인지 모르겠다) EXECUTE 로 실행한다.

권한 설정이 잘못 되어있으면 401이나 403 에러가 난다. 그런데 Try it 에서 권한 에러가 난다면 당신의 계정 자체가 이 API를 사용할 권한이 없다는 뜻이다.

⚠️ 구글 웹으로 서비스를 이용하는 것과 API 권한이 있는건 다르다

처음에 Group Manager API 를 사용하려고 정말 하루 종일 삽질을 엄청 했다. 내 경우, 구글의 Group 메뉴에서 그룹 추가/삭제/수정 작업을 잘만 했는데 API를 호출하면 권한이 없다고 해서(401) 돌아버릴뻔....

다른 API 를 써본 결과, 구글 웹페이지를 쓰는 권한과 OAuth로 API를 사용할 권한은 다른것으로 결론이 났다.

아무튼 200 응답을 받았다면 Try it 상단의 확장 버튼으로 상세한 호출 방법을 확인하자.

눌러서

cURL 부분을 보자.

첫 줄은 우리가 사용할 URL🍒 을, 두 번째 줄은 HTTPS Request를 날릴 때 Header🧀 를 보여준다.

access token을 헤더에 싣기

위에서 API 사용설정을 해주었으면 변경된 scope을 적용하기 위해 로그인을 다시 해주어야 한다

이미 로그인이 되어 로컬 스토리지에 access token이 있다고 가정하겠다.

위에서 확인한 우리가 사용할 URL🍒을 추가해주자. frontend/src/api/url.js

export default {
  server: `${process.env.VUE_APP_SERVER_URL}`,
  google: {
    base: 'https://www.googleapis.com',
    // people URL 추가
    people: 'https://people.googleapis.com/v1',
  },
};

이제 Header 🧀 를 설정해주면 된다. 거의 다 왔다!

frontend/src/api/google/index.js 파일을 만들어 구글로의 요청을 따로 분리했다.

import client from '@/api';
import BASE from '@/api/url';
import AuthManager from '@/plugins/AuthManager';

const accessToken = () => {
  AuthManager.load();
  return AuthManager.getToken();
}

export default {
  getMembers: () => client.get(
    // 위에서 확인한 query param도 붙여넣어주고 
    `${BASE.google.people}/people:listDirectoryPeople?readMask=emailAddresses,names,photos&sources=DIRECTORY_SOURCE_TYPE_DOMAIN_PROFILE`,
    { // header 🧀  세팅
      headers : { 'Authorization' : `Bearer ${accessToken()}` }
    }
  ),
};

내 query param은 이메일 주소와 이름, 프로필 이미지를 받아오도록 설정되어있다.

이제 날려볼까?

테스트용 페이지를 새로 만들어서 버튼을 추가한 다음, 클릭 콜백에서 요 API 를 호출하자.

아무 vue 파일

<template>
  <div>
    <button
      @click="getMembers"
    >
      직원 목록 가져오기
    </button>
    {{ members }}
  </div>
</template>
<script>
import api from '@/api/google';

export default {
  name: 'GoogleTest',
  data: () => ({
    members: null,
  }),

  methods: {
    async getMembers() {
      const response = await api.getMembers();
      console.log(response);
      this.members = response.data.people; 
    },
  },
};
</script>

로그인 한 다음 실행해야 한다. 안그럼 권한 없음으로 실패 뜸~!

정상적으로 성공한 response.data를 찍어보면 쬐금 많이 복잡하다.

{
  "people": [
    {
      "resourceName": "people/아이디",
      "etag": "뭔지 모르지만 숨김",
      "names": [
        {
          "metadata": {
            "primary": true,
            "source": {
              "type": "PROFILE",
              "id": "아이디"
            }
          },
          "displayName": "이름1",
          "familyName": "김",
          "givenName": "김이름1",
          "displayNameLastFirst": "김이름1",
          "unstructuredName": "김이름1"
        }
      ],
      "photos": [
        {
          "metadata": {
            "primary": true,
            "source": {
              "type": "PROFILE",
              "id": "아이디"
            }
          },
          "url": "https://lh5.googleusercontent.com/어쩌고저쩌고/photo.jpg",
          "default": true
        }
      ],
      "emailAddresses": [
        {
          "metadata": {
            "primary": true,
            "verified": true,
            "source": {
              "type": "DOMAIN_PROFILE",
              "id": "아이디"
            }
          },
          "value": "sample@test.com"
        }
      ]
    },
    ...   
  ]
}

여기까지 된다면 People API 사용 성공!⚡️

너무 복잡한 People을 순화하기

마지막에 찍어본 people 구조가 너무 복잡하다.. 내 프로젝트 내에서 이 구조를 고대로 들고다니자니 getter 하기가 너무 피곤할 것 같아서 나만의 클래스를 쓰기로 한다.

frontend/src/entity/people.js생성

class People {
  constructor(_people) {
    if (_people.emailAddresses && _people.emailAddresses.length) {
      this.email = _people.emailAddresses[0].value;
    }

    if (_people.names && _people.names.length) {
      this.name = _people.names[0].value;
    } else if (this.email) {
      this.name = this.email.split('@')[0];
    }

    if (_people.photos && _people.photos.length) {
      this.avatar = _people.photos[0].url || '/static/images/default_avatar.png';
    }
  }

  getEmail() {
    return this.email;
  }

  getName() {
    return this.name;
  }

  getAvatar() {
    return this.avatar;
  }
}

export { People as default };

만들었으니 써먹자~!

아까 그 아무 파일.vue 를 다시 열어서 People로 컨버팅 한 다음 화면에 찍어보자.

<template>
  <div>
    <button
      @click="getMembers"
    >
      직원 목록 가져오기
    </button>
    {{ members }}
  </div>
</template>
<script>
import api from '@/api/google';
import People from '@/entity/people';

export default {
  name: 'GoogleTest',
  data: () => ({
    members: null,
  }),

  methods: {
    async getMembers() {
      const response = await api.getMembers();
      console.log(response);
      this.members = response.data.people.map(people => new People(people));
    },
  },
};
</script>

이럼 대충 간단해져서 관리가 편해진다 ☺️

이거 한다고 삽질한게 꼬박 하루라.. 정리 안하고는 못배기겠다. 오늘도 끄읏✨

더불어 내가 인증 기능을 만들긴 싫어서 Google OAuth를 쓰기로 한다.

오늘의 목표 📋

☑️ Vue3에 Google OAuth2.0 붙이기 ☑️ 로그인 후 사용자 정보 받아오기 ☑️ 로그아웃 구현하기

Google API에 내 사이트 등록 하기

사전에 Google API에 들어가서 신규 프로젝트 생성 후 토큰과 비밀키를 발급받아야 한다.

이 부분은 친절한 블로그에 잘 정리가 되어있으니 따라하자.

마지막에 발급 받은 클라이언트 ID와 비밀키는 .env 파일을 만들어서 저장한다.

Vue는 dotenv를 설치하지 않아도 자동으로 .env 파일을 읽어들인다. 단! 환경변수 이름이 무조건 VUE_APP_ 으로 시작해야 한다.

프로젝트 루트 경로에 .env파일을 만들고 클라이언트 키를 저장해두자.

VUE_APP_OAUTH_CLIENT=비밀이지롱

내 프론트엔드에 OAuth 붙이기

진짜 감사하게도 유명한 라이브러리가 있다

https://www.npmjs.com/package/vue-google-oauth2

Vue, google oauth 등으로 검색하면 99%는 위 모듈을 가져다 쓰는 샘플이다. 검색하면 샘플도 적잖이 있어서 맘편하게 가져다 쓰기로.

npm install vue-google-oauth2

패키지를 설치해준 다음 frontend/src/main.js 파일을 열어 사용 설정을 해준다.

import GAuth from 'vue-google-oauth2'

app.use(GAuth, {
  clientId: process.env.VUE_APP_OAUTH_CLIENT, // 아까 .env 파일에 저장해둔 그것임
  scope: 'profile email https://www.googleapis.com/auth/plus.login'
});

로그인 페이지 만들기

다음은 테스트용 로그인 페이지이다.

frontend/src/views/Login.vue파일을 열어서 테스트 코드를 써주었다.

<template>
  <div>
    로그인 테스트 화면입니다
    <button
      @click="handleLogin"
    >
      Google ID로 로그인
    </button>
  </div>
</template>
<script>
export default {
  name: 'Login',
  data: () => ({
  }),
  methods: {
    async handleLogin() {
      try {
        const GoogleUser = await this.$gAuth.signIn();
        console.log(GoogleUser);
      } catch (e) {
        console.error(e);
      }
    },
  },
};
</script>

그런 다음 화면을 띄워보면?

** ☠️ 에러가 난다.** 시키는 대로 했는데 왜...!

소스를 까봤더니 아니나 다를까 😊 Vue3로 업그레이드 한 것이 문제가 된 것이다. Vue3에서 전역모듈을 삽입하는 방법이 바뀐 덕분에 제대로 코드가 돌아가지 않고 있었다.

이제와서 다운그레이드 할 생각은 없고 vue-google-oauth2 코드를 참조해서 새로 모듈을 작성하기로 했다.

다시 시도 하기🔥

쓰지 못하는 모듈의 전체 소스가 길지 않아 카피해왔다.

npm uninstall vue-google-oauth2

기존 것은 지워주고

frontend/src/authentification.js 파일을 만들어서 기존 vue-google-oauth2의 코드를 복사해온 다음 Vue3에 맞게 변형한다.

var googleAuth = (function () {
  function installClient() {
    var apiUrl = 'https://apis.google.com/js/api.js'
    return new Promise((resolve) => {
      var script = document.createElement('script')
      script.src = apiUrl
      script.onreadystatechange = script.onload = function () {
        if (!script.readyState || /loaded|complete/.test(script.readyState)) {
          setTimeout(function () {
            resolve()
          }, 500)
        }
      }
      document.getElementsByTagName('head')[0].appendChild(script)
    })
  }

  function initClient(config) {
    return new Promise((resolve, reject) => {
      window.gapi.load('auth2', () => {
        window.gapi.auth2.init(config)
          .then(() => {
            resolve(window.gapi)
          }).catch((error) => {
            reject(error)
          })
      })
    })

  }

  function Auth() {
    if (!(this instanceof Auth))
      return new Auth()
    this.GoogleAuth = null /* window.gapi.auth2.getAuthInstance() */
    this.isAuthorized = false
    this.isInit = false
    this.prompt = null
    this.isLoaded = function () {
      /* eslint-disable */
      console.warn('isLoaded() will be deprecated. You can use "this.$gAuth.isInit"')
      return !!this.GoogleAuth
    };

    this.load = (config, prompt) => {
      installClient()
        .then(() => {
          return initClient(config)
        })
        .then((gapi) => {
          this.GoogleAuth = gapi.auth2.getAuthInstance()
          this.isInit = true
          this.prompt = prompt
          this.isAuthorized = this.GoogleAuth.isSignedIn.get()
        }).catch((error) => {
          console.error(error)
        })
    };

    this.signIn = (successCallback, errorCallback) => {
      return new Promise((resolve, reject) => {
        if (!this.GoogleAuth) {
          if (typeof errorCallback === 'function') errorCallback(false)
          reject(false)
          return
        }
        this.GoogleAuth.signIn()
          .then(googleUser => {
            if (typeof successCallback === 'function') successCallback(googleUser)
            this.isAuthorized = this.GoogleAuth.isSignedIn.get()
            resolve(googleUser)
          })
          .catch(error => {
            if (typeof errorCallback === 'function') errorCallback(error)
            reject(error)
          })
      })
    };

    this.getAuthCode = (successCallback, errorCallback) => {
      return new Promise((resolve, reject) => {
        if (!this.GoogleAuth) {
          if (typeof errorCallback === 'function') errorCallback(false)
          reject(false)
          return
        }
        this.GoogleAuth.grantOfflineAccess({ prompt: this.prompt })
          .then(function (resp) {
            if (typeof successCallback === 'function') successCallback(resp.code)
            resolve(resp.code)
          })
          .catch(function (error) {
            if (typeof errorCallback === 'function') errorCallback(error)
            reject(error)
          })
      })
    };

    this.signOut = (successCallback, errorCallback) => {
      return new Promise((resolve, reject) => {
        if (!this.GoogleAuth) {
          if (typeof errorCallback === 'function') errorCallback(false)
          reject(false)
          return
        }
        this.GoogleAuth.signOut()
          .then(() => {
            if (typeof successCallback === 'function') successCallback()
            this.isAuthorized = false
            resolve(true)
          })
          .catch(error => {
            if (typeof errorCallback === 'function') errorCallback(error)
            reject(error)
          })
      })
    };
  }

  return new Auth()
})();

export default googleAuth;

Vue에 설치하는 부분을 제거했을 뿐이다.

그 다음 frontend/src/main.js 를 재수정한다. 이전 코드는 전부 지워버려라. 💧

// import GAuth from 'vue-google-oauth2'; // 아래 모듈로 대체된다
import googleAuth from './authentification';

import App from './App.vue'

// Create Vue Instance
const app = createApp(App);

...

app.use(GAuth, {
  clientId: process.env.VUE_APP_OAUTH_CLIENT,
  scope: 'profile email https://www.googleapis.com/auth/plus.login'
});

// set auth config
const prompt = 'select_account'
const GoogleAuthConfig = Object.assign({ scope: 'profile email' }, {
  clientId: process.env.VUE_APP_OAUTH_CLIENT,
  scope: 'profile email https://www.googleapis.com/auth/plus.login',
});

// Install Vue plugin
app.config.globalProperties.$gAuth = googleAuth;
app.config.globalProperties.$gAuth.load(GoogleAuthConfig, prompt)

// ... 생략

이건 나중에 기존 프로젝트 포크따서 올려둬야겠다.

Vue3 공식 홈페이지를 참조해서 후에 this.$gAuth를 사용할 수 있게 전역 모듈을 등록한 것이다.

여기까지 해주었다면 로그인 페이지를 다시 열어보자.

에러없이 화면이 잘 떴다. 🌟

Google ID로 로그인 버튼을 누르면 새로운 팝업에 구글 로그인 화면이 뜨고 로그인 할 수 있다!

사용자 정보 받아오기

로그인을 했으면 했다고 떴으면 좋겠다. 화면을 조금 변경해보자.

frontend/src/views/Login.vue

<template>
    ...

    <button
      :disabled="signedIn"
      @click="handleLogin"
    >
      Google ID로 로그인
    </button>

    <div>
      <p> 로그인 여부: {{signedIn}}</p>
      <img :src="userImage" width="50" height="50"/>
      <p> 로그인 사용자 이름: {{ userName }} </p>
      <p> 로그인 사용자 이메일: {{ userEmail }} </p>
    </div>
    ...
</template>
<script>
export default {
  name: 'Login',
  data: () => ({
    signedIn: false,
    userName: null,
    userEmail: null,
    userImage: null,
  }),
  methods: {
    clear() {
      this.signedIn = null;
      this.userName = null;
      this.userImage = null;
      this.userEmail = null;
    },

    async handleLogin() {
      try {
        const GoogleUser = await this.$gAuth.signIn();
        if (!GoogleUser.isSignedIn()) throw new Error('로그인에 실패했습니다.');

        this.signedIn = GoogleUser.isSignedIn();
        this.userName = GoogleUser.getBasicProfile().getName();
        this.userImage = GoogleUser.getBasicProfile().getImageUrl();
        this.userEmail = GoogleUser.getBasicProfile().getEmail();
      } catch (e) {
        console.error(e);
      }
    },
  },
};
</script>

GoogleUser에서 받아올 수 있는 정보는 공식 홈페이지를 보고 따왔다.

다시 로그인 페이지로 돌아가서 로그인을 해보자.

짠! 구글에서 받아온 프로필 이미지, 이름, 이메일 주소 등이 정상적으로 출력된다.

초간단 로그아웃

frontend/src/views/Login.vue 로그아웃 버튼과 로그아웃 함수, 정보 클리어 함수를 구현한다.

...
    <button
      :disabled="!token"
      @click="handleLogout"
    >
      로그아웃
    </button>
...
methods: {
    clear() {
      this.signedIn = null;
      this.userName = null;
      this.userImage = null;
      this.userEmail = null;
    },

    ...

    async handleLogout() {
      try {
        await this.$gAuth.signOut();
        this.clear();
      } catch (e) {
        console.error(e);
      } finally {
        this.$router.push('/');
      }
    }

로그아웃 버튼을 눌러 동작을 확인한다. 안될리가 없지 😏 잘 된다.

다만 여기까지 했을 때의 문제점은 이 화면에 들어올 때 마다 ** 로그인을 다시 해야 한다** 는 것이다.

그러니 토큰 매니저를 만들어서 브라우저의 쿠키를 사용하자. .. 는 내일하자.

끝

☑️ Vue3 에 router 기능 추가 ☑️ 로그인 전/후 자동 라우팅 기능 추가 ☑️ 지원하지 않은 url 은 404 페이지 호출

제목이 길어서 귀찮다. 다 생략한다.

Vue3 에 vue-route 추가하기

멋모르고 npm install vue-router 추가했었는데 잘 안되더라.

npm i vue-router@next

vuex4 설치할때와 마찬가지로 @next 가 붙는다.

frontend/src/router.js 파일작성

// Vuex 때 처럼 create* 함수를 제공한다.
import { createWebHistory, createRouter } from 'vue-router';

const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import('@/views/Home'), // 동적 import
  },
  {
    path: '/login',
    name: 'Login',
    component: () => import('@/views/Login'),
  },
];

// 이렇게 해도 된다.
// const router = createRouter({
//   history: createWebHistory(),
//   routes,
// });
// export default router;

export const router = createRouter({
  history: createWebHistory(),
  routes,
});

/ 로 접근하면 Home 을 보여주고, /login 으로 접근하면 로그인 화면을 보여주겠다.

frontend/src/main.js 오픈!

import { createApp } from 'vue'

import { store } from './store';
import { router } from './router'; // 라우터 추가하고 

import App from './App.vue'

// Create Vue Instance
const app = createApp(App);

app.use(store);
app.use(router); // 사용 설정 하기

app.mount('#app');

다음으로 App.vue 에 라우터 뷰를 추가한다. 기존에 사용하던 컴포넌트들을 삭제하고 <router-view /> 를 추가한다.

<template>
  <div>
    <!-- HelloWorld msg="Welcome to Your Vue.js App"/-->
    <router-view />
  </div>
</template>

<script>
// import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    // HelloWorld,
  },
}
</script>

<style>
</style>

대신 / 경로에 매핑되는 views/Home.vue 파일을 만들어서 기존 코드를 옮겨주었다.

frontend/src/views/Home.vue 파일을 만들어서

<template>
  <div>
    <HelloWorld msg="Home"/>
    <!-- 메인 문구에 Home 표시를 해주자 -->
  </div>
</template>
<script>
import HelloWorld from '@/components/HelloWorld.vue';
export default {
  name: 'Home',
  components: {
    HelloWorld,
  },
};
</script>

다 옮겨주었다면 이번엔 로그인 파일을 만들어주자. 제대로 된 화면은 나중에 만들고.. 일단 라우팅만 할 수 있게 파일만 생성하는 느낌으로.

frontend/src/views/Login.vue

<template>
  <div>
    로그인
  </div>
</template>
<script>
export default {
  name: 'Login',
};
</script>

다 옮겨주었다면 npm run serve 해주자.

여전히 못생긴 홈페이지가 잘 보인다!

이번엔 라우팅. 주소창에 http://localhost:5050/login 을 쳐보자

화면이 잘 바뀌는 것을 확인할 수 있다 😙 끄읏 .

☑️ backend 코드에 es6 적용하기 ☑️ nodemon 으로 백엔드 코드 띄우기

이거 하고 객체 설계 해야해서 목표를 짧게 잡았다. express es6 로 검색하면 많은 가이드가 나오고 명료하다.

1. 필요한 패키지를 설치한다.

npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node

위 목록은 es6 를 사용하는 데에 필요한 모듈들이고 nodemon은 소스 코드 변경을 감지해서 핫로딩을 해주는 툴이다.

전역으로 깔았다.(로컬로 해도 무관)

npm install --save-dev nodemon

# 또는

npm install -g nodemon

2. 코드 내용을 ES6 스타일로 바꾼다.

제일 거슬렸던 require() 구문을 import로 바꾸어준다.

backend/app.js 를 바꾸자.

import express from 'express';
import path from 'path';
import cookieParser from 'cookie-parser';
import logger from 'morgan';

// router
import indexRouter from './routes/index';
import usersRouter from './routes/users';
import meetingroomsRouter from './routes/meetingrooms';

// db
import connection from './database';

const app = express();

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());

// app.use(express.static(path.join(__dirname, 'public')));

// samples
app.use('/', indexRouter);
app.use('/users', usersRouter);

// meetingroom
app.use('/meetingrooms', meetingroomsRouter);

export default app;

database.js 도 바꾸자.

import mysql from 'mysql';

const connection = mysql.createConnection({
  host     : 'localhost',
  user     : 'root',
  password : 'alfzmxlfkEp!',
  database : 'neti'
});

connection.connect();

export default connection;

routes/ 안에 있는 파일들은 meetingrooms.js 만 바꿔두겠다. backend/routes/meetingrooms.js

import express from 'express';
const router = express.Router();

import connection from '../database';

// ... 중간 생략

export default router;

마지막으로 backend/bin/www까지.

import app from '../app';
import debugLib from 'debug';
import http from 'http';

const debug = debugLib('backend:server'); // backend 는 백엔드 코드 최상위 경로 이름이다. 우리는 backend.

// ... 이하 생략

babel 설정은 보통 루트 디렉토리에 .babelrc 를 만들어서 처리하는데, 우리는 babel 설정파일이 이미 있다.

babel.config.js 요것! 바벨 공식 홈페이지에 따르면 파일명이 꼭 .babelrc 일 필요는 없기 때문에 여기에 프리셋 설정을 추가하면 된다.

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset',
    '@babel/preset-env' 
  ]
}

다음으로 npm run start 명령어 스크립트를 바꿔준다.

node 대신 node-babel 을 쓰면 되는데 여기에 nodemon 을 쓰도록 수정하는 것도 같이 적용하자.

package.json 파일 내 script.start 를 다음과 같이 변경한다.

  "scripts": {
    ...
    "start": "nodemon ./backend/bin/www --exec babel-node"
  },

다음은 npm run start !

?? import 구문을 못알아먹는다.

하라는 대로 했는데 왜 안돼?

왜 안되냐면 backend/bin/www 가 js 파일로 인식되지 않기 때문이다. www 파일에 .js 확장자를 추가해주고 시작 명령어를 바꿔보자.

mv backend/bin/www backend/bin/www.js

package.json 파일을 변경.

  "scripts": {
    ... 
    "start": "nodemon ./backend/bin/www.js --exec babel-node"
  },

다시 띄워보자.

굿!✨

이제 백엔드 코드도 ES6 스타일로 작성할 수 있다. 끄읏 ☺️

오늘의 할 일📋

☑️ mysql에 neti 데이터베이스 생성하기 ☑️ 회의실 테이블 생성하고 데이터 삽입하기 ☑️ express로 회의실 테이블 CRUD API 만들기

mysql에 neti 데이터베이스 생성하기

mysql 설치는 brew 로 하거나 공식 홈페이지에서 Community server 를 받아 설치하면 된다.

mysql에 들어가서

mysql -uroot -p

neti 라는 데이터베이스를 만들자.

create database neti;

회의실 테이블 생성하고 데이터 넣기

만든 neti로 들어가서

use neti;

예전 기억을 되살려 회의실 테이블을 만들었다. 이름, 설명, 온라인 URL, 사용 여부 정도가 사용 될거고 나머지는 그냥 나만의 기본 셋이다. 😎

CREATE TABLE IF NOT EXISTS `TBL_MEETING_ROOM`
(
  ID         BIGINT      NOT NULL AUTO_INCREMENT,
  NAME  VARCHAR(50) NOT NULL,
  DESCRIPTION  VARCHAR(50) NOT NULL,
  ONLINE_URL VARCHAR(125),
  USE_YN     Boolean,
  CREATED    DATETIME(6) NOT NULL,
  CREATOR    VARCHAR(20),
  UPDATED    DATETIME(6) NOT NULL,
  UPDATER    VARCHAR(20),
  PRIMARY KEY (ID)
)
DEFAULT CHARACTER SET utf8
COLLATE utf8_general_ci
ENGINE = INNODB;

회의실은 자주 수정되는 항목이 아니라서 테스트겸 데이터도 미리 넣어주자. 4개만 넣어주자.

INSERT INTO TBL_MEETING_ROOM (NAME, DESCRIPTION, ONLINE_URL, USE_YN, CREATED, CREATOR, UPDATED, UPDATER) VALUES ('1번', '1번 회의실', null, true, now(), 'admin', now(), 'admin');

INSERT INTO TBL_MEETING_ROOM (NAME, DESCRIPTION, ONLINE_URL, USE_YN, CREATED, CREATOR, UPDATED, UPDATER) VALUES ('2번', '2번 회의실', null, true, now(), 'admin', now(), 'admin');

INSERT INTO TBL_MEETING_ROOM (NAME, DESCRIPTION, ONLINE_URL, USE_YN, CREATED, CREATOR, UPDATED, UPDATER) VALUES ('3번', '3번 회의실', null, true, now(), 'admin', now(), 'admin');

INSERT INTO TBL_MEETING_ROOM (NAME, DESCRIPTION, ONLINE_URL, USE_YN, CREATED, CREATOR, UPDATED, UPDATER) VALUES ('4번', '4번 회의실', null, true, now(), 'admin', now(), 'admin');

잘 들어갔나 볼까?

SELECT * FROM TBL_MEETING_ROOM;

음~ 퍼펙 ✨

express 에 데이터베이스 연동하기

이제 본격적으로 express 에 이어붙여보자. 우선 npm의 mysql 패키지를 설치해주어야 한다.

npm install --save mysql

설치 뒤backend/database.js 파일 생성!

const mysql = require('mysql');

const connection = mysql.createConnection({
  host     : 'localhost',
  user     : '아이디',
  password : '비밀번호',
  database : 'neti'
});

connection.connect();

module.exports = connection;

백엔드 구조 짜는데 익숙하지 않아서 일단 다 때려넣었다.

이렇게 만든 mysql 커넥션을 app.js 에서 사용하게 해주어야겠지? backend/app.js 오픈

const express = require('express');
const path = require('path');
const cookieParser = require('cookie-parser');
const logger = require('morgan');

// router
const indexRouter = require('./routes/index');
const usersRouter = require('./routes/users');
const meetingroomsRouter = require('./routes/meetingrooms');

// db
// import connection from './database';
const connection = require('./database');

const app = express();

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
// ui 안쓰니까 생략한다
// app.use(express.static(path.join(__dirname, 'public')));

// samples
app.use('/', indexRouter);
app.use('/users', usersRouter);

// meetingroom
app.use('/meetingrooms', meetingroomsRouter);

module.exports = app;

이제 새로 추가하게 될 회의실 라우터(meetingroomsRouter)도 미리 추가해주었다. 기본으로 있던 샘플들도 일단 두자.

backend/routes/meetingrooms.js 파일을 새로 만들자. 연결 테스트 단계이므로 READ(=GET) 만 만들어보겠다.

const express = require('express');
const router = express.Router();

const connection = require('../database');
// import connection from '../database';

// connection.connect();

/* GET meetingrooms listing. */
router.get('/', function(req, res, next) {

  // 쿼리 날려서 가져오기
  connection.query('SELECT * from TBL_MEETING_ROOM', (error, rows, fields) => {
    if (error) {
      console.error(error);
      res.status(500).send('Internal Server Error');
    }

    console.log(': ', rows);
    res.send(rows);
  });
});

module.exports = router;

쓰다보니 es6 문법이 안먹히더라... 내일은 이걸 해야겠다 마음먹으면서 npm run start 명령어로 서버를 띄우자.

테스트용이니까 거창하게 포스트맨을 띄우지 않고 curl 로 테스트하자.

curl -v http://localhost:5051/meetingrooms | json_pp

굿! 잘 나온당🍻

이제 CRUD 테스트

사실 의미가 없긴 하지만 이왕 R을 만든김에 CUD도 같이 만들어두자.

Create (POST)

/* POST meetingrooms listing. */
router.post('/', function(req, res, next) {
  const params = req.body;
  const query = `INSERT INTO TBL_MEETING_ROOM (NAME, DESCRIPTION, ONLINE_URL, USE_YN, CREATED, CREATOR, UPDATED, UPDATER) VALUES
  ('${params.name}', '${params.description}', '${params.onlineUrl}', 1, now(), 'admin', now(), 'admin');`;

  console.log('[POST] meetingrooms query: ', query);

  connection.query(query, (error, result) => {
    if (error) {
      console.error(error);
      res.status(500).send('Internal Server Error');
    }

    console.log('[POST] meetingrooms result: ', result);

    if (Number.isNaN(result.insertId) || result.insertId < 0) {
      res.status(500).send('Item create failed.');
    }

    res.send({
      id: result.insertId,
    });
  });
});

Update (PUT)

/* PUT meetingrooms listing. */
router.put('/:id', function(req, res, next) {
  if (!req.params.id) {
    res.status(500).send('Id is not exist.');
    return;
  }

  const params = req.body;
  const query = `UPDATE TBL_MEETING_ROOM SET ${Object.keys(params).map(key => `${key} = '${params[key]}'`).join(',')}, updated = now() WHERE id = ${req.params.id};`;

  console.log('[PUT] meetingrooms query: ', query);

  connection.query(query, (error, result) => {
    if (error) {
      console.error(error);
      res.status(500).send('Internal Server Error');
    }

    console.log('[PUT] meetingrooms result: ', result);

    res.send({});
  });
});

Delete (DELETE)

/* DELETE meetingrooms listing. */
router.delete('/:id', function(req, res, next) {
  if (!req.params.id) {
    res.status(500).send('Id is not exist.');
    return;
  }

  const query = `DELETE FROM TBL_MEETING_ROOM WHERE id = ${req.params.id};`;
  console.log('[DELETE] meetingrooms query: ', query);

  connection.query(query, (error, result) => {
    if (error) {
      console.error(error);
      res.status(500).send('Internal Server Error');
    }

    console.log('[DELETE] meetingrooms result: ', result);

    res.send({});
  });
});

테스트는 포스트맨으로 대충 완료함.

이로써 백이랑 프론트의 기초 공사는 다 했다.

내일은 backend 소스도 es6를 사용할 수 있도록 babel을 추가하고, API 호출 시 사용되는 response /request 에 일정한 규칙을 부여해서 객체화 할 예정이다.😊

좀 더 우아한 소스를 쓸 수 있게 공부도 더 해야겠다 💪✨

마이그레이션 들어가기 전에

상대 경로 대신 @ 로 기본 경로를 설정해서 소스 코드를 간결하게 하는 방법이 있다.

vue.config.js 파일을 열어서 명시해주면 된다.

const path = require('path');

module.exports = {
  pages: {
    index: {
      // entry for the page
      entry: 'frontend/src/main.js',
      title: 'Index Page',
    },
  },

  configureWebpack: {
    resolve: {
      alias: {
        '@': path.join(__dirname, 'frontend/src/')
      },
    },
  },
}

이제부터는 아래쪽 resolve.alias.@ 가 frontend/src/ 경로와 매칭된다.

설정 변경 후 잘 되는지 테스트를 해보자. frontend/src/App.vue 파일을 열어 기본으로 import 하고 있던 Helloworld 경로를 수정한다.

import HelloWorld from './components/HelloWorld.vue';
import HelloWorld from '@/components/HelloWorld.vue';

npm run serve 해보면 에러 없이 잘 된당😋

그럼 이제

본격적으로 마이그레이션!

Vue3 설치하기

Vuex 4.0을 사용하려면 Vue 역시 2.x에서 3.x 로 버전업해주어야 한다. 이전 작업에서 frontend 소스를 건드린게 없으니 과감하게 지워버리고 vue 3를 새로 설치한다.

# 혹시 모르니 백업
mv frontend frontend_v2

# 새로 만들기
vue create frontend

이 때 Vue3를 선택하자.

이전 글을 참조하여 사전 설정을 마친 다음, 다시 페이지를 띄워본다.

⚠️ Vue를 3.x로 업그레이드 하면 vue dev-tool도 새로 설치해주어야한다.

크롬 확장프로그램 공식 버전을 쓰고 있었는데 Vue 탭이 아무리 해도 안나오는 것이다. 알아보니 Beta 버전을 받아서 사용해야 하는 거였음.

이게 공식이고 베타 버전 다운로드 링크는 여기.

베타라 그런지 기능이 별로 없다. 이 때 조금 마이그레이션을 후회했다😊 베타라니.. 이런 말 없었잖아요

Vuex 4.x 사용하기

Vue를 3.x로 업그레이드 했다면 자연스럽게 vuex 4.x를 사용해야 한다.

일단 설치하고

npm install vuex@next --save

store 생성

frontend/src/store/index.js 파일을 만들고 내용을 채운다.

import { createStore } from 'vuex';
import reservation from './modules/reservation';

// ⚠️ store 변수를 만들어서 export 한다는 점에 주의! 
export const store = createStore ({
    modules: { reservation },
});

vuex4 는 vuex 모듈에서 createStore를 제공한다. 말 그대로 스토어 만들기! reservation 모듈은 이제부터 만들거임. 원하는 이름으로 생성하자.

reservation 모듈 만들기

frontend/src/store/modules/reservation/index.js 파일을 만들고 아래처럼 state, getters, actions, mutaions를 정의한다.

import MUTATIONS from './mutation';

const state = {
  reservations: [],
};

const getters = {
  reservations: (_state) => {
    return _state.reservations;
  }
};

const actions = {
};

const mutations = {
  [MUTATIONS.SET_RESERVATIONS]: (_state, list) => {
      _state.reservations = list;
  }
};

export default {
  namespaced: true,
  state,
  getters,
  actions,
  mutations,
};

frontend/src/store/modules/reservation/mutation.js 도 만들어서 아래처럼 테스트용으로 추가했다.

const MUTATIONS = {
  SET_RESERVATIONS: 'setReservations',
};

export default MUTATIONS;

만든 store 를 main.js 에서 가져다 쓰자

frontend/src/main.js 를 다음처럼 수정해서 방금 만든 store를 사용하게 한다.

import { createApp } from 'vue'
import { store } from './store';

import App from './App.vue'

const app = createApp(App);

app.use(store);
app.mount('#app');

이제 컴포넌트(화면)에서 써보자.

기본으로 생성되어있던 HelloWorld.vue 컴포넌트에 테스트를 해보겠다.

frontend/src/components/HelloWorld.vue 오픈!

<script>
import { createNamespacedHelpers } from 'vuex';
import MUTATIONS from '@/frontend/src/store/modules/reservation/mutation';

const { mapGetters, mapMutations } = createNamespacedHelpers('reservation');

export default {
  name: 'HelloWorld',
  props: {
    msg: String,
  },
  computed: {
    ...mapGetters({
      list: 'reservations',
    }),
  },

  methods: {
    ...mapMutations({
      setList: MUTATIONS.SET_RESERVATIONS,
    }),
  },
}
</script>

아까 만든 reservation 모듈을 이어붙였다.

이번엔 변경도 되는지 확인해볼것이다. template 영역에 list를 찍어주고, 버튼 하나를 만들어서 수정해보자.

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <div>
       <!-- 찍어보기용 -->
       {{ list }}

       <!-- 바꿔보기용 -->
       <input type=button @click="handleTest" />
    </div>
    ...

handleTest 함수도 추가해주었다.

  methods: {
    ...mapMutations({
      setList: 'setReservations',
    }),
    handleTest() {
      // mutation 함수를 호출해서 list 배열에 아무 데이터나 넣어주었다.
      this.setList(['hi', 'i\'m', 'sena',]);
    },
  },

확인의 시간!

자 이제 npm run serve 를 때려서 확인해보자! 👻

zㅋㅋㅋ 정말 못생겼네... reservation store 의 state 초기 값인 [] 빈 배열이 잘 찍히고 있다.

혹시나 싶으니 vue dev-tool 로도 찍어본다.

굿굿!

이젠 버튼을 눌러서 handleTest() 함수를 호출해보자.

음~ 잘 바뀌었다.

오늘은 이서 끝!

우선 작은 규모의 프로젝트이니만큼 하나의 repo 에 client와 server 소스를 함께 두어 관리 포인트를 줄이기로 했다.

뭐든 처음 시작하는게 어렵지...어떻게 시작할까?

1. github 에서 boilerplate 찾기 👉 원하는 조합으로 원하는 구성을 가진 템플릿이 없었다.

2. vue + express 로 검색해서 튜토리얼 따라하기 👉 공통적으로 사용하는 이것. 많이 찾아봤지만 한글로 된 튜토리얼은 대부분 이 내용이었다. 그런데 보다 보니 서버를 띄울 때 webpack의 dev server로 띄우는 것 같았다. 음, 내가 원하는 구조는 아니라서 패스.

3. 더 찾기 귀찮아서 걍 때려 만들기로.

오늘의 목표 📝

☑️ git repo 만들기 ☑️ neti 디렉토리 안에 frontend (vue.js) 구성하기 ☑️ neti 디렉토리 안에 backend (express) 구성하기 ☑️ npm run serve 명령어로 frontend 띄우기 ☑️ npm run start 명령어로 backend 띄우기 ☑️ git repo 연동하기

Git Repository 만들기

뉴 버튼 누르고

하나 팠다.

.gitignore template 를 선택할 때 대체 뭘 선택해야 하는지 헷갈렸는데... 결론은 아무거나 해도 상관 없다. 처음 생성 했을 때 ".gitignore 파일 안에 기본값을 뭘로 넣어줄까?" 하는 것이므로, Glob 패턴을 사용하는 것은 마찬가지이다.

frontend (vue.js) 구성하기

우선 vue-cli 명령어로 neti 폴더를 만듦과 동시에 프론트엔드도 구성하자.

vue create neti

프리셋은 그냥 많이 써본걸로 선택했다. vue2랑 eslint.

neti 경로가 생겼다.

여기서 끝이 아니다. 코드를 깔끔하게 관리하려면 frontend / backend 디렉토리를 나누어야지!

frontend 폴더를 만들고 클라이언트 코드를 옮겨주자.

mkdir frontend

mv src frontend/.
mv public frontend/.

나머지를 neti/ 하위에 남겨두는 이유는 그냥.. 관리 편할것 같아서.

옮겨주고 나면 이런 형상이 된다.

📌 포트 번호 바꾸기 내 경우 이미 8080 포트를 사용 중인 프로젝트가 있어서 5050, 5051 포트를 사용하도록 변경해줄 필요가 있었다.

package.json 파일을 열어서 serve 명령어에 --port 옵션을 추가해주자.

"serve": "vue-cli-service serve --port 5050",

여기까지 한 다음 npm run serve 명령어로 웹 페이지를 띄우면!

에러가 난다. 💣

말하자면 소스코드들이 단체로 frontend 안으로 이사를 가버렸는데 vue-cli 한테 알려주지 않은 꼴이라 진입점을 찾지 못한 것이다.

이 문제를 해결하려면 vue.config.js 파일로 소스코드가 어디있는지 vue-cli 에게 알려주어야 한다.

vi vue.config.js 파일을 만들고 다음과 같이 파일 내용을 작성하자. 공식 홈페이지를 참조했다.

module.exports = {
  pages: {
    index: {
      // entry for the page
      entry: 'frontend/src/main.js',
      title: 'Index Page',
    },
  }
}

그런 다음 npm run serve 명령어를 다시 사용하면,

굿. 👍✨

backend 설정하기

프론트 개발자는 익스프레스가 없어... express를 전역으로 설치하자.

sudo npm install express-generator -g

express 로 서버 만들기를 검색하면 다들 express (폴더명) --view=pub 이렇게 쓰던데 난 view를 안쓸거라서 생략했다. (우린 vue로 만들거니까)

express (폴더명) --no-view

그러면 아래처럼 backend 경로가 생기고 안에 새로운 프로젝트가 구성된다.

여기에도 package.json 이 생겼는데 난 package.json 을 한군데서만 관리하고 싶단 말이야.. neti/backend/package.json 파일을 열어서 필요한 내용만 복사하여 neti/package.json 에 붙여넣은 다음 neti/backend/package.json 을 지워버리자.

scripts의 start, dependencies 의 debug, express, morgan 이것만 옮겨주면 된다. 옮겨주고 난 뒤의 package.json 최종 형상👇

{
  "name": "neti",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "start": "node ./backend/bin/www"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^2.6.11",
    "cookie-parser": "~1.4.4",
    "debug": "~2.6.9",
    "express": "~4.16.1",
    "morgan": "~1.9.1"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "vue-template-compiler": "^2.6.11"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

⚠️ script의 start를 복사할 때 경로를 node ./bin/www 에서 node ./backend/bin/www 로 변경해야 한다는 점을 주의하자.

다 옮긴 다음에는 포트 번호를 바꿔주자. ./backend/bin/www 파일을 열어 15 line 의 포트 정보를 변경해주면 된다.

vi ./backend/bin/www

5050은 frontend, 5051은 backend 로 정했다.

 15 var port = normalizePort(process.env.PORT || '5051');
 16 app.set('port', port);

설정이 끝난 것 같으니 서버도 띄워보자.

npm run start

이렇게 에러 없이 뜨면 잘 뜬 것이다. 아까 바꾼 포트로 express 페이지도 접근해보면.

잘 나오네. 굿✨

Git repo 연동하기👻

오늘은 이까지 하고 작업한 것들을 처음에 만들어둔 git repo에 올려보자.

1. remote 연결하기

vue create 명령어가 자동으로 .git 과 .gitignore 파일을 생성해둔 것 같았다. 혹시나 연결된 정보가 있는지 확인해본다.

git remote -v

위 명령어를 쳐서 아무것도 나오지 않으면 연결 정보가 아직 없는 것이다.

git init

한번 해주고

# git remote add (remote 이름) (repo 주소)
git remote add origin https://github.com/cindy-choi/neti.git

git remote 명령어로 원격 저장소를 연결해준다. 보통 이름은 origin을 씀.

2. 수정사항 커밋하기

git add --all

처음이니까 놓치는 것이 없도록 걍 전체 저장을 한다. 이후 작업 사항을 저장할 때에는 --all(-A) 옵션은 지양하자. 나도 모르는 파일이 추가 되어버리면 지우기 귀찮으니까.

git commit -m 'Initial setting.'

메세지와 함께 커밋을 하고

git push origin master

git push --set-upstream origin dev

master 또는 dev 브랜치를 생성하여 푸시한다.

오늘은 여기까지! 내일은 테스트용 REST API 를 만들고 웹에서 이를 호출해볼것이다.😊

진짜진짜 끝!

엔터프라이즈라고 부르기엔 구조가 좀 협소하지 않나?

누군가 그렇게 물었고 반년이 지났다. 너무너무 신경쓰인다. >협소한 구조< 란 대체 무엇이며 우아한 프로젝트의 구조란 무엇인가?

vue 공식 프로젝트 구조부터 뜯어보자.

vue cli 로 자동 생성한 프로젝트의 구조를 보면 vue 가 어떤 방식의 구조를 선호하는지 알 수 있지 않을까?

vue create helloworld

생성해보았다.

놀라울 정도로 아무 것도 없었다.

조금 더 공식 사이트를 둘러보았고 VUEX 에서 살짝 언급된 프로젝트 구조는 다음과 같았다.

역시 별 건 없었다.

Boilerplate를 분해해보자.

vue 공식이 주지 않는 '우아한 구조'에 대한 단서는 Github 에서 찾기로 한다. vue, boilerplate 키워드로 검색해서 Star 수가 2k 이상인 repo를 기준으로 찾아보았다.

vue-enterprise-boilerplate

⭐️ Star 6.6k 🤖 Link github 가기

그동안 내가 참여했던 프로젝트 A와 비교해보니 몇 가지를 제외하고는 대부분 일치했다.

• views/ 디렉토리가 src/의 하위가 아닌 router/의 하위에 있음 → views 는 router에 밀접히 연관되어 해당하는 화면 소스코드를 내포한다는 점을 좀 더 명확히 할 수 있다.

• layout/ 디렉토리가 별도로 존재 → 레이아웃의 중요도가 높아지는 효과!

소스코드 파일에 vue의 컴포넌트 작명 규칙이 강하게 적용되어있는 것도 참고하면 좋을 것 같다.

vue-express-mongo-boilerplate

⭐️ Star 2.7k 🤖 Link github 가기

Server side 소스도 포함하고 있어서 Client 쪽만 열어보았다.

vue의 기본 구조와는 꽤 많이 다른 것 처럼 보이지만 자세히 보면 결국 비슷한 양상을 띈다.

최상단의 app/ 디렉토리가 client의 메인 진입점이고, 그 하위에는 core/가 있는데 이게 우리가 보통 사용하는 src/ 디렉토리와 동일하다.

views/ 디렉토리가 별도로 없고 화면 파일(DefaultAdminPage)이 메인 경로에 덜렁 놓여있는 것은 마음에 안들지만 이를 개선한다면 심플하면서도 명확한 구조 분리라고 생각된다.

vuesion

⭐️ Star 2.2k 🤖 Link github 가기

Storybook과 Mocha가 기본적으로 적용 된, (뒤에 나오겠지만) 큰 대규모 프로젝트에 걸맞는 구조이다. 유행하는 기술을 잘 집약해놓은 느낌? TS를 쓰는 것 중에는 가장 Star 수가 높았다.

개인적으로는 찾아본 구조 중에 가장 복잡했다. (app안의 app안의 App이라니!)

App.vue 쪽이 진입점이고 example, home 디렉토리가 하나의 모듈이다.

각 모듈마다 vuex 소스가 분리되어 있고, 한 페이지는 무조건 동일한 이름의 디렉토리 하위에 파일로서 생성된다. Mocha의 spec, Storybook의 stories 파일과 함께 놓기 위함인듯하다.

Boilerplate 종합 결과

가장 Vue의 오리지널 규칙을 잘 따른 쪽은 vue-enterprise-boilerplate 이고 최신 기술이 잘 적용 된, 보다 더 큰 규모에 어울리는 쪽은 vuesion 이었다.

개인적으로 새로운 프로젝트를 하게 되면 vuesion을 기반으로 진행해보고 싶다.

규칙 찾아보기

vue 공식이 제안한 프로젝트 구조와 유명한 오픈소스들의 구조를 뜯어보았다. 생각보다 다양한 스타일이 있었는데 잘 보면 공통된 규칙들이 있다. 조금 더 리서치를 해보았다.

반복적으로 사용되는 규칙들

규칙1. 컴포넌트의 이름은 Multi-word를 사용한다.

단일 단어(Card, Modal, Button)로 이름지으면 이름이 중복될 가능성이 있으며 명료하지 않다.

규칙2. 부모 컴포넌트와 강하게 엮여있는 컴포넌트는 부모 컴포넌트의 이름을 prefix로 사용한다.

일반적으로 강하게 엮인 부모-자식 컴포넌트는 아래처럼 nested 형태를 취하여 처리하지 않는가?

이 방식은 Vue 공식 사이트에서 권장하지 않는다. 코드 편집기의 성능(또는 기능)에 영향을 미치기 때문이란다.

• 비슷한 이름을 가진 파일이 너무 많으면 단축키로 파일간의 이동이 어려워진다.
• 하위 경로로 엮인 구조가 늘어나면 IDE의 사이드바에서 컴포넌트들을 브라우징하는데 더 많은 시간이 걸릴 수 있다.

그러므로 아래와 같이 부모 컴포넌트의 이름을 prefix로 가진 네이밍을 권장한다.

규칙3. 전체 페이지에서 유일하게 사용하는 컴포넌트에는 The 를 붙인다.

Header, Footer 의 경우는 보통 모든 페이지를 통틀어 단 하나의 인스턴스만 생성된다. 이 때에는 The Prefix를 붙여 명시해주는 것이 좋다.

이렇게 사용되는 컴포넌트는 보통 props를 사용하지 않는 것이 좋다.

Bonus 💰

프로젝트 규모 별 소스 구조 추천

리서치를 하다보니 vue 공식 문서에는 언급되지 않은 노하우들이 많이 보였는데 그 중 앞단에서 찾아보았던 boilerplate와 연관된 내용이 있어 가져와보았다.

여기 당신의 작고 소중한 프로젝트가 있었다.

기능이 추가되고 유지보수 되면서 프로젝트 규모는 점차 커진다. 공통 모듈이라 생각해서 components에 빼놓은 컴포넌트들이 쌓이기 시작한다. 이를 정리하지 않으면 끝내는 다음과 같은 상태가 된다.

** 사방에서 쓰는 (또는 쓰이는, 아니면 어디서 쓰는지 모르는!) 모든 컴포넌트들이 components/ 디렉토리에 널려있음. **

예시에는 파일 개수가 얼마 되지 않지만 components/ 경로 안에 한.. 100개의 컴포넌트가 널려있다고 생각해보자. 상상만으로도 끔찍하다. 그걸 다 언제 파악하고 재사용하며 유지보수를 할 것인지!

규모가 작은 프로젝트라면 지금 상태를 유지해도 괜찮다. 단, 파일명 네이밍 규칙을 잘 지켰을 경우에만. (부모-자식간의 prefix 규칙)

조금 커진 프로젝트가 있다.

한 눈에 용도를 알아볼 수 없을 정도의 규모까지 도달한 프로젝트라면 다음과 같이 개선해볼 수 있겠다.

하위 컴포넌트를 엮어 디렉토리 구조를 만들었다. 이제 용도 별로 components를 한 눈에 알아볼 수 있게 되었다.

위에서 언급했던 규칙2에 어긋나는 개선 방향이기 때문에 components를 한 눈에 알아보기 힘들 정도로 규모가 불어난 프로젝트에 적용하도록 하자.

여기서 더 커지면요?

위에서는 AvatarCard, Notification 을 예로 들었지만 상위 모듈이 컴포넌트 단위가 아닌 기능 단위로 커진 상황을 가정해보자.

내가 실제로 진행한 프로젝트는 Enterprise 급으로 분리된 화면 하나가 App 하나의 규모였었다. 이렇게 엄청나게 커다란 규모의 프로젝트에서는 어떤 구조를 차용해야 할까?

바로 모듈 별로 경로를 쪼갠 다음, 하나의 모듈이 작은 프로젝트 단위라고 생각하고 하위 경로를 구성하는 것이다. 위 예시를 보면 browser, dashboard, tableManager 가 하나의 모듈이자 작은 프로젝트 단위가 된다.

여기서 조금 더 모듈에게 독립성을 부여해보자. components뿐 아니라 모듈 내에서 반복되는 유틸리티나 helper, 서비스 코드를 분리하는 것이다.

잠깐. 어디서 많이 본 구조가 아닌가?😗

위에서 살펴본 Boilerplates 중 vuesion 을 떠올려보자. 각 모듈마다 vuex를 가진 구조가 복잡하게 느껴졌지만, 여기까지 와서 보니 꽤 그럴싸한 구조였던 것 같다.

vuesion 을 떠올려보며 아예 api, router, store(vuex) 까지도 별도로 분리해준다면 다음과 같이 완성할 수 있을 것이다.

browser/ 모듈이 아주 작은 단위의 프로젝트와 똑같은 구성을 갖추게 되었다. 이렇게 분리가 된다면 대규모 프로젝트에서 전체 모듈이 공용으로 사용하곤 하는 components/ 와 같은 경로를 더욱 깔끔하게 관리할 수 있을 것이다.

끝!😤