▶︎ 메인페이지
- 슬라이더 라이브러리
Slick carousel사용- class형 component 말고, function형 component 쓰기
- styled.component 사용
구현기능
- slick carousel library
- 컴포넌트 재사용
- 조건부렌더링에 따라 할인,대여 패치 구분
MainLayout.js
1. 함수형 컴포넌트로 사용하여 코드를 간결하게 만들고, hook 함수를 사용
- 목데이터 적용을 위해 useEffect 를 사용했다.
- 해당 내장Hooks를 사용함으로써 constructor 처럼 길게 로직을 사용하지 않아도 되고, 배열구조할당도 적용하여 코드를 좀 더 간략하게 할 수 있다.
2. styled.component 적용
- CSS, SCSS를 대신하여 styled.component를 적용했다.
- 슬릭라이브러리를
styled(Slick)처럼 기본 스타일 값을 가지고 와서 내 작업물에 맞게 수정해서 적용했다.
styled.component 사용이 아직 익숙치가 않다.
라이브러리를 가지고 오면 그대로 쓸 수 있을 줄 알았는데 생각보다 내 작업물에 맞춘다는게 쉽지 않았다. 위치지정이라던가..
예를 들면 carousel arrow가 화면에 렌더되야하는데 false로 되어 있어서 안보인다던가... arrow의 위치지정도 맞춰야 하여 조금 어려웠다.
그리고 라이브러리의 스타일링을 바꾸려면 nodeModule에서 해당 파일을 수정하는 것이 아니라 가지고 와서 수정해야 한다는 것을 처음 알았다.
그 이유는 nodeModule은 깃허브에 push되지 않기 때문에 내가 아무리 그 안에서 수정해도 푸쉬하면 적용이 안되기 때문이다.
문제발생
carousel을 사용하면서 정렬을 위해 slick에 display를 flex를 주었더니 width가 기하급수적으로 커지면서 화면에 아무것도 렌더가 되지 않았다.
분명 rebase 하기 전에 새로고침하고 화면렌더보고서 carousel 구현 완료했다고 생각하고서 rebase를 했다.
집가서 켜서 보니 적용이 안되서 라이브러리를 다시 삭제하고 깔아보고 편집기도 다시 껐다 켜보고, 컴퓨터도 다시 껐다 켰지만 마지막에 봤던 화면은 다시 나오지 않았다.
처음에는 rebase가 문제인가 했었다.
하나씩 뜯어보기로 했고, 분명 carousel에 문제가 있을 거로 예상하여 관련된 해당코드들을 주석처리해서 봤더니 carousel의 문제가 확실했다.
문제점을 찾은 결과 display: flex 가 범인이었다.
라이브러리의 문제점이 아니라 내가 적용하고자 했던 값이 문제였다.
구글링의 중요성과 새로고침... 코드도 꼼꼼히 봐야하는 것을 깨달았다.
https://github.com/akiran/react-slick/issues/1571
3. 컴포넌트를 재사용
-내용만 다르게 적용되는 것에 JSON file을 props로 전달하여 1개의 컴포넌트(BookSlider)로 3개의 데이터(추천,신간,발견)를 적용했다.
처음에는 하드코딩으로 하나를 만들고, 복붙으로 붙이고 수정했다.
정말 불필요한 작업으로 같은레이아웃이지만 한 컴포넌트에서 레이아웃을 수정하면 그대로 다른 컴포넌트에도 수정해야해서 어느부분이 수정이 적용 안됐는지 찾기도 힘들었다.
그리고 컴포넌트들이 많아서 아무리 직관적으로 파일이름을 적용했다고 해도 헷갈렸는데 확실히 컴포넌트 재사용으로 줄일 수 있어서 다음에는 처음부터 컴포넌트 재사용을 적용할 수 있을정도로 많이 배운 것 같다.
옵셔널체이닝
lifecycle을 따라가보면 처음에 state 초기값이 빈값이기 때문에 값이 없는 상태에서 처음 렌더링이 된다.
그래서 컴포넌트 안에 맵함수가 돌 때 undefined가 뜨는 것이다.
undefined면 맵함수가 실행 안되도록 조건을 걸어야 했었고,
{bookBox === undefined && } -> {bookBox && bookBox.map()} -> {bookBox?.map()} 으로 코드리팩토리가 되었다.
undefined인 경우가 결국 true인 경우를 뜻해서 간단히 줄였다고 생각했다.
그리고 옵셔널체이닝(optional chaining) ?.이라는 것을 알게되었는데 이것 또한 조건이 맞지 않으면 다음 코드가 실행되지 않는다.
단점은 에러를 띄우지 않기 때문에 어디서 잘못된 건지를 알 수가 없어서 남용하면 안된다고 한다.
🙋🏻♀️ Today,
두번째 프로젝트로 "리디북스" 를 클론하게 되었다.
깔끔해 보이는 메인에 너무 마음에 들어서 하고 싶었는데 마침 팀배정으로 되어 좋았다.
이번에는 처음으로 쓰는 것이 많았다.
함수형 컴포넌트, 스타일드컴포넌트, 라이브러리.. 쉽지 않았다.
아직 함수형 컴포넌트 Hook이 어려운데 떠듬떠듬 잘 해내고 있는 것 같다.
이번주에 백엔드 정아님과 통신해보면 메인페이지는 기본구현 완료다!👏👍🏻
추가구현으로 실시간 시계와 별점을 구현해보려고 한다.
그래서 시계는 만들어놨는데 새로고침을 해야지 시간이 바뀐다.
이 부분은 좀 더 고민해 봐야겠다.
별점은 백엔드로부터 rating 3을 받으면 별 5개에서 3개만 색이 바뀌도록 하려고 한다.
잘 마무리 해서 완성도가 높았으면 좋겠다!
이번에도 우리팀원들 너무 다 좋으셔서 서로 으쌰으쌰 잘 하고 있다.
항상 감사드립니다. 리디북실북실팀짱짱😍😍
