[JS] 클로저(Closure)의 개념과 React에서의 활용법
·
CS
개요클로저는 공식 문서에서 다음과 같이 설명된다.클로저는 주변 상태(어휘적 환경)에 대한 참조와 함께 묶인(포함된) 함수의 조합입니다. 즉, 클로저는 내부 함수에서 외부 함수의 범위에 대한 접근을 제공합니다. JavaScript에서 클로저는 함수 생성 시 함수가 생성될 때마다 생성됩니다. 직관적으로는 다음과 같은 의미를 가진다. 클로저는 함수가 “자기 주변의 변수”를 기억해서, 나중에도 계속 사용할 수 있게 해주는 기능이다. 즉 클로저를 쓰면 다음과 같은 이점을 가질 수 있다.변수를 보호하고 감출 수 있다. (은닉)값을 유지할 수 있다. (상태 유지)콜백, 비동기 함수 등에서 엄청 유용하게 쓰인다.해당 내용들을 이해하기 위해선 먼저 자바스크립트의 스코프에 대한 이해가 필요하다.2024.01.03 - [C..
HTTP 프로토콜과 HTTP 프로토콜의 진화 과정(0.9~3.0)
·
CS
개요HTTP는 HTML 문서와 같은 리소스들을 가져올 수 있도록 해주는 프로토콜이다. HTTP는 웹에서 이루어지는 모든 데이터 교환의 기초이며, 클라이언트 - 서버 프로토콜이기도 하다. HTTP 프로토콜과 보안성을 높이고 지연 시간을 줄이기 위한 HTTP의 특징을 알아보려고 한다. 하나의 웹 문서는 HTTP 프로토콜로부터 불러온 텍스트, 레이아웃 설명, 이미지, 비디오, 스크립트 등의 하위 문서들로 구성된다.HTTP란?1990년대 초에 설계된 HTTP는 계속해서 진화해온 확장 가능한 프로토콜이다. HTTP는 애플리케이션 계층 즉 OSI 7계층에서 응용 계층에 속하는 프로토콜로, 신뢰 가능한 전송 프로토콜이라면 이론상으론 무엇이든 사용이 가능하지만 보통 TCP 혹은 암호화된 TCP인 TLS를 통해 전송된다..
웹 브라우저의 동작 원리와 웹 최적화
·
CS
개요사용자는 빠르고 상호작용이 원활한 컨텐츠로 이루어진 웹 경험을 원한다. 따라서 개발자는 이 두가지 목표를 달성해야 한다. 브라우저가 어떻게 동작하는지 이해한다면 향후 실제 성능을 향상시키는 고민을 할 때 큰 도움이 될 것이다.웹 성능의 두가지 문제점지연 시간웹을 빠르게 로드하는데 있어 지연 시간은 이겨내야할 중요한 문제이다. 네트워크 지연시간은 네트워크를 통해 컴퓨터가 바이트를 전송하는데 걸리는 시간을 의미한다. 웹을 빠르게 로드하기 위해 신경써야 할 것은 최대한 빠른 요청과 CDN을 통한 캐싱 및 지리적 분산, HTTP/2 이상 프로토콜 적용, 로드 밸런싱, 리소스 및 코드 최적화, 브라우저 캐싱, DNS 최적화 등 여러 요소가 있다.     브라우저는 싱글 쓰레드로 동작한다.대부분의 브라우저는 싱..
자바스크립트의 스레드와 동시성 처리를 위한 이벤트 루프(Event Loop)
·
기타
개요컴퓨터공학에서 스레드는 동시에 여러 작업이나 프로그램을 실행하는 것을 의미한다. 코드를 실행할 수 있는 각 단위를 스레드라고 한다. 스레드는 멀티 스레드와 싱글 스레드로 나뉘며, 멀티 스레드는 말 그대로 한번에 여러 작업을 처리할 수 있는 것을 의미하고 싱글 스레드는 한번에 하나의 작업만을 처리할 수 있다. 자바스크립트는 어떤 스레드를 가지며 어떻게 로직을 처리하는지 알아보자.자바스크립트의 스레드자바스크립트는 기본적으로 싱글 스레드 언어이다. 자바스크립트의 메인 스레드는 브라우저에서 사용자 이벤트를 처리하고, 디스플레이 렌더링 및 페인팅, 일반적인 웹이나 앱을 구성하는 대부분의 코드를 실행한다. 웹이나 앱을 렌더링하는 과정은 모두 하나의 스레드에서 일어나기 때문에 느린 웹 & 앱 스크립트는 전체 브라..
LG유플러스 유레카 SW 아카데미 2기 합격 후기(프론트엔드 대면)
·
이야기/일상
개요졸업하고 알고리즘 공부부터 다시 시작하려고 계획을 하고 있었는데 대학 친구의 추천으로 LG유플러스 유레카 SW 아카데미 2기에 지원하게 되었다. 현재 나는 졸업을 앞둔 취업준비생으로서, 앞으로 계획한 학습 내용과 커리큘럼이 대부분 일치하며, 취업까지의 공백기를 효과적으로 활용할 수 있을 것 같아 지원하게 되었다.선발 일정유레카 2기의 선발 절차와 일정은 다음과 같다. 전형은 비전공자와 전공자로 나뉘게 되며 SW 적성 진단 과정 진행에서 서로 차이가 있다.SW적성 진단대부분의 경우 서류에서 탈락하는 경우는 없고, 서류 합격을 하게 되어 적성 진단을 보게 되었다.나는 전공자이기 때문에 개발구현능력 검사를 진행하였다. 서류 합격을 하게 되면 위와 같은 제목의 메일이 오게 되는데 향후 기수분들을 위한 팁을..
[React] Redux를 사용해서 간편하게 모달(modal) 구현하기
·
React
개요 modal은 사용자의 이목을 집중시키기 위한 인터페이스 창이다. 문서 내의 상위에 배치되며 사용자의 이목을 집중시키기에 좋다. 모달의 on, off는 보통 bool타입의 state로 관리하는데, 전역 상태 관리에 사용하는 라이브러리인 redux를 사용해서 모달을 구현하면 코드도 줄고, 관리가 용이할 것 같다는 생각이 들어 구현하게 되었다. 사용 라이브러리 본 글은 Redux와 bootstrap modal을 사용한다. 설치 명령어는 다음과 같다. npm i @reduxjs/toolkit bootstrap react-redux 구현 먼저 Redux가 관리할 state의 초기값을 선언한다. redux.ts const initialState = { message : "", isOpen : false, } ..