개요
군 전역후 작은 프로젝트로 블로그를 만들게 되었습니다. 패스트캠퍼스 올인원패키지: 프론트엔드(React) 와 올인원패키지 Node 웹 프로그래밍 독학 후 실제 코드 작성 기간은 2주 소요된 것 같습니다.
방학중 혹은 휴학중에 간단하게 공부를 하고 싶다는 분들에게 추천합니다
우리는 react, express와 더불어 router ,css를 대체하는 styled-components , 데이터를 불러오는 axios, 데이터를 저장하는 mongodb 그리고 배포까지 해봅니다.
실습 깃헙주소 = https://github.com/wnsdudSoftkim/Blog2
실습 페이지 = https://stark-hamlet-20836.herokuapp.com
아직까지 미완성 입니다 😢
프로젝트 구성
비쥬얼스튜디오 설치
비쥬얼 스튜디오 만큼 편한 에디터는 찾기 힘든듯.
군대에선 노트패드, 사지방에선 구름에서 실습 함😒
NPM 설치
실습
React를 시작할때는 CRA를 이용해 자동으로 프로젝트를 생성시켜 줍니다.CRA(create-react-app)을 통해 react 초기를 구축할 경우 이처럼 기본 파일이 설치 되기때문에 실습할때 도움이 많이 됩니다.
npx create-react-app blog
다음은 컴포넌트 별로 Router 을 활용하는 과정입니다.홈페이지의 맨 처음을 코딩해줍니다. 컴포넌트 폴더를 하나 생성해서 Home.js 파일을 작성합니다 저는 하이헬로우를 렌더링 할겁니다.
아래 명령어를 입력해주시기 바랍니다.
npm i --save react-router-dom
여기서 잠깐 ! ✔ 우리 가 만든 파일 형식은
Practice 폴더 내에 blog 폴더가 react로 돌아가므로 blog안에 모듈을 설치해야합니다.
cd ./폴더이름
그 다음 라우터 폴더에 라우터 파일을 작성해줍시다
App파일에서 Router 을 렌더링 하라고 지시하면 됩니다.
그러면 App이 실행될때 Router로 넘어가면서 Home을 보여주겠죠? 여기서 저는 Home컴포넌트에 Header과 Section Footer 컴포넌트를 넣어보겠습니다. 또한 styled-components 와 react-icons를 쓸 것 이므로 아래 명령어를 입력해줍니다
npm i --save styled-components react-icons
그리고 Header컴포넌트를 디자인 해주면 됩니다.
여기서 Link는 a태그와 비슷하다고 보시면 됩니다.
Router 부분까지 구현해보면서 styled-component도 학습하셨습니다!😉
다음은 왼쪽 버튼을 클릭시 사이드 NAV 가 나오는 로직과 axios를 통해 웹서버 통신을 해보도록 하겠습니다
