디스코드의 Webhook 을 깃허브에 등록하고, 깃허브 액션을 통하여 Issue , Pull Request 와 관련된 이벤트 발생 시 자동으로 디스코드 Webhook 을 통해 메시지를 전송하도록 셋팅해보자.들어가기에 앞서 Webhook 에 대해 알아보자. Webhook

문서2를 작성하면서 class를 이용한 여러가지 예시와 문제들을 보고 직접 풀어보았다.일단 샌드박스를 열었다는뜻은 페이지 가 로드될때 라는 뜻으로 생각하여 document.addEventListener의 이벤트 상태중 "DOMContentLoaded"를 이용하여 풀어보

스타일과 클래스 자바스크립트에서 Element에 스타일을 적용시키는 방법은 크게 두가지가 있다. CSS에서 클래스를 만들고 요소에 추가하기 style 프로퍼티를 통해 직접 입력해주기 style 적용 document의 element에는 class 프로퍼티와 styl

문서 브라우저 환경과 다양한 명세서 자바스크립트(Javascript)는 본래 웹 브라우저에서 사용하려고 만든 언어이다. 넷스케이프에서 브랜든 아이크가 처음 만든 이후 진화를 거쳐 다양한 사용처와 플랫폼을 지원하는 언어로 변모하였다. 자바스크립트가 돌아가는 플랫폼들은

REST API 를 들어가기 앞서 API에 대하여 간단하게 정리하려한다.API는 Application Programing Interface의 약어로써 사전적인 의미로는 운영체제와 응용프로그램 사이의 통신에 사용되는 언어나 메시지 형식을 말하는데, 쉽게 설명하면 식당에서

NodeMailerNodeMailer는 Node.js내에서 Mail을 손쉽게 보내주는 모듈이다.블로그 기능 중 CONTACT를 작성 시 내 메일로 보내기 위해 방법을 모색하던 도중 NodeMailer에 대해 알게되었다. NodeMailer는 많은 프로토콜 방식중 SMT

nuxt를 이용해 토이프로젝트를 작업하던 중 hydration mismatch라는 에러가 쌓이는 모습을 발견했다.구글링을 통해 조사해보니 Hydration mismatch는 SSR에서 주로 발생하는 이슈였다.SSR은 pre-render에서 만들어진 DOM tree와 H

MVC pattern은 소프으웨어 공학에서 사용되는 소프트웨어 디자인 패턴이다. M은 Model, V는 View, C는 Controller를 의미한다.MVC pattern은 어플리케이션을 M, V, C 세 개의 영역으로 분할하고, 각 구성 요소에게 고유한 역활을 부여하

Javascript에서 원시 값(primitive)는 객체가 아니면서 메서드 혹은 속성을 가지지 않는 데이터이다.원시 값은 불변이므로 변경할 수 없다.여기서 말하는 불변은 원시 값 자체를 의미하는 것 이지 원시 값을 할당한 변수를 이야기하는 것이 아니다. 즉 원시 값을

Async Await는 Promise객체 보다 쉽게 사용할 수 있게 해주는 문법이다. Promise를 기반으로 하지만 Async함수 내에서 await를 이용해 비동기를 동기처럼 작동시킬 수 있다.위 코드를 보면 asyncHandle함수를 실행시키게되면 먼저 콘솔로그가

Promise는 비동기 작업이 맞이할 미래의 완료 또는 실패와 그 결과 값을 나타내는 객체이다.비동기란 동기는 일이 순차적으로 진행되는 반면 비동기는 일이 순차적이지 않은, 동시에 진행될 수 있음을 말한다.예를 들어 브라우저와 웹서버 사이에서의 통신은 언제 끝날지 모를

Javascript에서 가장 중요한 개념중 하나인 ExecutionContext(실행컨텍스트)는 자바스크립트엔진이 자바스크립트를 실행할 때 실행할 코드에 제공할 환경 정보들을 모아놓은 객체 이다.여기서 말하는 정보는 변수, 함수 선언, 변수의 유효범위(Scope), t

Hoisting은 자바스크립트에서 발생하는 현상 중 하나로 변수와 함수를 선언하는 위치와 상관없이 해당스코프의 최상위로 끌어올려지는것을 말한다.단, 값이 할당되는 과정이 아닌 선언되는 과정에서 호출되기때문에 값이 비어있는 모습을 볼 수 있다.당연하게도 지역변수로 선언된

우리가 특정 함수에서만 컨트롤 되어야 하는 변수 special이 있다고 가정해보자.위와 같이 컨트롤 할 수 있는데 만약 누군가가 실수로 인해 special값을 임의로 손대버리면 값이 변하게 되어버린다.물론 한두줄만 있는 코드라면 금방 찾을 수 있는데 여러명과 협업하게되

Javascript에서 Scope는 어떠한 참조 대상의 식별자를 찾아내기 위한 규칙이다.여기서 말하는 식별자란 무엇일까?식별자(identifier)는 변수, 함수의 이름과 같이 어떤 대상을 다른 대상과 구분하여 식별할 수 있는 이름이다.ECMAScript6 이전에는 변

그동안 공부를 게을리하고, 기존 회사를 그만 둔 후 위기감없이 지낸거같아 마음을 다잡고 새로운 출발을 하기위해서 TIL을 작성해보려합니다.TIL 소재로 생각한 공부들은 다음과 같습니다.오늘의 커밋 (ex. 포트폴리오)기술공부 (ex. scope에 대하여)OpenAPI들

프레임워크를 더 효율적으로 개발할 수 있게 다양한 패턴을 고안하는데, 이를 디자인 패턴 이라고 한다.이러한 디자인 패턴을 사용하기위해 추가된 문법이있는데 static속성과 static메소드이다. 이를 이용해 간단하게 사용문법을 만들어보면 아래와 같다.이를 이용해 제곱을

고급 예외 처리에는 try catch finally 구문이 있다. 기본적인 구조는 아래와 같다.예시로 살펴보자위의 js코드에서 try문에서 errorStart.asdf()를 실행시킬경우 그런 것은 존재하지않기에 catch문의 코드가 실행된다. 반대로 errorStart

입력양식이란? 사용자로부터 어떠한 입력을 받을 때 사용하는 요소.HTML에서는 input, textarea, Button, select 등이 입력양식이다.위와 같은 방식으로 input요소로부터 입력을 받아 숫자를 변환시키는 작업을 할 수 있다.이를 활용해 여러 숫자변환

전개연산자 : ...배열 , {...객체}전개연산자는 얕은 복사가 아닌 깊은 복사를 하기위해 사용하는 연산자이다.자바스크립트에서 배열과 객체는 할당할때 얕은 복사라는것을 한다. 위의 결과물을 보면 아래와 같은 사진이 나온다.이런식으로 새로운 변수에 배열을 할당해주었는데