반응형

분류 전체보기 108

[Nginx] Nginx란?

대부분의 백엔드 개발자가 갖춰야 할 기본 스킬 중 하나가 Nginx다. 하지만 프론트엔드 개발자도 백엔드 개발자와의 원활한 협업을 위해서는 Nginx에 대한 기본 개념을 어느정도 알고있어야 한다고 생각이 들어서 Nginx에 대해 공부해보고자 한다. [ Nginx 공부 전 알아야 할 CS ]클라이언트서비스를 이용하기 위해 네트워크를 통해 요청을 보내는 주체웹 개발 영역에서 보통 클라이언트라 하면 크롬, 사파리, 익스플로러 등 웹 브라우저를 의미 웹 서버클라이언트의 요청에 따라 HTML, CSS, JS, 이미지 파일과 같은 정적 파일을 응답하여 제공하는 소프트웨어HTTP 프로토콜을 사용해 클라이언트와 통신대표 : Nginx, Apache 등 WAS클라이언트 요청에 대해 동적인 처리를 담당하는 영역웹 서버와 ..

Frontend 2025.04.07

타입스크립트 - Mapped Types

[타입스크립트] 맵드 타입타입스크립트의 고급 타입인 맵드 타입(mapped type)이란 기존에 정의되어 있는 타입을 새로운 타입으로 변환해 주는 기능을 말한다. 예를 들어 인터페이스에 있는 모든 속성을 루프문 같이 순회해서 optional(?) 로 바꾸거나 readonly 로 지정할수 있으며 아예 지정된 타입을 바꿔서 변경된 타입을 반환할 수도 있다.   아직 맵드 타입에 대해 문법을 배우지는 않았지만 간단하게 살펴보자면 다음과 같다.interface Obj { prop1: string; prop2: string;}type ChangeType = { [K in keyof T]: number;};type Result = ChangeType;/*{ prop1: number; prop2: nu..

Frontend 2025.04.03

타입스크립트 - Conditional Types

[타입스크립트] 조건부 타입조건부 타입(conditional type)이란 입력된 제네릭 타입에 따라 타입을 결정하는 기능을 말한다.위와 같이 조건부 타입 문법은 extends 키워드와 물음표 ? 기호를 사용하는데 보자마자 삼항 연산자가 생각 났을 것이다.유추한 바와 같이 자바스크립트의 삼항 연산자는 변수의 값을 조건에 따라 결정하는 것이라면, 타입스크립트의 조건부 타입은 값 대신 타입을 조건에 따라 결정하는 것이라고 보면 된다. 위의 조건부 타입 코드 문법을 풀이해보자면 타입은 T가 U에 할당될 수 있으면 타입은 X가 되고 그렇지 않다면 타입이 Y가 된다는 것을 의미한다.착각하지 말아야 할점은 조건부 타입도 유니온처럼 하나의 타입이라는 것이다.extends 키워드가 들어가서 제네릭 꺾쇠 괄호  안에 써..

Frontend 2025.04.02

타입스크립트 - Utility Types

[타입스크립트] 유틸리티 타입TypeScript는 공통 타입 변환을 용이하게 하기 위해 몇 가지 유틸리티 타입을 제공한다.예를 들어 JS에서 배열을 다룰 때 for, while문이면 충분하겠지만 따로 forEach문이나 배열 생성하는 map, 배열요소를 찾는 find나 filter와 같이 배열을 다루는데 편리하게 이용가능한 루프 헬퍼 함수를 지원하듯이, 타입스크립트에서도 타입 변경을 쉽고 용이하게 하기위해 헬퍼함수처럼 Utility Type을 제공한다고 생각하면 된다. 유틸리티 타입을 쓰지 않더라도 기존의 인터페이스, 제네릭 등의 기본 문법으로 충분히 타입 변환이 가능하지만 유틸리티 타입을 사용하면 훨씬 더 간결한 문법으로 타입 정의가 가능할 뿐 아니라 이미 정의한 타입을 변환할 때 유용하게 쓸 수 있다..

Frontend 2025.04.02

도커(Docker)

도커(Docker)란?리눅스 컨테이너에 리눅스 어플리케이션을 프로세스 격리기술을 사용해 쉽게 컨테이너로 실행, 관리할 수 있게 해주는 오픈소스 프로젝트.도커는 일반적으로 도커 엔진(Docker Engine) 혹은 도커에 관련된 모드 프로젝트를 말한다. 도커 엔진(Docker Engine)은 컨테이너를 생성하고 관리하는 주체로서, 자체로도 컨테이너를 제어할 수 있고 다양한 기능을 제공해준다.도커의 생태계에 있는 여러 프로젝트들은 도커 엔진을 좀 더 효율적으로 사용하기 위한 것에 불과하기 때문에, 도커의 핵심은 도커 엔진이라고 할 수 있다.  Vitrual Machine(가상 머신) vs Docker Container(도커 컨테이너) 가상 머신(Virtual Machine) 가상 머신은 하이퍼바이저를 이용해..

Frontend 2025.03.27

Submodule 구축

Submodule이란일반적으로 하나의 repository에 해당 프로젝트의 모든 내용이 포함된다. 그러나 하나의 repo로 관리하기 어려운 대형 프로젝트 역시 존재한다. 쉽게 shared library(slib)를 가져다 쓰는 경우를 생각해볼 수 있다. 가령 무지성으로 slib의 내용을 싹싹 긁어다가 하나의 main repo로 병합하여 관리한다고 생각해보자.  위 경우 두 가지 문제가 발생할 수 있다:slib의 업데이트가 이뤄졌을 때, 버전 관리가 매우 번거롭다. (Why? main repo와 commit logs를 공유하기 때문에)main repo의 변화에 맞춰 slib의 내용이 변경될 경우, 이를 사용하는 다른 모든 repo의 내용 역시 manually하게 전부 변경 해야 함. 당연히 slib의 내용..

Frontend 2025.03.11

npm package 구축 및 사용법

Package란?package: 완성된 프로그램 1. 다른 패키지의 부품으로써 사용되는 package$ var my = require('my-package'); 2. package 자체가 완제품으로써 사용되는 것$ my-package  Package의 특성1. 코드 모듈화공통된 기능을 별도의 코드베이스로 추출하여 npm 패키지로 만듦예로, 여러 레포지토리에서 공통으로 사용하는 함수나 유틸리티를 하나의 패키지로 모을 수 있음 2. 패키지 생성해당 코드를 포함한 새로운 프로젝트를 생성,package.json 파일을 작성하여 npm 패키지로 등록할 준비 3. 배포공통 기능을 npm 레지스트리에 배포 4. 각 프로젝트에서 사용개별 프로젝트에서 이 패키지를 의존성으로 추가npm install  명령어를 사용해 패..

Frontend 2025.03.10

Monorepo 환경 구축하기

모노레포란?두 개 이상의 프로젝트 코드를 하나의 버전 관리 저장소(레포지토리)에서 관리하는 방법등장 이유 : 큰 규모의 소프트웨어 개발 프로젝트에서 발생하는 문제를 해결하기 위해서큰 규모의 프로젝트에는 여러 개의 레포가 생성됨. 표면적으로 봤을 때는 큰 문제는 없으나 다음과 같은 문제들 때문에 프로젝트 관리에 어려움이 발생할 수 있음중복 코드서로 다른 패키지 의존성서로 의존하는 프로젝트들끼리의 리펙토링 비용코드가 저장소마다 상황이 다르기에 협업 문제특징단일 코드 저장소 : 모든 소스 코드를 단일 코드 저장소에 저장모듈화 : 코드를 모듈화해 필요한 모듈만 가져와서 사용의존성 관리 : 모든 코드가 단일 코드 저장소에 있기에 의존성 문제 빠르게 해결협업 : 모든 코드가 단일 콛 저장소에 있기에 협업 편리성 증..

카테고리 없음 2025.03.10

Javascript - 동작 방식

자바스크립트 엔진자바스크립트를 실행하기 위해서는 자바스크립트 엔진이 필요하다. 자바스크립트 엔진은 자바스크립트 코드를 실행하는 프로그램 또는 인터프리터이다. 인터프리터란?프로그래밍 언어의 소스 코드를 바로 실행하는 컴퓨터 프로그램 또는 환경을 말한다.원시 코드를 기계어로 번역하는 컴파일러와 대비된다. 자바스크립트 엔진의 대표적인 예시로는 구글의 V8 엔진이 있다.자바스크립트 엔진의 주요 구성요소로는 메모리 힙(Memory Heap)과 콜 스택(Call stack)이 있다.메모리 힙(Memory Heap) : 메모리 할당이 일어나는 곳콜 스택(Call Stack) : 코드가 실행될 때 호출 스택이 쌓이는 곳[ 메모리 힙 ]변수 선언, 함수 저장, 호출 등의 작업이 발생하는 공간const num = 531;..

카테고리 없음 2025.01.22

Javascript - 얕은 복사, 깊은 복사

JS의 얕은 복사, 깊은 복사를 이해하기 위해선 우선 자바스크립트의 값에 대해 알아야한다.자바스크립트에서 값은 원시값과 참조값으로 나뉜다. 원시값NumberStringBooleanNullUndefined 원시값은 값을 복사할 때 복사된 값을 다른 메모리에 할당하기 때문에 원래의 값과 복사된 값이 서로에게 영향을 미치지 않는다const a = 1;let b = a;b = 2console.log(a); //1console.log(b); //2  참조값ObjectSymbol 참조값은 변수가 객체의 주소를 가리키는 값이기 때문에 복사된 값(주소)이 같은 값을 가리킨다const a = {number: 1};let b = a;b.number = 2console.log(a); // {number: 2}console...

Frontend/Javascript 2025.01.14
반응형