테스트 코드 작성을 연습해보기 위해 기존에 만들었던 Todo 프로젝트에서 App.test.tsx 파일을 생성하여 아래와 같은 테스트 코드를 작성하고 테스트 코드를 실행시키자 `Jest encountered an unexpected token` 에러가 발생했다. 에러 메시지를 잘 살펴보니 nanoid 라이브러리를 export 하는데서 에러가 발생한 것으로 보였다. import { render, screen } from '@testing-library/react'; import App from './App'; test('renders learn react link', () => { render(); const linkElement = screen.getByText(/todolist/i); expect(lin..
CORS 에러 Firebase Realtime Database 프로젝트를 생성하고 json 파일을 추가하여 초기 data를 넣어준 뒤 호기롭게 get request 를 날려보았으나 아래와 같이 CORS 에러가 발생하면서 response를 받을 수 없었다. 시도했던 방법 프론트 서버는 localhost 이며, Firebase 의 실시간 db는 당연히 localhost가 아닐테니 발생하는 에러라고 짐작했다. mock API를 사용하기 위해 프록시 서버를 구성하는 것은 맞지 않는 것 같았고, 크롬 확장 프로그램을 사용하는 것은 만약 해당 API를 여러사람과 공유해야하는 경우 모든 사람들이 확장 프로그램을 설치하고 사용해야하기에 비효율적이라고 생각하였다. 결론은 헤더를 추가하여 해결할 수 있는 방법을 찾기로 했..
Firebase Realtime Database 101. 1. 구글 파이어베이스 홈페이지에 접속 이렇게 메인 화면에 시작하기 버튼을 클릭한다. 2. 파이어베이스를 적용하기 위한 프로젝트를 추가한다. 3. 프로젝트 이름을 입력한다. 3. 구글 애널리틱스 사용 여부를 결정한다. 구글 애널리틱스는 웹에 대한 전반적인 분석 툴을 제공해주는데, 서비스 배포가 목적이 아닌 mock API 로 사용하는게 목적이므로 나는 굳이 애널리틱스를 사용하지 않고 넘어갔다. 4. Realtime Datebase 생성 여러가지 기능을 제공하지만 api 구현을 위해 realtime database 즉, 실시간 데이터베이스를 클릭해준다. 다음 화면에서 데이터 베이스 만들기를 클릭하면 생성 과정으로 넘어간다. 5. 데이터베이스 생성에 ..
위 문제는 피보나치 수열을 사용하면 쉽게 해결할 수 있다. 구글링 해보면 풀이방법과 해답 코드를 쉽게 찾을 수 있으니 문제 풀이는 넘어가려고 한다. ❌ Solution ( 85 / 100 ) 정확성 70, 효율성 15 function solution(n) { let answer = 0; const dp = Array(n-1).fill(0) dp[0] = 1 dp[1] = 2 for(var i = 2; i < n; i++){ dp[i] = (dp[i-1] + dp[i-2]) % 1000000007 } return dp[n-1]; } 피보나치 수열을 구현하기 위해 위처럼 코드를 작성했는데, 효율성 테스트를 통과하지 못했다. 구글링을 해보면 상위에 노출되는 여러 코드 역시 마찬가지였다. ✅ Solution (..
git rebase.. 부트캠프에서 처음 코딩을 배우며 팀 프로젝트를 진행했을 때 굉장히 자주 쓰던 git command 였으나 2번째 팀 프로젝트에서 모든 팀원들의 commit 이 시간 순서대로 무작위로 합쳐지면서 각 브랜치에서 작업했던 모든 코드들이 혼합되어 병합되면서 대혼돈의 멀티버스를 경험하였다. 프로젝트 코드를 다함께 처음부터 훑으면서 최종 코드만 남기느라 하루종일 애를 먹었고, 그 이후에는 사용하지 않게 되었다. 하지만 새로 입사한 회사에서 원활한 협업을 위해 rebase 사용을 권장하기에, 다시 한번 rebase 에 대해 학습하고 이전의 실수를 반복하지 않고 장점만 취하기 위해 이 글을 작성한다. Rebase의 단점 위 사례에서 알 수 있듯이 rebase의 단점은 commit 들간의 충돌이나..
자바스크립트에는 5가지 객체 생성 방법이 있다. 객체리터럴 Object 생성자 함수 생성자 함수 Object.create 메서드 클래스(ES6) 객체 리터럴은 직관적이고 간편하게 객체를 생성할 수 있는 생성 방식(표기법)이다. 하지만 객체 리터럴은 각각 하나의 객체만 생성하므로 아래 예시와 같이 동일한 프로퍼티를 갖는 객체를 여러 개 생성해야하는 경우 매번 동일한 프로퍼티를 반복해서 작성해야하므로 비효율 적이다. const user = { name: 'kim', id: 'kimabc' } const user2 = { name: 'lee', id: 'mrlee' } 생성자 함수와 클래스 생성자 함수와 클래스는 프로퍼티 구조가 동일한 여러 개의 객체를 간편하게 생성할 수 있다. 생성자 함수 자바스크립트의 생..
💡 본 포스팅은 NextJs 프로젝트를 배포 과정을 소개하는게 아니라, 배포 과정에서 겪은 에러들을 소개하고 해결 방법들을 기록하기 위한 글입니다. 배포 방법을 찾으시는 분은 뒤로가기 버튼을 눌러주세요. 에러 환경 기존에 Vercel 을 활용하여 배포 했던 프로젝트를 Github pages 로 배포 플랫폼을 변경하는 과정에서 발생 이전에 진행했던 사이드 프로젝트를 Vercel을 사용하여 배포하고 가비아에서 구매한 도매인을 연결했었다. 한달 반쯤 지났을까 아래와 같은 경고 메시지를 받았다. 아무래도 각 페이지에 작게는 10여개 많게는 수백개의 이미지를 랜더링 하다보니 image source의 갯수 제한을 초과했던 모양이다. 한동안 채용과제를 진행하느라, 아무런 조치를 못했었는데 5차례 경고 메시지가 온 후..
출처 : 백준 온라인저지 - 1004번: 어린왕자 로직을 구하기 전에 먼저 점과 점 사이의 거리 공식을 알아야 한다. 좌표평면 위의 두 점 A(x, y), B(x1, y1) 가 존재한다고 할 때, 이 두 점 사이의 거리 d 는 아래와 같은 공식을 사용하여 구할 수 있다. 입력값에서 가장 첫 번째로 오는 테스트 케이스의 갯수 T 값을 구한다. 나머지 input값 데이터에서 가장 처음 오는 데이터는 좌표 값이므로 coordinate 값에 할당하고 각 테스트케이스에 주어지는 행성의 갯수를 n 값에 할당한다. 주어진 행성의 갯수만큼 테스트를 진행하기 위해 배열을 0부터 n까지 잘라내고 원의 중점과 출발점, 도착점의 각 거리를 구하고 그 결과값을 비교한다. 중점과 각 점의 거리가 원의 반지름보다 크거나 같다면 t..
❌ Solution (48 / 100 ) 프로그래머스에서는 백준과 달리 이전에 제출했던 코드를 확인할 수 없어, 생각했던 로직만 서술하고 넘어가기로 했다. 1. 재귀함수를 사용하여 각 사원별로 모든 사원들과 비교하여 근무 태도 점수와 동료 평가 점수의 총합을 비교하여 임의의 사원보다 두 점수가 모두 낮은 경우, 즉 인센티브 대상자가 아닌 사원들을 제외하고 인센티브 대상자인 사원들로만 이루어진 배열을 새로 만들었다. 2. 이때 완호가 인센티브 대상자가 아닐 경우에 한하여 -1을 return 하고, 3. 그렇지 않은 경우 인센티브 대상자 배열을 반복문을 사용하여 index 값이 1인 인자부터 index 값이 0인, 가장 첫 번째에 위치하는 인자와 두 점수의 합을 비교하여 index 0의 인자보다 합이 큰 경..
프로젝트 개발환경을 세팅하면서 가장 먼저 설정하는 것이 ESLint와 Prettier이다. 다수의 프로젝트를 진행하면서 본인 역시 ESLint와 prettier를 설정하는 경험을 했지만, 제대로 된 이해 없이 구글링으로 나오는 코드들을 복붙하여 사용하였다. 본 포스팅은 ESLint와 Prettier 를 좀 더 깊이 있게 이해하여 활용능력을 높이고 Custom하여 사용할 수 있는 방법을 익히고자 작성하였다. ESLint와 Prettier은 무엇인가? ESLint는 linter로써 문법 상의 오류를 방지하고 일관된 코드 스타일로 코드가 작성될 수 있도록 도와주며 Prettier는 formatter로써 코드 스타일을 통일하고 교정하기 위해 사용한다. 다시 말해 "ESLint는 코드 퀄리티를 보장해주는 도구이며..
