Develop Note by J.S.

Javascript 언어의 가장 중요한 개념 중 실행 컨텍스트를 다뤄보겠습니다. 1. 실행 컨텍스트란? 실행할 코드에 제공할 환경 정보들을 모아놓은 객체를 뜻합니다. 각 환경에 있는 정보를 모아놓은 실행 컨텍스트가 콜스택에 쌓여 실행이 되기 때문에 실행되는 코드의 환경정보와 순서를 보장할 수 있게 합니다. 실행 컨텍스트가 활성화 될 때 호이스팅, 환경정보 구성, this 값이 설정됩니다. 2. 실행 컨텍스트의 구성 1) 변수객체 (variable environment) 현재 컨텍스트 내부에서 사용하는 식별자(변수) 들의 대한 정보가 생성되며, 외부 환경 정보 및 선언 시점의 렉시컬 환경(Lexical Environment)의 스냅샷 정보를 담습니다. 렉시컬 환경이란 변수객체에 호이스팅된 변수 및 함수들의..

API란? API는 Application Programming Interface 의 약자로, 특정 고유기능을 가진 소프트웨어(Application) 상호간의 Programming된 Interface를 뜻합니다. 웹개발시에는 일반적으로 Server와 Client가 통신하기 위한 기능을 API라고도 하고, 특정 라이브러리가 개발자에게 제공하는 기능의 단위를 API라고 부릅니다. Network API 종류 1. SOAP API Simple Object Acces Protocol의 약자로 HTTP의 POST 메소드로만 통신을 합니다. XML형식 기반으로 러닝커브가 큰 편이지만 엄격한 보안성을 가져 기업용 서비스에 주로 사용됩니다. 2. REST API Representational State Transfer A..

socket이란? 특정 포트에 바인딩 된 소켓을 통해 Server와 Client간의 양방향 데이터 통신을 지원합니다. socket은 프로토콜, IP, Port가 한 구성이 됩니다. 프로토콜에는 연결지향형인 TCP와 비연결지향형인 UDP가 있습니다. 웹에서 주로 사용되는 HTTP프로토콜은 단방향 데이터 통신이며 일반적으로 Client가 Server로 Connection -> Request -> Response -> Disconnect 의 절차로 이루어지는데 빈번한 데이터 통신이 발생될 경우 잦은 Connection/Disconnection으로 비효율적인 문제가 있습니다. 이때 1회 Connection으로 양방향 데이터 송수신이 가능한 웹소켓을 사용할 수 있습니다. 1. WebSocket 특징 1) 웹에서의..

HTTPS는 HyperText Transfer Protocal Security 의 약자로 HTTP 에 보안 기능을 더한 웹 네트워크 송수신 프로토콜입니다. 일반적으로 개발을 하다보면 서버에 인증서를 적용하고, https로 서버를 시작하는 것 외에 그 이외의 동작은 웹서버와 브라우저가 알아서 실행시켜주기때문에 정확하게 HTTPS가 정확히 어떤 기능 수행하는지 잘 알지 못했습니다. 그래서 간단하게 제가 이해하고 공부한 만큼 정리를 해보았습니다. 기본개념 1. HTTP - Hypertext Transfer Protocol로 TCP위에서 동작되는 프로토콜이며 웹 브라우저에서 HTML, CSS 등의 리소스를 가져올 수 있게 해주는 프로토콜 입니다. 2. HTTPS - http에서 보안기능이 추가된 프로토콜입니다...

1. CSS in CSS 일반적으로 CSS 코드를 작성하는 것으로 내부 스타일시트, 외부 스타일시트, 인라인 스타일 방법으로 작성 할 수 있습니다. 내부 스타일 시트 ... 외부 스타일 시트 //외부에 작성된 style.css 파일을 .html 에서 호출 인라인 스타일 This is a heading 2. CSS in JS 자바스크립트 코드에서 CSS를 작성하는 것을 말하며 CSS를 작성할 때 발생되는 문제점들을 해결하기 위한 기능입니다. 예를들어 선택자의 네이밍이 복잡해지는 부분, 상속에 따른 독립성 문제 및 의존관계를 해결할 수 있습니다. 대표적인 CSS in JS 라이브러리로는 'Styled Components'가 있습니다. // myComponent.vue import styled from "st..

Web Worker Web Worker는 Service worker와 마찬가지로 브라우저 영역 외 백그라운드 영역에서 별개의 스레드로 동작되는 프로세스 입니다. 기존 Dom의 UI 스레드에 영향을 주지 않기 때문에 오랜 시간이 걸리거나 복잡한 수학계산 영역, 이미지, 애니메이션 등 브라우저의 메인 스레드 하나로 처리하기에 영향을 주는 기능들을 Web Worker에서 동작시킬 수 있습니다. Web Worker vs Service Worker Service worker의 주 기능으로 네트워크 프록시 역할을 수행하여 Fetch와 같은 api 요청을 가로채서 커스텀한 Handling을 할 수 있습니다. 또한 브라우저가 닫히더라도 백그라운드에 남아 있기 때문에 PWA(Progressive Web App)의 Pus..

MSW(Mock Service Worker) Service Worker의 네트워크 Proxy 기능을 활용하여 API 테스트를 위한 API 모킹(Mocking) 라이브러리 입니다. Front-end 개발 시 Back-end 개발 완료까지 기다리지 않고 API 명세서만 있다면 가상의 API 응답을 구성하여 Front-end 개발 및 API 테스트와 Back-end 개발을 동시에 진행하여 프로젝트 개발 소요 시간을 단축 시킬 수 있게 도와줍니다. MSW 라이브러리 설치 npm install -D msw 1. Service Worker 구성 먼저 제 게시글 중 Service Worker 구성에 대한 게시글을 꼭 먼저 보신 후 진행해주세요 이후 registerServiceWorker.ts에서 아래와 같은 코드를 ..

Service Worker - 웹 페이지 외에서 브라우저 내 스크립트와는 다른 쓰레드로 동작되는 기능입니다. http 요청을 catch하는 네트워크 프록시 기능을 구현할 수 있습니다. - 리소스 caching 처리 기능 구현이 가능하고 Push 알림(PWA)이 가능하여 개발 단계에서 MSW(mocking service worker)를 사용한 API Testing 기능 구현이 가능합니다. - Service Work는 페이지의 DOM과의 직접적인 상호작용은 할수 없지만 Message를 통하여 통신합니다. - Service Worker 생명주기 : 설치중 -> 설치완료/대기 -> 활성화중 -> 활성화완료 -> 중복(설치실패 및 교체) 설치 npm install register-service-worker 1. ..