200220_TIL

🍎 오늘 한 일

---

✔️ Hooks로 CMarket만들기
라우팅까지만 구현되어있는 쇼핑 앱인 C market을 완성하는 스프린트였다. 상품 페이지에서 장바구니에 담기 버튼을 누르면, 장바구니 페이지에 해당 상품이 담기고, 또다시 누르면 수량만 올라가도록 Hooks를 이용해서 구현했다. 그리고 장바구니에서 수량을 늘리고 줄일수도 있게 하고, 삭제버튼을 누르면 한번에 삭제되도록 만들었다. 내가 처음부터 만들면 내 마음대로 함수명과 변수명을 짓고, 데이터 흐름을 구성했을텐데 함수명과 변수명이 이미 어느정도 정해져있는 상태에서 기능을 추가하다보니까 오히려 파일을 파악하는데 시간을 많이 쏟게 되었던 것 같다. 그래서 혼자했지만 뭔가 협업을 하는 느낌이 들기도 했고 다른 사람이 짜놓은 코드를 읽고 파악하는 연습도 된 것 같다.

✔️ React - 뉴스앱 만들어보기
Hooks와 뉴스API, react-router-dom 라이브러리를 이용해서 카테고리 별로 뉴스를 구별해 보여주는 간단한 뉴스 앱을 만들어봤다. 뉴스 API를 axios와 async/awiat를 사용해 비동기로 받아오고, 데이터를 모두 받아오기 전까지는 로딩페이지가 뜨도록 했다. 데이터에 카테고리도 함께 있어서 url의 쿼리부분과 카테고리를 일치시키는 식으로 구분도 할 수 있었다. 전에 어쩌다가 location 객체에 대해 알게된 적이 있었는데 경로를 파악할 때 이 객체를 직접 활용해볼 수 있기도 해서 재밌었다.

✔️ Redux 개념
 기존에는 상태 관리를 하려면 컴포넌트 내부에서 하고, 서로 전달하고 받고..연결시켜주고.. 번거로운 작업을 해야만 했다. 하지만 Redux를 쓰면 상태관리를 컴포넌트 바깥에서 할 수 있게 된다. 직접 써보지는 않고 오늘은 개념들을 쭉 훑어봤다. 일단 리덕스를 적용시키면 상태 관련 데이터들이 모두 담긴 '스토어'라는게 생긴다. 컴포넌트들의 상태를 모두 여기서 관리하는 것이다. 그리고 새 상태가 생기는 과정은 공식처럼 알아둬야 한다고 한다. Action객체 → Dispatch에게 전달 → Reducer호출 → 새로운 state생성! 이런 과정을 거치는데 대충 느낌만 알 것 같아서 얼른 직접 해보면서 제대로 알아야겠다.

 

🍎 기억할 것

---

✔️ <picture /> 태그
background-image가 가장 좋은 방법인줄 알았는데 아니어서 약간 충격적이었다.. img나 picture 태그와 object-fit 속성을 대신 사용하는 것이 반응형 이미지를 만들기에도, 최적화를 위해서도 좋다고 한다. 콘텐츠 이미지를 장식이 아닌 의미있는 HTML 컨텐츠 이미지 요소를 사용하기 위해 img, picture 태그를 쓰자!

✔️ JSON.stringify 옵션
JSON.stringify(value[, replacer[, space]])
space : 가독성 목적 JSON 문자열 출력에 공백을 삽입하는데 사용되는 String 또는 Number 객체
- Number면 공백으로 사용되는 space 수, 1~10값
- String이면 그 문자열이 공백으로 사용됨

✔️ styled-components 라이브러리
Javascript 안에 CSS를 작성할 수 있는 라이브러리인데, template literal을 써서 중간중간 간단한 조건식같은 것도 넣을 수 있고, 컴포넌트의 속성을 읽어올 수도 있다. const Component = styled` background-color: ${props => props.color}; `; 이런식으로! 진짜 CSS + Javascript라 간단한 속성은 이걸로 지정해도 따로 CSS파일을 쓰지 않아 좋을 것 같다.

 

🍎 더 공부할 것

---

✔️ Redux 예제 찾아보기, 블로깅