230517_TIL(solo project 진행)

🌱오늘 한 것

• solo project를 진행 했다.
  • 메인 페이지 상품 리스트 섹션, 북마크 리스트 섹션 구현
  • 상품 리스트 페이지
    • 타입 필터 버튼 구현
    • 타입 필터 버튼 클릭 시 필터 적용 되어서 리스트 리렌더

🌱기억해야할 것

• enum 사용법!

  • Enumerated type의 준말로 열거하는 타입 이라는 의미를 가짐
  • 즉, 상수 값 중에 비슷한 종류들을 묶어두는(열거하는) 용도로 쓰인다.
  • 문자열 대신, 변수로 선언해서 사용하기 때문에 오류 처리에 유리하다.
    ("자동완성"기능 이용!!)

• 상품 이미지 위에 북마크 아이콘 올리는 법(두 요소 겹치는 방법)
  : 두 요소를 div로 묶어주고, 그 div는 display: relative
  위로 겹치려는 아이콘은 absolute 속성 후 left, top 조정해 주기.

.img--div {
  position: relative;
}
.bookmark--icon {
  position: absolute;
  right: 15px;
  bottom: 15px;
}

• 헤더 컴포넌트의 햄버거 메뉴가 다른 컴포넌트 뒤로 가려지는 현상
  : 헤더 자체의 z-index 를 올려주면 해결!

🌱더 알아볼 것

• enum에 대해서 블로깅 해보자.
• some 내장 함수에 대해 알아보고, 프로젝트에 적용해 보자.

🌱한 줄 감상

진짜... 초기 구조 구상이 얼마나 중요한 것인지 뼈저리게 느낀 하루였다...
메인 페이지의 북마크 리스트의 별 아이콘이 즉각 노랑색으로 반영되지 않는 점, 상품 리스트 페이지에서 북마크 시에는 또 메인페이지 북마크 리스트에 안뜨는 상황...

시작부터 북마크 데이터의 흐름을 너무 잘못 잡은 것 같다는 생각이 들었다... 북마크 데이터는 모든 창에서 다 쓰이는데... 그래서 Redux로 수정해보기로 했다.

개발을 시작하기 전, 꼼꼼하게 데이터의 흐름이나 파일간의 관계, 구조 등에 대해 생각해보고 설계하는 습관을 들여야 할 것 같다.🥹