react 프로젝트를 만들고 잘 만들어졌는지 확인하려 npm run start를 커맨드에 입력하였다.

sh: react-scripts: command not found

이런 에러가 출력됐다.

package가 다운로드되지 않아서 나는 에러인줄 알고 npm i을 입력했으나 똑같은 에러를 뱉어냈다.
참고로 npm i 는 npm install과 같다.

해결방법

rm -rf node_modules

npm i

node_modules를 제거하고 다시 설치했으나 또 똑같은 문제가 발생한다.

npm i -g react-scripts
npm i

이렇게 하니 문제가 해결 됐다.

HTTP(HyperText Transfer Protocol)

HTTP는 클라이언트와 서버가 서로 데이터를 주고받기 위해 사용되는 통신 규약이다.
클라이언트와 서버 간의 통신을 담당하며, 웹 브라우저와 웹 서버 간의 데이터 전송을 위해 주로 사용된다.

HTTP 특징

비연결성(Stateless)

• HTTP는 비연결성 프로토콜이다. 즉, 클라이언트와 서버 간의 각 요청은 독립적이며, 이전 요청과 상태를 공유하지 않는다. 예를 들어, 사용자가 한 페이지에서 다른 페이지로 이동할 때, 이전 페이지의 상태는 유지되지 않는다. 이로 인해 서버는 클라이언트의 각 요청을 별도로 처리한다.

무상태성(Stateless)

• HTTP는 무상태 프로토콜로, 각 요청 간의 상태를 유지하지 않는다. 즉, 각 HTTP 요청은 독립적이며, 서버는 이전 요청의 정보를 기억하지 않는다. 이를 해결하기 위해 쿠키나 세션과 같은 메커니즘이 사용된다.

표준 포트

• HTTP는 기본적으로 80번 포트를 사용한다 HTTPS(보안 HTTP)의 경우, 기본적으로 443번 포트를 사용한다.

HTTP 메시지 구조

• HTTP는 요청(Request)와 응답(Response)으로 이루어진 메시지를 사용한다.

• 요청 메시지: 클라이언트가 서버에 보내는 메시지로, 주로 메서드(GET, POST 등), URL, HTTP 버전, 헤더, 바디로 구성되어 있다.

• 응답 메시지: 서버가 클라이언트에 보내는 메시지로, 주로 상태 코드(예: 200, 404), HTTP 버전, 헤더, 바디로 구성된다.

Request-Response 모델

HTTP는 클라이언트가 요청을 보내고 서버가 응답을 반환하는 형태의 모델을 따른다. 클라이언트는 요청 메서드(GET, POST, PUT, DELETE 등)를 사용하여 원하는 동작을 서버에 전달하고, 서버는 상태 코드와 데이터를 포함한 응답을 반환한다.

URI(Uniform Resource Identifier)

HTTP는 리소스를 식별하기 위해 URI를 사용한다. 클라이언트는 URI를 통해 서버에 요청할 리소스를 지정한다. URI는 URL(Uniform Resource Locator)이라는 특정한 형태의 식별자로 표현된다.

HTTP 요청 메서드

HTTP는 다양한 요청 메서드를 통해 클라이언트가 서버에 수행할 작업을 정의고 있으며, 주요 메서드는 아래와 같다.

1. GET: 서버에서 리소스를 요청하고 주로 데이터를 가져오는 데 사용된다.

2. POST: 서버에 데이터를 전송하여 리소스를 생성하거나 업데이트 한다.

3. PUT: 서버에 데이터를 보내 특정 리소스를 업데이트할 때 사용한다.

4. DELETE: 서버에서 특정 리소스를 삭제한다

5. HEAD: GET 요청과 동일하지만, 응답에 본문을 포함하지 않으며 리소스의 메타데이터만 요청할 때 사용한다.

6. OPTIONS: 서버에서 사용할 수 있는 HTTP 메서드를 확인한다.

7. PATCH: 리소스의 부분적인 업데이트를 수행한다.

HTTP 상태 코드

HTTP 상태 코드는 클라이언트의 요청에 대한 서버의 응답 상태를 나타내며, 주요 상태 코드는 아래와 같다.

1. 1xx (정보): 요청을 받았으며 처리가 진행 중.

2. 2xx (성공): 요청이 성공적으로 처리된 경우

• 200 OK: 요청이 성공적으로 처리됨.

• 201 Created: 요청이 성공적으로 처리되었으며, 리소스가 생성됨.

3. 3xx (리다이렉션): 클라이언트는 요청을 완료하기 위해 추가적인 작업이 필요함.

• 301 Moved Permanently: 요청된 리소스가 영구적으로 이동됨.

• 302 Found: 요청된 리소스가 임시적으로 다른 위치에 있는 경우.

4. 4xx (클라이언트 오류): 클라이언트의 요청에 오류가 있는 경우

• 400 Bad Request: 잘못된 요청.

• 401 Unauthorized: 인증 필요.

• 403 Forbidden: 요청된 리소스에 접근할 권한이 없음.

• 404 Not Found: 요청된 리소스를 찾을 수 없음.

5. 5xx (서버 오류): 서버가 요청을 처리하는 도중 오류가 발생.

• 500 Internal Server Error: 서버 내부 오류.

• 503 Service Unavailable: 서버가 현재 요청을 처리할 수 없음.

HTTP 버전

1. HTTP/0.9: 초기 버전으로, 단순 텍스트만 데이터로 전송함.

2. HTTP/1.0: 첫 번째 공식 버전으로, 메타데이터를 포함한 메시지 헤더 도입.

3. HTTP/1.1: 가장 널리 사용되는 버전으로, 연결 지속(Keep-Alive) 및 파이프라이닝 기능 추가.

4. HTTP/2: 성능 개선을 위해 멀티플렉싱, 헤더 압축, 서버 푸시 등의 기능이 추가됨,.

5. HTTP/3: HTTP/2의 문제점을 해결하고, QUIC 프로토콜을 사용하여 성능을 크게 개선한 최신 버전.

HTTPS (HTTP Secure)

HTTPS는 HTTP에 SSL/TLS 프로토콜을 추가하여 데이터를 암호화하여 전송하는 방식이다. 이를 통해 데이터를 안전하게 전송할 수 있으며, 특히 금융 거래나 개인 정보가 포함된 통신에서 널리 사용된다.

스택(Stack)과 큐(Queue)는 둘 다 데이터 구조의 일종이다. 

스택(Stack)

스택은 LIFO(Last in, First Out) 구조디아, 즉 가장 늦게 추가된 요소가 가장 먼저 제거되는 구조이다.

기본 연산:

1. push: 스택의 맨 위에 요소를 추가하는 연산
2. pop: 스택의 맨 위에 있는 요소를 제거하고 반환하는 연산
3. peek 또는 top: 스택의 맨 위에 있는 요소를 제거하지 않고 반환하는 연산
4. isEmpty: 스택이 비어있는지 확인하는 연산

사용 사례:

• 브라우저 뒤로가기 : 가장 마지막에 열린 페이지부터 다시 보여준다.
• 함수 호출 스택: 재귀 호출에서 함수가 호출될 때마다 스택에 쌓였다가 반환될 때마다 스택에서 제거된다.
• 실행 취소 기능: 최근 작업들을 스택에 저장해 두었다가 실행 취소할 때 스택에서 제거한다.

스택 코드

class Stack<T> {
  private items: T[] = [];

  push(item: T): void {
    this.items.push(item);
  }

  pop(): T | undefined {
    return this.items.pop();
  }

  peek(): T | undefined {
    return this.items[this.items.length - 1];
  }

  isEmpty(): boolean {
    return this.items.length === 0;
  }
}

큐(Queue)

큐는 FIFO(First In, First Out) 구조로, 가장 먼저 추가된 요소가 가장 먼저 제거된다.

기본 연산:

1. enqueue: 큐의 맨 뒤에 요소를 추가하는 연산
2. dequeue: 큐의 맨 앞에 있는 요소를 제거하고 반환하는 연산
3. front 또는 peek: 큐의 맨 앞에 있는 요소를 제거하지 않고 반환하는 연산
4. isEmpty: 큐가 비어있는지 확인하는 연산

사용 사례:

• 작업 스케줄링: 프로세스나 작업을 순서대로 처리할 때 사용된다.
• 프린터 대기열: 인쇄 작업을 순서대로 인쇄한다.
• 너비 우선 탐색(BFS): 그래프 탐색에서 사용.

큐 코드

class Queue<T> {
  private items: T[] = [];

  enqueue(item: T): void {
    this.items.push(item);
  }

  dequeue(): void {
    this.items.shift();
  }

  peek(): T | undefined {
    return this.items[0];
  }

  isEmpty(): boolean {
    return this.items.length === 0;
  }
}

코루틴이란?

코루틴(Coroutine)은 Unity에서 사용되는 특수한 함수로, 일반 함수와 달리 실행을 중단하고 나중에 다시 재개할 수 있다. 코루틴은 IEnumerator 타입을 반환하고 yield 키워드를 사용하여 실행을 중단하고 특정 조건이 충족되면 다시 실행을 재개며, 이를 통해 시간 기반 작업이나 비동기 작업을 쉽게 처리할 수 있다.

다양한 yield 유형

지정된 시간(초) 동안 대기

yield return new WaitForSeconds(3f); // 3초 동안 대기

현재 프레임의 끝까지 대기, 다음 프레임에서 코루틴이 재개된다.

yield return null;

모든 렌더링 작업이 끝날 때까지 대기한다.

yield return new WaitForEndOfFrame();

다음 물리 업데이트가 될 때까지 대기한다.

yield return new WaitForFixedUpdate();

다른 코루틴이 완료될 때까지 대기한다.

yield return StartCoroutine(OtherCoroutine());

Image 태그에서 해당 경고 발생했다.

LCP 에  대한 경고이다.

Priority 속성

priority 속성은 Image 컴포넌트를 고우선 순위 리소스로 취급하며, 해당 이미지가 lazy loading 되지 않고 즉시 로딩되게 한다. 이 속성은 주로 화면의 상단에 표시되는 이미지에 유용하다.

<Image priority={true} alt="" src={"/images/Joy.png"} fill={true}/>

priority 를 true로 설정하면 경고 사라진다.

장점

priority 속성의 장점

1. LCP(Largest Contentful Paint) 향상: 이미지가 즉시 로드되므로 LCP 지표가 개선다. LCP는 Core Web Vitals의 중요한 요소이다.
2. 사용자 경험 개선: 중요한 이미지를 빠르게 로드함으로써 초기 페이지 로딩 시 사용자 경험이 향상됩니다.

ctrl + c 를 통해 앱을 종료할 때 에러가 발생했다.

TypeError: The "code" argument must be of type number. Received type string ('SIGINT')
    at process.set [as exitCode] (node:internal/bootstrap/node:123:9)
    at process.exit (node:internal/process/per_thread:177:24)
    at process.<anonymous> (C:\Users\장준영\Desktop\코딩\onBooth\onbooth-admin-backend-nest\node_modules\@prisma\client\runtime\library.js:99:2170)
    at Object.onceWrapper (node:events:635:26)
    at process.emit (node:events:520:28)
    at process.emit (C:\Users\장준영\Desktop\코딩\onBooth\onbooth-admin-backend-nest\node_modules\source-map-support\source-map-support.js:516:21)

어차피 끌때 문제기때문에 알아볼까 고민하다가 나중에 어떤 문제가 발생할지 몰라서 알아봤다.

node.js 특정버전들에서 발생하는 에러였다. 

https://github.com/coreybutler/nvm-windows에서 nvm을 설치 후

nvm list

를 치면 node 버전이 나온다.

nvm use 버전

으로 버전을 18.12.0버전으로 변경하니 해당 에러가 사라졌다.

새로운 자료형

javascript에는 배열과 객체라는 자료형이 있었지만, ECMAScript 2015(ES6)에 "Map"과 "Set"자료형이 추가되었으며, 더욱더 효율적으로 데이터를 관리할 수 있게 되었다.

자료형 Map의 구조

Map은 키-값 쌍을 저장하는 데이터 구조이다. 다른 언어에서는 "딕셔너리", "연관 배열" 등으로 알려져 있다. 언어마다 조금씩 다른 구현이 있을 수 있지만, 기본적으로 기와 값을 연관시키는 방법으로 사용된다.

키-값 쌍으로 된 데이터구조는 javascript 에서  object도 있다. 하지만 두 자료형은 다른 부분들이 존재한다. object자료형은 string, 즉 문자열만이 키가 될 수 있지만, Map자료형은 문자열, 숫자, 배열등등 어떠한 자료형이든 키로 사용될 수 있다. 

const map = new Map();

map.set(1, "a");
map.set("a", "a");
map.set(() => null, "a");
map.set([1, 2, 3], "a");
map.set({ a: 1 }, "a");
map.set(new Map(), "a");

Map의 메서드 및 프로퍼티

Map 객체에는 몇가지 중요한 메서드가 있다.

• set(key, value): 주어진 키와 값을 Map 객체에 추가한다. 키가 이미 존재한다면, 해당 키의 값을 업데이트한다. 
• get(key): key에 해당하는 값을 반환한다. 만약 해당 키가 존재하지 않는다면 undefined를 반환한다. 
• has(key): key가 Map 객체 내에 존재하는지 여부를 확인한 후 true 혹은 false를 반환한다. 
• delete(key): 주어진 키에 해당하는 값을 Map 객체에서 제거합한다.
• clear(): Map 객체 내의 모든 요소를 제거한다. 
• keys(): Map 객체 내의 모든 키를 담은 새로운 Iterator 객체를 반환한다. 
• values(): Map 객체 내의 모든 값을 담은 새로운 Iterator 객체를 반환한다. 
• entries(): Map 객체 내의 모든 엘리먼트를 담은 새로운 Iterator 객체를 반환한다. 이 Iterator의 각 엘리먼트는 [key, value] 형태의 배열이다.
• forEach(callbackFn, thisArg?): Map 객체 내의 각 엘리먼트에 대해 주어진 콜백 함수를 실행합니다. 콜백 함수는  value, key, map를 인자로 받는다. thisArg가 제공되면 콜백 함수 내부에서 this로 사용될 객체를 지정할 수 있다.
• size: 요소의 개수를 반환한다.

//"a"
const key1 = map.get(1);

//true
const hasKey1 = map.has(1);
//false
const hasKey2 = map.has(123123);

// key가 1인 요소 제거
map.delete(1);

Map의 key, value 타입

typescript를 사용중이라면 간단하게 map의 key와 value의 타입을 지정할 수 있다.

const map2 = new Map<string, number>();
//error
map2.set(2,1)

Map의 체이닝

map.set은 호출 시 키에 값을 저장함과 동시에 자기 자신을 리턴한다.

한 번에 여러 개의 key, value를 저장하기 위해 아래처럼 사용도 가능하다

const map3 = new Map();
//Map(3) { 1 => 1, 2 => 2, 3 => 3 }
map3.set(1, 1).set(2, 2).set(3, 3);

Map을 사용하는 이유

위의 설명대로라면 Map자료형은 기존의 Object와 비슷하다. 그럼에도 Map자료형을 사용하는 이유가 있다.

• 키 순서 보장 : Map자료형은 Object와는 다르게 삽입 순서를 기억하고 있다. 
• 키의 유연성 : Map의 키는 어떤 유형이든 사용 가능하다.
• 성능 : Map은 요소 추가 제거에 대한 성능이 Object보다 더 좋다.
• 간편한 데이터 검색 : Map은 데이터의 크기가 커졌을 때 Object보다 빠르게 검색 가능하다.

데이터의 크기와 Map

기본적으로 Map은 내부적으로 해시 테이블을 사용하여 데이터를 저장한다. 간단하게 설명하면 키를 해시 함수에 통과시켜 나온 해시 값을 이요하여 데이터를 저장 및 검색한다. 이 해시 값은 데이터가 저장되는 위치를 결정하며, 키에 해당하는 데이터를 찾을 때 모든 데이터를 순회하지 않고 해당 위치로 직접 접근할 수 있다. 따라서 데이터의 크기가 커져도 검색 시간이 일정하게 유지된다. 이를 O(1) 시간복잡도라고 한다.

Object는 프로퍼티를 검색할 때 순차적으로 검색한다. Object의 시간복잡도는 O(n)이다. 이로 인해서 데이터의 크기가 작으면 Object의 검색이 더 빠르고, 크기가 커지면 Map의 검색이 빠르다.

개인 기록용입니다. 만약 잘못된 부분이 있다면 댓글로 알려주신다면 감사하겠습니다!

nodejs 로 백준 알고리즘 문제를 풀다 에러가 났다.

 error: ENOENT: no such file or directory 라는 에러였다.

난 백준 문제번호에 다라서 "문제번호.txt" 파일을 생성했다.

const input = fs.readFileSync("./문제번호.txt").toString().trim().split("\n")

이대로 복붙해서 제출을 하면 에러가 난다.

제출할때마다 바꾸기 귀찮으니 아래처럼 해서 제출하면 된다

const input = fs
  .readFileSync(process.platform === "linux" ? "/dev/stdin" : "./2587.txt")
  .toString()
  .trim()
  .split("\n")