초급 프로젝트 - (1)

중간중간에 알게된 사실이나 배운 내용을 꾸준히 작성해야했는데, 첫 프로젝트라서 그런지 코드 작성하느라 바빠서 회고를 못했던 것 같다... 회고하면서 블로그 작성 시점이 늦은 것 같지만, 기억을 잃기 전에 회고록을 작성하려고 합니다!

코드를 하나씩 분석해가며 알게 된 내용을 작성하겠습니다.

 

---

1. NVM

Node version Manager의 약자로 node.js의 버전을 관리해주는 아이이다. 공식 홈페이지에는 나와있지 않은 더 높은 버전들이 있어서 dotenv를 이용하지 않고, .env를 바로 관리할 수 있었다.

ㅇ 사용법

https://github.com/coreybutler/nvm-windows/releases

위 깃허브에서 nvm-setup.exe를 다운 받는다.

nvm list available
nvm install <버전>
nvm use <버전>

 

nvm use 20.0.0 이런식으로 사용하면 된다.

 

2. .prettierrc

깔끔한 코드와 협업을 위해 일관성 있는 코드 스타일을 유지할 수 있도록 도와주는 아이이다.

extension에서 prettier를 사용할 수 있지만, 프리티어알씨로 커스텀을 할 수 있다는 사실!

초급 프로젝트 때 아래 코드를 사용해 파일로 심어주었다.

{
  "printWidth": 100,
  "tabWidth": 2,
  "semi": true,
  "singleQuote": false,
  "jsxSingleQuote": false,
  "trailingComma": "all",
  "bracketSpacing": true,
  "arrowParens": "always",
  "jsxBracketSameLine": false
}

 

3. 리액트에서 .env

유지보수를 위해 .env에서 자주 사용하는 url을 넣어놨는데, 리액트에서는 아래를 맨 처음에 붙여줘야한다.

REACT_APP_

 

ex) REACT_APP_BASE_URL= ~~~~~~~~~

 

 

         const S3_BASE_URL = process.env.REACT_APP_S3_BASE_URL;

 

 

 

S3 버킷에 이미지들을 넣어놓고 사용했는데, 이런 식으로 사용했다.

src-{`${S3_BASE_URL}/dropdown.svg`}

4. module.css

원래 미션 과제들을 진행할 때는 .css로만 사용했는데, 협업을 하기 위해 프로젝트를 시작하자마자 module.css로 변경했다.

import styles from "./index.module.css";

<div className={styles.container}></div>

 

위처럼 사용하는데, module.css를 사용하는 이유는 그냥 css의 경우 다른 파일에서 똑같은 클래스이름을 사용하게 된다면 전역적으로 css가 적용되어버린다. 그래서 같은 클래스네임이지만 다른 css을 주기 위해서는 module.css를 사용해야한다

 

+ 원래는 .css에서는 케밥케이스를 사용했는데, 왠지 모르게 적용이 안돼서 스네이크표기법을 사용했다. 근데 지금 찾아보니까 아래처럼 케밥도 가능! 근데 대괄호를 써야하니까... 그대로 스네이크 쓸 것 같다.

<div className={styles["title-wrapper"]}></div>

 

5. NotFound 페이지 + 타이머

모든 요구사항을 다 구현한 뒤 고도화 작업으로 하려고 했던 NotFound 페이지이다. 근데 사실상 너무 쉬워서.. 앞으로 그냥 넣을 것 같다.

(1) 타이머

  useEffect(() => {
    const timer = setTimeout(() => {
      navigate("/all-company");
    }, 5000);
    return () => clearTimeout(timer);
  }, [navigate]);

useEffect로 5000ms(5초) 뒤에 원하는 페이지로 이동하게 했다. 

(2) 지정되지 않은 페이지로 이동됐을 때

<Route path="*" element={<NotFoundPage />} />

흠... 말할게 없다... 지정된 페이지들을 작성해주고 나머지 *(전체) 페이지에 적용되도록 했다.

 

+ 로딩중은 spinner.io 에서 이미지 다운 받고 gif를 넣어주면 끝!

 

6. className 여러 개를 넣고 싶을 때

<div className={`${styles.header_div} ${styles.header_div_allcompany}`}>

 

이제 자주 쓰일 것 같지만, 쓰려고 하면 기억이 안날 것 같아서 작성해둔다.

중괄호 안에 백틱 안에 ${  } 띄어쓰고 ${  }