개발기록

프로젝트를 할 때 나오는 에러의 경우다.1. 내부 서버 에러 (클라이언트에 에러 메시지가 그대로 보여지면 안 됨)2. 비즈니스 에러 (명백하게 에러는 아니지만, 경우에 따라 에러를 반환해야 하는 것) 1. 내부 서버 에러 (5XX)내부 서버 에러는 우리가 코드 작성을 잘못해서 생기는 에러다.혹은 서버에 사용자가 많이 몰려서 트래픽이 과부하되거나 통신 시간이 지연되었을 때 생긴다. 어떤 에러이든 간에 서버 내부의 에러가 직접적으로 사용자에게 보여지는 것은 위험한데, 이것을 처리하는 것은 굉장히 까다로워 보인다.  내부 서버 에러에 대한 예시는 다음과 같다.const products = await Product.find({ _id: { $in: arrOfId } });  mongoose.Model의 find..

mongoose는 MongoDB의 ODM(Object Data Modeling) 라이브러리이다.MongoDB는 유연한 데이터 모델(NoSQL)이어서 컬럼을 추가하거나 삭제하거나, 저장할 수 있는 데이터의 형식이 정말 자유롭기 때문에 그만큼 부작용이 많다.mongoose는 스키마와 모델을 정의해야하기 때문에 조금은 형식적으로 DB를 관리할 수 있다. mongoose의 개요는 대략 이렇고, 나는 이 중 timestamp옵션과 lean() 함수에 대해 적으려고 한다. timestamp스키마 정의 시 timestamp 옵션을 사용하면 createdAt(생성 시각)과 updatedAt(갱신 시각) 값이 자동으로 저장된다.데이터가 언제 생성되었고 언제 수정되었는지에 대한 정보는 프로젝트를 하다보면 빈번히 필요로 하..

자주 사용하는 연산자는 아니지만 (?는 자주 사용하는 것 같다.) 쓰고나면 나도 유용하게 쓸 수 있을 것 같아서 써본다. 참고로 나머지는 여기서 볼 수 있다.https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators 물음표 한 개 (?, Conditional Ternary Operator)삼항 연산자라고도 불린다. (조건) ? (참일 때의 값) : (거짓일 때의 값) 이다.function getFee(isMember) { return isMember ? '$2.00' : '$10.00';}console.log(getFee(true));// 예상 출력: "$2.00"console.log(getFee(false));// 예상 출력..

개발 블로그를 쓰는 건 내가 배운 걸 정리하고 싶어서 쓰는 건데가끔은 내가 이렇게 공부를 하고 있어요 라는 보여주기 식이 되는 것 같다.그것도 있고, 글 쓰는데 시간이 너무 오래 걸리다보니 정리하고 싶은 것들은 있는데 적지 못한 것들이 많았다. ... 아무튼 여러 이유로 블로그를 아예 처음부터 시작해보려고 한다😃 CORS라는 단어에 대해 알고는 있었는데 정작 오류가 발생하니까 알아보게 되었다.(근데 이렇게 배우는 게 제일 기억에 남는 듯) CORS란 무엇인가?MDN에선 해당 단어에 대해 이렇게 말하고 있다.CORS는 다른 출처(도메인, 스키마, 포트)를 가지는 서버에 대해 리소스를 로드하는 것을 허용하는 메니즘에 기반한 HTTP 헤더이다. 또한 CORS는 실제 요청을 허용하는지 확인하기 위해 브라우저가..

Math.cos(45);// 원하는 값은 0.7071067811865475인데// 0.5253219888177297 라는 값이 나온다.Math.cos() 같은 함수를 사용할 때 각도가 아닌 라디안 단위로 값을 변환해주기 때문에 생기는 문제다.$\alpha^\circ = \frac {\alpha \ radian \ \times \ \pi}{180} $의 공식을 따르기 때문에 만약 $\cos{45}$ 를 구하고 싶다면,Math.cos((45 * Math.PI) / 180);// 로 적어주어야 한다.​

GitLab을 사실 개인적으로 프로젝트 할 때 쓸 일은 없을 것이라 생각하지만 일단 써본다. 1. 깃허브에서 토큰 발급하기Github 로그인 > Settings > Developer Settings(맨 밑) > Personal access tokens > 토큰 발급Fine-grained tokens, Tokens (classic) 둘 중에 아무거나 사용해도 괜찮다.토큰을 발급받은 적이 있다면 알겠지만 생성 후 딱 한번만 보여주기 때문에 복사해서 어딘가 저장해둬야한다. 2. GitLab에서 작업한 프로젝트를 미러링할 Github 리포지토리 생성 3. GitLab의 프로젝트를 방금 만든 리포지토리에 연결GitLab > 미러링하고자 하는 리포지토리 > 좌측 메뉴 Settings > Repository > Mi..

3주에 걸친 2차 프로젝트가 끝이 났고, 3개월에 걸친 부트캠프도 끝이 났다. 시작할 때는 정말 열심히 해야지 생각했는데 끝나고보니 아쉬운 부분도 많고, 그래도 참 열심히 했구나 싶다. 부트캠프 자체에 대한 감상을 적어보자면, 정말 빨리 지나갔다. 3개월이 그렇게 긴 시간까지는 아니긴 하지만... 가장 초반에 HTML, CSS 배울 쯤에는 이미 아는 내용이라 강의 1시간 만에 다 듣고 그랬는데, 완전 처음 접하는 개념이나, 후반에 접어들어갈수록 개념을 이해하는 데에만 꽤 긴 시간이 걸렸다. 그리고 '이 개념을 정말 하루만에 배우고 넘어간다고??' 싶은 부분도 많았다. (이건 어쩔 수 없다 부트캠프니까...) 프로젝트나 스터디를 할 때는 기본적으로 4~5시에 자게되니까 개인적으로 실력의 부족함도 느끼고, ..

프로젝트도 마지막에 접어든다. 다행인지 아닌지 나 혼자 메인 기능이 아닌 자잘한 기능들을 맡게 되어서 생각보다 빨리 기능 구현이 끝나게 되었다. 빨리 끝내서 다른 분들도 도와주고 싶은데... 아무튼 어제~오늘은 무한 스크롤을 구현하게 되었는데, 무한 스크롤의 로직 자체는 대강 알고 있었는데 직접 구현해보는 것은 처음이었다. 내가 생각하는 로직 1. 스크롤을 맨 밑으로 내림 2. 스크롤 이벤트를 감지함 3. API 요청 전달 4. 받아온 데이터를 기존 데이터에 추가 구현하고 보니 그렇게 틀린 생각은 아니었다. 무한 스크롤은 대략 이런 방식으로 일어난다! 구현으로 얘기를 넘기자면, 원래는 React Query 에서 제공하는 useInfiniteQuery 훅을 사용할 생각이었는데, 코치님께서 리액트 쿼리를 사..

맡은 부분의 기능 구현은 (아마도) 끝냈고, 중복되는 코드를 커스텀 훅으로 만들어 파일 분리를 시도했다. 그러나 문제가 있었는데, 분리한 파일 내에서 다른 훅에서 사용하는 데이터를 참조하고 있다는 점이었다. 어떤 뜻이냐면, 예를 들어 여러 페이지에서 이메일 값 입력을 받고, 입력한 이메일을 검증하고, 이메일을 통해 인증번호를 전송하는 코드를 중복으로 사용하고 있어서 useEmail이라는 파일로 분리했다. 근데 useEmail 내에서 인증번호를 전송하고, 검증하는 데 서버에 요청을 전송하고 응답 코드에 따라 모달 창의 메시지를 다르게 보여주려고 한다. 그렇지만 모달 창 상태의 경우 useModal이라는 파일로 따로 분리를 해 둔 상태이다. 이럴 경우에 모달 창 데이터를 어떻게 가져오느냐에 대해 생각했는데,..

컴포넌트 분리에 시간을 너무 많이 써서 기능 구현이 늦어졌다. (...) 오늘 안에 구현해야지~ 라고 생각은 했었는데 코치님들께서 제일 빠르게 구현되어야 할 부분이 이 부분이라고 한 걸 듣고 부담이 많아졌다. 아무튼 어떻게든 구현을 해냈고, 일단 기능 구현 후에 중복되는 코드를 분리하는 식으로 갈 것 같다. 그리고 이 글에선 페이지를 만들면서 겪었던 문제들에 대해 적어보려고 한다. 1. axios timeout 설정 const api = axios.create({ baseURL: import.meta.env.VITE_BACKEND_URL, timeout: 5000, withCredentials: true, }); 처음 axios 인스턴스를 생성할 때 timeout을 1000(1초)로 하였다. 그러나 이메..