Day11
오늘은 디자인 작업을 마치고 개발 환경설정을 하려고 한다.
create-react-app으로 프로젝트를 생성하고보니 알 수 없는 파일도 있고 폴더구조도 정리해야 할 것 같아보였다.
아직 nextjs 폴더구조에 익숙해서 src 폴더에 assets, pages, components로 폴더를 나눴다. 후에 작업하면서 변동가능성 있음.
폴더구조 정리
reportWebVitals.js
React의 성능을 체크하기 위한 파일이라고 한다. 이번 프로젝트에서는 필요없으니 삭제했다.
menifest.json
웹 애플리케이션의 정보를 JSON 텍스트파일로 제공하는 파일. 이것도 역시 삭제.
이미지나 폰트는 어디에 넣어야 할까?
src 폴더 속 jsx 파일은 public 폴더에 접근할 수 있지만 css 파일은 접근할 수 없다.
그래서 src 폴더 안에 소스를 담은 폴더를 만들어서 따로 관리하는것으로 해결할 수 있다.
src 폴더에 담으면 import 해서 불러올 수 있고 public에 담으면 상대경로로 불러올 수 있다.
그러면 사용할 소스는 기본적으로 public에 저장하고 css에서 사용되는 이미지는 src에서 따로 관리하는 것으로 하면 될 것 같다!
어떻게 폴더구조를 만드는지는 사람마다 제각각이라 나에게 편한 방법으로 짜는 게 좋을 듯하다.
상세 설정
React Router
a 태그는 페이지를 새로 불러오기 때문에 사용하지 않고, SPA(Single Page Application)로 업데이트 되는 부분만 불러오게 하기 위해 React Router를 사용한다.
React-Router는 신규 페이지를 불러오지 않는 상황에서 각각의 url에 따라 선택된 데이터를 하나의 페이지에서 렌더링 해주는 라이브러리 라고 볼 수 있다.
이것을 App.js에 적용할 것이다.
svg
이미지 확장자를 svg로 사용하기로 했다. svg는 깨지지 않고, 파일의 크기가 작다.
그리고 이미지가 어느 배율에서건 깨지지 않는 상태를 유지하게 하고 싶었다.
내가 아이콘들을 직접 만든 이유이기도 하다.
Favicon
세팅하면서 favicon의 존재를 알게 됐다.
우리 홈페이지에도 적용하면 좋을 것 같아서 ico 파일로 변환해서 바로 적용해봤다.
favicon은 16x16 사이즈가 보통이다.
뭐라도 있으니까 귀엽다 ㅎㅎ
참고 사이트
CRA를 활용한 리액트 앱 만들기
React Router v6 튜토리얼
[React] 6. React Router (리액트 라우터) 사용하기
