분류 전체보기
-
[Vercel] SPA 새로고침 오류 해결방법개발 프로젝트: 핀더펜 2024. 11. 8. 11:26
문제상황루트 경로가 아닌 페이지에서 새로고침할 때 404에러가 뜨는 상황 원인핀더펜의 경우 ssr을 지원하지 않으며, SPA로 구현되어 있기 때문에 어떤 경로에서 접근하든 루트 경로의 index.html 에서 리소스를 찾아야 한다. 그러나 현재 상황에서는 페이지 경로에 해당하는 위치에서 리소스를 찾으려고하기 때문에 리소스를 찾을 수 없다는 오류가 나는 것이다. 요약하면 https://fin-the-pen/home에서 새로고침하더라도 루트 경로의 index.html을 끌고와야하는데 현재는 /home에서 index.html을 찾고있어 오류가 나는 것이다. 해결 방법github pages에 react 페이지를 배포해본 경험이 있다면 동일한 문제를 겪어봤을 것이다. github pages에서 문제를 해결하기 위..
-
[react + vite + vercel] 페이지 배포하기개발 프로젝트: 핀더펜 2024. 11. 7. 13:14
Vercel이란?Next.js 개발 팀에서 만든 프론트엔드 호스팅 사이트로 배포 자동화할 수 있게 빌드,배포,호스팅 서비스를 제공한다 깃허브와 연동해 배포할 수 있기 때문에 자동으로 변경사항을 파악하고 빌드, 배포를 도와준다. 브랜치에서 작업하고 변경 내용을 push하면 vercel이 자동으로 빌드해주기 때문에 PR을 올리기 전에 빠르고 편하게 문제를 파악할 수 있다는 점이 아주 큰 장점이라고 생각한다. 왜 Vercel을 적용하나?현재 프로젝트는 AWS의 S3와 Cloud Front를 이용해 배포하고 있었다. 앱 출시가 계속해서 미뤄지고 있는 상황에서 AWS 무료 계정의 종료 기한이 다가오고 있으며, 앞으로의 유지관리를 위해서는 무료 호스팅 사이트로 넘어가는 것이 좋을 것 같다는 판단이 들었다. 배포하기..
-
프로그래머스 코딩테스트 - 과제 진행하기코딩테스트 풀이 2024. 11. 6. 22:26
문제 설명제한사항 해결방법아이디어과제 시작시간 순으로 정렬처음 부여받은 과제를 모두 시작할 때까지 반복지금 진행중인 과제와 새로 시작해야 할 과제 시간 텀 구하기진행중인 과제가 끝나지 않았다면남은 과제 스택에 삽입진행중인 과제가 끝났다면현제 과제를 answer에 삽입남은 과제 스택에서 남은 과제를 꺼내면서 남은 시간만큼 진행할 수 있는 과제 진행다음 과제 진행코드function solution(plans) { var answer = []; const stack = []; plans.sort((a, b) => a[1] left) { stack.push([now[0], nowT - left]); } else { answer.push(now..
-
프로그래머스 코딩테스트 - 연속된 부분 수열의 합코딩테스트 풀이 2024. 11. 5. 23:32
문제 설명비내림차순으로 정렬된 수열이 주어질 때, 다음 조건을 만족하는 부분 수열을 찾으려고 합니다.기존 수열에서 임의의 두 인덱스의 원소와 그 사이의 원소를 모두 포함하는 부분 수열이어야 합니다.부분 수열의 합은 k입니다.합이 k인 부분 수열이 여러 개인 경우 길이가 짧은 수열을 찾습니다.길이가 짧은 수열이 여러 개인 경우 앞쪽(시작 인덱스가 작은)에 나오는 수열을 찾습니다.수열을 나타내는 정수 배열 sequence와 부분 수열의 합을 나타내는 정수 k가 매개변수로 주어질 때, 위 조건을 만족하는 부분 수열의 시작 인덱스와 마지막 인덱스를 배열에 담아 return 하는 solution 함수를 완성해주세요. 이때 수열의 인덱스는 0부터 시작합니다. 제한 사항입출력예시 (성공한 결과는 가장 아래에 있습니다..
-
[에러] Error: EPERM: operation not permitted, unlink '...'개발 프로젝트: 핀더펜 2024. 11. 5. 17:40
사건의 발달그동안 스토리북 자동 배포를 과정에서 npm ci를 하기 전 npm install을 해야한다는 오류가 생기는 문제가 있었다. 그래서 package-lock.json을 업데이트하기 위해 npm install을 해줬다. 그로 인해 pakcage-lock.json과 yarn.lock 파일 모두 업데이트 되었고, 이걸 푸쉬한 이후로 vercel에 배포가 안되는 문제가 생겼다. 그래서 로컬에서 다시 시도를 해봤는데 yarn install이 안되는 문제를 파악했다. 현재 핀더페의 경우 storybook은 npm 으로 배포하고 vercel은 yarn으로 배포되고 있다. vercel을 도입하기 전에는 github action을 통한 자동 배포인 storybook과 github pages는 npm 으로 배포하..
-
[Next.js] next Image 컴포넌트 사이즈 경고 해결프로젝트 캠프: Next.js 과정 2기 2024. 9. 30. 01:17
Next.js를 활용해 개발하다 보면 한번쯤은 마주쳤을 경고인 Image 컴포넌트 사이즈 경고!!Image with src "..." has either width or height modified, but not the other. if you use CSS to change the size of your image, also include the styles 'width: "auto"' or 'height: "auto"' to maintain the aspect ratio.도대체 왜 생기는 거야?일단 Next.js에서 제공하는 Image 컴포넌트는 자체적으로 이미지 최적화를 제공해준다. 따라서 Next를 사용해 개발을 한다면 별도의 Image 최적화를 해주지 않아도 우리는 편하게 이미지 최적화를 적용..
-
supabase: auth로 회원가입 시 자동으로 user 데이터 추가하기프로젝트 캠프: Next.js 과정 2기 2024. 8. 26. 00:04
supabase는 보안상의 이유로 api로는 Auth 스키마를 접근할 수 없다.따라서 우리는 유저의 데이터를 사용하기 위해서는 새로운 user 테이블을 생성해야 한다. 1. userinfo 테이블 만들기반드시 설정해야 하는 것Enable Row Level Security 활성화이걸 활성화하면 보안적인 문제가 생길 수 있기 때문에 활성화하지 않는 것이 좋다.대신 정책 설정을 하자.user_id 컬럼을 추가하고, 외래키로 설정해서 auth.users의 id와 연결한다.Action if referenced row is removed - Cascade로 설정2. function 작성하기1. SQL editorcreate function public.handle_new_user()returns triggerlan..
-
유데미, 스나이퍼팩토리, 프로젝트 캠프, Next.js 2기: 프로젝트 3주차 후기프로젝트 캠프: Next.js 과정 2기 2024. 8. 25. 23:37
진행 내용3주차에는 퍼브리싱을 마무리하고 이벤트 핸들러를 생성하는 작업을 진행했습니다. 이벤트 핸들러마이페이지 파트를 맡았기 때문에 유저의 프로필을 수정할 수 있는 이벤트 핸들러를 제작해야 했다.1. 이름 수정2. 자기소개 수정3. 하이라이트 뱃지 선택4. 스터디 태그 추가/삭제 진행 과정이름, 자기소개, 하이라이트 뱃지, 스터디 태그를 저장할 수 있는 State를 생성하고 상태를 업데이트할 수 있는 코드를 제작했다.코드 작성이 완료된 후 PR을 통해 상태와 관련된 코드를 hook으로 분리하고 updateHandler를 하나의 메서드로 관리하는 방법에 대한 피드백을 받았다. 그렇게 제작한 코드는 다음과 같다.const [profileForm, setProfilForm] = useState( initia..