[프리온보딩코스] 1주차 -과제2

✍알게된 것들

• API가 항상 주어질 거라고 생각하지 말기
• 깃 브랜치의 효과적인 사용법! (master에서 탈출하기)
• 리액트는 FontAwesomeIcon을 import 해야 해 (feat. npm install의 함정)
• 효율적인 상수 관리법
• 어릴적부터 난 레고를 못했어
• 아직은 어려운 styled-components
• 클래스형 컴포넌트 너어는 정말

 

🔥그래서 해보는 정리

1. API가 항상 주어질 거라고 생각하지 말기

UI 구성에 필요한 백엔드 API가 준비되지 않았을 때, 샘플로 데이터를 만들어서 작업 할 수 있어야 함 (mock data)

public/data 폴더 안에 데이터를 넣어서 관리할 수 있다.

아니면 사용하는 component 파일과 같은 level에 위치 시킨 후 import 해도 됨

💡잠깐! JSON은?
    JSON (JavaScript Object Notation) : 데이터를 주고 받을 수 있는 형식
    String을 감쌀 때 "" 만 사용해야 함

 

 

2. 깃 브랜치의 효과적인 사용법! (master에서 탈출하기)

기능별(페이지별)로 브랜치를 따로 만들어서 작업 후, sprint라는 중간관리자 같은 브랜치를 만들어서 merge 하고 conflict를 해결한다.

이 모든게 해결 된 후 master에는 금이야옥이야 키운 멀쩡한 코드들만 올라가게 된다.

 

2-1. commit message

feat : 새로운 기능 추가
fix : 버그 수정
docs : 문서 수정
style : 코드 포맷팅, 세미콜론 누락, 코드 변경이 없는 경우
refactor : 코드 리팩토링
test : 테스트 코드, 리팩토링 테스트 코드 추가
chore : 빌드 업무 수정, 패키지 매니저 수정

 

 

3. 리액트는 FontAwesomeIcon을 import 해야 해 (feat. npm install의 함정)

폰트어썸 없으면 큰일나는사람 여기🙋‍♀️

npm install에서 주의해야 할 사실은 @fortawesome 이라는 사실이다. (font가 아니다!!!)

import ReactDOM from 'react-dom'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faCoffee } from '@fortawesome/free-solid-svg-icons'

const element = <FontAwesomeIcon icon={faCoffee} />

ReactDOM.render(element, document.body)

import 및 사용은 위와 같이 하면 된다.

 

 

4. 효율적인 상수 관리법

src/constant.js 를 생성, 여기에서 상수를 관리했다.

컴포넌트에서 import 해서 사용할 수 있다.

import { PRODUCT_LIST } from 'constant'

 

 

5. 어릴적부터 난 레고를 못했어

리액트... 쪼개는게 너무 어렵다. jsp할 때도 헤더 푸터는 나눴는데 (이게 비교 대상이 되기는 하나ㅋㅋㅋㅋ) 리액트는 대체 어디까지 쪼개지는가? 조각조각 땃따따 노래만 백번은 부른 것 같은데 아직도 어렵다ㅜㅜ

 

- UI를 컴포넌트 계층 구조로 나누기

- 단일 책임 원칙 (한 가지의 작업만 하는 것이 이상적) 기억하기

 

 

6. 아직은 어려운 styled-components

styled-components는 JS에서 CSS를 사용할 수 있도록 해주는 스타일링 프레임워크이다.

 

다음에 사용해볼 것

- 확장 스타일링 : 기존의 컴포넌트에 추가적으로 스타일을 작성할 수 있다. 중복되는 코드를 줄이기에 좋은 듯

 

 

7. 클래스형 컴포넌트 너어는 정말

사실 함수형이고 클래스형이고 따지기 전에 그냥 리액트가 아직 낯설어서..^^ 우리아직 안 친한가봐

 

함수형 컴포넌트

- 함수의 문법만 알면 사용할 수 있으나

- 기능이 부족했음 (state, life cycle API 사용 불가였음)

- 하지만 최신 리액트에는 hook이 생겨서 위의 기능들을 할 수 있게 됨

 

클래스형 컴포넌트

- 조금 장황하고 문법에 대한 이해가 좀 필요하지만

- 원래부터 기능이 훌륭했고

- 일단 주요 문서들이 class형을 사용한 것이 많음 (참고자료들이)

 

서로를 잘 이해하기 위해서 2개 다 알아야 한다! 

 

 

🚀과제 후기

wow.. 갑자기 미친난이도가 됐는데 우리 조 진심 다 금메달리스트만 모여있어서 또 나만 얼레벌레얼렁뚱땅 코딩한 기분이 들었다ㅜㅜ 하지만 다시한번.. 멘토님의 말씀을 마음에 새겨야지... 안되는 개발은 없고 실력은 삽질과 고통으로부터....😭 이 고통이 얼른 지나갔으면 좋겠어요

 

그리고 이번에 깃 브랜치 사용법에 대해 배우고 많이 깨진(ㅠㅠ) 경험을 할 수 있어서 좋았다! (Special thanks to RE4CT팀원님들💕)

커밋 메세지도 조금 더 디테일하게 나눌 수 있었고 (앞으로도 잘 지키자!) 아 근데 styled component를 쓰다보니 저번에 짝님한테 피드백 받았던거 (div사랑 멈춰) 그게 좀 잘 안 된거같기도 하고... 하나를 배우면 하나를 못써먹는 사람이 됐네....

약간 지식이 코스요리처럼 끊임없이 입으로 들어오는데 위염 걸린 기분.... 소화해내라 내 위장 퐈이톙~!!

 

그리고 건강이 제일이다.. 나진짜 운동한다.. 안하면 이대로 응급실행예정

 

💖마무리하며...

I LOVE WECODE WANTED ROOT_IMPACT

 

 

👀lovely references

https://fontawesome.com/v5.15/how-to-use/on-the-web/using-with/react

Font Awesome

https://opentutorials.org/module/4058

React

https://ko.reactjs.org/docs/thinking-in-react.html

React로 사고하기 – React

https://ui.toast.com/weekly-pick/ko_20200213

리액트 어플리케이션 구조 - 아토믹 디자인 | TOAST UI :: Make Your Web Delicious!

https://opentutorials.org/module/4600

React class & function style coding