전체 글
-
[CI/CD] GitHub Actions를 활용한 Next.js 프로젝트 배포 자동화(feat. cloudtype)Deploy 2023. 9. 25. 23:36
GitHub Actions란? GitHub Docs를 살펴보면 GitHub Actions 는 빌드, 테스트, 배포 파이프라인을 자동화할 수 있는 CI/CD 플랫폼이며, 레포지토리에 대한 모든 pull request를 빌드, 테스트하거나, merge된 pull request를 production에 배포하는 workflow를 생성할 수 있다고 설명하고 있습니다. GitHub Actions is a continuous integration and continuous delivery (CI/CD) platform that allows you to automate your build, test, and deployment pipeline. You can create workflows that build and t..
-
[Next.js] Route Handlers를 활용하여 storage에 이미지 업로드하기Next.js 2023. 7. 3. 23:59
Next.js의 Route Handlers를 통해 Supabase storage에 이미지를 업로드하는 기능을 구현했던 과정을 정리해보겠습니다. 먼저, 사용자가 Image를 입력하고 storage에 업로드 할 수 있는 컴포넌트를 생성합니다. // ImageForm.tsx interface ImageState { imageFile: File | null; imageSrc: string; imageUrl: string; } function ImageForm() { const [imageState, setImageState] = useState({ imageFile: null, imageSrc: '', imageUrl: '', }); const setImagePreview = async (event: React..
-
[JavaScript] Error: Multipart: Boundary not found(feat. Fetch API)Trouble Shooting 2023. 7. 1. 12:16
1. 에러 발생 이미지 파일 전송을 위해 fetch() 메서드를 활용하여 다음의 코드를 작성했습니다. const formData = new FormData(); formData.append('file', imageState.imageFile); formData.append('name', imageState.imageName); await fetch('/api/image', { method: 'POST', body: formData, headers: { 'Content-type': 'multipart/form-data', }, }).then((res) => res.json()); 코드 작성 후 이미지 파일 전송 테스트를 하던 중 아래와 같은 에러가 발생했습니다. Error: Multipart: Bounda..
-
[Next.js] next/image src 외부 이미지 URL로 설정하기Next.js 2023. 6. 22. 19:58
Next.js의 Image 컴포넌트의 src 속성을 외부 경로로 설정하게 되면 아래와 같은 에러가 발생합니다. Unhandled Runtime Error Error: Invalid src prop (...image URL) on `next/image`, hostname "...img URL hostname" is not configured under images in your `next.config.js` Next.js의 12.3.0 이후 버전에서는 next.config.js 파일에 아래와 같은 설정을 추가해주면 에러가 해결되며, 외부 경로의 이미지를 사용할 수 있습니다. // next.config.js const nextConfig = { images: { remotePatterns: [ { proto..
-
[TypeScript] Type 'string[] | undefined' must have a '[Symbol.iterator]()' method that returns an iterator.Trouble Shooting 2023. 4. 24. 23:14
1. 에러 발생 Query string을 핸들링하기 위해 spread 연산자를 활용하여 함수를 작성하던 중 아래와 같은 에러가 발생했습니다. 에러 내용 Type 'string[] | undefined' must have a '[Symbol.iterator]()' method that returns an iterator. // 에러 발생 코드 const handleFilterSelected = (type: string, id: string) => { const anotherType = type === 'note' ? 'brand' : 'note'; const prevFilterList = searchParams.get(type)?.split('|'); const newFilterList = prevFilt..
-
[Next.js] URL query string 관리하기Next.js 2023. 4. 10. 23:57
Next.js 13의 useSearchParams hook은 현재 URL의 query string을 읽을 수 있게 해주는 hook으로, read-only 버전의 URLSearchParams 인터페이스를 return합니다. useSearchParams hook의 사용 방법은 아래와 같습니다. // url: /?note=4%7C10 import { useSearchParams } from 'next/navigation'; const searchParams = useSearchParams(); console.log(searchParams.get('note')); // 4|10 console.log(searchParams.has('note')); // true console.log(searchParams.has..
-
[TypeScript] 'error' is of type 'unknown'.(TypeScript 에러 처리하기)Trouble Shooting 2023. 1. 11. 22:46
1. 에러 발생 Axios 라이브러리를 이용하여 이메일 중복 검사를 위한 API 요청 함수의 에러 처리를 위한 코드를 작성하던 중 아래와 같은 에러가 발생했습니다. 에러 내용 'error' is of type 'unknown'. // 에러 발생 코드 const emailAuthentication = async (email: string) => { try { return await axiosInstance.post('/api/v1/users/exists-email', { email, }); } catch (error) { console.log(error.response.status); // 에러 발생 } }; 이는 TypeScript의 catch절의 error 변수의 type이 unknown type으로 ..
-
[React] React Router <NavLink>를 활용한 탭 메뉴 구현하기React 2023. 1. 4. 23:32
React Router의 공식문서를 살펴보면 를 아래와 같이 설명하고 있습니다. A is a special kind of that knows whether or not it is "active". This is useful when building a navigation menu such as a breadcrumb or a set of tabs where you'd like to show which of them is currently selected. 의미를 살펴보면 는 acitve 인지 여부를 알려주는 특별한 종류의 이며, 브레드크럼 또는 현재 선택된 메뉴가 표시된 탭 메뉴와 같은 탐색 메뉴를 만들 때 유용하다는 것을 알 수 있습니다. 진행했던 프로젝트에서도 최상단의 탭 메뉴 중 현재 선택된 메뉴가..