🧠 프로젝트 시작.

여름방학이 벌써 절반이 지나갔다..
부트캠프로 쌓은 지식을 잊어버리기 전에, 빠르게 새로운 프로젝트를 시작하려한다.
바로, 나만의 velog 만들기. 이름하야 Jelog.
Jelog를 만들어 보면서 프론트와 백엔드 부분을 모두 다뤄보려한다.
어렵겠지만, 해봐야 어려운지 알 것 아닌가..?

🩻 구조 분석

나의 velog, jelog를 만들기 전에, 가장 먼저 무엇을 해야할까 생각해봤다.
일단 역시 클론 코딩이니, velog의 구조 부터 파악해야하지 않을까? 생각이들어 구조 분석부터 시작했다.

가장 기본적인 메인 화면 부터 분석해보자.
일단 가장 상단에 Header 라고 부를 수 있는 부분, 그 아래로 메인 화면인 Body라고 부를 수 있는 부분으로 나눠진다.
Header 안에서 한 번더 구조 분석을 진행해보자.
velog 의 로고 부분, 그리고 우측으로 나열된 각 기능 버튼들로 구성되어있다.
대충 header 컨테이너 안에 로고, 버튼들로 나열하면 될 것 같다.

그 다음으로 유저 velog 화면을 분석해본다.
상단에 Header는 그대로 가져가는 것 처럼 보이나,가장 좌측에 새로운 로고가 추가되고, 유져 id로 로고 String이 변경됐다.
Body 부분도 메인 화면에서 분석한 것과 동일하게 분석한다.
새롭게 SideBar 가 생긴 걸 확인할 수 있다.

일단 오늘은 이 두가지 화면만 분석하고 따라해보자.

🏗️ 리액트 환경 구축

이번 프로젝트는 리액트 환경에서 진행할 것이기 때문에 npm 명령어로 리액트를 설치하자.
vsc 터미널 창에 아래와 같이 입력하여 create-react-app을 설치하자

npm install create-react-app

설치가 완료됐으면, 내가 원하는 폴더로 이동한 뒤 아래와 같이 입력하여 리액트 환경 설치를 완료한다.

create-react-app 프로젝트명

위와 같은 코드가 나오면서 1분내로 리액트 프로젝트가 생성된다.

아무튼.. 이번 포스트는 강의를 목적으로 한 게 아니기 때문에 더 이상 설명은 구글링을 하길 바란다.

🛠️ 이번 프로젝트에 필요한 라이브러리들

"dependencies": {
"@fortawesome/fontawesome-svg-core": "^6.4.0",
"@fortawesome/free-brands-svg-icons": "^6.4.0",
"@fortawesome/free-regular-svg-icons": "^6.4.0",
"@fortawesome/free-solid-svg-icons": "^6.4.0",
"@fortawesome/react-fontawesome": "^0.2.0",
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"css-module": "^1.1.4",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.14.2",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
}

오늘 웹 화면을 구성한 부분에서 설치된 라이브러리들이다.
일단 FontAwesome의 아이콘들을 사용하기 위해서 fornawesome 관련 라이브러리를 설치한다.

나는 개인적으로 분할 할 수 있는 코드는 모두 분할 하는 것을 선호한다.
이렇게 작업해야 나중에 수정하기도 편하고, 찾기도 편한 느낌이라서..
아무튼 CSS 파일을 한 곳에서 수정하지 않고, 각 컴포넌트마다 CSS를 적용시켜주기 위해서 css-module을 설치한다.

css-module이란?

리액트 프로젝트에서 컴포넌트를 스타일링 할 때, CSS 클래스가 중첩되는 경험이 있을 것이다.
이를 방지하기 위해서 css-module을 사용하면, 자동으로 css를 사용할 때 클래스 이름을 고유한 값으로 만들어주어 중첩되는 현상을 방지해준다.

header.module.css
------------------
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
}

위 처럼 그냥 파일명을 blahblah.module.css로 설정해주기만 하면 된다.

import styles from "./header.module.css";
#
 <section className={styles.header} />

이렇게 className 만 js 코드로 넣어주면 적용된다.
자동으로 클래스 명을 고유한 값으로 지정해준다.

그리고 velog의 페이지 주소를 확인하면 기본 페이지가 "velog.io/" 이고, 이 화면은 현재 트렌딩 포스트 화면이 나온다.

최신 아이콘을 클릭하면 주소가 "velog.io/recent" 로 변하면서, 가장 최신 포스트 화면이 나오게 된다.

이렇게 주소를 바꿔주기 위해 "react-router-dom" 라이브러리를 설치한다.

주소를 변환하는 방법 - 라우팅

라우팅이란 사용자가 요청한 URL에 맞는 페이지를 보여주는 기술이다.
react-router-dom은 리액트에서 가장 많이 쓰이는 라우팅 관련 라이브러리이다.
react-router는 신규 페이지를 불러오지 않는 상황에서 각각의 url에 따라 선택된 데이터를 하나의 페이지에서 렌더링 해주는 라이브러리이다.

📚 리액트는 SPA (Single Page Application) 방식이다.

리액트는 기존의 웹 페이지 처럼, MPA (Multi Page Application) 방식으로 새로운 페이지를 로드하는 것이 아닌, 하나의 페이지 안에서 필요한 데이터만 가져오는 형태이다.

👨‍💻 1일차 코딩 결과

가장 최상단 구조인 App.js 코드이다.
트렌딩 포스트와 최신 포스트를 서로 구분 짓기 위해서, 각각의 스테이트를 일단 따로 지정 해줬다. (아직 백엔드 지식이 없기 때문에 변수 정도로 지정해두자.)

BrowseRouter 로 감싸서 Header 와 Body 안에서의 라우팅이 원할하게 작동할 수 있도록 한다.

Header의 구조이다.
포스팅을 추가하는 함수를 props로 받아준다.
현재 주소를 확인하고, 어떤 함수를 사용할 것인지 결정한다.

Body의 구조이다.
각 주소마다 다른 페이지를 라우팅하기위해서 Route 엘리먼트들로 구성되어 있다.

각 페이지 마다 서로 다른 포스트가 보여진다.

오늘은 여기까지..

😱 오늘의 에로사항

• 버튼을 클릭하면 새로운 div 가 생성되도록 하는 방법

const [list, setList] = useState([]);

  const postList = list.map((item, index) => {
    return <div key={index} className={styles.postBox}></div>;
  });

  const addPost = () => {
    const newList = [...list, "Post"];
    setList(newList);
  };

• 주소에 맞는 포스트를 등록하는 방법

<Header addTrendPost={addTrendPost} addRecentPost={addRecentPost} />

2개의 프롭스를 보내주고,

  const { addTrendPost, addRecentPost } = props;
  const location = useLocation();

  const addPost = location.pathname === "/" ? addTrendPost : addRecentPost;

useLocation을 이용하여 주소를 확인, 각각에 맞는 함수를 선택한다.