본문 바로가기

분류 전체보기474

React 프로젝트 배포 후 에러 추적 하는 방법 (feat. sentry) 프론트 프로젝트를 배포하고 나면 사용자가 어떻게 사용하는 궁금한 경우나에러가 발생하였는데 원인을 파악하기 힘든 경우가 프로그램 운영을 하다보면 많이 발생 한다. 그런 경우 프론트엔드 개발자는 sectry라는 모니터링 툴을 사용하면 된다. 여기서는 react 프로젝트에 sentry를 연결하는 방법을 리뷰해보겠다. 우선 sentry에 로그인해주어야 한다.사이트: https://sentry.io/for/frontend/ Frontend Monitoring with Full Code VisibilitySentry’s frontend monitoring gives you full visibility into your code, so you can catch issues before they become downt.. 2024. 9. 8.
Vercel 배포 방법 (react 프로젝트 무료 배포) 사이트 접속Login – Vercel Dashboard vercel.com 회원 가입 진행 or 로그인 회원가입 or 로그인 완료  개발 진행중인 vscode로 돌아와서 터미널에 명령어 입력vercel login 만약 아래와 같이 vercel login 명령어가 에러가 발생한다면 cli를 설치 해준다. 터미널에 명령어 입력: npx vercel 계속해서 vercel login을 진행해준다.회원가입한 과정을 진행이후 로그인이 완료되면 vercel 명령어를 터미널에 입력하여 배포 진행 (나는 cli 설치하였더니 별 다른 명령어 입력 없이 배포까지 진행 되었다.)위와 같이 진행해주고 production에 만들어진 링크를 클릭하면 배포된 곳에 접속 가능하다. 다시 한번 배포하기를 원하면 명령어를 입력 해준다.n.. 2024. 9. 2.
JS 배열 정렬하기 toSorted() 함수를 이용해서 정렬을 진행하면 된다.해당 함수를 이용하여 정렬을 하면 원본 배열은 변경되지 않고 반환되는 배열만 영향이 있어서 해당 함수로 정렬하는 것을 추천한다.  원본 배열에 영향이 있으면 혹시 모를 문제가 생길 수 도 있기 때문에 사이드 이펙트 확인이 필요하다. 2024. 9. 1.
[object Object] 내용을 콘솔 출력 하는 방법 객체 배열 데이터를 확인하고 싶으면 JSON.stringify() 내장 함수를 이용하여 원하는 객체의 내용을 확인할 수 있다. https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify JSON.stringify() - JavaScript | MDNJSON.stringify() 메서드는 JavaScript 값이나 객체를 JSON 문자열로 변환합니다. 선택적으로, replacer를 함수로 전달할 경우 변환 전 값을 변형할 수 있고, 배열로 전달할 경우 지정한 속성만 결과에 포함developer.mozilla.org 2024. 9. 1.
프론트 개발자가 프로젝트 개발하는 순서?? 1. 페이지 라우팅2. 글로벌 레이아웃 설정3. 공통 컴포넌트 구현4. 개별 페이지 및 복잡한 기능 구현 이런식으로 개발을 진행 하면 될까??? 싶다. 공통을 먼저 구현하면 개별 페이지 개발 시 필요한 공통 부분을 사용할 수 있다. 2024. 8. 25.
배열 함수 예제 (forEach, includes, indexOf, findIndex, find) 1. forEach선언된 배열을 길이만큼 반복하여 콜백함수를 호출 한다.let arr1 = [1,2,3];arr1.forEach((item, idx, arr) => { console.log(item, idx, arr)});// 배열에 데이터 삽입let doubleArr = [];arr1.forEach((item) => { doubleArr.push(item*2);})console.log(doubleArr); 2. includes찾고싶은 값을 매개변수에 입력하면 해당 값이 존재하는지 확인하여 boolean(true(있을 경우) / false(없을 경우))값으로 반환et arr2 = [1,2,3];let isInclude = arr2.includes(2); // true / false 반환console.. 2024. 7. 28.