프로젝트 초기 설정

들어가면서

---

이 시리즈는 최신 트렌드를 반영하면서, 최대한 현업에 가깝되 간단한 웹 프론트엔드 프로젝트 구성을 목표로 합니다. 이 시리즈는 저 나름의 노하우를 공유하고 피드백을 받고 싶어서 만들었습니다. 어떤 기관이나 업체의 표준을 따르는 것이 아닌 그저 제가 프로젝트를 만들어나가는 과정을 정리했습니다. 하지만 그렇다고 해서 시리즈의 모든 내용들이 처음부터 끝까지 제 머리에서 나온 것은 아닙니다. 특정 부분마다 어느 저자의 어느 글을 참고했는지 그 출처 링크를 표시하도록 하겠습니다.

만들고자 하는 어플리케이션

---

만들고자 하는 어플리케이션은 간단한 시간관리 앱인 'Micro' 어플리케이션입니다. 제가 친하게 지내는 디자이너분께 사용에 동의를 구했습니다. 이 시리즈에서 이 어플리케이션 전체를 만드는 과정을 다루지는 않을 것입니다. 그저 시리즈에서 사용할 '예시 프로젝트'의 대상 어플리케이션으로 활용하고자 합니다.

어플리케이션에 대한 자세한 소개는 다음의 링크를 참고하시기 바랍니다.

[UI] 목표 설정 가이드앱 마이크로(micro) - UI/UX

사용 패키지

---

UI 라이브러리 등 3rd party 패키지를 쓰지는 않지만 기본적으로 사용되는 패키지 수 자체는 많은 편입니다. 사용되는 웹 기술들은 아래와 같습니다(Git, Javascript 와 같은 기본적인 기술들은 포함하지 않았습니다).

• React - 필수
• Redux - 필수 X
• Typescript - 필수
• Webpack - 필수 X
• SASS - 필수 X
• RTL(React Testing Library) - 필수 X

 

위의 기술들 중 '필수 X'인 것들은 굳이 알지 못해도 이 시리즈를 이해하는데 별 문제 없지만, 필수로 표시된 기술들은 어느 정도 사용해본 경험이 있어야 시리즈를 이해하는데 무리가 없을 것입니다. 위의 기술들을 엄청 전문적으로 꿰뚫고 있을 필요는 없습니다(저도 딱히 그러지는 못합니다...).

CRA(Create React App) 을 통한 프로젝트 초기화

---

제일 먼저 할 일은 사실 VSCode 와 node js(npm) 을 설치하는 것이겠지만 해당 부분은 모두 설치가 되었다고 가정하고 넘어가겠습니다.

npx create-react-app micro --typescript

위의 명렁어를 입력하여 프로젝트 폴더를 생성합니다. 타입스크립트를 자동으로 설치하고 설정하도록 만들기 위해 —typescript 플래그를 넣어주시기 바랍니다. 이렇게 하면 webpack과 RTL 또한 자동으로 설치되고 적용됩니다.

리덕스와 SASS를 선택하고 그것들이 자동으로 적용되도록 만듭니다.

프로젝트 초기화

---

필요 없는 파일 삭제

당연하지만, 필요하지 않은 index.css 안의 내용들, 사용되지 않을 파일들 또한 삭제해주십시오.

폴더 구조 초기화

이 프로젝트의 폴더 구조는 아래 그림과 같습니다.

• assets 폴더

  : 웹팩의 번들링에 대상이 될 정적 파일들을 이곳에 위치시킵니다.

• components 폴더

  : 최하단 컴포넌트 파일들이 위치하는 곳입니다.

• containers 폴더

  : 최하단 컴포넌트를 이용하는 컴포넌트 파일이 위치하는 곳입니다.

• hooks 폴더

  : 리액트 커스텀 훅들을 모아놓은 곳입니다.

• modules 폴더

  : redux 코드와 관련된 코드들을 위치시키는 곳입니다.

• Layouts 폴더

  : 레이아웃 컴포넌트 파일을 위치시키는 곳입니다.

• pages 폴더

  : 페이지 컴포넌트 파일을 위치시키는 곳입니다.

 

이를 완료하였으면 프로젝트 디렉토리의 내용은 위와 같을 것입니다.

디자인 관련 초기 설정

---

전역 CSS 로 HTML 태그들의 기본 스타일 제거

HTML 태그들에는 우리가 지정하지 않았더라도 기본적으로 지정되어 있는 스타일이 있습니다. 후에 방해가 되지 않도록 미리 없애두는 것이 좋습니다. 이를 없애기 위해 아래의 코드를 index.css 파일 안에 넣어주십시오. 코드는 Eric Meyer의 'CSS 리셋' 코드를 참조했습니다. 라이센스가 없기 때문에 맘 편히 사용하시면 됩니다.

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

전역 CSS 변수 설정

프론트엔드 개발자가 디자이너로부터 디자인 시안을 넘겨받게 되면, 단순한 UI 그래픽들만 넘겨 받게 되는 것이 아니라 해당 어플리케이션이 체계적이고 일관적인 디자인을 바탕으로 구현될 수 있도록 '스타일 가이드' 혹은 '디자인 시스템'을 같이 넘겨 받게 되는 경우가 많습니다. 이 제약사항들은 CSS 변수를 선언하고 SASS Mixins 를 만드는 기준이 되어 오히려 저희 일을 줄여줍니다.

매우 간소화된 양식이지만, 제가 구현하려고 하는 Micro 어플리케이션은 위와 같은 스타일 가이드를 가지고 있습니다. 제일 먼저 색상 코드들을 CSS 변수들에 담아봅시다. 변수 이름은 굳이 별도의 네이밍을 하지 않고 최대한 디자이너의 스타일 가이드나 디자인 시스템에 나타난 이름들을 활용하는 것이 좋습니다(물론 본인이 편한대로 하셔도 상관없습니다).

/* Colors */
:root {
  --mainColor-1: #1e96cc;
  --mainColor-2: #076cb8;
  --mainColor-3: #075faf;
  --subColor-1: #85bdd4;
  --subColor-2: #aecedb;
  --subColor-3: #e4e4e4;
  --textColor-1: #4B4B4B;
  --textColor-2: #4F4F4F;
  --textColor-3: #9B9B9B;
  --textColor-4: #D5D5D5;
}

로컬 에셋 등록

그 다음으로 해야할 일은 아이콘, 폰트, 이미지와 같은 로컬 에셋을 미리 assets 폴더 안에 넣어두는 것입니다. 물론 프로젝트를 진행해가면서 필요할 때마다 추가해주셔도 상관없지만, 저의 경우 나중에야 폰트를 적용하는 것을 잊어버리는 것과 같은 실수를 막기 위해 본격적인 개발에 착수하기 전에 미리 등록해둡니다.

이러한 에셋들은 외부에서 가져오는 방식을 택할 수도 있겠지만 초기 로딩 속도를 높이기 위해서라도 정말 필수적인 에셋들은 다운로드 받아서 프로젝트 내부에 넣고 나중에 함께 번들링 되도록 하는 것이 좋습니다.

웹 폰트 적용

하지만 폰트의 경우, 적용이 많이 까다로운 경우가 많습니다. 이용자의 브라우저에 저희 앱이 필요로 하는 폰트가 설치되어 있지 않은 경우를 대비해서 로컬로 폰트를 추가하여 함께 번들링 되도록 할 수 있습니다. 하지만 이것을 위해서 해야하는 웹팩 설정이 따로 있어서 솔직히 번거롭습니다.

웹 폰트를 통해 이용자의 브라우저가 폰트를 외부에서 다운로드 받도록 하는 방법도 있습니다. 하지만 웹 폰트의 용량이 클때 폰트가 다운로드 완료될 때까지 그 폰트가 적용된 텍스트가 이용자에게 보이지 않는 문제가 발생할 수 있습니다. 이를 신경쓰지 않았을 경우, 크롬 개발자 도구에서 lighthouse 를 통해 성능 심사를 받아보면, 이 사항이 지적 받는 것을 보실 수 있을 것입니다.

자세한 내용은 다음을 아래 두 링크를 참고해보시기 바랍니다.

NAVER D2

웹폰트 사용하기 (웹폰트 101)

이 글에서 웹 폰트 적용에 관한 모든 내용을 다루지는 않을 것이지만, 해당사항에 관한 글을 따로 정리해서 올릴 생각입니다. 일단 지금은 결론적으로 어떻게 해야하는지만 말하겠습니다.

• 절대 CDN이나 외부 링크를 통해 웹폰트를 받아오도록 하지 말고 프로젝트 내부의 폰트 파일을 웹폰트로 받아오도록 설정하십시오.
• 파일 용량이 가장 적은 woff2가 가장 먼저 다운로드 되도록 하고 그 웹 폰트가 적용되기 힘든 환경일 때(ex: 구형 브라우저) 다른 형식의 폰트가 다운로드 되도록 해주십시오.
• 갉, 곩, 맋 같은 한글 글자 혹은, Adiós 같은 특이한(?) 영어 글자를 어플리케이션 상에 나타낼 일이 딱히 없다면최대한 subset 폰트를 이용해주십시오.
• 웹 폰트가 적용되기 이전에도 글자는 렌더링 될 수 있도록 font-display: swap; 을 적용시킵니다(이 font-display 는 ie 에서는 적용되지 않습니다.).

 

한글 폰트 적용 예시

/* Korean Fonts */

@font-face {
  font-family: 'SpoqaRegular';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Spoqa Han Sans Regular'), local('Spoqa-Han-Sans-Regular'),
       url('./assets/fonts/korean/SpoqaHanSans_subset/SpoqaHanSansRegular.woff2') format('woff2'), /* Super Modern Browsers */
       url('./assets/fonts/korean/SpoqaHanSans_subset/SpoqaHanSansRegular.woff') format('woff'), /* Modern Browsers */
       url('./assets/fonts/korean/SpoqaHanSans_subset/SpoqaHanSansRegular.ttf') format('truetype'); /* Safari, Android, iOS */
}

영어 폰트 적용 예시

/* Korean Fonts */

@font-face {
  font-family: 'SpoqaRegular';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Spoqa Han Sans Regular'), local('Spoqa-Han-Sans-Regular'),
       url('./assets/fonts/korean/SpoqaHanSans_subset/SpoqaHanSansRegular.woff2') format('woff2'), /* Super Modern Browsers */
       url('./assets/fonts/korean/SpoqaHanSans_subset/SpoqaHanSansRegular.woff') format('woff'), /* Modern Browsers */
       url('./assets/fonts/korean/SpoqaHanSans_subset/SpoqaHanSansRegular.ttf') format('truetype'); /* Safari, Android, iOS */
}

한글 폰트의 경우 eot 와 svg파일 형식을 찾을 수가 없었습니다. 변환해서 만들 수 있긴 하지만 실제 현업에서는 폰트 파일을 디자이너가 넘겨주는게 일반적이기 때문에 일단 여기서는 넘어가겠습니다.

패키지 설치 및 적용

---

SASS 설치 및 적용

npm install node-sass --save 
or 
yarn add node-sass

CRA를 사용해서 프로젝트를 초기화 했다면 단순히 node-sass 패키지를 설치해주는 것만으로도 SASS를 사용할 수 있게 됩니다.

Redux 설치 및 적용

npm install redux react-redux typesafe-actions @types/react-redux --save 
or 
yarn add redux react-redux typesafe-actions @types/react-redux

redux-saga 와 같은 비동기 라이브러리도 적용하는 것이 좋기는 하겠지만 그러면 글이 너무 길어질 것 같으니 일단 생략하도록 하겠습니다. 저희는 typescript 를 도입했기 때문에 redux 와 같이 사용할 때 여러 편의를 제공해주는 typesafe-actions 패키지 또한 다운 받도록 하겠습니다. 당연하지만 타입정보도 같이 설치해주십시오

GIT 설정

---

지금까지의 환경 설정이 끝났다면 이 전체 프로젝트의 내용을 커밋한 후 develop 브랜치를 생성합니다. 이때 최대한 상세한 커밋 메세지를 작성하기 위해 -m 이 아니라 —edit 플래그를 통해 커밋 메세지를 작성해주시기 바랍니다.

그러면 위와 같은 커밋 로그를 볼 수 있을 것입니다. 이제 깃허브 레포지터리를 하나 만들어서 지금까지의 커밋들을 푸시합니다.

지금까지가 개발 환경 설정 과정이었습니다. 솔직히 좀 길다는 것은 저도 인정합니다...하지만 최대한 필요한 부분들만 담을 수 있도록 노력했습니다.