primavera

AlbumWall의 MVP 기능 구현을 마무리하고, 실제 웹에서 사용할 수 있도록 배포를 진행했다. 이번 프로젝트는 React + Vite 기반의 프론트엔드와 Express 서버를 함께 사용하고 있었기 때문에, 단순히 React 프로젝트만 Vercel에 올리는 것으로는 끝나지 않았다. 이번 글에서는 AlbumWall을 Vercel에 배포하면서 발생했던 문제와 해결 과정을 정리해보려고 한다.1. AlbumWall의 기존 구조AlbumWall은 사용자가 앨범이나 아티스트를 검색하면 iTunes Search API를 통해 앨범 정보를 가져오는 구조이다. 기존 로컬 개발 환경은 다음과 같았다.Browser ↓React + Vitelocalhost:5173 ↓Express Serverlocalhost:30..

🌐 웹사이트 디자인Awwwardshttps://www.awwwards.com/ 웹디자인 끝판왕.전 세계에서 디자인과 인터랙션이 뛰어난 웹사이트를 선정하는 곳이다.평범한 웹사이트보다는 독창적인 애니메이션과 인터랙션이 적용된 사례가 많아 영감을 얻기 좋다. 다만 실제 프로젝트에 그대로 적용하기에는 다소 화려한 경우도 있다. 추천고퀄리티 웹사이트를 보고 싶을 때Three.js, GSAP 같은 인터랙션 참고포트폴리오 사이트 디자인 Godlyhttps://godly.website/ 요즘 감성 사이트가 엄청 많다.최근 스타트업, SaaS, AI 서비스 등 트렌디한 웹사이트를 모아놓은 곳이다.심플하면서도 세련된 디자인이 많아 실제 프로젝트에 적용하기 좋은 레이아웃을 찾을 수 있다. 추천최신 디자인 트렌드 확인Saa..

오늘 할 것: 기능 추가!1️⃣ Hover 효과 2️⃣ 클릭해서 선택 3️⃣ 선택된 앨범 정보 표시 4️⃣ Spotify API5️⃣ 앨범 검색 6️⃣ 앨범 추가 7️⃣ LocalStorage 저장 1. Hover 효과마우스를 올린 액자만 확대되도록 구현했다. 어떤 액자를 선택할 수 있는지 직관적으로 알 수 있도록 하기 위한 기능이다.2. 클릭해서 선택클릭한 액자를 선택 상태로 변경하고, 선택된 액자만 조금 더 크게 표시하도록 구현했다.이후 선택된 앨범 정보를 표시하기 위한 기능이다. 3. 선택된 앨범의 정보를 화면에 표시하기선택된 앨범의 정보를 오른쪽 패널에 표시하도록 구현했다 선택 상태(selectedAlbum)는 App에서 관리하고 Gallery와 AlbumInfoPanel에 전달하도록 구조를..

0. 앞으로의 개발 순서✅ Canvas✅ Camera✅ Floor✅ Left Wall⬜ Right Wall⬜ 액자(AlbumFrame) ⬜ Texture(이미지) ⬜ 여러 개 배치# 갤러리답게 만들기⬜ 조명 개선 ⬜ 그림자# 인터랙션⬜ Hover⬜ 클릭⬜ 선택된 액자 강조# 실제 데이터⬜ Spotify API⬜ 검색⬜ 앨범 추가 오늘은 방을 완성하는게 목표이다. 1. Right Wall 만들기Walls.tsx를 수정한다.처음에 기획한대로 두 벽에 있는 공간이 완성되었다 2. 액자(AlbumFrame)export default function AlbumFrame() { return ( );}현재는 벽 위에 앨범만 붙어 있는 상태. 이걸 texture를 추가해서 3. ..

# 기획앨범 커버를 벽에 붙이는 사이트를 만들고 싶었다.- 각 앨범을 클릭하면 메모, 별점, 저장한 날짜가 보임.앨범 커버를 가져오는 기능은 Spotify API를 사용하면 될 것 같다. 위 이미지처럼 3D 공간 안에서 앨범 커버를 벽에 붙이는 기능을 넣고 싶었다.(나중에 이 방도 꾸밀 수 있도록 기능 추가할 예정) 이렇게 만드려면 React three fiber(R3F)를 사용해야 한다.* R3F는 Three.js를 React 문법으로 사용할 수 있게 만든 라이브러리다.방 내부도 R3F로 꾸밀 수 있음. 디테일한 기획1. 전시 중인 앨범과 보관 중인 앨범(Album Collection)을 구분한다.2. 사용자가 Collection에서 '전시하기' 버튼을 누르면 해당 앨범 커버가 벽에 붙는다.3. 벽에는..

https://github.com/react/react/issues/14920 [ESLint] Feedback for 'exhaustive-deps' lint rule · Issue #14920 · react/reactCommon Answers 💡💡💡💡💡💡💡💡💡💡💡💡💡💡💡💡💡💡💡💡💡💡 We analyzed the comments on this post to provide some guidance: #14920 (comment). 💡💡💡💡💡💡💡💡💡💡💡💡💡💡💡💡💡github.com 1. 한 줄 요약React의 exhaustive-deps 규칙은 단순한 ESLint 규칙이 아니라, Stale Closure 버그를 막고 React가 항상 최신..

[지금 무료]정보보안 패스파인더| 제주코딩베이스캠프 - 인프런 강의현재 평점 4.8점 수강생 3,693명인 강의를 만나보세요. 정보 보안과 해킹 기술에 대해 넓고 얇게 알아보아요! 정보 보안의 기초, 해킹 분야의 종류, 시스템 보안, 네트워크 보안, 애플리케이션 보안www.inflearn.com

한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지| 이정환 Winterlood - 인프런 강의현재 평점 4.9점 수강생 15,115명인 강의를 만나보세요. 개념부터 독특한 프로젝트까지 함께 다뤄보며 자바스크립트와 리액트를 이 강의로 한 번에 끝내요. 학습은 짧게, 응용은 길게 18시간 분량www.inflearn.com

♦️백트래킹(Backtracking)에 활용모든 경우를 탐색하지만, 가능성이 없는 경로는 미리 포기한다. 쓸데없는 재귀 호출을 줄여서 속도를 높일 수 있다. 예시 문제 [N-Queen] : N×N 체스판에 N개의 퀸을 놓을 수 있는 경우의 수를 구하라. 단, 퀸은 같은 행, 열, 대각선에 놓일 수 없다. 1. 백트래킹한 줄씩 퀸을 배치하면서 모든 가능한 경우를 탐색만약 조건을 만족하지 않으면 즉시 탐색을 중단 (Pruning)2. 프루닝같은 열이나 같은 대각선에 퀸이 있으면 가지치기!def is_safe(row, col, queens): """현재 (row, col)에 놓을 수 있는지 체크""" for r, c in enumerate(queens): # 이전에 놓은 퀸들의 위치 ..

브루트 포스 (Brute Force)가능한 모든 경우를 탐색하는 것. 그렇기 때문에, 코딩 문제를 풀 때 시간 초과가 날 가능성이 높다.따라서 필요 없는 탐색을 줄여야 한다. 프루닝(Pruning)Pruning(가지치기)는 불필요한 탐색을 미리 제거하여 탐색 공간을 줄이는 기법이다. 답이 될 가능성이 없는 경로는 더 이상 탐색하지 않고 가지를 쳐버린다.    코딩 문제 풀 때1. 먼저 브루트포스로 해결 해보자2. 시간 초과가 나면 Pruning을 적용하여 탐색 공간을 줄이자.