[JS] 클로저(Closure)의 개념과 React에서의 활용법
·
CS
개요클로저는 공식 문서에서 다음과 같이 설명된다.클로저는 주변 상태(어휘적 환경)에 대한 참조와 함께 묶인(포함된) 함수의 조합입니다. 즉, 클로저는 내부 함수에서 외부 함수의 범위에 대한 접근을 제공합니다. JavaScript에서 클로저는 함수 생성 시 함수가 생성될 때마다 생성됩니다. 직관적으로는 다음과 같은 의미를 가진다. 클로저는 함수가 “자기 주변의 변수”를 기억해서, 나중에도 계속 사용할 수 있게 해주는 기능이다. 즉 클로저를 쓰면 다음과 같은 이점을 가질 수 있다.변수를 보호하고 감출 수 있다. (은닉)값을 유지할 수 있다. (상태 유지)콜백, 비동기 함수 등에서 엄청 유용하게 쓰인다.해당 내용들을 이해하기 위해선 먼저 자바스크립트의 스코프에 대한 이해가 필요하다.2024.01.03 - [C..
Event Interface and Document Object Model Event
·
CS
개요이벤트는 프론트엔드 프로그래밍의 핵심이다.때문에 프론트엔드에서 이벤트가 어떻게 처리되는지 흐름을 정리해 보았다.내용을 이해하기 위해 사전에 이벤트와 이벤트 핸들러가 무엇인지 알아야 한다.✅ 이벤트(Event)사용자가 어떤 행동을 했을 때 발생하는 사건.예) 클릭(click), 키 누름(keydown), 마우스 움직임(mousemove), 입력(input) 등✅ 이벤트 핸들러(Event Handler)이벤트가 발생했을 때 실행되는 함수.예) 버튼을 클릭하면 어떤 코드를 실행하고 싶을 때, 그게 핸들러이다.Event interface우리가 웹에서 실행하는 이벤트는 자바스크립트의 Event interface에 맞춰서 생성된 객체이다. 자바스크립트에서 이벤트는 다음 코드로 정의된다.interface Even..
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 최적화 등 여러 요소가 있다.     브라우저는 싱글 쓰레드로 동작한다.대부분의 브라우저는 싱..
[JS] 스코프에 대하여
·
CS
개요 Scope 는 범위라는 뜻을 가진다. Javascript에서 scope는 변수에 접근할 수 있는 범위를 뜻한다. 주로 동적 스코프, 정적 스코프(렉시컬 스코프), 블록레벨 스코프의 3가지 스코프가 있다. 동적 스코프 동적 스코프는 함수를 호출한 위치에 따라 상위 스코프를 결정한다. 결론적으로 말하자면 자바스크립트는 동적 스코프를 사용하지 않는다. 자바스크립트에서 함수와 스코프를 참조할 때에는 어디에서 호출되었는가만 보기 때문이다. 예시 코드 const func1 = () => { console.log(a); } const func2 = () => { let a = 2; func1(); } let a = 1; func2(); 위의 코드에서 func2 함수를 호출하면 콘솔에는 1가 출력된다. 간단하게 ..
[Algorithm] 코드 블럭 단위 복잡도 분석
·
CS/알고리즘(Algorithm)
개요 코드 블럭은 C++일수도 있고, 수도코드, 의사코드 일수도 있다. 점근적으로 n이 커질 때, 점근적 런타임과 점근적 메모리 문제의 크기를 설명하는 변수, n이던 아니던 vertex의 개수던 edge의 개수던 이런 parameter를 표현하는 것이 첫번째 단계이다. 알고리즘의 asymptotic behavior은 이 알고리즘이 n이 커졌을 때, 문제의 크기가 커졌을 때 어떻게 행동하는지, 과연 이 알고리즘이 n이 아주 큰 상황에서도 잘 동작하는지에 대한 정보를 제공한다. 예를 들어 A는 세타오브 n square이고 B는 n log n일 때 n의 값이 2k일 때는 A의 경우 4k square B의 경우 2k log k + 2k 이다. 하지만 2k에서 10k로 5배 증가시킨다면 A의 요구시간은 5 * 5..
[Algorithm] BFS,DFS 알고리즘 구현(C++)
·
CS/알고리즘(Algorithm)
본 글에서는 IDE로 DEV C++을 사용하였다. 그래프 만들기 보통 그래프를 입력받을 때에는 파일로 받는 경우가 많다. 본 글에서는 txt파일을 사용하였다. graph_1이라는 txt파일을 만들었다. 맨 위의 13은 vertex의 개수이고 12는 edge의 개수이다. 밑의 영어들은 트리 구조의 그래프이다. 해당 파일은 프로젝트 내부에 위치해야 한다. 구현 먼저 코드 블럭 단위로 리뷰를 할 것이다. 리뷰 순서는 앞선 글에서의 실행 순서와 같다. 2023.01.29 - [CS/알고리즘(Algorithm)] - [Algorithm] 그래프 탐색 알고리즘(BFS, DFS) 기본 [Algorithm] 그래프 탐색 알고리즘(BFS, DFS) 기본 개요 반드시 알고 있어야 하는 알고리즘 중 하나인 그래프 탐색 알고..
[Algorithm] 그래프 탐색 알고리즘(BFS, DFS) 기본
·
CS/알고리즘(Algorithm)
개요 반드시 알고 있어야 하는 알고리즘 중 하나인 그래프 탐색 알고리즘이다. 너비 우선 탐색(BFS), 깊이 우선 탐색(DFS)이 있다. 그래프가 Connect 상태인지, Unconnect 상태인지 확인하기 위해 사용한다. 선행 지식으로 큐, 스택, 트리, 그래프 자료구조의 이해가 필요하다. 2022.12.30 - [CS/자료구조(data structure)] - [자료구조] 큐(Queue)란? [자료구조] 큐(Queue)란? 개요 큐(Queue)는 선입선출(First-In Firut-Out) 방식의 선형 자료구조이다. 모양은 사람들이 줄을 서있는 모습을 생각하면 이해가 편하다. 구조 큐는 위의 모양과 같은 구조를 가진다. enqueue : 아이템을 mk-develop.tistory.com 2022.12..