목록프론트엔드 (20)

FE PARADISE

[Next.js] Error: Invalid src prop on `next/image`hostname "..." is not configure 에러 해결하기 / next.config.js 이미지 도메인 설정

Error: Invalid src prop (https://images.unsplash.com/photo-1511920170033-f8396924c348?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=774&q=80) on `next/image`, hostname "images.unsplash.com" is not configured under images in your `next.config.js` See more info: https://nextjs.org/docs/messages/next-image-unconfigured-host 프로젝트 내부에 저장해 둔 사진이 아닌 외부 ..
프론트엔드/Next.js 2023. 5. 28. 01:05
[Next.js] CORS 에러 해결하기 (api 설정하기)

사이드프로젝트를 진행하던 중 cors 에러를 만났다! 한동안 안보다가 오랜만에 보니 너무 반가워서 보내주고 싶지가 않았다 🙃 희희 강의고 뭐고 없이 검색과 공식 문서에 의존해 Next.js를 배워가던 중이라 CORS 에러 잡는게 쉽지가 않았다 😅 Next.js cors 에러 해결 검색 시 제일 많이 나오는 해법이 next.config.js rewrites 설정을 하는 방법이었다. 하지만 이방법은 나에게 도움이 되지 않았다. 이제 내가 CORS에러를 해결한 방법을 작성해보려한다. (놀랍게도 별거 아니다 🥺) api 설정 cors error 를 만나는 경우 우선 하단의 코드는 CORS 에러를 만나게 해준 수정 전 코드이다. // 예시) translator.jsx - papago 기능으로 번역된 결과를 보여주..
프론트엔드/Next.js 2023. 5. 4. 00:03
[Jest] 비동기 코드 테스트하기 Testing Asynchronous Code

return Promise test 코드 안에서 Promise를 return 하고 Jest가 Promise가 resolve될때까지 기다린다. Promise가 reject될 경우에 테스트 결과는 실패로 나오게 된다. test('promise-return', () => { return fetchData().then(data => { expect(data).toEqual({ name: 'Jinyoung', birthYear: 1994 }); }) }) fetchData 라는 { name: 'Jinyoung', birthYear: 1994 } object를 반환하는 promise함수를 가정해보면 위와 같이 테스트를 작성할 수 있다. Async/Await test('await', async () => { cons..
프론트엔드/TDD 2022. 10. 7. 22:15
CI/CD란 무엇인가?

CI/CD 개발 단계를 자동화하여 코드 통합시 생기는 문제 Integration Hell을 해결하기 위한 솔루션이다. CI CI는 Continuous Intergration 즉, 지속적인 통합이라는 뜻이다. 코드의 수정이나 새로운 기능추가가 repository에 주기적으로 빌드, 테스트 후에 merge 되는 것을 의미한다. 코드 변경사항을 주기적으로 merge해야한다. 한명의 개발자가 아닌 여러명의 개발자가 같은 프로젝트를 진행할 경우 주기적으로 merge 하지 않으면 나중에서야 코드를 merge하려할때 발생한 코드간의 충돌을 해결하기가 힘들다. 나도 한번 겪어봤던터라 git에 코드를 주기적으로 merge하는 습관을 들였다. 😅 이러한 충돌을 막기위해서 기능 개발시 작은단위로 쪼개어 역할을 분담해 개발하..
프론트엔드/TDD 2022. 10. 7. 05:26
이전 Prev 1 2 3 4 5 Next 다음