프론트엔드19 [Next.js] CORS 에러 해결하기 (api 설정하기) 사이드프로젝트를 진행하던 중 cors 에러를 만났다! 한동안 안보다가 오랜만에 보니 너무 반가워서 보내주고 싶지가 않았다 🙃 희희 강의고 뭐고 없이 검색과 공식 문서에 의존해 Next.js를 배워가던 중이라 CORS 에러 잡는게 쉽지가 않았다 😅 Next.js cors 에러 해결 검색 시 제일 많이 나오는 해법이 next.config.js rewrites 설정을 하는 방법이었다. 하지만 이방법은 나에게 도움이 되지 않았다. 이제 내가 CORS에러를 해결한 방법을 작성해보려한다. (놀랍게도 별거 아니다 🥺) api 설정 cors error 를 만나는 경우 우선 하단의 코드는 CORS 에러를 만나게 해준 수정 전 코드이다. // 예시) translator.jsx - papago 기능으로 번역된 결과를 보여주.. 2023. 5. 4. [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.. 2022. 10. 7. CI/CD란 무엇인가? CI/CD 개발 단계를 자동화하여 코드 통합시 생기는 문제 Integration Hell을 해결하기 위한 솔루션이다. CI CI는 Continuous Intergration 즉, 지속적인 통합이라는 뜻이다. 코드의 수정이나 새로운 기능추가가 repository에 주기적으로 빌드, 테스트 후에 merge 되는 것을 의미한다. 코드 변경사항을 주기적으로 merge해야한다. 한명의 개발자가 아닌 여러명의 개발자가 같은 프로젝트를 진행할 경우 주기적으로 merge 하지 않으면 나중에서야 코드를 merge하려할때 발생한 코드간의 충돌을 해결하기가 힘들다. 나도 한번 겪어봤던터라 git에 코드를 주기적으로 merge하는 습관을 들였다. 😅 이러한 충돌을 막기위해서 기능 개발시 작은단위로 쪼개어 역할을 분담해 개발하.. 2022. 10. 7. TDD란? 테스트 주도 개발에 대해 TDD 개발을 마치고 예상치 못한 버그가 발생하거나 UI가 깨지는 등의 문제가 발생하는 경우가 많다. 복잡하게 짜여진 코드 속에서 문제의 원인을 항상 빠르게 찾기란 쉽지 않다. 이를 위해 사용하는 것이 바로 TDD Test-driven Development 이다. 개발 전에 테스트 코드를 작성하는 방식을 말한다. 테스트 코드 작성 -> 테스트 -> (결과: 실패) -> 테스트 통과가 가능한 코드 작성 -> 테스트 -> (결과: 테스트 통과) -> 리팩토링 위와 같은 순서를 거쳐서 TDD를 수행하게 된다. 테스트 통과가 가능할 정도로만 코드를 수정하여 다시 테스트를 하고 테스트가 통과될때까지 반복해서 수정하는 것이다. 테스트를 통과하게 되면 그 이후에 코드를 리팩토링한다. Testing 내가 짠 코드가 함.. 2022. 10. 6. 이전 1 2 3 4 5 다음
