1. LCP 경고Next.js 프로젝트에서 랜딩페이지, 로그인 페이지에 로고 이미지를 넣었더니 이런 콘솔 경고가 떴다.Image with src "/images/swith-logo.png" was detected as the Largest Contentful Paint (LCP). Please add the "priority" property if this image is above the fold.Read more: https://nextjs.org/docs/api-reference/next/image#priority경고 내용은 로고 이미지가 LCP로 추정이 되었는데 priority 속성을 넣어주지 않았다고 한다.알아보니 Next.js의 Image 컴포넌트에서 priority 속성은 이미지 로딩의 우선..

요즘 유튜브 알고리즘을 다 개발 관련된 것들로 채우고 있다...그 중에서 MCP 서버가 굉장히 핫하길래 영상 몇 개를 봤는데 입이 떡 벌어진다...이렇게 편할 수 있다고?당장 cursor로 달려가서 하나하나 설정해보기로 했다! 설정 방법도 굉장히 간단하다.먼저 사용하고 싶은 MCP 서버를 탐색한다. 나는 아래 주소에서 찾았다.https://smithery.ai/ Smithery - Model Context Protocol RegistryEnable AI agents to seamlessly interact with VS Code, enhancing their capabilities to modify files, open projects, and check extension statuses. Streaml..

싸피에서 진행했던 세 개의 프로젝트 중 첫 번째 프로젝트 말고는 초기세팅을 내가 맡아서 했었다.그 때는 단기간 소규모 프로젝트였어서1. 필요한 패키지 설치2. 코드컨벤션대로 eslint, prettier 설정3. 폴더 구조 세팅 (.gitkeep 이용)4. 필요 없는 파일들 제거, gitignore 파일 생성5. 전역 css 설정이정도로 했었던 것 같다. 이번엔 장기간(?) 프로젝트를 진행할 예정이라, 초기세팅을 꼼꼼히 하고 나중에 실무에서도 사용할 수 있도록 공부할 예정이다.우선 프로젝트를 생성해준다. npm과 타입스크립트를 이용할 예정이므로 다음과 같이 입력해준다.npx create-next-app@latest "프로젝트폴더이름" --typescript25년 4월 5일 기준 현재 Next.js는 15..

https://www.acmicpc.net/problem/1238import sysimport heapqinput = sys.stdin.readlinedef dijkstra(start, graph, n): dist = [float('inf')] * (n + 1) dist[start] = 0 heap = [(0, start)] while heap: cost, now = heapq.heappop(heap) if cost > dist[now]: continue for nxt, w in graph[now]: if dist[nxt] > cost + w: dist[nxt] = cost + w..

https://www.acmicpc.net/problem/13144import sysinput = sys.stdin.readlinen = int(input())nums = list(map(int, input().split()))left, right = 0, 0check = set()ans = 0while (left != n) and (right != n): if nums[right] not in check: check.add(nums[right]) right += 1 ans += right - left else: while nums[right] in check: check.remove(nums[left]) ..

리액트 프로젝트를 시작할 때 폴더 구조를 어떻게 설계할지 고민하는 것은 매우 중요하다. 폴더 구조는 프로젝트의 유지보수성과 확장성을 결정짓는 핵심 요소다. 프로젝트의 규모와 복잡성에 따라 적합한 폴더 구조를 선택해야 하며, 이를 통해 코드 관리가 용이해지고 협업 효율성이 높아진다. 리액트는 특정한 폴더 구조를 강제하지 않지만, 일반적으로 기능별, 파일 유형별, 또는 페이지별로 파일을 그룹화하는 방식이 널리 사용된다. 올바른 폴더 구조는 코드 가독성을 높이고, 프로젝트가 커질수록 유지보수를 쉽게 만들어준다!src/├── assets/ # 이미지, CSS, 폰트 등 정적 파일 저장├── components/ # 재사용 가능한 UI 컴포넌트 저장├── hooks/ # 커스텀 R..