프리온보딩 코스 두 번째 과제 TIL

YUZAMIN
YUZAMIN
Hello, World! I'm YUZAMIN, a diligently endeavoring frontend developer 🐤💦
프리온보딩 코스 두 번째 과제 TIL

Summary

What I Learned Is…👩🏻‍💻

styled-components & styled-reset으로 프로젝트 CSS styles 초기화하기

그동안은 프로젝트 전체에 적용될 style 속성들을 다음과 같이 App.css에 정의해두고 사용해왔었다.

App.css

그런데 이번 과제를 하면서 처음으로 App.js, App.css를 모두 없애고 Routes.js, GlobalStyle.js로 대체하게 되었고, 용도에 따라서 명확하게 파일을 나누고 명명함으로써 좀 더 체계적인 폴더 구조를 구축할 수 있었다.

우선 GlobalStyle.js에서는 styled-components의 createGlobalStyle와 styled-reset의 reset 모듈을 import 해온다. (물론 styled-components와 styled-reset 패키지의 install을 선행한다.)

그리고

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

const GlobalStyle = createGlobalStyle`
  ${reset}

  @font-face {
  font-family: 'GmarketSansLight';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansLight.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

  * {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
  }

  body {
    font-family: 'GmarketSansLight', Circular, -apple-system, BlinkMacSystemFont, Roboto, Helvetica Neue, sans-serif;
    font-size: 14px;
    line-height: 1.43;
    color: #484848;
    background-color: #fff;
  }

 ...생략...

다음과 같은 방식으로 global하게 적용되어야 할 css 속성들을 styled-components의 문법에 따라 정의해둔다.

그리고 index.js에

1
2
3
4
5
6
7

ReactDOM.render(
  <>
    <GlobalStyle />
    <Routes />
  </>,
  document.getElementById('root'),
)

다음과 같은 형태로 import한 뒤 삽입하여 쓴다.

이 GlobalStyle.js 파일은 src 밑에 styles 폴더를 따로 두어 그 안에 넣어두고 관리하면 좋다. (이런 체계적인 폴더구조…너무 좋다😎)

앞으로는 프로젝트를 시작한 직후 바로 이 global styles를 정의하여 쉽고 일관되게 style를 적용해야겠다.

상수 관리하기

프로젝트 전반에서 쓰이는 단어들, 특정 messages, 일관되어야 하는 숫자, 그리고 api url은 상수화하여 관리하는 것이 좋다.

아무리 작고 사소한 수정 사항이라도(예를 들면 100을 101로 수정해야 하거나, ‘watched’를 ‘watch’로 바꿔야 한다거나…) 규모가 웬만큼 큰 프로젝트의 여기저기에서 쓰이는 것을 바꾸는 일은 정말 귀찮고 상당한 세심함을 요구할 것이다.

그래서 이번 과제에서는 api url(물론 back과 통신하는 것이 아니라 client단 - public 폴더에서 data를 fetch해오는 과제였지만)을 config.js 파일 내에서 BASE_URL이라는 이름으로, 그 외 각종 상수들은 constant.js파일에서 관리하기로 했다.

1
2

//config.js
export const BASE_URL = `http://localhost:3000/Data/data.json`

1
2
3
4
5
6
7
8
9
10
11

//constant.js

//Data fetch error message
export const FETCH_ERROR_MESSAGE =
  'Failed to fetch data, please check your API or internet connection'

//alert 메시지
export const ALERT_NO_MORE_RANDOM_PRODUCT =
  "모든 상품이 '관심없음 ❌' 처리 되어 있습니다."

...생략...

이렇게 한 파일 내에서 모든 상수를 관리하니 수정사항을 반영하기도 쉬웠고 사용도 간편했다👍🏻

Util function 첫 사용기

이번 과제의 요구 사항 중 하나였던 util 함수. LocalStorage에 데이터를 저장해두고 사용하는 과제였기 때문에, 나는 크게 세 util 함수를 정의해보았다.

1
2
3
4

const GetDataFromLocalStorage = (key) => {
  return JSON.parse(localStorage.getItem(key))
}
export default GetDataFromLocalStorage

1
2
3
4

const SaveDataToLocalStorage = (key, value) => {
  localStorage.setItem(key, JSON.stringify(value))
}
export default SaveDataToLocalStorage

1
2
3
4
5
6
7
8
9
10

import SaveDataToLocalStorage from './SaveDataToLocalStorage'
import { WATCHED } from 'constant'

const MoveAfterVisit = (visitProductData, moveTo, prevPage) => {
  //조회할 product 방문 처리 (LocalStorage에 조회할 product 정보 삽입 또는 갱신)
  SaveDataToLocalStorage(WATCHED, visitProductData)
  //조회할 product detail page로 이동
  return prevPage.history.push(`${moveTo}`)
}
export default MoveAfterVisit

첫 번째와 두 번째 util 함수는 간단히 LocalStorage에 정보를 저장하거나 가져오는 것을 쉽게 하기 위한 함수이다.

상품 정보와 사용자의 상품 조회 기록을 LocalStorage에 저장해두고, 사용자가 상품 Box를 클릭하면 해당 상품의 상세 정보를 조회 기록에 기록한 뒤 상품 상세 페이지로 이동하도록 해야 했기 때문에 프로젝트를 진행하면서 세 번째 util 함수도 추가로 만들게 되었다.

이렇게 자주 사용되는 logic을 함수로 따로 빼서 쓰니까 코드도 간결해지고 반복이 줄어서 흡족했다👏🏻