본문 바로가기

전체 글

 (114)
타입지정 오류, 필요한 타입만 사용 롤 챔피언의 세부정보를 가져오는 server action 함수를 작성한 후 페이지에서 불러와 사용하는데 타입지정 중에 오류가 발생했다. 발생한오류이전에는 불러올 데이터 중 필요없는 부분까지 타입을 연습 겸 전부 적어줬었는데 해당 타입을 지정해주었을 때 계속 오류가 떴다.  이전에 선언한 타입타입선언을 조금 잘못적어준 것 같은데 fetch한 data와 계속 여러번 비교하면서 확인했는데도 어느 부분이 잘못되었는지 못찾았고 계속 헤맸다.export type ChampionDetail = { [key: string]: { id: string; key: string; name: string; title: string; image: { full: string; spri..
`next/image` Un-configured Host 개인과제 진행 중 롤 챔피언의 이미지를 가져오기위해서 아래와 같이 코드를 작성했으나 오류가 발생했다.오류 메세지를 읽어보니 src의 호스트 주소 ddragon.leagueoflegends.com 가 next.config.js 파일에 설정되어 있지 않아서 발생한 문제인 것 같았다. 오류 메세지에 조회되는 nextjs docs에 들어가보니 에러가 발생하는 이유와 고칠 수 있는 방법을 확인할 수 있었다.https://nextjs.org/docs/messages/next-image-unconfigured-host#possible-ways-to-fix-itWhy This Error OccurredOne of your pages that leverages the next/image component, passed ..
타입선언 - 인덱스 시그니처 , undefined 에러처리 🚨 문제 1불러올 데이터의 타입 선언 작성 중 반복되는 부분에서 키(이름) 만 바뀌는 경우 일때 어떻게 작성을 해야하는지 고민이 되었다."Atrox" 는 롤 챔피언 이름으로 data 객체 안에 여러 챔피언들이 들어있고 key 인 "Atrox" 부분이 바뀌면서 다른챔피언 정보들이 들어있다.{ "type": "champion", "format": "standAloneComplex", "version": "14.19.1", "data": { "Aatrox": { "version": "14.19.1", "id": "Aatrox", "key": "266", "name": "Aatrox", "title": "the Darkin Blade", "bl..
Router Handler & Server Action ■ Router Handler웹 요청 및 응답 API 를 사용해 특정 경로에 대한 커스텀 요청 핸들러를 만들 수 있게 함* 응답API (REST API : GET / POST / PUT / PATCH / DELETE)route.tsapp directory 내부에 route.ts 파일을 만나면 기본적으로 Next.js는 router handlers로 인식함! ☀︎  Pathname 으로 요청을 했을 때,  - html 반환 시 → app router - json(계산된 데이터) 반환 시 → Route handler * url path, pathname : 도메인(www.sample-web.com) 이후 따라오는 URL 부분  ■ Server Action서버에서 실행되는 비동기 함수, 서버 컴포넌트와 클라이..
렌더링 패턴 SSG, SSR, CSR, ISR ■ SSG (Static Side Generation)▸ 특징 ➜ 미리 html 파일을 만든 후 브라우저에 보여주는 형태의 렌더링 방식, 최초 빌드 시에만 생성이 됨 (* 사전에 미리 정적 페이지를 여러 개 만들어놓음 → 클라이언트가 홈페이지 요청을 하면, 서버에서는 이미 만들어져있는 사이트를 바로 제공! → 클라이언트는 표기만 함)▸ 장점 ➜ 첫 페이지 로딩 시간이 매우 짧아(TTV) 사용자가 빠르게 페이지를 볼 수 있음, SEO에 유리, CDN(Content Delivery Network) 캐싱 가능▸ 단점 ➜ 정적인 데이터에만 사용할 수 있음, 사용자와의 상호작용이 서버와의 통신에 의존하므로 클라이언트 사이드 렌더링보다 상호작용이 느릴 수 있음, 또한, 서버 부하가 클 수 있다, 마이페이지 처럼 ..
Typescript 개념 공부 🧐 느낀점오늘 타입스크립트를 처음 접했는데, 타입스크립트로 타입을 어노테이션 해줌으로써 실수없이 안정적으로 개발을 한다는 것이 어떤 뜻인지 조금 알게된 것 같다. 개발은 정말 배움이 끝이 없는 것 같고 공부하면서도 누가 이렇게 만들어낸건지, 신기한 분야라는 생각이 든다.
아웃소싱 팀 프로젝트 ⑥ - 마무리, 회고 ■  KPT 회고☀︎ Keep - 현재 만족하고 있는 부분PR에 피드백 잘 남겨준 것기획 내용을 다 구현하기 위한 업무 분담이 잘 이루어졌다.컴포넌트 별로 구분을 잘 해서 팀원과의 머지 할때 충돌이 크지 않았다.깃 컨벤션이 잘 지켜졌다.서로 배려하며 좋은 분위기의 협업이었다.발생한 문제가 팀원에게 먼저 공유가 되고, 함께 고민 후 해결했던 점이 만족스러웠다. ☀︎ Problem - 불편하게 느끼는 부분프로젝트 초기 세팅의 부족으로 팀원 간 버전 차이가 있었다.초반에 깃허브로 작업상황이 잘 공유되지 않았다.기능구현은 기획대로 구현되었지만 화면 ui에서 아쉬움이 남았다.시간이 부족해 로직분리를 모두가 경험해보지 못한게 아쉽다.공통된 컴포넌트(예-버튼)을 분리해서 재사용하지 못했다.리드미 내용이 부족한 것 같..
아웃소싱 팀 프로젝트 ⑤ - 모달창에 지도 불러오기 드래그 동작을 막아놓은 피드의 지도부분을 클릭했을 때 큰 모달창이 뜨면서 드래그, 확대축소가 가능한 지도가 출력되도록 하고 싶었다. ■ 모달 기본 틀 만들기이전에 자전거 경로를 선으로 표시한 지도와 동일한 지도를 불러오게 되므로 동일한 코드를 부모 컴포넌트에 옮겨서 함수로 감싼 뒤 피드의 지도, 모달창의 지도 각 컴포넌트에 props로 내려주었다.지도 생성함수인 showMap을 useEffect 로 감싸서 컴포넌트가 렌더링 되고 실행되도록 하였고 모달 기본 틀을 만들어 주었다.// Posting.jsxconst Posting = () => { const { kakao } = window; const [modalOpen, setModalOpen] = useState(false); // 지도 생성 함수..

티스토리툴바