자바스크립트 프로젝트

프로젝트

아는 지인과 사이드 프로젝트를 진행하고 있다. 이번에는 프론트엔드를 전담하게 되었다.

프로젝트 도중에 생겼던 문제들과 이를 해결하는 방법에 대해 블로깅을 진행하고자 한다.

대체로 CSS와 기능 구현에 관련된 내용들이다.

문제

TS, React Hook, Hot Loading, Story book

이번 프로젝트에서는 이전에 한번도 사용해보지 않은 타입스크립트, 리액트 훅을 이용하여 개발을 진행하기로 결정했다. 하지만 역시 첫 경험이 삽질인것은 변하지 않았다.

여러 블로그를 참고하여 TS, React, Storybook을 설치할 수 있었다.

하지만 스토리북 실행해 보니 핫 리로드가 되지 않는다! 웹팩도 핫 리로드가 되지 않는 상황이였다.

알고보니 필요할때 마다 tsc 명령어를 입력해서 tsx 파일을 js로 변환해야 핫 리로드가 되는 상황이 벌어진 것이였다.

하지만 이때에는 하나의 터미널에서 하나의 스크립트를 실행할수 있다고 알고 있어서 구글신에게 검색 해 보았다. NODEMON을 사용하는 방법도 있디만 뭔가 스크립트선에서 전부 완료하고 싶어졌다.

그러다보니 아래와 같은 해괴망측한 스크립트가 만들어 졌다.

"start": "webpack-dev-server",
"build": "webpack",
...
"storybook": "tsc --watch & sass --watch src/sass:src/css & start-storybook -p 6006 -s ./public & npm start"

이 스크립트는

1. tsx 파일에 변경이 있을때마다 js파일로 컴파일
2. src/sass 폴더에 변화가 있을때마다 css파일로 컴파일
3. 스토리북 실행
4. 라이브 서버 실행

위 네가지 기능이 병렬적으로 실행된다. 따라서 scss 파일을 수정하던, tsx 파일을 수정하던 즉시 라이브 서버 및 스토리북에서 확인이 가능하다

2. 반응형 웹 페이지

뷰로 작업하던 프로젝트 이후 간만에 반응형 웹 페이지를 구현하고자 생각했다. 물론 뷰포트를 이용하는 방법이 있다는걸 이미 알고 있었다.

하지만 필요할때마다 뷰포트 관련 코드를 작성하는것은 여러모로 효율적이지 못하다는 생각이 들었다. 따라서 뷰포트를 제외한 다른 방법들중 적절한것이 없나 생각을 해보니 예전에 경험해본 SASS가 생각이 났다. (이전 프로젝트에서는 남이 설정해둔것만 고대로 가져다 사용했기에 직접 설정하기로 결정!)

간단하게 SASS를 설치하고 _mixin.scss 파일에 브레이크 포인트등을 설정했다. 이제 이 파일을 각 scss 파일에서 임포트한다면 @include tablet, mobile등으로 설정된 브레이크포인트에 따라 다른 css를 적용할수 있게되었다.

스토리북 스토리

개발을 하다보면 그때그때 프롭스를 변경해 보며 다이나믹 렌더링이 어떻게 되는지 확인하고 싶을때가 있었다. 전 회사 동료분이 이럴때 사용하는것이 스토리북이라고 하여 스토리북을 이용해 컴포넌트 테스트중이다.

프롭스를 그때그때 다르게 하는 방법은 아래와 같다.

import * as React from "react";
// also exported from '@storybook/react' if you can deal with breaking changes in 6.1
import { AddImageBtn } from "../components/addImgBtn";  // 스토리북에서 테스트할 컴포넌트

export default {
  title: "Example/AddImageBtn", // 스토리북에서 볼수있는 묶음? 과 이름
  component: AddImageBtn,
};

export const imageEntryItems = (args) => <AddImageBtn {...args} />; //스토리북 렌더링
imageEntryItems.args = {  //스토리북 controls에서 사용할 props 및 기본값 정의
  images: [],
};

위 코드대로 작성한다면 스토리북 좌측 네비게이션에서

EXAMPLE 묶음?(뭐라불러야 할지 모르겠다.)의 AddImageBtn에 AddImageBtn컴포넌트가 렌더링된다.

하단에 Controls 탭을 클릭하면 images 옆에 수정 가능한 부분에 []이 작성되어 있다. 이 부분을 마음대로 수정한다면 프롭스에 따라 렌더링이 어떻게 되는지 확인할 수 있다.