2 posts tagged with "Frontend"

배경​

사내에서 react를 활용한 어드민 페이지 개발이 다수의 서비스에 도입되면서 다수의 어드민 페이지 개발을 통일성 있게 개발해 보자는 니즈가 있었고 이를 위해 공용 모듈을 통해 통일성을 찾아보자는 방법을 연구하기 시작합니다.

프로세스 설계​

공통 UI Library 프로세스 설계

1. UI Library Developer는 reactjs, storybook, tailwindcss를 이용해 공통으로 사용할 만한 UI 컴포넌트를 제작해 storybook을 통해 이를 테스트해 볼 수 있도록 하는 웹을 Netlify를 통해 배포합니다.
2. UI Designer와 함께 웹을 보면서 Storybook을 통해 수치를 조정하거나 컴포넌트 변경에 대해 논의 및 수정합니다.
3. 협의된 컴포넌트를 Npm을 통해 라이브러리로 배포합니다.
4. Frontend Developer는 Storybook을 통해 컴포넌트의 UI셋팅값에 맞게 UI Designer와 함께 웹 서비스를 개발합니다.

• 장점

1. 매 프로젝트별 동일하게 사용하는 컴포넌트 개발을 프로젝트 별로 분리 개발하지 않고 설치해서 바로 사용 가능합니다.
2. Storybook을 웹에 배포해 UI Designer와 함께 직접 컴포넌트 셋팅값을 조정해 개발적으로도 가능 범주를 조정해 줄 수 있고 UI Designer도 실제 눈앞에서 조정해 볼 수 있어 효율적입니다.
3. UI 라이브러리를 지속적으로 업그레이드 해 기존 프로젝트 별 일회성 컴포넌트가 아닌 자산화가 가능합니다.

• 단점

1. 공용으로 사용하는 모듈의 사용을 강력히 권고하면 프로젝트 별 자유도를 떨어트립니다.
2. UI 라이브러리의 지속적 업데이트 관리가 필요하며 사용하는 프로젝트에서의 라이브러리 버전 특성을 고려해야 합니다.

• 주요 고려 사항

1. 공용으로 사용하는 모듈의 사용은 편의를 제공하기 위함이므로 사용을 권고하기 보다 원하면 사용하도록 하는 것이 좋을 것으로 보입니다.
2. 공용으로 반드시 사용할 수 있을 만한 컴포넌트 단위를 신중히 선정해야 할 것으로 보입니다.

개발 과정​

React Typescript 빌드 설정​

1. React 프로젝트 생성: npm init -y

2. 필수 라이브러리 설치: npm install --save-dev react react-dom @types/node @types/react @types/react-dom typescript

3. package.json 설정

   • peerDependencies란 실제로 패키지에서 require, import 하지는 않지만 특정 라이브러리 툴에 호환성을 필요로 할 경우 명시하는 dependencies인데 아래와 같이 react 버전과 react-dom 버전을 명시함으로써 해당 버전에서 사용할 수 있는 라이브러리임을 명시해 오류를 줄이기 위함입니다.
   • files는 npm 라이브러리 배포 시 폴더를 설정하기 위함입니다.
   • scripts는 tsc를 통해 빌드하는 타입스크립트 빌드 build:esm 과 바닐라JS사용 유저를 위해 build:cjs 를 둘 다 빌드하게 합니다.

   {
     "peerDependencies": {
       "react": "^18.1.0",
       "react-dom": "^18.1.0"
     },
     "files": ["dist"],
     "scripts": {
       "build": "rm -rf /dist && npm run build:esm && npm run build:cjs",
       "build:esm": "tsc",
       "build:cjs": "tsc --module CommonJS --outDir dist/cjs"
     }
   }
   

4. Typescript 설정

   • 타입스크립트 초기 설정: tsc --init
   • tsconfig.json 설정

   {
     "compilerOptions": {
       "allowSyntheticDefaultImports": true,
       "declaration": true,
       "esModuleInterop": true,
       "jsx": "react",
       "lib": ["ES5", "ES2015", "ES2016", "DOM", "ESNext"],
       "types": ["node"],
       "module": "es2015",
       "moduleResolution": "node",
       "noImplicitAny": false,
       "noUnusedLocals": true,
       "outDir": "dist/esm",
       "sourceMap": true,
       "strict": true,
       "target": "ES6"
     },
     "include": ["src/**/*.ts", "src/**/*.tsx"]
   }
   

Storybook 설정​

1. Storybook 초기 설정: npx sb init

2. 실행 확인: npm run storybook

   

Npm 배포​

1. 라이브러리로 배포 후 사용하기 위해서는 path 설정을 해줘야 하는데 이를 위해 컴포넌트 별로 export * from “./Button” 이런 식의 경로 설정을 폴더별 index.ts에 적용합니다.
2. 빌드: npm run build
3. 배포: npm publish (npm login이 안되어 있다면 이를 선행해야 합니다.)

Netlify Storybook 배포​

1. 위의 storybook 초기 설정을 하고 나면 자동으로 package.json에 "build-storybook": "build-storybook” script가 생성되는데 이를 이용해 static한 파일들을 storybook-static폴더에 생성할 수 있습니다.(storybook 배포용 폴더)
2. Netlify에 접속해 해당 깃허브를 연결하고 배포 시 Build Command를 npm run build-storybook 으로 해 storybook-static 폴더를 생성하고 이를 Output Directory로 설정해 깃허브에 푸시하면 storybook 웹싸이트가 자동으로 publish 되도록 자동 배포가 쉽게 설정됩니다.

TailwindCss 적용​

1. 필요 라이브러리 설치 및 초기 설정합니다.
   • 아래를 실행하면 자동으로 tailwind.config.js 가 생성되는데 이 설정파일을 통해 tailwind에서 설정하고 있는 색, 크기, 적용범위, 플러그인 등을 모두 설정할 수 있습니다.

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

1. tailwind를 사용하기 위한 css 파일을 생성합니다.

@tailwind base;
@tailwind components;
@tailwind utilities;

1. 컴포넌트 라이브러리와 storybook 확인 시 모두 tailwind를 적용하기 위해 src/index.ts 와 .storybook/preview.js 에 tailwind.css 를 import 하면 모두 적용됩니다.
2. 빌드 셋팅

tailwind 공식 홈을 참고해 tailwindcss 파일을 빌드 파일에 추가합니다.

{
  "build": "rm -rf /dist && npm run build:esm && npm run build:cjs && npm run build:tailwind",
  "build:esm": "tsc",
  "build:cjs": "tsc --module CommonJS --outDir dist/cjs",
  "build:tailwind": "tailwindcss -i ./src/styles/tailwind.css -o ./dist/cjs/styles/tailwind.css && tailwindcss -i ./src/styles/tailwind.css -o ./dist/esm/styles/tailwind.css"
}

결론​

tailwindcss가 적용된 형태로 storybook 웹 싸이트가 구현된 모습입니다.

npm 패키지 배포된 모습입니다.

배포한 라이브러리 설치한 코드입니다.

설치한 라이브러리의 버튼을 가져다 사용한 코드입니다.

UI Library를 직접 설치해 웹에서 사용한 모습입니다.

***참고사항

1. 라이브러리를 설치는 정상적으로 되고 실행도 정상적으로 되지만 sourcemap 오류가 발생하는데 이를 해결하기 위해 .env 파일에 GENERATE_SOURCEMAP=false 를 작성해 저장하면 실행 시 오류 메시지가 보이지 않습니다.
2. tailwindcss 설정 순서에 따라 적용이 잘 안 될 수 있어 순서대로 설정해야 합니다.
3. 소스: https://github.com/hanhyeonkyu/react-ui-lib-ts-test

참고 문서​

UI라이브러리 제작: https://javascript.plainenglish.io/build-a-react-component-library-using-typescript-storybook-86d3562aa53a

Storybook - Tailwind Netlify: https://theodorusclarence.com/blog/nextjs-storybook-tailwind

TailwindCss 공홈: https://tailwindcss.com/docs/guides/create-react-app

배경​

그 동안 react, nextjs, hugo ... 등을 활용해 프론트엔드 개발을 진행하고 간단히 주변에 공유할 때 Netlify 를 자주 활용해 왔습니다. 하지만 요새 공부 중인 Flutter 는 웹도 앱도 모두 한번에 개발할 수 있는 신무기지만 Netlify 를 활용해 배포해 본 적이 없어 간단한 작업이지만 블로그에 남겨봅니다.

소개​

Netlify는 웹 애플리케이션 및 정적 웹사이트를 위한 호스팅 및 서버리스 백엔드 서비스를 제공하는데 저의 경우 간단하게 프론트엔드를 배포할 때만 사용하고 있습니다.

Flutter는 모바일 앱과 웹 앱, 데스크톱 앱을 단일 코드 베이스로 개발할 수 있도록 Google이 개발한 프레임워크인데 Google 답게 Docs가 아주 잘 되어 있고 공부할 수 있도록 많은 지원을 해주고 있고 Flutter 자체가 가진 기능들이 많기 때문에 react-native 개발 때 느꼈던 dependency 지옥으로부터 조금이나마 해방된 느낌입니다.

팀원들에게 Flutter를 이용해 웹, 앱 모두 간단하게 개발된다는 것을 보여주기 위해 Netlify에 로그인 해 배포하려 했는데 이것을 몰라 찾아 봤고 금방 해답을 찾을 수 있었습니다.

수동 배포​

우선 기본 전제는 Flutter 설치를 완전히 했다는 전제로 시작합니다.(공식문서 참고)

1. 우선 Flutter 프로젝트를 생성합니다. flutter create [project_name]

2. 프로젝트 폴더로 들어가서 flutter build web을 실행하면 build/web 폴더가 생성되고 배포용 js 빌드 파일들이 생성됩니다.(이것이 프론트엔드 배포용 소스)

3. 아래와 같이 Netlify에 접속에 Deploy manually 를 클릭하면

   

4. 2번에서 생성한 배포용 폴더를 아래와 같이 Drag & Drop 하면 배포 성공!

   

아주 간단해서 정리할 것도 많지 않았지만 그래도 정리해 두면 다음번에 생각을 덜해도 되니까 적어둬야지 😎

자동 배포​

위에서 봤던 수동 배포로 해도 과정이 간단하고 실수로 자동으로 배포되는 것을 원치 않기 때문에 수동 배포를 좀 더 원하지만 자동 배포에 대해서도 알게 되어 이 또한 정리해 봅니다.

1. 수동 배포의 1번을 완료하고 아래와 같이 Netlify에 접속 후 import an existing project 를 클릭합니다.

2. 본인의 git repository를 선택하고 해당 레파지토리를 netlify에 공유할 수 있도록 설정합니다.

3. 이제 Deploy & Build 셋팅을 설정하는데, 명령과 셋팅은 아래와 같습니다.

• Build command

아래와 같이 만약 flutter 폴더가 있으면 git pull을 통해 최신화 하고 없다면 git clone 을 통해 flutter를 가져오고 flutter 폴더에 있는 실행파일을 활용해 프로젝트에 웹을 적용하고 웹을 빌드해 배포합니다.

if cd flutter; then git pull && cd ..; else git clone https://github.com/flutter/flutter.git; fi && flutter/bin/flutter config --enable-web && flutter/bin/flutter build web --release

• Publish directory

배포 폴더를 build/web으로 하여 Build command에서 생성한 배포 폴더로 설정합니다.

build/web

이렇게 설정하면 git에 푸시할 때마다 build command가 실행되고 설정된 publish directory설정에 따라 배포하게 되면서 자동 배포가 완성됩니다.

아직 공식 홈페이지에서 Deploy 셋팅 방법에 대해 Flutter는 다루고 있지 않지만 위와 같은 방식으로 처리가 가능합니다.

도움이 되는 포스팅이기를 빕니다. 🧑🏻‍💻