til

더 좋은 코드를 만들어 보려고 시작한 suspense 기능이 생각보다 많은 시행착오를 동반했고, 3일간의 사투 끝에 해결방법을 알게 되었다.. 최종적으로는 useSuspenseQuery와 dynamic의 조합으로 성공했으나, 아직 해결못한 부분이 남아있어 내일 포스팅에 합쳐서 기재할 예정

기존 PokemonList의 로딩 상태를 해당 컴포넌트 내에서 처리하는 게 아닌, 컴포넌트에서는 성공한 사례만 남기고 로딩이나 에러는 외부로 위임하기 위해 분리작업 중에 suspense를 사용하는데 도저히 작동하지 않는다...새벽 4시가 넘어서야 원인을 찾았다(하루 종일 구글링만...) 의 동작시점Suspense는 컴포넌트 렌더링 시점에 작동하는데, useEffect는 컴포넌트 마운트 시점에 동작한다. 때문에 useEffect 내에서 fetch가 이미 다 이루어졌기 때문에 Suspense가 이를 감지하지 못했던 것이었다. 드디어 원인을 알았으니 내일은 해결방법을 모색해서 꼭 해결되면 좋겠다. 더불어 공부하면 할수록 React 생명주기에 대한 공부가 더 필요하단걸 절실히 체감중인데, 최종 프로젝트 전에 시..

이번주차 과제는 귀여운 포켓몬 도감을 만드는 일! next.js를 많이 사용해보지 않아 어색하고 모르는 부분도 많지만, 그만큼 트러블 슈팅 회고할 내용이 많아지니 좋은 게 아닐까? next.js는 알아갈 내용이 너무 많아서 요즘 하루하루가 새롭다. 이 글을 작성하고 있는 새벽에도 방금 전까지 오류와 싸우고 왔다...(이겼지요~)외부 이미지 사용 에러이렇게 외부 API를 사용하여 포켓몬들의 리스트들을 격자형태로 만들어주는 것이 시작이었는데, 정적인 이미지 파일이 아닌 외부의 이미지 파일을 사용하려니 아래와 같은 에러가 생겼다 왜 이런 오류가 생길까?next/image는 성능 최적화를 위해 이미지 로딩을 관리하는 컴포넌트로, 이미지 호스트를 명시적으로 지정해야 한다. 이를 통해 외부 이미지 URL을 사용할 ..

타입스크립트를 넘으니 next.js가 반갑게 맞이해준다... 이것도 얼른 해봐야지 ※ laytout.tsx에 과 는 있는데 가 없는이유  - metadata라는 정해진 이름의 변수 => 즉, 메타데이터에 의해 설정되거나, next.js로 인해 이면에서 자동으로 설정됨※ components 폴더 위치: next.js 공식문서에서는 다양한 방법의 폴더구조를 소개함. 선호되는 것은 app 폴더 밖에 위치시키는 건데, 그러면 app 폴더를 라우팅과 그에 관련된 일에만 사용할 수 있기 때문임. ※ next.js의 보호된 파일명: 이 파일명들은 app 폴더 내부에서 생성될 때만 특별한 역할을 하며, app 폴더 외부에서는 특별한 방식으로 처리되지 않음.   - page.js: 신규 페이지 생성  - layout.j..

오늘 한 일1. [개인 과제] api와 컴포넌트 useEffect 내 중복 try~catch 문 제거2. [개인과제] loading, error 상태에 따른 안내문 추가3. [연습] Next.js + typescript + tailwind css로 미니 프로젝트 시작 typescript와 next.js를 비교적 많이 사용해보지 않았고, 역시 맨땅에 헤딩하는 것이 가장 빠르게 실력을 늘리는 길 같아서 일단 무언가 시작했다. 주말까지 투자해서 무언가 의미있는 성과가 있었으면 좋겠는데, 요즘 세운 계획이 순탄하게만 굴러가지 않아 아쉬운 하루하루

매일 여러 개발 글을 탐험하다가 본 Toss Frontend Accelerator 프로그램. 정말정말 좋은 기회고 되면 좋겠다 싶지만 테스트도 있고 커피챗까지 있는 걸 봐서 지원하고, 지원한 모두에게 주어지는 테스트를 맛볼 수 있는 기회이기에 지원해 보았다.최근 기술 공부만 하느라 너무 늦게 글을 발견해서 마지막 문항을 채우지도 못하고 제출해서 마음을 이미 비웠지만, 그래도 토요일에 재밌는 테스트를 볼 수 있으면 좋겠다!! 어떤 문제가 테스트로 나올지 기대 가득한? 더 성장할 수 있을 것 같은 기회가 지원서도 제대로 마무리 못한 채 막을 내려 아쉽지만 지금 산더미처럼 쌓인 공부거리나 열심히 해야겠다..그래도 지원 문항에서 스스로를 되돌아보고, 어떤 개발자가 '잘하는 개발자'일지 고민도 해보고, 2024년..

오늘의 알고리즘으로 풀어본 문제!문제 풀이를 위한 생각1. 많은 부서의 물품 구매하려면? -> 신청한 금액이 적은 부서부터 처리2. 신청 금액 별로 정렬하려면? -> sort() 사용(오름차순) -> 시간 복잡도 n log(n)3. 예산에서 정렬된 부서별 신청 금액을 순차적으로 삭감   3-1. 예산이 소진된다면 순회 끝내기 문제 풀이처음 생각한 대로 코드로 작성하니 정상적으로 잘 작동하였다. for문을 쓸지 다른 내장함수를 사용할지 고민했는데, 3-1 예산이 소진될 경우 순회를 끝내기 위한 로직을 넣기 위해선 for문이 좀 더 효과적이라 생각하여 사용하였다.

이번주는 타입스크립트에 익숙해지는 시간인데, 하도 예전 프로젝트에서 타입스크립트 때문에 골머리를 앓았던 기억이 있어 더 열심히 살아야 하는 한 주가 될 것 같다.구현 자체는 간단해보이나, api를 타입스크립트를 적용해 가져오는 걸 연습해 보라고 하시는 건지 api 개수가 많다... 그런데 api에 필요한 값만 타입을 지정하면 될 것 같은데, 모두 한 번 연습차 써봐야 하나 고민 중이다.