네비게이션 바 조립하기

조립하기

components 폴더에 Navigation.tsx 파일을 생성한다.
rfce 입력해서 기본 뼈대 만들고,
mern_client/src/Pages/Home의 index.tsx 파일에 Navigation 요소를 추가해준다.

import Navigation from "../../components/Navigation"

function Home() {
    return <div><Navigation /></div>;
}

export default Home;

여기까지 하고 npm run start로 네비게이션 요소가 제대로 나오나 확인해보려고 했는데, 패키지 설치 이슈가 생겨서 다시 롤백하고 이전 커밋 위치부터 해야할 것 같다.....

초반에 npm install로 패키지를 설치할 때 몇 가지 vulnerabilities가 발생했다는 경고를 무시하고 그냥 진행했는데, 그게 문제가 되었던 것 같다.

npm run start로 로컬 서버를 띄워서 페이지가 제대로 뜨는지 확인해봤는데, 패키지 관련 이슈로 제대로 뜨지 않아서

커맨드창에서 시킨 대로 npm audit fix를 입력해서 취약점을 해결했다.
근데 몇 가지 취약 사항은 저 명령어로 해결이 되지 않아서, 또다시 커맨드창에서 시킨 대로 npm audit fix --force를 입력했고, 강제로 모든 취약점을 해결했는데
이 옵션을 붙이면 문제점이 발생한다고 한다(by gemini)

1. npm audit fix --force가 위험한 이유
일반적인 npm audit fix는 호환되는 범위 내(Semantic Versioning)에서 패키지를 업데이트하지만, --force 옵션을 붙이면 이야기가 달라집니다.

• 의존성 파괴: 보안 취약점을 해결하기 위해 주 버전(Major Version)을 강제로 올려버립니다.
• package.json 수정: 말씀하신 대로 package.json 파일 내의 버전 정보를 강제로 수정합니다.
• 충돌 무시: "이 패키지를 업데이트하면 다른 패키지가 깨질 텐데?"라는 npm의 경고를 무시하고 설치를 강행합니다.

2. 왜 react-scripts 오류가 날까요?
MERN 스택에서 주로 사용하는 create-react-app 기반 프로젝트는 react-scripts라는 패키지에 의존합니다. 하지만 --force 옵션으로 다른 패키지들을 강제 업데이트하는 과정에서 다음과 같은 상황이 발생했을 확률이 높습니다.

• 버전 불일치: react-scripts와 호환되지 않는 상위 버전의 다른 라이브러리가 설치됨.
• 설치 누락: 의존성 그래프가 꼬이면서 npm이 react-scripts의 실행 파일(바이너리)을 node_modules/.bin 폴더에 제대로 생성하지 못함.
• 삭제됨: 취약점을 해결하겠답시고 react-scripts 자체를 아예 삭제하거나 버전이 맞지 않는 것으로 대체함.

강의가 올라온지 좀 시간이 지나서 패키지 버전에 문제가 있는 것 같다.....
package.json 파일 자체를 좀 뜯어봐야겠다.............어우귀찮아

---

아무튼 저건 나중에 해결하고....
Navigation.tsx 파일을 아래와 같이 작성하면 원하는 형태의 네비게이션 바가 완성된다..

import React from 'react'
import Block from "./common/Block";
import Button from "./common/Button";
import Divider from "./common/Divider";
import ShadowBox from "./common/ShadowBox";
import Span from "./common/Span";
import { GoPlus } from "react-icons/go";

function Navigation() {
  return (
    <ShadowBox>
      <Button type="link" url="/">
        <span size="title">MERN</span>
      </Button>
      <Divider />
      <Block height="28px" />
      <Button>
        <GoPlus size={20} />
      </Button>
    </ShadowBox>
  );
}

export default Navigation

global style 적용하기

src 폴더 아래에 styles 폴더를 생성한다.
이 폴더 안에 GlobalStyles.ts 파일을 생성한다.

import { CreateGlobalStyle } from "styled-components";

const GlobalStyles = createGlobalStyle`
  ${reset}
`;

export default GlobalStyles;

적용된 스타일을 리셋해주는 코드인듯

그리고 src/index.tsx 파일로 이동함
import GlobalStyles from ".styles/GlobalStyles"; 으로 임포트 해주고...

const root = ReactDOM.createRoot(
  document.getElementById("root") as HTMLElement
);
root.render(
  <React.StrictMode>
    <GlobalStyles />
    <App />
  </React.StrictMode>
);

이 부분에 <GlobalStyles /> 태그를 추가해주엇다.
이렇게 하면 아까 작성한 전역 CSS가 컴포넌트 전체에 적용이 된다고 한다.

다시 GlobalStyles.ts 파일로 가서, 아래와 같이 전역 스타일을 설정해준다....
추후에 스타일 변경할 때 요 파일을 수정하면 될듯

import { CreateGlobalStyle } from "styled-components";

const GlobalStyles = createGlobalStyle`
  ${reset}

  a {
    text-decoration: none;
    }
  * {
    box-sizing: border-box;
    }
  html,body {
    height: 100%;
    }
  #root {
    height: 100%;
    }
  input:focus{
    outline: none;
    }
`;

export default GlobalStyles;