[React]Westagram-react Intro(JS to React) 후 포인트 정리

hyeonze·2021년 12월 13일
0

JS로 구현한 페이지 React로 변환하기

  1. CRA프로젝트 src폴더 속에 pages폴더와 components폴더 생성
    pages폴더 : 독립적인 페이지
    components폴더 : 재사용되는 컴포넌트(ex.Header, Footer)
  2. pages폴더 내부에 "변환할 HTML파일명"폴더 생성(첫 글자는 대문자 ex.Main)
  3. Main폴더 안에 Main.js, Main.css 생성
  4. (main.html => Main.js 복사) && (main.css => Main.css 복사)
  5. public폴더에 images폴더 생성하고 image파일 관리(index.html을 기준으로 경로 작성)
  6. css에서 사용되는 background-image는 src/assets/images에서 관리(Main.css를 기준으로 경로 작성, css는 public접근 불가)
  7. html이었던 내용을 JSX문법에 맞게 수정해준 후 npm start

애매했던 점

  1. reset.css, common.css, variables.scss는 src/style에서 관리(reset:초기화, common:공통, variables:함께사용-변수, 코드묶음, 테마컬러 등)
  2. 폰트어썸을 index.html에서 불러오는 방법도 있지만 npm으로 설치하는 것이 좋은듯(해보기!)
  3. a태그 사용시 에러나서 일단은 span으로 수정(라우터 학습 후 수정하기)
profile
Advanced thinking should be put into advanced code.

0개의 댓글

관련 채용 정보