운좋개

0 🟡 Forbidden 에러가 발생했어요. 이전 글에서 json-server를 실행할 때, -p를 사용해서 원하는 포트로 서버를 실행시킬 수 있다고 말씀드렸는데, 이때 mac에서는 주의해야 할 점이 있습니다. 5000 - 7000번대(경기좌석버스 같군요..) 포트는 mac OS에서 사용 중 이므로, 사용이 불가능합니다. 저도 오류가 나서 찾아보니, 아래 글을 보고 고쳤습니다! https://stackoverflow.com/questions/70401937/json-server-running-but-cant-access-its-api-due-to-403 📝 정리 mac에서 Forbidden error가 발생 시, 포트를 확인한다. 5000 ~ 7000번대 포트는 사용하지 않는다. 3000번대에서 테스트를..

🟡 1. json-server란? json파일을 사용하여 간단한 시뮬레이션을 위한 REST API Mock server를 구축할 수 있는 툴입니다. 🟡 2. json-server 설치하기. 🟣 2.1 module 설치하기. $ mkdir json-server-exam && cd json-server-exam $ npm init -y $ npm install json-server --save-dev 🟣 2.2 mock.json 파일 생성하기. 위에서 만든 프로젝트 root 경로(package.json과 동일한 위치)에 mock.json(이름은 자기원하는 대로) 만듭니다. // mock.json { "todos": [ { "id": 1, "content": "HTML", "completed": true },..

🟡 1. Sentry이란? - 센트리 더 알아보기 🟡 2. Replay 기능 넣기 ... replaysOnErrorSampleRate: 1.0, replaysSessionSampleRate: 0.1, integrations: [ new Sentry.Replay({ maskAllText: false, blockAllMedia: false, }), ], }) 위 코드를 sentry.client.ts 파일에 위 코드 추가하기. 🟡 3. Replay 확인하기 센트리 사이트에 들어가서 확인해보면, 정상적으로 리플레이가 잘 저장된 것을 볼 수 있습니다. 다만, 리플레이의 기본 생명주기는 앱이 꺼지거나, 백그라운드로 갔을 때 끊어집니다. 그래서 키오스크와 같이 24시간 켜놓는 어플리케이션일 경우 리플레이가 계속 녹화..

🟡 1. Sentry이란? Sentry는 소프트웨어 버그 및 에러 추적을 위한 오픈 소스 오류 모니터링 도구입니다. 개발자들이 실시간으로 애플리케이션에서 발생한 버그, 예외, 크래시 등을 모니터링하고 이를 추적하여 디버깅할 수 있게 해줍니다. Sentry는 웹 애플리케이션, 모바일 앱 및 다양한 플랫폼에서 사용할 수 있습니다. 🟡 2. Next.js 프로젝트에 Sentry 도입하기. 🟣 2.1 Senty 웹사이트에서 프로젝트 만들기. 회원가입 및 로그인 -> Project탭 -> 우측 상단에 Create Project 버튼 Next.js 클릭 -> Project name은 자신의 next.js 프로젝트 이름 입력(같지 않아도 됨) -> 활성화된 Create Project 클릭 🟣 2.2 Next.js 프..

🟡 1. TypeScript란? 타입스크립트는 자바스크립트의 슈퍼셋인 오픈소스 프로그래밍 언어이다. 마이크로소프트에서 개발, 유지하고 있으며 엄격한 문법을 지원한다. - 위키백과 위키백과에서는 위와 같이 설명하고 있지만, TypeSript(이하 TS)는 타입이 있는 JS라고 생각하면 이해하기 쉽습니다. 위키백과 설명 중 슈퍼셋이라는 단어가 있는데, 이는 JS의 개념을 포함하고 확장된 개념이라고 생각하면 됩니다. 그래서 JS를 알고 있다면, TS는 쉽게 배울 수 있습니다. 🟣 1.1 타입이란? 위 설명에서 TS는 타입이 있는 JS라고 말씀드렸는데요. 여기서 말하는 타입은 프로그래밍 언어에서 쓰이는 String, Number, Boolean 등과 같은 타입을 얘기합니다. 🟡 2. VSCode에서 TS 세팅하..

🟡 1. Vercel이란? vercel은 Next.js에서 공식적으로 제공하는 호스팅 사이트입니다. Next.js에 최적화되어 있다 보니 이번에 만든 포트폴리오 사이트를 vercel을 통해서 배포해보겠습니다. 🟡 2. 배포하기 🟣 2.1 deploy 추가하기 "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint", "vercel-deploy": "next build && next export" } 배포하고자 하는 프로젝트의 package.json파일에 script부분을 위와 같이 변경해줍니다. 보통은 vercel-deploy만 추가해주면 됩니다. 🟣 2.2 Git에 Push 하기 기존에..

🟡 1. Strict mode function func(){ x = 1; } func(); - 위 코드를 실행을 시키면 실행이 잘 됩니다. 그러한 이유는 자바스크립트는 x가 어디에서 선언이 되었는지 처음에는 함수 내에서 찾아봅니다. 함수 안에서 없으면 함수 밖으로 나와 전역 변수에서 찾아봅니다. 만약 전역 변수에서도 없으면 에러는 내는 것이 아니라, 암묵적으로 전역 객체에 x라는 변수 동적으로 생성합니다. 이러한 변수를 암묵적 전역 변수(implicit global)라 합니다. 개발자의 의도와는 상관없이 암묵적 전역 변수가 생성이 되고 실행되는 것을 막기 위해 ES5부터는 strict mode가 추가되었습니다. 'use strict' function func(){ x = 10; // Uncaught Re..

🟡 1. next js 시작 전 세팅 🟣 Node.js 버전 10.13 이상 설치 Node.js 설치 후 설치가 정상적으로 되었는지 확인하기 위해서 터미널을 여신 후 'node -v'를 입력하여 확인. //노드 버전 확인 node -v 🟣 npm 혹은 yarn npm (Node Package manager)은 노드 설치 시 자동적으로 같이 설치가 됩니다. // npm 버전 확인 npm -v 터미널에서 'npm -v'를 입력하면 설치 버전이 나옵니다. yarn은 페이스북에서 만든 자바스크립트 패키지 매니저입니다. npm과 기능은 동일하고, 페이스북 측에서 npm보다 보안이 뛰어나고 성능이 빠르다고 주장은 하고 있습니다 ㅎㅎ.. (사실 npm, yarn 둘 다 좋습니다.) yarn 설치 방법은 터미널에서 n..

🟡 1. 함수의 다양한 형태 - 함수는 여러 가지 형태를 가지고 있고, 그 형태에 따라 부르는 명칭이 다릅니다. 이번 글에서는 4가지 형태에 대해서 얘기해보겠습니다. 즉시 실행 함수 내부 함수 재귀 함수 콜백(callback) 함수 🟣 1.1 즉시 실행 함수 - 함수가 정의됨과 동시에 실행이 되는 함수를 즉시 실행 함수(IIFE, Immediately Invoke Function Expression)라고 합니다. - 즉시 실행 함수는 최초 한 번만 호출이 되고 다시 호출할 수가 없습니다. 그래서 주로 초기화 처리에 사용이 됩니다. // 기명 즉시 실행 함수 (function hi() { console.log('Hello!'); }()); hi(); //error -> hi is not defined : ..

🟡 1. 프로퍼티 (Property) - 프로퍼티는 속성이라는 뜻으로, 자바스크립트에서는 객체 내부의 속성을 의미합니다. let person = { name : 'bigone', age : 30 } - 위 예시를 보면 person이라는 객체 안에 name, age이라는 key가 있는데, 이를 프로퍼티라고 합니다. 🟡 2. 함수 프로퍼티 - 함수도 객체이므로 프로퍼티를 가지게 됩니다. function sum (a, b){ return a + b; } console.dir(sum) - sum 함수 생성 코드를 보면 argument, caller 등과 같은 프로퍼티들을 생성한 적이 없는데, 자동으로 생성이 되어있습니다. 이는 Function 생성자에 의해서 함수가 생성될 때 자동으로 할당이 됩니다. - 함수에..