[React] CSS Gallery 의 React화 일지 - 3 (06.01 ~ 06.04)

 

 

2022-06-01

 

 

• 모든 html을 jsx 문법으로 교체
• 모든 css를 styled-componets를 사용하여 하나의 js파일로 압축
• 새로운 css 항목을 등록할때 js파일로 바로 시작할 수 있도록 설계
• js파일 내부에서 styled-components를 이용하다보니 자동완성이 출력되지 않는 상황 ->
• 해결 방법으로 vscode styled-componets 확장프로그램 설치하여 문제해결

2022-06-02

 

• React 파일 배포
• 처음에는 github.io로 쉽게 배보해보려고했지만
  CSS_Effect 폴더 내부에 Css_gallery가 있어서 문제가 잇었음
  css_gallery를 따로 레포지토리에 올리는 방식을 취하고
  github.io에 올려봤으나 router 에러가 지속적으로 발생하였고
  이에대한 해결방법으로 vercel에 배포
  
  정상적으로 배포 성공
• 링크 : https://css-gallery-project.vercel.app/
• 이력서 수정 및 정리 하느라 추가작업 x

 

2022-06-03

• 작업을 하면서도 문제점이 몇가지 느껴졌던 것 정리
• main에 import와 router가 과도하게 몰리고있는 상황
• Effect, 3D, Nav, Button 별 import 해올 수 있는 js를 작성하기
• html, css로 바로 렌더링되는 화면을 볼 수 없어 매번 테스트 코드를 작성해야하므로 
• 테스트를 간소화할 수 있게 코드 정리

 

 

2022-06-04

• Route3D, RouteButton, RouteEffect, RouteNav 4종류의 js 파일을 만들어 main으로 보내는 작업 실시
• 모든 import가 main에 모여있어서 상당히 지저분해 보였음

 

 

• html, css 를 사용할때는 라이브 서버를 이용해서 손쉽게 html 렌더링을 해서 보았는데
• jsx문법으로 작성하고 난 뒤에는 계속해서 기존에 있는 Route 주소를 수정하고 확인하는 번거로운 작업이 이어졌음
• json을 이용하여 더미 test 작성 및 3D css 부분을 만들어 놓고 최근 추가 파일이라는 이름으로 현재 작업하고 있는 css 렌더링 확인 가능
• 페이지 렌더링 되는 부분도 분리하고 싶은데\
• 1차 시도는 각 렌더링 파일마다 json을 새롭게 호출하고있으므로
• 이후 Redux를 사용하여 Redux 에서만 json 데이터를 가져오고 각 js파일에서 상태관리를 해보려고함

 

다음 작업 목표 

Redux를 이용하여 json 데이터를 관리