[JS] 클로저(Closure)의 개념과 React에서의 활용법
·
CS
개요클로저는 공식 문서에서 다음과 같이 설명된다.클로저는 주변 상태(어휘적 환경)에 대한 참조와 함께 묶인(포함된) 함수의 조합입니다. 즉, 클로저는 내부 함수에서 외부 함수의 범위에 대한 접근을 제공합니다. JavaScript에서 클로저는 함수 생성 시 함수가 생성될 때마다 생성됩니다. 직관적으로는 다음과 같은 의미를 가진다. 클로저는 함수가 “자기 주변의 변수”를 기억해서, 나중에도 계속 사용할 수 있게 해주는 기능이다. 즉 클로저를 쓰면 다음과 같은 이점을 가질 수 있다.변수를 보호하고 감출 수 있다. (은닉)값을 유지할 수 있다. (상태 유지)콜백, 비동기 함수 등에서 엄청 유용하게 쓰인다.해당 내용들을 이해하기 위해선 먼저 자바스크립트의 스코프에 대한 이해가 필요하다.2024.01.03 - [C..
[백준] 32197 절연 구간 최소화(C++)
·
알고리즘 문제
문제https://www.acmicpc.net/problem/32197 다익스트라를 살짝 변형하여 풀었다. 문제 설명은 다음과 같다. 지하철의 전기를 공급받는 방식(급전 방식)은 직류와 교류로 구분된다. 열차 운행 중 급전 방식이 바뀌게 되면 잠시 전력 공급이 중단된다. 이러한 현상을 절연이라 부른다. 열차 탑승객의 만족도는 절연이 적게 발생할수록 높아진다.서울특별시에는 N개의 지하철역이 있고, 두 역을 직접 잇는 선로 M개가 설치되어 있다. 각 역에는 1부터 N번까지의 번호가, 선로에는 1부터 M번까지의 번호가 붙어있다. 설치되어 있는 선로만으로 임의의 두 역 사이를 이동할 수 있다. 각 선로는 직류 또는 교류 중 하나의 방식으로 전기를 공급하며 양방향으로 통행할 수 있다.열차는 어떤 역과 이어진 선로..
Event Interface and Document Object Model Event
·
CS
개요이벤트는 프론트엔드 프로그래밍의 핵심이다.때문에 프론트엔드에서 이벤트가 어떻게 처리되는지 흐름을 정리해 보았다.내용을 이해하기 위해 사전에 이벤트와 이벤트 핸들러가 무엇인지 알아야 한다.✅ 이벤트(Event)사용자가 어떤 행동을 했을 때 발생하는 사건.예) 클릭(click), 키 누름(keydown), 마우스 움직임(mousemove), 입력(input) 등✅ 이벤트 핸들러(Event Handler)이벤트가 발생했을 때 실행되는 함수.예) 버튼을 클릭하면 어떤 코드를 실행하고 싶을 때, 그게 핸들러이다.Event interface우리가 웹에서 실행하는 이벤트는 자바스크립트의 Event interface에 맞춰서 생성된 객체이다. 자바스크립트에서 이벤트는 다음 코드로 정의된다.interface Even..
[Node.Js] npm error code ERR_INVALID_ARG_TYPE 해결하기
·
기타
개요기존에 Nodejs 18버전을 사용하다가 2025-04-02 기준 lts 버전인 22.14.0 버전으로 버전 업그레이드 후 React 프로젝트를 하려고 했는데 에러가 발생하였다.0 verbose cli C:\Users\koe73\AppData\Local\nvm\v22.14.0\node.exe C:\Users\koe73\OneDrive\Desktop\cli1 info using npm@11.2.02 info using node@v22.14.03 silly config load:file:C:\Users\koe73\OneDrive\Desktop\cli\npmrc4 silly config load:file:C:\Users\koe73\OneDrive\Desktop\cli\.npmrc5 silly config ..
호스팅 서버에서 Spring boot 프로젝트 배포하기
·
기타
개요원격 호스팅 서버에서 Spring boot 프로젝트를 배포하는 과정을 정리해 보았다. VS code에서 원격 접속이 필요하므로 REMOTE - SSH 확장 플러그인을 설치해야 한다.프로젝트 빌드 파일 생성먼저 로컬 환경에서 프로젝트 빌드를 해야 한다. Spring boot 프로젝트의 경우 프로젝트 내에서 다음 명령어로 빌드를 실행한다.gradle build// 위 명령어 안될 경우./gradlew build -x test 빌드에 성공할 경우 다음 메세지와 함께 프로젝트 내부에 jar 확장자의 빌드 파일이 생성된다.빌드 파일의 경로는 다음과 같다.[프로젝트 루트]/[프로젝트 패키지명]/build/libs위와 같은 빌드 파일이 생성된다. 맨 위의 파일로 배포를 수행할 것이다.원격 서버에 빌드 파일 옮기기..
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)
·
기타
개요컴퓨터공학에서 스레드는 동시에 여러 작업이나 프로그램을 실행하는 것을 의미한다. 코드를 실행할 수 있는 각 단위를 스레드라고 한다. 스레드는 멀티 스레드와 싱글 스레드로 나뉘며, 멀티 스레드는 말 그대로 한번에 여러 작업을 처리할 수 있는 것을 의미하고 싱글 스레드는 한번에 하나의 작업만을 처리할 수 있다. 자바스크립트는 어떤 스레드를 가지며 어떻게 로직을 처리하는지 알아보자.자바스크립트의 스레드자바스크립트는 기본적으로 싱글 스레드 언어이다. 자바스크립트의 메인 스레드는 브라우저에서 사용자 이벤트를 처리하고, 디스플레이 렌더링 및 페인팅, 일반적인 웹이나 앱을 구성하는 대부분의 코드를 실행한다. 웹이나 앱을 렌더링하는 과정은 모두 하나의 스레드에서 일어나기 때문에 느린 웹 & 앱 스크립트는 전체 브라..