혼자 적어보는 노트

객체의 key를 type으로 분리하기 프로젝트에서 type을 지정하는 파일들을 분리하던 중 조금 불편한 부분이 생겼다. // Icon/types.ts export const ICON_URLS = { heart: '/assets/icons/heart.svg', bookmark: '/assets/icons/bookmark.svg', arrow: '/assets/icons/arrow.svg', calendar: '/assets/icons/calendar.svg', marker: '/assets/icons/marker.svg', route: '/assets/icons/route.svg' }; export type IconName = 'heart' | 'bookmark' | 'arrow' | 'calendar' ..

next/image Next.js 공식문서 : next/image Next.js에서는 이미지최적화를 위해 Image 컴포넌트를 제공한다. 장점? - Loader를 사용하여 url을 커스터마이징 할 수 있다. - 자동으로 Lazy Loading을 제공해준다. - 이미지 캐싱도 자동으로 해준다. - 지정된 곳에서만 이미지를 받아오게 할 수 있다. 필수 Props로는 src를 작성해야 하고 layout이 fill이거나 정적으로 import 해오는 이미지를 제외하고는 width, height값을 필수적으로 작성해주어야 한다. import NextImage from 'next/image'; import TestImage from 'public/assets/search-img.png'; // 사용 가능 이 외의 옵..

8~9일차 메인 페이지 구현 메인페이지에 필요한 컴포넌트들인 CourseItem, PlaceItem, Avatar, footer 등의 컴포넌트들을 추가로 구현하고 메인페이지에 붙였다. 컴포넌트들이 쌓인걸 보니 다른페이지 작업할 때 금방할 것 같아서 뿌듯했다.😊 API연결 없이 UI만 먼저 구현을 해서 그런지 코스/장소 목록 페이지도 금방 완성했다. Link/Image 컴포넌트 구현 Next에서 제공하는 Link와 Image컴포넌트를 조금 변경해서 다른 팀원들이 사용하기 편하게 구현해봤다. 지식이 부족해서 공식문서랑 테스트를 몇가지 진행했었는데 이번 기회에 조금은 자세히 알게 되었다. Image height auto를 설정하면서 방법을 찾기위해,,, 문서를 다시 읽게 되었고 관련된 내용은 또 찾아볼 것 같..

React Router에서의 Link랑 비슷할 줄 알았는데 작동이 잘 안되어서 다시 자세히 알아보며 알게된 점을 정리하기로 했다. Link 태그 안에 텍스트를 넣으면 태그가 자동 생성된다. Place 의 자식으로 a태그를 사용하면 a태그는 하나만 나타난다. Place 의 자식으로 styled a태그를 사용할 땐 passHref 속성을 넣어주어야 한다. Place 안넣으면 링크이동은 되지만 위와 같이 href 속성이 없다. 💡 href 속성이 없다면? 1. 사용자 경험에 좋지 않다. href가 없는 a 태그는 anchor text의 역할을 하지 않기 때문에 이동(라우팅)은 되지만, 새 창(탭)에서 열리지 않는다 2. SEO에 좋지 않다 검색엔진은 a태그의 href속성을 읽어서 페이지의 콘텐츠를 인덱싱한다...

forwardRef를 사용할때 생기는 display name에러 ✅ 해결 display name을 적어주면 된다.

6~7일차 : 컴포넌트 구현 Text 컴포넌트 이전 중간 프로젝트에서 text컴포넌트를 너무 확장성을 높여서 거의 컴포넌트를 새로 만드는거랑 비슷하게 사용해야 했어서 그부분을 조금 개선하고 싶었다. 1. 사이즈는 5개사이즈로만 지정 xs, sm, md, lg, xl로만 받도록 하여 통일감 있는 폰트크기를 사용하게 하고자 함. 기본값도 지정하면 좋을 듯 했다. (부득이한 경우 숫자로 받을 수도 있게) 2. 폰트 컬러 내부에 지정 디자인 시안에서 사용되는 폰트 컬러를 컴포넌트 내부에 미리 지정하여 좀 더 편하게 사용했으면 했다 3. style props를 받을 수 있어야 함 이 외에 기본적인 block, font-weight, ellipsis 를 props로 받고 예외가 생길 수 있으니 style props..

5일차 - 디자인 완성, 드디어 개발 디자인이 완성된 부분에 대하여 우리 팀에게 먼저 보여주고 수정할 것들을 수정했다. 디자인 작업을 하면서 많이 고민되던 부분은 팀원들과 이야기를 해서 결정했고 감사하게도 많이 변경되는 부분이 없었다. figma 정리 및 회의 회의에서 나온 내용들을 토대로 다시 한번 figma를 정리하고 개발에 들어가기로 했다. 아이콘 같은 자잘한 부분들을 변경해야 하긴 한데 디자인에 맞게 변수 세팅이나 컴포넌트 구조들을 미리 만들어놔야 다른팀원들이 수월하게 작업할 수 있기에 일단 우선순위로 컴포넌트 작업을 가져가기로 했다. Delete `␍` eslint (prettier/prettier) 이전 프로젝트때는 이런 문제가 없었는데 검색해보니 windows 환경에서 발생하는 문제여서 es..

String타입의 키로 객체에 접근하려면 type에러가 생기는데 인덱스 시그니처를 선언해주면 해결할 수 있다. interface buttonStyleInterface { [key: string]: string; } 그런데 여기서 key값에 type을 주고 싶어서 아래와 같이 작성하면 type에러가 발생한다,. interface buttonStyleInterface { [key: ButtonTypes]: string; // An index signature parameter type cannot be a literal type or generic type. Consider using a mapped object type instead } 인덱스 시그니처의 타입으로는 union type을 사용할 수 없다. ..