Code Refactoring FRONT

[KimKwon]

코드 리팩토링을 하게 된 이유

프로젝트를 시작할 당시에는, 모르는 부분들이 많았고 어떤 코드, 어떤 구조가 좋은 방향인지 잘 알지 못하는 상태였습니다.
하지만 프로젝트를 진행하면서 조금씩 더 많은 코드들을 보고 배우게 되고, 더 많은 개념들을 학습하게 되면서
기존 프로젝트 구조의 문제점을 식별하게 되었습니다. 따라서 코드 리팩토링을 해보려고 합니다 !!

왜 지금인가?

팀원의 재구성이 있었고, 다들 여름 방학이 되어 프로젝트에 더 집중할 수 있는 시기가 되었다고 판단했습니다.
프로젝트를 REBOOT 하는 것이지요 !!!!!!!!!!

어디를 뜯어 고쳐야될까요?

• 1. Assets에 있는 이미지 및 아이콘 등을 public으로 옮겨보자!
• 2. Config 의 목적을 확실히 해보자!
• 3. Redux가 너무 세분화되어있다... Ducks 구조로 갈아타보자...!!
• 4. Color와 같은 상수 값들을 별도로 관리하지 않고, Constant로 묶어서 관리해보자!
• 5. Npm... 이젠 Bye...... Yarn.... 어서와....
• 6. Readme 작성하기
• 7. Component의 구성 토론 필요함
• 8. Lint를 사용하여 코드의 규제를 가하겠노라.

[Seogeurim]

1. Assets에 있는 이미지 및 아이콘 등을 public으로 옮겨보자!

답변 : 지금으로서 이 부분은 바꿀 필요가 없다 ! 우린 잘 가고 있었다 :) 그러나 명백한 그 이유를 찾아보자 !!

글이 길어서 이슈 따로 뺐습니당 (#10 React의 Public)

[KimKwon]

좋은 정리 감사합니다.

[Seogeurim]

6. Readme 작성하기 완료 :: 피드백 해주세용 >< @KimKwon

[Seogeurim]

5. Npm... 이젠 Bye...... Yarn.... 어서와....

이슈 발행 완료 (#7)

2. Config 의 목적을 확실히 해보자!

.env 파일 생성하여 저장
React에서는 환경변수 설정할 때 앞에 REACT_APP_ 붙여줘야 한다 !!!
(https://create-react-app.dev/docs/adding-custom-environment-variables/)

[KimKwon]

4. Color와 같은 상수 값들을 별도로 관리하지 않고, Constant로 묶어서 관리해보자!
   일단 커밋은 올려놓았는데..

하나의 JS파일에서 Constant variable을 js, scss에서 공유하여 사용하도록 만들고 싶었는데,
js변수를 scss에서 공유하여 사용하기에는 제한이 있는 것 같아서

scss에서 사용하는 상수 변수들을 관리하는 파일과 js에서 사용하는 상수 변수들을 관리하는 파일로
구분해서 사용해야할 것 같다......

뭔가 더 좋은 방법이 있을 것 같아 이리저리 찾아봤지만
짧은 지식으로는 여기까지가...my best...

import * as constant from '../constant'

console.log(constant.mainColor);

이런 식으로 js에서 접근이 가능하다.

당장 상수 값을 가지는 변수들이 많이 보이지 않아, constant 파일 내에는 별다른 내용이 없다.

[Seogeurim]

음 그런 이런 방법은 어때용

util 폴더나, constants 폴더를 만들어서 그 안에 js, scss 로 목적에 따라 여러 개 넣어보는거 !!

[KimKwon]

음 그런 이런 방법은 어때용

util 폴더나, constants 폴더를 만들어서 그 안에 js, scss 로 목적에 따라 여러 개 넣어보는거 !!

Constants 폴더를 만들까 고민했었는데 그렇게 해볼게요 👍