운좋개

🟡 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 생성자에 의해서 함수가 생성될 때 자동으로 할당이 됩니다. - 함수에..

대망의 함수! 🟡 1. 함수란? - 함수란 어떤 작업을 수행하기 위해 필요한 코드(문)들의 묶어놓은 코드 블록을 의미합니다. 함수는 매개변수와 이름을 갖으며 필요할 때 이름으로 함수를 호출하여 코드를 실행시킵니다. // 함수의 정의(선언) function sum(a, b) { return a + b; } // 함수의 호출 sum(1, 2) // 3 명칭 설명 이름(함수명) 함수명은 변수명이라고 생각하면 이해하기 쉽다. 함수를 호출하기 위해서 함수명이 필요하다. 매개변수 0개 이상의 목록으로 콤마(,)로 나누어 여러개의 변수들을 넣을 수 있다. 함수 몸채 함수가 호출되었을때 실행되는 코드들의 집합을 의미한다. return 문을 통해서 결과값(반환값)을 반환 할 수도 있고, return 문 없이 어떠한 기능..

🟡 1. 객체 (Object) - 자바스크립트는 객체 기반의 스크립트 언어이며 원시 타입을 제외한 모든 값들은 객체입니다. (그만큼 자바스크립트에서 객체는 매우 중요❗) - 객체는 키(key)와 값(value)으로 구성된 프로퍼티(property)들의 묶음입니다. - 프로퍼티의 값은 모든 타입이 들어갈 수 있습니다. 자바스크립트에서는 함수는 일급 객체이므로 값으로 취급할 수 있고, 프로퍼티의 값으로도 사용할 수 있습니다. 이때 함수는 일반 함수와 구분하기 위해서 메소드라고 부릅니다. (객체 안에 있는 함수는 메소드) let person = { // 메소드 sayHello = function(){ console.log('Hello'); } } // 객체의 메소드 호출 person.sayHello(); //..