전체 글

개요기존에 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 프로젝트를 배포하는 과정을 정리해 보았다. VS code에서 원격 접속이 필요하므로 REMOTE - SSH 확장 플러그인을 설치해야 한다.프로젝트 빌드 파일 생성먼저 로컬 환경에서 프로젝트 빌드를 해야 한다. Spring boot 프로젝트의 경우 프로젝트 내에서 다음 명령어로 빌드를 실행한다.gradle build// 위 명령어 안될 경우./gradlew build -x test 빌드에 성공할 경우 다음 메세지와 함께 프로젝트 내부에 jar 확장자의 빌드 파일이 생성된다.빌드 파일의 경로는 다음과 같다.[프로젝트 루트]/[프로젝트 패키지명]/build/libs위와 같은 빌드 파일이 생성된다. 맨 위의 파일로 배포를 수행할 것이다.원격 서버에 빌드 파일 옮기기..

개요HTTP는 HTML 문서와 같은 리소스들을 가져올 수 있도록 해주는 프로토콜이다. HTTP는 웹에서 이루어지는 모든 데이터 교환의 기초이며, 클라이언트 - 서버 프로토콜이기도 하다. HTTP 프로토콜과 보안성을 높이고 지연 시간을 줄이기 위한 HTTP의 특징을 알아보려고 한다. 하나의 웹 문서는 HTTP 프로토콜로부터 불러온 텍스트, 레이아웃 설명, 이미지, 비디오, 스크립트 등의 하위 문서들로 구성된다.HTTP란?1990년대 초에 설계된 HTTP는 계속해서 진화해온 확장 가능한 프로토콜이다. HTTP는 애플리케이션 계층 즉 OSI 7계층에서 응용 계층에 속하는 프로토콜로, 신뢰 가능한 전송 프로토콜이라면 이론상으론 무엇이든 사용이 가능하지만 보통 TCP 혹은 암호화된 TCP인 TLS를 통해 전송된다..

개요사용자는 빠르고 상호작용이 원활한 컨텐츠로 이루어진 웹 경험을 원한다. 따라서 개발자는 이 두가지 목표를 달성해야 한다. 브라우저가 어떻게 동작하는지 이해한다면 향후 실제 성능을 향상시키는 고민을 할 때 큰 도움이 될 것이다.웹 성능의 두가지 문제점지연 시간웹을 빠르게 로드하는데 있어 지연 시간은 이겨내야할 중요한 문제이다. 네트워크 지연시간은 네트워크를 통해 컴퓨터가 바이트를 전송하는데 걸리는 시간을 의미한다. 웹을 빠르게 로드하기 위해 신경써야 할 것은 최대한 빠른 요청과 CDN을 통한 캐싱 및 지리적 분산, HTTP/2 이상 프로토콜 적용, 로드 밸런싱, 리소스 및 코드 최적화, 브라우저 캐싱, DNS 최적화 등 여러 요소가 있다.     브라우저는 싱글 쓰레드로 동작한다.대부분의 브라우저는 싱..

개요컴퓨터공학에서 스레드는 동시에 여러 작업이나 프로그램을 실행하는 것을 의미한다. 코드를 실행할 수 있는 각 단위를 스레드라고 한다. 스레드는 멀티 스레드와 싱글 스레드로 나뉘며, 멀티 스레드는 말 그대로 한번에 여러 작업을 처리할 수 있는 것을 의미하고 싱글 스레드는 한번에 하나의 작업만을 처리할 수 있다. 자바스크립트는 어떤 스레드를 가지며 어떻게 로직을 처리하는지 알아보자.자바스크립트의 스레드자바스크립트는 기본적으로 싱글 스레드 언어이다. 자바스크립트의 메인 스레드는 브라우저에서 사용자 이벤트를 처리하고, 디스플레이 렌더링 및 페인팅, 일반적인 웹이나 앱을 구성하는 대부분의 코드를 실행한다. 웹이나 앱을 렌더링하는 과정은 모두 하나의 스레드에서 일어나기 때문에 느린 웹 & 앱 스크립트는 전체 브라..

개요자바스크립트나 타입스크립트 프로젝트에서 모듈이나 컴포넌트를 불러 올 경우 다음과 같은 형태로 모듈이나 컴포넌트를 불러오는 경우를 많이 경험할 수 있다.import { whereAmI } from "../../../../../../where/the/hell/are/you";상대 경로와 절대 경로를 사용해서 모듈이나 컴포넌트를 불러오는 방법은 매우 일반적이지만 이보다 더 좋은 방법을 소개하려고 한다.기존의 문제점상대 경로 상대 경로 방식으로 모듈을 불러오는 방식은 매우 간편하다는 장점이 있다. 일반적인 IDE에서는 내부 모듈의 위치를 상대 경로로 자동으로 작성해준다. 하지만 모듈을 다른 폴더로 옮길 경우에 해당 모듈을 사용하는 모든 파일의 경로를 수정해야 한다. 물론 이와 같은 경우에도 IDE가 알아서 ..

개요본가에 있는 MySQL 서버를 사용할 일이 있어서 서울에서 외부 접속을 시도하였는데 접속이 거부당했다.본가에서 라즈베리파이를 확인하였더니 전원이 꺼져 있었다.마지막으로 접속했을 때 poweroff 명령을 사용한 적도 없었고 무언가 문제가 발생하였다고 생각하여 ssh 접속 로그를 확인하였다.로그를 보니 엄청나게 많은 brute force 공격 흔적이 있었다.포트번호를 바꿔가며 접속을 시도하는 것을 보아하니 일단 외부 접속을 열어둔 IP라면 좀비 PC를 활용하여 무차별적으로 접속을 시도하는 것 같았다.로그에 찍힌 IP 주소는 모두 해외였기에 이참에 해외 공격을 원천봉쇄해야겠다고 생각이 들었다.한국 IP 대역 다운로드우선 한국 IP만 허용해야 하기 때문에 한국의 IP 주소들을 다음 명령어를 통해 다운받는다..

개요Typescript로 개발을 하면서 때론 매개변수의 유형에 따라 다른 타입의 값을 return하는 함수를 작성하고 싶을 수 있다.예를 들면 다음과 같다.declare const record: Record;declare const array: string[];function getObject(group) { if (group === undefined) { return record; } return array;}const arrayResult = getObject("group");const recordResult = getObject(undefined);해당 코드에서 arrayResult 변수의 타입은 string[] 이 되어야 하고 recordResult의 타입은 이 되어야..