* ES 가 뭐에요? ES 는 ECMA Script를 뜻하고, 자바스크립트를 표준화 하기위해 만들어진 규격이다. * lint (린트)는 뭐에요? lint는 소프트웨어 개발에서 코드의 오류, 버그, 스타일 문제 등을 찾아내는 정적 분석 도구 이다. 따라서 lint는 코드 오류 및 스타일 문제를 찾아내는 도구로 일반적인 용어이고, ESLint는 JavaScript에서 사용되는 구체적인 린트 도구 중 하나이다. * ESLint 를 적용하는 순서 1. Node.js 설치: ESLint를 사용하려면 Node.js가 설치되어 있어야 한다. Node.js는 공식 사이트(https://nodejs.org/)에서 다운로드하여 설치할 수 있다. 2. 프로젝트 디렉토리 설정: ESLint를 사용할 프로젝트 디렉토리로 이동한..

* 웹팩 (webpack) 이란? 웹팩은 오픈 소스 자바스크립트 모듈 번들러로써 여러개로 나누어져 있는 파일들의 의존성을 해결하며 하나의 자바스크립트 코드로 압축 (번들링) 하고 최적화해서 성능 향상과 로딩 시간 단축을 위해 사용되는 라이브러리 이다. * 모듈 (Module) 프로그래밍에서 독립적인 기능을 갖고 있는 작은 코드 조각을 말한다. 모듈은 일반적으로 특정 기능이나 작업을 수행하는 코드의 조각으로, 모듈화를 통해 코드를 세분화해서 유지보수성을 높이고 코드의 재사용성을 높일 수 있다. * 번들러 (Bundler) 모듈 번들링(Module Bundling)을 수행하는 도구로, 여러 개의 모듈 (js파일, css파일, 이미지 등) 을 가져와서 이를 하나 또는 여러 개의 번들로 묶어주는 도구를 의미한다..

모던 자바스크립트 deep dive에서 this 관련 부분을 읽던 도중에 헷갈려서 자세히 공부한 내용을 블로그에 남김. 외부 함수인 메서드와 중첩 함수 또는 콜백 함수의 this가 일치하지 않는다 외부 함수인 메서드와 중첩 함수 또는 콜백 함수의 this가 일치하지 않는다는 의미는, 함수의 호출 방식에 따라 this가 가리키는 대상이 달라진다는 것을 의미한다. const obj = { value: 100, outerFunc: function() { console.log("outerFunc's this:", this); // {value: 100, outerFunc: ƒ} const innerFunc = function() { console.log("innerFunc's this:", this); // w..

90년대 중반 이후로 프로토콜은 인터넷 통신에 더 나은 보안과 개인 정보 보호를 제공하는 데 사용되어 졌다. 도메인의 가장 중요한 보안 기능 중 하나는 SSL 인증서인데, 이번 글에서는 SSL 및 TLS 프로토콜과 인증서 작동 방식에 대해 써보려한다. SSL이 뭐야? SSL(Secure Sockets Layer)은 공개 키의 소유권을 디지털 방식으로 인증하는 프로토콜이다. 1995년 Netscape에서 처음 개발한 SSL은 클라이언트 측과 서버 측 인터넷 통신 간의 보안 연결을 제공한다. SSL 프로토콜은 TLS 1.0 릴리스와 함께 더 이상 사용되지 않고 있다(아래 참조). TLS는 뭔데? TLS는 Transport Layer Security의 약자이며 SSL 프로토콜의 후속 제품이다. (현업에서는 S..

*부족한 내용들은 천천히 보충해나갈것임. JS에서 Class를 활용해서 모듈화해서 각각의 Class에 해당하는 기능들을 만들고 조합하는 방법에 대해 짧게 기록해보려 한다. Q. 자바도 아닌데 자바스크립트에서 왜 Class 를 활용하나? A. Class를 활용하면 객체의 상태와 메서드를 하나의 단위로 묶어서 관리할 수 있고 이를 통해 유지보수성이 좋아지고 중복 코드가 줄어들며 코드의 가독성도 높일 수 있다. 즉, 객체의 청사진을 만들어 속성과 메서드를 정의한 다음 필요할 때 인스턴스화 할 수 있고 이를 통해 코드베이스 전체에서 해당 객체를 쉽게 관리하고 조작할 수 있다. 예를 들어, 아래와 같이 Person 클래스와 Phone 클래스가 있다고 가정해보자 class Person { constructor(na..

// 1. function Person(name, age) { this.name = name; this.age = age; this.getName = function () { return this.name + '입니다.'; } } // 2. Person.prototype.getName = function (){ return this.name + '입니다.' } 1번과 2번은 JavaScript에서 객체 지향 프로그래밍을 구현하는 방식에 차이가 있다. 1번은 생성자 함수를 사용하여 객체를 생성하는 방식이다. Person 함수는 name과 age라는 인자를 받아 해당 값을 객체의 프로퍼티로 설정한다. 또한, getName이라는 메소드를 객체의 프로토타입에 추가하여 객체가 이 메소드를 호출할 수 있도록 한다...

Javascript에서 다음과 같은 메소드를 사용한 경험이 있을 것이다. // 대문자로 변경하는 경우 const test_1 = "hello world!"; test_1.toUpperCase(); // 소수점 표현하는 경우 const test_2 = 1.0001; test_2.toFixed(1); "hello world!" 와 1.0001 는 원시타입이다. 즉, 객체가 아니기에 가지고 있는 메서드가 없는 것이다. 하지만 메서드를 사용할 수 있는 이유가 자바스크립트 엔진에서 Boxing 과정이 이루어지기 때문이다. Boxing 원시타입을 래퍼 객체로 wrapping하는 과정을 말한다. test_1 변수를 기준으로 설명하고자 한다. 우선 test_1.toUpperCase() 를 실행하게 되면 javascri..

이 글에서는 Nginx 웹서버에서 SSL을 사용하기 위한 Config파일을 작성하는 방법을 다룬다. 인증기관(CA)로부터 인증서(Certificate)를 발급 받아서 다음 두 개 파일을 이미 확보해 놓은 상태여야 하며, 아직 인증서를 발급받지 않은 경우 인증기관의 홈페이지를 통해 인증서를 발급받은 뒤 진행해야 한다. 회사에서 프로젝트 진행 중, 톰캣과 nginx 를 사용해야하는 상황이 생겼다,. nginx 에 SSL 인증서를 설정해야 하고, 전달 받은 인증서가 pem 파일이라서 tomcat에는 설정을 못하는 상황이다. tomcat은 8080에 띄운 상황이며, 80포트는 nginx에 설정해서 443으로 리다이렉트 시켜야한다. 결국 80 포트는 443으로 리다이렉트 하고, 443은 톰캣으로 프록시 되게 해야..