1. 프로젝트 소개
- 개발기간: 2022/05/04 ~ 2022/05/21
- 목적: 그동안 공부한 내용을 토대로 혼자서 웹페이지 구현해보기
2. 기술 스택
- 프론트엔드(html, css, 자바스크립트)
- React, Sass, 부트스트랩
3. 구현 기능
1) 좋아요 버튼 클릭 시, 좋아요 수 증가
2) 게시물 더보기 기능
- 게시물이 2줄 이상일 때, 한줄로 줄임
- 더보기 버튼 클릭하면 전체 게시물 표시
3) 댓글 모두 보기
- 댓글 숨김
- 댓글 모구 보기 클릭하면 전체 댓글 표시
4) 댓글 게시
- input창에 입력한 후, 게시 버튼 클릭하면 댓글 게시
4. 과정
- Day1 ~ Day7
1) 리액트 프로젝트 생성
- 터미널에 npm create-react-app 프로젝트명 입력
- App.js가 메인페이지
2) 부트스트랩 설치
- 터미널에 npm install react-bootstrap bootstrap 입력
- 때에 따라 특정 스타일을 사용할 때, 부트스트랩 css 파일을 요구하는 경우에는
index.html의 <head>태그 안에 css파일을 복붙하면 됨
3) 폰트어썸 세팅
- 설치
$ npm i --save @fortawesome/fontawesome-svg-core
$ npm i --save @fortawesome/react-fontawesome
위 두개는 필수적으로 설치하고
아래 3개는 사용할 아이콘에 따라 선택해서 설치하면 됨
$ npm i --save @fortawesome/free-solid-svg-icons
$ npm i --save @fortawesome/free-brands-svg-icons
$ npm i --save @fortawesome/free-regular-svg-icons
- 사용
1 FontAwesomeIcon , 사용할 이모티콘을 import하고
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faInstagram } from '@fortawesome/free-brands-svg-icons';
2 사용
<FontAwesomeIcon icon={ faInstagram } />
** 폰트어썸의 이름 규칙
원래 폰트어썸 사이트에서는 <FontAwesomeIcon icon="fa-brands fa-instagram" />으로 나와있지만,
리액트에서 사용하려면 -를 빼고, 카멜케이스로 수정해줘야함
(참고: https://www.npmjs.com/package/@fortawesome/vue-fontawesome)
4) 레이아웃 속성
- 부트스트랩 Container 사용(반응형)
<Container>
<Row>
<Col>1 of 1</Col>
</Row>
</Container>
** inline은 컨텐츠 크기 (<span>이나 <a>, <em> 태그 등)
block은 width, height 설정에 따라 ( block 엘리먼트로 <div>이나 <p>, <h1> 태그 )
inline-block은 지정안하면 컨텐츠 크기를 갖고, 크기, 패딩, 마진 주면 그에 따라 변함
5) json파일 생성
- json 파일 생성할 때, [ { "id":0, "name":"value", ... }, { "id":1, "name":"value2", ... }, ... ]
- 아이디, 게시글, 댓글 등 모든 내용을 json파일에 하드코딩함
5) json 파일에서 이미지 url 가져와서 출력(프로필 사진, 피드 사진 등등)
- fetch를 사용하려고 했는데, fetch는 서버에서 전송되는 걸 받아오는 일을 한다고 함.
- 그냥 로컬에 저장된 이미지를 받아올 때는 <img src="경로">를 사용하면 됨 -> 그런데도 실패함 ㅠㅠ....
- 해결 ① public폴더안에 images폴더 만든 후,
② 경로를 절대경로로 써줌('images/profile.jpg')
(이유: react 프로젝트에서 이미지를 저장할 때는 public 폴더에 저장해둬야 이미지 경로를 정상적으로 불러올 수 있으므로 images폴더를 public으로 옮기고 src="images/ ..." 로 입력해야 함)
5) 컴포넌트 생성
- Header, Stroy, Feeds, Recommended 컴포넌트 생성
- 각 컴포넌트에 따라 scss파일도 생성
** feeds.js 게시글 내용과 댓글이 display를 flex로 한 후, 자꾸 줄바꿈되는데 이걸 방지하고 싶음
-> css에서 white-space: nowrap;으로 설정
기존에는 flex-wrap: nowrap으로 설정했는데, flex-wrap은 전체 컨테이너를 대상으로 하는거고
div내부 요소들을 정렬하는게 아님
** css에서 justify-content: space-between;이 안먹힐 때, 그 원인은
1) if your flex items are all inflexible (flex: none or flex: 0 0 auto), and smaller than the container.
2) if your flex items are flexible, BUT can't grow to absorb all the free space, due to a max-width on each of the flexible items.
App.js
Header 컴포넌트
Stroy 컴포넌트
Feeds 컴포넌트
Recommended 컴포넌트
- Day8 ~ Day14
- Day15 ~ Day19
5. 느낀점
- 앞으로 프로젝트 시작 전에 구현할 기능과 순서를 계획하고 진행해야겠다. 어느 순간부터 이거 하다 저거 하다 중구난방으로 해서 중간에 중심을 잡는 것이 힘들었음
- 정리하는 연습하기
'front-end > clone-coding' 카테고리의 다른 글
| [React] prop drilling 문제 해결 하기 위해 redux 사용하기(예정) (0) | 2022.10.30 |
|---|---|
| [React] 리액트 이미지 엑박일 때 (0) | 2022.10.25 |