React와의 두번째 싸움

저번시간엔 리엑트 로그인 페이지와 첫번째 싸움을 했었다. 확실히 처음 React 를 접했을때보다는 훨씬 쉽게 접근하고 시간도 많이 단축할 수 있었다
말보다는 코드로 보여주겠습니다!

@import '../../../styles/variables.scss';

// .nav-container {
//   display: flex;
//   align-items: center;
//   justify-content: space-evenly;
//   border: 1px solid #dbdbdb;
// }
// .logo {
//   font-size: 40px;
//   // font-family: $font-family;
//   font-family: 'Lobster', cursive;
// }
main {
  .feeds {
    display: flex;
  }

  article {
    border: 0.5px solid #dbdbdb;
    margin-left: 350px;
    margin-top: 100px;
  }

  article {
    .ss {
      .profile {
        border: 1px solid white;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        display: flex;
        padding-left: 10px;
        padding-top: 20px;
        padding-bottom: 70px;
      }
      .profile img {
        width: 50px;
        height: 50px;

        object-fit: cover;

        border-radius: 50%;
      }
      .C9 {
        font-size: 23px;
        padding-top: 10px;
        padding-left: 10px;
      }
      .menuIcon {
        display: flex;
        padding-left: 470px;
        padding-top: 15px;
      }
    }

SCSS 상위에 있는 @import '../../../styles/variables.scss';를 꼭해줘야 팀에서 정한 변수가있는 varibales을 사용할 수 있다.

NAV 태그

상위에 NAV 태그는 같은 팀원끼리 NAV를 종합해서 React 의 기능을 이용해 Import 해서 끌어왔다

mport React from 'react';
import './MainHo.scss';
import Nav from '../../../components/Nav/Nav';

function MainHo() {
  return (
    <>
      <Nav />
      <main>
        <div className="feeds">
          <article>
            <div className="ss">
              <div className="profile">
                <img src="https://search.pstatic.net/common/?src=http%3A%2F%2Fpost.phinf.naver.net%2FMjAyMTAzMDlfMiAg%2FMDAxNjE1MjY3NjE3NDAx.EJ4minHh6DuVzMcsSog6CWIB-R3j16NVXA3G1FQJZ0Mg.o45QtWy7yEUgIiQtpd-1nZLwRF38HL94XEv4nrGTlzQg.PNG%2FIvqncdOv6zPcEKFsDE3blh1bEPxA.jpg&type=a340" />

                <span className="C9">C9</span>

                <span className="menuIcon">
                  <i className="fas fa-ellipsis-h" />
                </span>
              </div>

위에보이는<nav / > 하나의 태그로 컴포넌츠 Nav.Js에 있는 팀원이 공유한 Nav 코드를 쉽게 불러올 수 있었다. 이것이 바로 React 의 장점!!!
또한 Import 할때 ./../같은건 파일의 경로를 찾는방법이다!
모르겠으면 직접 ./을 쳐보면 어떻게 진행되는지 몸소 느껴질것이다.

> ClassName의 순서중요성

사실 css할때도 중요하지만 SCSS를 작업해보면서 ClassName의 순서와 이름의 의미가 굉장히 중요하다는걸 또 깨달아 버렸다(이번년도 29번째 깨달음).
작업을하다보면 scss파일의 줄이 200개 가까이 가는 상황은 비일비재 할것이다.
작업을하면서 ClassName의 의미가 뒤죽박죽 되있으면 20분만에 끝날걸 찾고 찾고하면서 2시간이 걸렸다..;; 이래서 멘토님들이나 동기들이 ClassName이 중요하다고 거듭 강조하는 것이었다. 역시 사람은 맞아봐야 아픈걸 안다.
또한 scss는 상위태그부터 하나씩 하위태그를 감싸는데 순서가 뒤죽박죽 되어있으면 태그가 꼬이게되면서 scss에서 설정해둔 값이 엉뚱하게 가거나 적용이 안되는 상황도 일어난다!!
자나깨나 ClaaName 정렬 및 의미를 잘 부여하기

> 폰트어썸의 실종

처음 Import 했을때 폰트어썸이 실종되어있었다... 어떻게 하지 하지 하다가
구글에 나온 방법으로 해도 안되길래 예슬Kim님을 찾아가서 물어보니 폰트어썸의 본인만의 킷에서 나오는 주소를 복사해서 Index.js에 붙혀넣기하니 실종됬던 폰트어썸이 집으로 돌아오는 광경을 볼 수 있었다.

라우터 연결

import React from 'react';
import ReactDOM from 'react-dom';
import Router from './Router';
import './styles/reset.scss';
import './styles/common.scss';

ReactDOM.render(<Router />, document.getElementById('root'));

막간으로 React 만했을땐 ReactDOM.render(<Jaehomain / >,로만 했어도 페이지가 나왔지만 라우터를 하고나선 꼭 저안에 Router 를 써줘야 한다는 사실 그리고 !!!여기서 키포인트 <Router / >, 여기 ,가 빠지면 오류가 뜬다 그점도 꼭 인지하시길!!!!!!!!!