개발자 박가나

'냠냠로그' 프로젝트를 진행하는 과정에서, 튜터님께서 코드 리뷰를 해주신 내용을 정리하고자 한다.  페이지네이션과 관련된 타입을 제네릭 타입으로 선언해서 사용하기useInfiniteQuery를 이용해서 무한 스크롤을 구현하였다. ResultType을 선언해서 사용해 주었는데, 이렇게 하면 data가 FoodType[ ]으로 고정되기 때문에 다른 타입의 데이터에 대해서 페이지네이션을 적용해주려고 할 때마다 매번 ResultType을 선언해주어야 하기 때문에 비효율적이고 중복 코드가 늘어날 수 있다고 말씀해 주셨다.interface ResultType { data: FoodType[]; nextPage: number; hasMore: boolean;}const { data, fetchNextPage, ..

PWA (Progressive Web Applications)앱 설치 부담을 줄이고 웹의 보편성을 활용하려는 취지로 시작되었다. 사용자들이 앱 설치를 꺼리는 문제를 해결하기 위해서 등장한 기술로, 기존 모바일 웹과 네이티브 앱의 단점을 극복하기 위한 솔루션이다. 쉽게 말해서 웹 사이트와 네이티브 모바일 앱의 장점을 결합한 것으로, 웹 앱이지만 마치 모바일 앱처럼 동작한다. 모든 브라우저에서 동작하고, 설치가 필요없는 웹 앱처럼 동작하며, 네이티브 앱의 경험을 제공한다. 사용되는 상황모바일 웹사이트의 사용자 경험을 개선하고 싶을 때별도의 앱 설치 없이도 앱과 같은 기능을 제공해야 할 때네트워크 상태가 불안정한 환경에서 동작해야 할 때앱스토어에 앱을 등록하지 않고 빠르게 서비스를 제공하고 싶을 때 핵심 기술..

'냠냠로그' 프로젝트에서 겪은 트러블슈팅을 기록하고자 한다.  문제 발생공공데이터 API를 이용하기로 하였다. https://www.data.go.kr/data/15100070/standard.do 전국통합식품영양성분정보(음식)표준데이터국가에서 보유하고 있는 다양한 데이터를『공공데이터의 제공 및 이용 활성화에 관한 법률(제11956호)』에 따라 개방하여 국민들이 보다 쉽고 용이하게 공유•활용할 수 있도록 공공데이터(Datasewww.data.go.kr 문제없이 데이터가 받아와지는 것을 확인한 후, 검색 기능을 구현하고자 하였다. 하지만 '비빔밥'을 검색하면 '고추장비빔밥', '새싹비빔밥' 등 '비빔밥'이 포함된 데이터들도 같이 받아와야 하는데, 식품명이 정확히 '비빔밥'인 데이터만 받아오는 문제가 발생하..

패키지 매니저는 JavaScript 프로젝트에서 필요한 외부 라이브러리나 모듈(패키지)을 관리하고 설치하는 도구이다. 개발자는 require나 import 구문을 통해서 외부 패키지를 손쉽게 사용할 수 있는데 설치, 업데이트, 제거, 버전 관리 등의 작업을 직접 구현하기에는 너무 복잡하고 오류가 발생하기 쉽다. 패키지 매니저는 이러한 과정을 자동화해줌으로써 개발 효율성을 높이고 코드의 일관성을 유지할 수 있다.  npm (node package manager)2010년에 등장한 최초의 JavaScript 패키지 매니저로, Node.js와 함께 배포된다. 패키지 관리에 필요한 기본 개념과 구조를 정립하였고, JavaScript 생태계의 급속한 성장에 기여하였다.package.json 파일을 통한 패키지 메..

오늘 챌린지반 수업에서 발표하는 것을 마지막으로 그동안 시간 날 때마다 틈틈이 진행했던 '야구 캘린더' 프로젝트를 마무리 하게 되었다. https://kbo-calendar.vercel.app/ KBO Calendar kbo-calendar.vercel.app 아무래도 캠프에서 진행되는 강의와 과제를 병행하면서 남는 시간에 틈틈이 진행한 프로젝트였기 때문에, 로그인이나 CRUD 등 서비스 이용을 위해 필요한 최소한의 기능들을 문제없이 구현해 낸 것만으로도 성공적인 프로젝트였지 않았나 싶다. 또한 실제로 사용할 생각으로 만들었기 때문에, 앞으로도 계속해서 서비스를 발전시켜나갈 생각이다. 회사 다닐 때도 그렇고 캠프에서 프로젝트를 진행할 때도 그렇고 지금까지는 내가 하고 싶은 개발보다는 '이거 만들어 주세요..

'League of Legends' 프로젝트에서 겪은 트러블슈팅을 기록하고자 한다. 이번 트러블슈팅의 경우, 오류 해결이 아니라 잘못 알고 있던 개념을 바로잡기까지의 과정이다.  잘못 이해하고 있던 내용server action 방식을 사용하기 위해서 컴포넌트에 'use server'를 선언해 주었다.'use server';export default async function Champions() { const data: ChampionsType = await fetchChampions(60 * 60 * 24); return ( ... );} 그러다 문득 Next.js의 경우 기본 설정이 서버 컴포넌트이기 때문에 클라이언트 컴포넌트가 되어야 하는 경우에만 'use client'를 선언해주면 된다..

'League of Legends' 프로젝트에서 겪은 트러블슈팅을 기록하고자 한다. 이번 트러블슈팅의 경우, 오류 해결이 아니라 여러 방법 중에서 가장 효율적인 방법을 선택하기까지의 과정이다.  로테이션 데이터 불러오기route handler 방식으로 rotation 데이터를 불러오는 로직을 구현하였다.export async function GET(): Promise { const res = await fetch('https://kr.api.riotgames.com/lol/platform/v3/champion-rotations', { headers: { 'X-Riot-Token': ${process.env.RIOT_API_KEY} } }); c..

라이브러리 (Library)특정 기능을 수행하기 위해서 미리 작성된 코드의 집합으로, 필요할 때마다 개발자에 의해서 호출된다. 특징애플리케이션 제어에 대한 권한이 개발자에게 있음전체적인 구조 및 흐름을 강제하지 않음특정 작업을 수행하는데 필요한 도구 및 API 제공프로젝트 구조에 대한 제약이 적기 때문에 개발자의 필요에 따라 원하는 방식으로 통합 및 사용 가능ReactUI를 구축하기 위한 JavaScript 라이브러리단순히 UI를 구성하는데 필요한 도구를 제공라우팅, 상태 관리 등을 구현하기 위해서는 별도의 라이브러리 설치 필요  프레임워크 (Framework)애플리케이션의 전반적인 구조와 흐름을 정의하는 코드의 뼈대로, 특정한 방식으로 코드를 작성하도록 강제한다. 특징애플리케이션 제어에 대한 권한이 프..

'League of Legends' 프로젝트에서 겪은 트러블슈팅을 기록하고자 한다.  문제 발생champions 데이터를 받아와서 화면에 보여주는 기능을 구현하고 있었다. 각 champion의 이미지를 보여주기 위해 Image 태그를 사용하는 과정에서 아래와 같은 에러가 발생했다.  시행착오 1해석을 해보니 'ddragon.leagueoflegends.com'이라는 hostname이 next.config.js 파일의 images에 정의되어 있지 않아서 발생한 오류인 것으로 보였기 때문에 next.config.js 파일에 images를 정의해주었다.const nextConfig = { images: { domains: ['ddragon.leagueoflegends.com'] }};e..

Route Handler웹 어플리케이션에서 특정 경로로 들어오는 요청을 처리하고 적절한 응답을 반환해주는 역할을 한다./* src/app/api/test/route.ts */export async function GET(request: Request) { console.log("GET /api/test");}export async function POST(request: Request) { console.log("POST /api/test");}export async function PUT(request: Request) { console.log("PUT /api/test");}export async function DELETE(request: Request) { console.log("DELET..