개발 성장 일ブl

지도 api는 그동안 카카오,네이버,구글을 많이 봐서 친숙했는데, 회사에서는 Mapbox API + Mapbox GL JS를 사용하여 드론을 띄운다! 익숙해질 수 있게 사수분이 과제도 내주셨지만, 결국 해결하지못해서 매번 사수분이 힌트를 알려주셨다ㅠㅠ   Mapbox API Mapbox GL JS 목적데이터 검색 및 처리지도 시각화 및 상호작용사용 방식HTTP 요청으로 데이터 가져오기JavaScript 라이브러리로 지도 구현 Mapbox api 예시 코드// 지오코딩 API 호출async function geocodeAddress(address) { const response = await fetch( `https://api.mapbox.com/geocoding/v5/mapbox.places/$..

새로 개편되는 프로젝트는 yarn으로 되어있어서, yarn install를 입력하니 다음과 같은 어마무시한 에러가 떴다... yarn을 지웠다가 다시 설치도 하고, cursor도 껐다켰지만, 계속 yarn이 말썽이였다.찾다보니 플젝과 컴퓨터의 node버전이 달랐다nvm을 이용하여 node버전을 맞추고 yarn install을 하니 해결완료🎶

JWT이란 JSON 형식의 데이터를 안전하게 전송하기 위한 토큰 // 로그인 시 토큰 발급 const { data } = await axios.post('api/acnt/jwt/login', rq); cookieStorage.setCookie(COOKIE_ACCESS_TOKEN, data.accessToken); cookieStorage.setCookie(COOKIE_REFRESH_TOKEN, data.refreshToken); JWT 토큰 인증방식은 비밀키로 암호화함=> 해킹에 대비해 유효기간을 둠!Access Token유효기간이 짧음주로 api 통신할 때 사용Refresh Token유효기간이 길음주로 Access Token이 만료되어 갱신될 때만 사용클라 - 서버 통신1. 로그인한 유저..

회사에서 Jenkins를 사용중이여서 찾아보게되었다...! Jenkins란 CI/CD 과정을 자동화해주는 도구(간단히 말해, 자동 배달부) 직관적인 웹 기반 사용자 인터페이스를 제공하여, 대시보드를 통해 빌드 상태와 결과를 한눈에 확인가능!초기 설정 후에는 보안 구성을 즉시 수행하는 것이 필수실제 사용 예시// 개발자가 코드를 작성하고 GitHub에 올림// Jenkins가 자동으로 코드를 가져와서:1. npm install // 필요한 패키지 설치2. npm run test // 테스트 실행3. npm run build // 빌드 실행4. scp -r build/* server:/var/www/html // 서버에 배포

모노레포는 여러 프로젝트를 하나의 저장소에서 관리하는 방식으로, 대규모 코드베이스를 효율적으로 관리할 수 있는 방법 모노레포의 특징단일 저장소 : 모든 프로젝트가 하나의 저장소에 포함되어 있어, 코드베이스의 일관성을 유지할 수 있음공유 코드 : 여러 프로젝트 간에 공통된 코드를 쉽게 공유 가능ex: 유틸리티 함수나 공통 컴포넌트를 여러 프로젝트에서 사용할 수 있음일관된 버전 관리 : 모든 프로젝트가 동일한 버전 관리 시스템을 사용하므로, 변경 사항을 추적하고 관리하기 쉬움통합 빌드 및 테스트 : 모든 프로젝트에 대해 통합된 빌드 및 테스트 프로세스를 설정할 수 있어, 전체 코드베이스의 품질을 유지할 수 있음 모노레포의 장점코드 재사용성 => 유지보수 용이일관된 개발 환경효율적인 의존성 관리협업 용이성모노..

tanstack query란🤔서버 상태를 관리하기 위한 라이브러리(vs 클라이언트 상태 관리_redux,zustand등등) tanstack query 훅🪝useQueryget : R서버에서 데이터를 가져오는 데 사용결과는 자동으로 캐싱되고, 다시 같은 데이터를 요청하면 캐시에서 가져와 빠르게 보여줌데이터가 변했을 때, 자동으로 갱신(refresh)const { data: todos, isPending, isError, } = useQuery({ queryKey: ["todos"], queryFn: fetchTodos, });useMutationmodify : CUD데이터를 생성(Create), 수정(Update), 삭제(Delete)할 때 사용서버에 변경 요청을 보내고,..

패럴렐 라우트란🤔동일한 레이아웃 내에서 여러 페이지를 동시에 또는 조건부로 렌더링할 수 있는 기능사용자 경험을 향상시키고, 페이지 전환 시 더 부드러운 인터페이스를 제공예를 들어, 대시보드 같은 복잡한 UI를 만들 때 유용하게 사용 패럴렐 라우트의 장점 🌟동시 렌더링 : 여러 페이지를 동시에 렌더링할 수 있어서, 사용자에게 더 빠른 반응성을 제공유연한 구조 : 다양한 페이지를 조건부로 렌더링할 수 있어, 복잡한 애플리케이션 구조를 쉽게 관리모듈화 : 슬롯(Slot) 개념을 통해 콘텐츠를 모듈화할 수 있어, 재사용성이 높음[공식문서] Routing: Parallel Routes | Next.jsSimultaneously render one or more pages in the same view that..

SSG : 서버에서 미리 페이지를 생성하여 정적 html로 저장하고, 클라이언트가 요청시 즉시 반환=>14버전에선 디폴트(안적거나) 또는 cache:"force-cache" =>yarn build시 ssg페이지는 ㅇ static으로 표현됨 SSR : 클라이언트가 요청할때마다 서버에서 html을 생성하여 반환=>cache:"no-store" : yarn build시 ssr페이지는 f dynamic으로 표현됨 CSR  : 클라이언트에서 js를 사용해 UI를 생성하고 렌더링=>리액트 훅 사용=>"use client" 사용 ISR : SSG와 유사하게 미리 페이지를 생성하지만, revalidate 주기에 따라 서버에서 페이지를 다시 생성하여 최신 데이터를 제공=>next:{revalidate:다시 생성할 시간}

상황 🤔 lol api를 불러오는 함수작성후, 터미널에서 해당 함수를 불러와서 데이터 확인에러 👻에러는 없었지만, 데이터가 안찍힘😱😱😱 해결과정 👀api주소 확인 => 맞음!!!함수가 잘못됐나? => 아님!!!해결 🌟ㅎ... 브라우저에서 새로고침하니 터미널에 찍힘... 밥오...상황 🤔 이미지 불러오기 에러 👻 해결과정 👀다시 코드보며 생각해보니...next에서 Image태그를 쓸때 next.config.mjs에 config 써야하는걸 깜빡,, 해결 🌟상황 🤔 GET함수로 API 불러오기 에러 👻 해결과정 👀차근히 코드를 다시 확인 => 코드상에는 문제가 없음api key가 설정되어있는 환경 변수문제인가? => postman으로 확인시 데이터를 잘 불러와짐console.error..

이미지 최적화웹 성능을 개선하는 중요한 작업으로, 다음 방법들을 활용할 수 있음차세대 형식 사용: WebP, AVIF로 변환디바이스 크기에 맞는 이미지 제공: 적절한 해상도로 최적화레이지 로딩 적용: 스크롤 시 필요한 이미지만 로드블러 이미지 사용: 로딩 중에도 사용자 경험 개선*이미지 최적화 예제import Image from "next/image";export default function BookItem({...}: BookData) { return ( ... );} * 외부 이미지 로드 문제 해결외부 도메인의 이미지를 사용하려면 next.config.js 파일을 수정/** @type {import('next').NextConfig} */const nextConfig = { ..