[프로젝트] 4. 기술스택 선정하기

kcm dev blog·2021년 11월 8일
1

Project

목록 보기
4/4

기술 스택 선정하기

기능적, 비기능적 요구사항을 바탕으로 필요한 기술 스택을 선정하는 단계이다. 다음 기술 스펙들은 데브코스 프로젝트에서 사용된 기술 스펙들이다.

프론트엔드

React

프론트엔드 관련 프레임워크 중 Angular, Vue와 더불어 가장 유명한 프레임워크다.(엄밀히 따지면 React는 라이브러리이다). Facebook에서 개발한 라이브러리로 높은 점유율과 넓은 커뮤니티가 주요 장점이라고 할 수 있다. 최근에는 함수형 프로그래밍 방식인 React Hook을 사용하면서 컴포넌트 단위로 상태 관리가 용이해졌다는 평가를 받는다. 추가적으로, Facebook에서도 공식적으로 hook 사용을 권장하고 있다.

npx create-react-app NAME으로 React Project를 생성할 수 있다.

emotion styled component

일반적으로 각 컴포넌트별로 css 파일을 생성하여 스타일을 관리하는 방식이 있지만, styled component를 사용하면, 별도의 파일 없이 하나의 컴포넌트 파일에 스타일을 추가하여, 로직과 스타일을 한 파일에서 관리할 수 있다는 장점이 있다.

emotion은 원래는 .babelrc를 설치해서 쓰지만 react는 지원하지 않기 때문에 다른 방식을 써야한다. fragma를 써야하는데 이는 컴파일러로 하여금 어떻게 처리해야 하는지 알려주는 것이다.

npm i -D @craco/craco
npm i --save @emotion/react
npm i --save @emotion/styled
npm i @emotion/babel-preset-css-prop
create-react-app-config-override

// 터미널에서 위 패키지 설치 및 명령어 실행
// 매번 fragma를 선언해주는 일을 해결해준다.

// package.json
{
  "scripts": {
    "start": "craco start" // 기존의 Npm start를 활용하기 위해 다음과 같이 명령어 옵션을 변경한다
  }
}
// craco.config.js
module.exports={
  babel:{
    presets:["@emotion/babel-preset-css-prop"],
  }
}

밑의 코드는 emotion styled component를 활용한 예시이다

import styled from '@emotion/styled'
import Image from '../Image'

// styled component를 활용하면 컴포넌트 내부에서 css 스타일을 정의할 수 있다.
const IconWrapper = styled.i`
  display: inline-block;
`

const Icon = ({
  name,
  size = 16,
  strokeWidth = 2,
  color = '#222',
  rotate,
  ...props
}) => {
  const shapeStyle = {
    width: size,
    height: size,
    transform: rotate && `rotate(${rotate}deg)`,
  }

  const iconStyle = {
    'stroke-width': strokeWidth,
    stroke: color,
    width: size,
    height: size,
  }

  const icon = require('feather-icons').icons[name]
  const svg = icon ? icon.toSvg(iconStyle) : '' // Buffer.from 함수의 첫 번째 매개변수가 문자열, 버퍼, 배열버퍼, 배열, 유사배열객체 값이 들어가야 하므로 빈 문자열을 대입하는 삼항연산자 사용
  const base64 = Buffer.from(svg, 'utf8').toString('base64')

  return (
    <IconWrapper {...props} style={shapeStyle}>
      <Image src={`data:image/svg+xml;base64,${base64}`} alt={name} />
    </IconWrapper>
  )
}

export default Icon

storybook

컴포넌트 단위로 개발을 진행하는 경우, 해당 컴포넌트가 어떻게 생기고, 어떤 속성을 바꿀수 있는지 테스트 해볼 수 있는 툴이다. 사이즈, 색상, Boolean 등 다양한 속성을 지원하여, 하나의 컴포넌트를 재활용하여 다양한 형태의 속성으로 정의된 변형된 컴포넌트를 직접 확인할 수 있다. 추후 페이지를 구현할 때, 라이브러리처럼 가져와서 활용할 수 있다는 장점이 있다.

자세한 내용은 공식 홈페이지 참고

npx -p @storybook/cli sb init
// Image.js
import PropTypes from 'prop-types'

const Image = ({ src, width, height, alt, circle, ...props }) => {
  const imageStyle = {
    width,
    height,
    borderRadius: circle && '70%',
  }

  return <img src={src} alt={alt} style={{ ...props.style, ...imageStyle }} />
}

Image.propTypes = {
  src: PropTypes.string.isRequired,
  width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
  height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
  alt: PropTypes.string,
}

export default Image
// Image.stories.js
import Image from '../components/base/Image'

export default {
  title: 'Component/Image',
  component: Image,
  argTypes: {
    src: {
      type: { name: 'string', require: true },
      defaultValue: 'https://picsum.photos/200',
      control: { type: 'text' },
    },
    width: {
      defaultValue: 200,
      control: { type: 'range', min: 200, max: 600 },
    },
    height: {
      defaultValue: 200,
      control: { type: 'range', min: 200, max: 600 },
    },
    alt: {
      control: 'string',
    },
    circle: {
      control: { type: 'boolean' },
    },
  },
}

export const Default = (args) => {
  return <Image {...args} />
}


(다양한 속성을 추가하여 값을 변경할 수 있고, 변경된 값을 기반으로 랜더링된 컴포넌트를 확인할 수 있다)

axios

  • 기존에 주로 사용하는 Fetch API와는 달리, response로 받은 데이터를 json으로 다시 받지 않아도 된다
  • Fetch API는 에러 발생시 .error()를 통해 에러를 잡지만, axios는 try-catch를 활용한다.
  • Fetch API는 네트워킹 에러에서 비롯되는 문제만 처리 가능하지만, axios는 그 외 에러도 잡을 수 있다.
// axios 선언
import axios from 'axios'

const API_END_POINT='api 주소'
const API = axios.create({
  baseURL: API_END_POINT,
  headers: {
    'Content-Type': 'application/json',
  },
})

export default API
// axios를 활용하여 POST 요청 메소드 선언
import API from './api'

export const loginApi = async (code) => {
  const { data } = await API.post('/login', code)

  return data
}
// 메소드 실행
loginAPI({
  id:'my_id_is_id',
  password:'whatPassword',
})

Context API

리액트에 기본으로 내장된 상태 관리 API이다. 컴포넌트간 데이터를 전달할 때, 단계가 너무 깊으면 효율이 떨어진다는 단점이 있다. 따라서 별도의 컨테이너에 상태값을 저장하고, 필요할 때 꺼내서 사용하는 도구라고 할 수 있다. 해당 API의 경우, 꼭 필요한 경우에만 사용하는 것을 권장한다. 잦은 상태관리 도구 사용은 상태 추적을 오히려 어렵게 만들기 때문이다.

(추가적으로 상태 관리 도구로는 Redux, mobx, recoil 등이 있다)

Build

npm

리액트에 사용되는 다양한 패키지의 버전과 호완성을 관리하는 툴이다. 외부 라이브러리를 설치하는데도 활용된다.(npx create-react-app으로 설치시 기본으로 설치된다)

Deploy

Netlify

만든 웹 페이지를 배포할 수 있는 서비스이다. 무료로 이용할 수 있고, 많은 설정을 요구하지 않는다는 장점이 있다.

ETC

Prettier

코드의 포멧을 보기 편하게 변환해주는 확장자이다. vscode의 경우, 확장자를 설치후 바로 사용할 수 있으며, 프로젝트별로 커스터마이징이 필요하다면, 별도의 설정파일을 추가하면 된다

// .prettierrc
{
  "trailingComma": "all", // 객체의 속성 값에 항상 ','를 찍는다
  "tabWidth": 2,// tab 간격은 2칸이다
  "semi": false,// 매줄마다 ';'을 붙이지 않는다
  "singleQuote": true // 문자열 작성시 사용되는 따옴표를 작은 따옴표(' ')로 통일 한다
}

esLint

JavaScript 코드에서 발견 된 문제 패턴을 식별하기위한 정적 코드 분석 도구이다. 코드를 분석해 문법적인 오류나 안티 패턴을 찾아주고 일관된 코드 스타일로 작성하도록 도와준다.

{
  "extends": [
    "react-app",
    "plugin:prettier/recommended" //prettier에서 권장하는 방식으로 문법 검사를 한다
  ],
  "rules": {
    "prettier/prettier": [
      "error",
      {
        "endOfLine": "auto" // 줄바꿈 스타일 auto로 설정
      }
    ],
    "import/no-anonymous-default-export": "off" // default export 반드시 명시
  }
}

Figma

와이어프레임 및 시안 제작도구로 사용된다. 실제로 작동하는 페이지를 구성하기 위한 프로토타입 제작도 가능하다(무료, 음성 통화 기능은 유료.(단, 학생계정 사용시 무료))

VSCode

Microsoft에서 제작한 에디터로 다양한 확장자를 설치하여, 개발자의 취향에 맞게 환경을 구성할 수 있다. (무료)

Webstorm

Jetbrains에서 제작한 IDE로 웹 관련 확장자들을 기본적으로 내장하고 있다. 별도의 확장자 추가 설치 없이 대부분의 기능들을 이용할 수 있다.(유료. 단, 학생계정 사용시 무료)

profile
오늘 배운건 오늘 소화하자!

0개의 댓글