[React] Day_31 개인 프로젝트 후기

완벽한 코드를 짰다고 생각했던 림졍(좌), 그리고 튜터 피드백 앞에 놓인 림졍의 프로젝트 결과물 (우)

 

드으디어 리액트 프로작뜨 완.

CSS..는 그래도 할만 했으나 문제는.. 말.. 안해도 아는 그놈의.. 껌...뽀...난..뚜..

((아니 export만 잘하면 된다는데... 난 그것도 못하는 바보가 되었다고.. 흑흑))

 

ㄱ...그래도 완성은 시켰다.

 

네.. 이번 프로젝트는요 무려 마감 1시간 전 즈음에.. 급하게 끝냈습니다..요.. 네...

이게 진정한 미룬이가 아닐까... (아니. 난 J인데.. 이젠.. J호소인이 된걸까... 흑흑)

이번에도 솔직히 뭐 적을건 없구요...

네... 그냥 밑에 정리할게요. 시작.

 

 

개인 프로젝트 변경사항 정리  -  명심해, 자체 하드코어 모드는 생각보다 어어어어엄청나다는걸.

지가 만든 꾀에 지가 넘어가는 중;;

 

변경사항 in src - 컴포넌트 재구조화 

 

멀리서 보면 희극이지... 안에 꺼내보면 아주 엉망진창이고 ^^...

 

기능을 우선 진짜 댕강댕강 나눈 다음,

정말 우여곡절끝에(?) 우선 처음 나누었던 부분처럼? 모든 것을 넣어주는 수정을.. (1차)

그런데..  뭔가 집어넣고 나서보니

맘에 안들어서 다시 구조 수수정... (2차)

etc 폴더 내부에  있는 친구들이 말을 안듣기 시작..

그래서 마아아아지막으로 튜터님께 자문을 구해서 또 수수수정... (3차)

(오랜만이죠? 수수수수빠노...읍...)

그렇게 거의 3일내내? 컴포넌트만 만진 것 같다.. (물론 1차-2차는 나아름 금방함. 대신 1차에서 눈물 줄줄...)

 

- 원본

src
├── btnComponents
│   └── AllBtns.jsx
├── etc
│   └── Wrappers.jsx
├── formComponents
│   └── MedalForm.jsx
├── tableComponents
│   └── MedalTable.jsx
├── App.css
├── App.jsx
└── main.jsx

 

처음에 봤을땐 정말 요소들만 댕강 해서 만들어봤는데

Wrappers.jsx (= 컨테이너) 와 App.jsx의 비중이 너무 커져버려...

어쩔수 없이 etc에 effects.jsx를 추가했다.

(이때까진 몰랐음. 대문자를 소문자로 소문자를 대문자로 엉망징창으로 해놓았던 것을..)

 

 

- 1차

src
├── btnComponents
│   └── Btns.jsx
├── etc
│   ├── effects.jsx
│   └── Wrappers.jsx
├── formComponents
│   └── MedalForm.jsx
├── tableComponents
│   ├── MedalTable.jsx
│   └── TableEffects.jsx
├── App.css
├── App.jsx
└── main.jsx

 

 

그렇게 나온 1차... 일단 매우 나빴다.

저렇게 일단 해놓고 기능들 다 우겨넣었더니

자꾸 안뜨고 오류나고 난리란 난리부르스를 아주그냥.. 주르륵...

결국 etc에 있던 내용들을 전부 상위폴더로 꺼내주고..

이렇게 내야겠다 싶어서 결국 내버린 2차는 아래와 같다.

 

- 2차

src
├── btnComponents
│   └── Btns.jsx
├── formComponents
│   └── MedalForm.jsx
├── tableComponents
│   ├── MedalTable.jsx
│   └── TableEffects.jsx
├── App.css
├── effects.jsx
├── Wrappers.jsx
├── App.jsx
└── main.jsx

 

우선 기능구현이 잘 돌아가는 것 까지 본 후,

왜 안되는지에 대해 튜터님께 여쭤보았다.

되지 않는 이유는 생각보다 간단했다고...

정말 단순 글자오류...이거나 동일선상의 폴더라 ..를 해줘야하는데 .로 해줘서

(덕분에 상속은 기억저장소에 제대로 저장했다.)

여튼 다시 정리 하고 나온 결과는...

 

- 3차 (튜터님 피드백 반영)

src
├── components
│   ├── form
│   │   ├── MedalForm.jsx
│   │   └── SubmitBtn.jsx
│   ├── table
│   │   ├── MedalTable.jsx
│   │   └── TableEffects.jsx
│   └── MedalTracker.jsx
├── utils
│   └── Effects.js
├── App.css
├── App.jsx
└── main.jsx

 

effects.jsx 의 경우, JS 문법을 따르기 때문에, .js 확장자로 변경 후

utils(대체로 함수만 넣어두는 폴더)를 따로 생성하여 집어넣어주었다.

또한 보다 편하게 볼 수 있도록 나머지 컴포넌트를 병합,

form과 table로 나누어 해당 부분에 맞는 컴포넌트를 집어넣어줬다.

Wrappers.jsx의 경우 그 의미 자체가 컨테이너와 같으므로...

프로젝트의 목적인 MedalTracker.jsx로 이름을 수정해주었다.

여튼.. 이렇게 껌뽀넌트 정리... 끝

(CSS의 경우, 각 요소에 className를 주어 디자인을 구현하였다.)

 

 

추가 - README 마크업 활용법 

반성하고자 올려보는 이전 프로젝트 README.

이번 필수 조건이었던 리드미 마크업.

실은.. 매번 굉장히 대충 써서 보냈던거로 기억하는데

하지만 이번만큼은 나름 정성스럽게(?) 쓰라는 조건이 생겨

어떻게 마크업을 하는지 몰랐던 와중.. 좋은 사이트를 하나 알게 되었다

바로 EasyMe라는 친구.

(쌩큐 박떤더.)

 

좌측에 글을 작성 후 스타일을 적용하면 우측의 미리보기를 통해

README가 어떻게 출력되는지 알 수 있다.

직접 마크다운 문법을 찾지 않고도 빠르게  작성할 수 있어

타임어택을 하는 나에게 있어 정말 단비같은 존재였다고.. 어흑흑

(링크) - 바로가기

 

근데 진짜 시간이 없어서 너무 대충쓴건 아닌지.. 마음에 걸린다.

 

 

마무리 - 코드 다시 열어서.. 다시 해부해보고 싹다 복습해야지..

 

오늘 하루 요약 : 저에게 어찌 이런 시련을..

 

역대급 컨디션난조 + 컴뽀넌트의 '벽' 그리고 나의 코딩실력 한계...

건강관리야 제대로 못지키고 있던 내 잘못이라고 치지만...

진짜 이번에 실력적인 부분에서 "한계"를 맛 본 시간이었다.

머리로는 대충 코드도 이해가고... 어떤 로직으로 들어가면 좋겠다는 시뮬레이션이 굴러가지는데

막상 현실로 나온 내 결과물은 무슨... 너덜너덜해진 누더기인형st..

리액트, 다음주부터 새로운 내용에 또 들어가다보면

보기만 해서 이해가 가지 않을 부분 또한 기하급수적으로 늘어날 것으로 생각되기에...

꼭 진짜 곱씹으면서 정리해놔야지.. 물론 주석처리도..

 

 

KPT 회고

• Keep :  그래도 얼레벌레 프로젝트 완성. (역대급 타임어택)
• Problem : 기억력 3초라 프로젝트 끝날 쯤 되니.. 다시 왜 이런 로직이 짜였는지 기억이 안남..
• Try : 결과물 곱씹어보면서(+ 주석처리) 다시 한번 리마인드 하기. (주말 무조건.)

 

 

 

T H E

E N D