전체 글

SSH(Secure Shell)에 대해서

SSH(Secure Shell)는 컴퓨터 네트워크에서 암호화된 통신을 통해 원격으로 컴퓨터에 접속하고 명령을 실행할 수 있는 프로토콜이다. SSH는 보안 및 데이터 무결성을 제공하기 위해 설계되었으며, 일반적으로 원격 서버에 안전하게 접속하고 파일을 전송하거나 명령을 실행하는 데 사용된다. SSH는 클라이언트-서버 모델을 기반으로 작동한다. 일반적으로 SSH 클라이언트는 로컬 컴퓨터에서 실행되며, 원격 서버에 대한 인증 및 암호화된 통신을 처리한다. SSH 서버는 원격 컴퓨터에서 실행되며, 클라이언트의 연결 요청을 수락하고 인증을 검증한 후 암호화된 통신을 설정한다. SSH의 기능과 특징 보안 SSH는 네트워크 통신을 암호화하여 데이터의 기밀성과 무결성을 보호한다. 암호화된 연결을 통해 비인가자가 데이..

React Suspense와 React-Query, 그리고 react-error-boundary

React의 Suspense 기능이 추가된 이래로, React-Query와 같은 비동기 상태 처리 라이브러리는 suspense 기능을 지원하게 되었다. 그리고 이번에 카카오페이 기술 블로그의 글을 보았는데, 여기에 더해서 react-error-boundary 라이브러리로 에러처리까지 한 번에 하는 것이 매우매우매우 인상적이었다. 🍓 사실, 에러 처리나 로딩 관련 로직은 필요하면서도 반복적인 코드가 계속 들어가게 만드는 문제가 있기에 이 방법이 더 가치있는 것 같다. 그래서, 이번에 이 세가지 기술들을 직접 사용해보고 기록을 남기기로 하였다. 기본적인 구조는 다음과 같다. import styles from "./page.module.css"; import React, { Suspense } from "re..

Typescript에서 Decorators 사용하기

타입스크립트는 데코레이터 문법을 지원한다. 다만, 현재 (v5.0.4) 버전에서는 실험적인 문법으로 이를 지원하기에 추후 변경될 가능성이 있다. 👍 타입스크립트에서는 데코레이터를 사용하여 메타데이터를 부여할 수 있다. (추가적인 설정이나 정보를 첨부한다) 🍉 실험적인 기능이기에 데코레이터 문법을 사용하기 위해서는 tsconfig.json 설정이 필요하다. { "compilerOptions": { "target": "ES5", "experimentalDecorators": true } } target이 ES5 이하 버전이 되면, 일부 문법이 제대로 작동하지 않을 수도 있다. 데코레이터의 종류로는 클래스 데코레이터 (Class Decorator), 메서드 데코레이터 (Method Decorator), 프로퍼..

nvm 대신 asdf 사용하기

nvm은 역시나 가장 많이 사용되는 node version manager이다. 다만, 각 프로젝트마다 다른 node version을 사용하고 있을 때, 프로젝트 디렉토리에서 일일히 매번 nvm use 사용버전을 입력해주어야 한다. 물론, cmd 설정을 건드려 .nvmrc의 버전을 자동으로 읽어오게 하는 방법도 있지만, 공식적으로 nvm에서 지원하는 기능은 아니기에 설정이 번거롭다. https://stackoverflow.com/questions/23556330/run-nvm-use-automatically-every-time-theres-a-nvmrc-file-on-the-directory run `nvm use` automatically every time there's a .nvmrc file on ..

input 붙여넣기 방지하기

때로는 보안과 같은 이유로 input에 붙여넣기가 허용되지 않을 수 있다. 이 경우, 붙여넣기 이벤트를 탐지하고 해당 이벤트가 제대로 작동하지 못하도록 해주어야 한다. 이번엔 이를 어떻게 구현할 수 있을지 알아보았다. 다음과 같이 input이 있다. 이 input에 붙여넣기를 허용하지 않기 위해서는 어떻게 해야할까? eventListner를 사용하면, 이를 간단하게 구현할 수 있다. const input = document.querySelector("input"); input.addEventListener('paste', (event) => { event.preventDefault(); alert("!") }); paste 이벤트가 발생하였을 때, 기존의 이벤트를 없애고 알림창을 띄운다. 만약 당신이 위..

SemVer에 대해서 알아보기

버전을 표기하는 방법으로 npm에서 사용되는 것이 SamVer이다. SemVer(Semantic Versioning)는 소프트웨어 버전을 의미적으로 명확하게 표현하기 위한 버전 관리 체계이다. SemVer는 주 버전(Major), 부 버전(Minor), 패치 버전(Patch)으로 구성되며, 이러한 버전 구성 요소들을 조합하여 소프트웨어의 변경 사항과 호환성을 나타낸다. 1.2.3 (major: 1 minor: 2 patch: 3) ❄️ 주 버전(Major)은 대규모 변화나 호환되지 않는 변경 사항이 있을 때 증가한다. 이는 기존 버전과의 하위 호환성을 깨뜨릴 수 있는 주요한 업데이트를 의미한다. ☁️ 부 버전(Minor)은 기능적인 추가 또는 변경이 있을 때 증가한다. 이러한 변경 사항은 하위 호환성..

typescript) 문자열 배열의 원소들의 값을 Union type으로 가지는 type 생성하기

내가 겪은 케이스는 다음과 같다. const transportations = ["taxi", "bus", "subway", "bicycle", "walk"]; 위와 같이 상수로 사용할 교통 수단의 경우의 수를 미리 정의해 놓을 수 있다. 그리고, 파티의 참석자 정보를 객체로 표현한다고 했을 때, 아래와 같은 데이터를 상정할 수 있다. const participant = { nickname: "park"; age: 43; transportation: "airplane"; } 위의 객체의 타입을 interface로 표현하면, 다음과 같을 것이다. interface Participant { nickname: string; age: number; transportation: string; } 물론, 이대로도 훌..

Javascript 메모리 누수가 발생하는 경우

자바스크립트에서 때때로 메모리 누수가 발생하는 경우가 있다. 가비지 컬렉터가 파악하지 못해 할당된 메모리가 해제되지 못할 수 있다. 이런 경우, 메모리 누수가 누적이 되면 성능저하와 심할경우 프로세스가 중단될 수도 있다. 메모리 누수가 발생하는 경우를 알고 이를 피하는 것이 좋은 자바스크립트 개발자이므로, 어떤 경우 메모리 누수가 발생하는지 알아보았다. 전역 변수의 사용 function fn() { leak = "Global Variable Memory Leak"; } 위와 같은 전역 변수는 프로세스가 종료될 때 까지 메모리에 존재하므로, 사용하지 않는 전역 변수는 메모리 누수의 원인이 될 수 있다. 이벤트 리스너를 해제하지 않음 function EventListnerLeak() { const btn =..