React Blog

배포링크: https://minkyeongj.github.io/Refactoring-blog/

주요 해결 과제

• 기존 HTML/CSS 파일을 이용하여 React 작업을 해보세요.

1. 컴포넌트 만들기
2. Router를 사용하여 페이지 라우팅 처리하기
3. state 처리를 통해 header 버튼 바꾸기
4. 더미 데이터를 가져와 게시글, 블로그 정보, 유저정보 뿌려주기

프로젝트 진행 과정

v1.4.0 - Router v5에서 v6 형식으로 수정, 파일 구조 변경, styled-component 포맷 변경

• Router v5에서 v6 형식으로 수정
  • Switch에서 Routes 형식으로 변경
• 페이지는 pages로 컴포넌트는 components로 파일 분리

v1.3.0 - 로그아웃/로그인 버튼 누를 시 상태변화

• 하위 컴포넌트에서 상위 컴포넌트에게 데이터 넘기기
  • 참고글 A
• onClick을 사용하여 로그인 상태 변환

v1.2.0 - css를 styled-conponent로 리팩토링

• Author.jsx 컴포넌트 생성
  • 스타일 컴포넌트 작성시 중복되는 부분 발견으로 컴포넌트화

사용 기능

1. Conditional Rendering

• 로그인 상태에 따른 Header 변화
• 인프런 리액트 강의 참고

이슈

• Banner.jsx 컴포넌트를 만들어 메인페이지와 포스트페이지 다르게 나타내기

• 글 중복 출력
• Author와 Category 마진 이슈

v1.1.0 - 리액트로 동작하게 리팩토링

사용한 방법들

1. 이미지 경로 찾기

• <img src={require('./src_assets/logo192.png').default}/>
• public 폴더안에 폴더를 만들고 이미지 파일 넣은 후 경로 작성하기

2. 날짜 문자로 나타내기

• 참고글A

이슈

• profile-img가 {require().default}로 작성하면 동작하지 않음

• json data 사용하기

  • 참고글

• TypeError: Cannot read property 'map' of undefined

  • data.posts.map() => data.posts && data.posts.map()

• props 받을 때 {} 하기

• 페이지 주소만 바뀌고 페이지 이동이 안될 때

  • X 참고글A
  • O 참고글B
    • index.js의 <React.StrictMode/>를 제거해주니 해결
    • Strict 모드 공식문서

• map오류

  • && 사용하기

• Link로 데이터 보내기

  • React Router v6 튜토리얼
  • 리액트 라우터 정리1
  • 리액트 라우터 정리2
  • 리액트 라우터 정리3
  • Link로 props 보내기

• 게시물 역순으로 출력하기

  • data.posts.slice(0).reverse().map()
  • 얕은 복사로 원본 배열을 건드리지 않고 역순으로 출력하기

• 배포를 위한 package.json 설정 이후 작업한 파일 깨짐

• github 배포주소 home 누를 시 페이지 오류

  • <BrowserRouter basename = '/Refactoring-blog' >
  • 참고글

• SyntaxError: Unexpected token < in JSON at position 0

  • 참고글A
  • 주소 경로가 바뀌는 바람에 data.json 경로도 바뀌고 data.json 안에 저장된 이미지 경로도 바꿔주어야했으 -> 해결!

• gh-page에 이미지 경로 반영 안되는 문제 발생

  • localhost:3000 경로를 유동적으로 바뀔 수 있는 것으로 바꿔야 할 것같다는 추측
  • https://minkyeongj.github.io/Refactoring-blog/data.json으로 주소를 변경하여 해결!
  • 해결된 이유는 위 주소에 파일이 저장되어있기 때문에 로컬에서도 접근이 가능하기 때문이다.