모던 자바스크립트 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은 톰캣으로 프록시 되게 해야..

CSS로 브라우저 성능을 최적화 시킬 수 있는 방법에 적어볼건데, animation 최적화 와 미디어쿼리 최적화에 대해서 알아보려한다. 먼저 animation 최적화에 대해서 알아보자. animation 최적화는 왜 해야하는 걸까? 애니메이션은 브라우저에서 많은 리소스를 사용하므로 최적화가 필요하다. 특히, 복잡한 애니메이션이나 많은 엘리먼트를 애니메이션으로 처리하면 브라우저 성능에 부정적인 영향을 미칠 수 있다. 따라서, 애니메이션을 최적화하여 브라우저의 성능을 향상시키는 것이 좋다. 그러면 animation 최적화 하는 방법은? 애니메이션을 최적화하는 방법에는 여러 가지가 있다. 첫째로, animation 사용 시에 CSS로 최적화하는 방법이 있다. 먼저 GPU 를 활용해볼건데, GPU(Graphic..

preload 란 무엇이며, 언제 쓰는 속성이고, 왜 써야하는건가? preload는 브라우저가 페이지 로딩 전에 리소스를 미리 다운로드할 수 있도록 해주는 HTML 속성이다. 이를 사용하여 브라우저가 페이지 로딩 전에 폰트, 이미지, 스타일시트, 스크립트 등 다양한 리소스들을 미리 다운로드 해서 페이지 로딩 속도를 개선 할 수 있다. 이번 글에서는 폰트를 preload 하는 방법에 대해서 끄적여볼거다. 폰트에는 로컬 폰트와 웹 폰트가 있다. 로컬 폰트는 이미 로컬에 설치돼있기 때문에, preload 속성이 필요없지만, 웹 폰트의 경우, 원격으로 가져오며, 아무래도 폰트 파일이 크기가 크다보니 폰트 파일을 다운로드하는 동안 페이지 로딩이 지연되는 경우가 생긴다. 이를 해결하기 위해, preload 속성을 ..