이 프로젝트에는 사연이 있다.
2024-10-08
다시 프로젝트 개발을 재개하였다.
오늘 개발한 파트는 메인 페이지의 Section2 부분이다. 대략 5시간정도 소요되었는데 디자인은 정말 간단하지만 반응형이 들어가면서 시간이 배로 걸린것 같다. 특히나 각 포인트 별로 디자인이 깔끔하게 떨어지지 않게 나와서 시간이 더 걸린것 같다. ( 특정 화면 크기에 해당하는 디자인이 없는 경우도 있어서 내가 직접 고민하여 임의로 작업을 했어야 했다. )
반응형 작업은 디자이너의 역량과 개발자의 역량 모두 중요한것 같다. 내가 더 숙련된 개발자라면 어떤 형태의 디자인이라도 빠르고 정확하게 처리할 수 있지 않을까 란 생각도 든다.
어떻게 하면 반응형 작업을 효율적으로 빠르게 작업할 지 고민해볼 필요가 있다.
프로젝트에서 새롭게 알게 된 것들
- backdrop-filter
- 화면 진입시 커지는 원 애니메이션
- shadcn ui
- svg filter
- background-origin
- background-clip
- flex-item 기본적으로 content 길이 따라감 ( <https://developer.mozilla.org/ko/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox#flex_%ED%95%AD%EB%AA%A9%EC%97%90_%EC%A7%80%EC%A0%95_%EA%B0%80%EB%8A%A5%ED%95%9C_%EC%86%8D%EC%84%B1%EB%93%A4 )
- Math.sign
- inset
- <></>에 key값을 주는 방법 <Fragment></Fragment> 사용
- https://developer.mozilla.org/ko/docs/Web/CSS/Containing_block 컨테이닝 블록 ( 왜 margin-top을 주면 부모 상단에 고정이 안되고 margin-top을 가진 요소 상단에 고정이 되지? )
- 다수의 메뉴 이름 , route, 그외 attribute를 한 곳에서 사용하여 통일되도록 처리해야한다.
- react-quill - document not found issue -> dynamic import에 대해서 공부
- Dynamic server usage: Route /admin/image-api couldn't be rendered statically because it used `request.url`
- file upload 컴포넌트