블로그 주소는 https://objective-blackwell-219591.netlify.app/
현재 프로젝트의 기술 스택은 https://github.com/wnsdudSoftkim/Tech_Blog 에서 확인 할 수 있습니다.
개인적으로 React란 언어는 가장 다루기 어려웠습니다. class 단위로 작성해야하는지 function 단위로 작성해야하는지 기준을 정해야 했고 데이터가 여기저기 뛰어다님에 따라 redux 도 그에맞춰서 연동 해야 했습니다.
우선 블로그 등 웹페이지를 제작하려면 프론트와 백엔드의 큰 틀을 봐야 합니다. 우린 큰 틀을 볼 수 있는 능력이 안되기에 제 글을 보고 있다고 생각 하겠습니다.
1. 프론트와 백엔드의 통신
여기서 Client란 사용자 즉, React 를 말하고 Server란 Django를 말합니다. 그럼 서버단과 클라이언트단 중 어떤걸 먼저 구현해야 할까요?
상관없습니다만, 개인적으로 React단에서 먼저 구축을 하며 필요한 것을 Django에 요청하는 방식으로 구현하는 것이 효과적이라고 생각합니다. 이 글에서는 Git 연동을 위해 같이 구현을 하겠습니다.
2. React 구현,Django 구현
npm 설치 후
npx create-react-app [프로젝트 이름]
pip 설치 후
pip install django
Django-admin startproject [프로젝트 이름]
여기까지 초기설정 이 완료 되었으면 다음과 같이 프로젝트 구조에 app 부분은 react 코드가 들어갈 것이고, Server로는 Django 코드가 들어갈 것 입니다.
3. React 컴포넌트 구현
npm i react-router-dom
여기서 라우터의 역활은 컴포넌트 역활에 따라 페이지 링크를 달라지게 합니다.
여기서 BrowserRouter는 HTML5의 history API를 활용하여 UI를 업데이트한다고 하고, Switch 는 path의 충돌이 일어나지 않게 Route들을 관리한다고 합니다만
하나하나 외우고 가는게 아닌 이런거구나 하며 넘어가는 느낌으로 공부하면 될 것 같습니다. 사실 예전 코딩 처음 시작할 땐 노트 1권을 손코딩으로 채우기도 했으나 어짜피 까먹습니다. ScrollToTop은 추후에 이야기 할 예정입니다. Router 안에있는 path는 내가 이동할 주소이며 component 는 내가 작성한 function 이름입니다. 예시로 Home으로 들어가보면
import React from 'react'
import Footer from './Footer'
import Header from './Header'
import ShowPost from './Post/ShowPost'
function Home() {
return (
<>
<Header />
<ShowPost/>
<Footer/>
</>
)
}
export default Home제가 작성한 Home component 안에는 Header , ShowPost , Footer 을 렌더링 하고 있습니다 또, 그 안에는 다른 것을 렌더링 할 수도 , 혹은 Header 자체를 렌더링 할 수도 있겠죠.
