210216_TIL

🍎 오늘 한 일

---

✔️ Toy - Insertion sort 
삽입정렬 알고리즘을 이용해서 배열을 순서대로 정렬하는 문제였다. 저번에 풀었던 bubble sort와 비슷한 느낌이었는데, 뭔가 그렇게 효율적인 정렬방식은 아닌것 같다는 느낌이 들었다.

✔️ React - Hooks
함수형으로 컴포넌트를 선언할 때도 상태 관리를 가능하게 해주는 Hooks에 대해 공부했다. 클래스형에서 setState를 썼던 것 처럼 함수형에서는 useState, useEffect 등이 있었다. useStates는 한 함수당 하나의 상태값을 관리하게 해줬고, useEffect는 기본적으로 렌더링 직후에 실행되며 특정작업을 실행하게 설정할 수 있게 해준다. 이 외에도 좀 더 다양한 상태를 다른값으로 업데이트 할 때 쓰는 useReducer, 연산 최적화를 위해 사용 가능한 useMemo, 만들어둔 함수를 재사용할 수 있게 해서 렌더링 성능을 높여주는 useCallback도 있었다. 여러 컴포넌트에서 비슷비슷한 기능을 쓸 때는 아예 Hooks를 커스텀해서 사용할 수도 있었다. 확실히 Hooks와 함께 함수형 컴포넌트를 사용하면 훨씬 다양한 상황에 대처할 수 있을 것 같았다.

✔️ 클론코딩 - wadiz
리액트를 이용해서 와디즈의 메인 페이지를 따라서 만들어봤다. 스프린트가 아니라서 정말 빈 파일부터 시작했는데 이렇게 해본건 또 처음이었다. 따로 API 같은게 있지는 않은 것 같아서 페이크 데이터도 직접 구성해봤는데, 어떤 정보가 필요하고 어떤식으로 구성할 지도 미리 생각해보고 데이터 모델을 구성해야 한다는 것도 느꼈다. 아직 동작하는건 아니고 데이터도 페이크 데이터를 쓰기는 했지만, 컴포넌트를 우선으로 페이지를 하나씩 조립해나가는 방식에 익숙해지기에는 좋았다.

와디즈 클론 - 메인페이지 완성본

🍎 기억할 것

---

✔️ CSS 새로알게된것
object-fit: cover;
-> <img>,<video>같은 요소의 크기를 어떤 방식으로 조절해 요소에 맞출건지 지정 (fill, contain, cover, none..)

background-position: center;
-> 배경이미지 위치 지정

relative position : 해당 HTML 요소의 기본 위치를 기준으로 위치를 설정하는 방식
absolute position : 고정 위치가 뷰포트를 기준으로 위치를 결정하는 것과 비슷하게 동작

 

🍎 더 공부할 것

---

✔️ AJAX + React