실습

선발대 DB 공부 - db query 많이 사용해보기(문제풀기)

공부

Failover 와 Failback을 알아보기

PaaS 알아보기

인덱스 시그니처(Index Signature) 알아보기 - https://developer-talk.tistory.com/297

정예반 노션읽고 공부하기 - https://teamsparta.notion.site/Node-js-0f4e60159f804788b806bdc322ed5ff3

JS / DEEP DIVE 공부

TS / 핸드북 공부 - https://typescript-kr.github.io/pages/tutorials/ts-for-the-new-programmer.html

TS / 장기효 핸드북 공부 - https://joshua1988.github.io/ts/intro.html

SQL 강의 - https://teamsparta.notion.site/SQL-835771d23a4c4045a6aa1fcc4ac8188a

CORS개념 - https://inpa.tistory.com/entry/WEB-%F0%9F%93%9A-CORS-%F0%9F%92%AF-%EC%A0%95%EB%A6%AC-%ED%95%B4%EA%B2%B0-%EB%B0%A9%EB%B2%95-%F0%9F%91%8F

Promise 알아보기

강의

백엔드 맛보기 - https://www.youtube.com/playlist?list=PLSK4WsJ8JS4cQ-niGNum4bkK_THHOizTs

Node.js Websocket 이론 - https://www.youtube.com/watch?v=82LB1jI_Nxw

소켓 send, emit 메서드 차이 - https://www.youtube.com/watch?v=JYNlZcKjWwk

타입스크립트 - https://www.youtube.com/playlist?list=PLJf6aFJoJtbUXW6T4lPUk7C66yEneX7MN

타입스크립트로 블록체인 만들기 - https://nomadcoders.co/typescript-for-beginners

타입스크립트 심화 - https://www.youtube.com/playlist?list=PL1yBZOn9jLsV9J60DWnnWgNPGbTYharAp

줌 클론코딩 - https://nomadcoders.co/noom/lobby?utm_source=free_course&utm_campaign=noom&utm_medium=site

알고리즘

스파르타 알고리즘 풀기 / 2023/01/20 - https://school.programmers.co.kr/learn/courses/30/lessons/67256

스파르타 알고리즘 풀기 / 2023/01/19 - https://school.programmers.co.kr/learn/courses/30/lessons/131705

스파르타 알고리즘 풀기 / 2023/01/18 - https://school.programmers.co.kr/learn/courses/30/lessons/135808

스파르타 알고리즘 풀기 / 2023/01/17 - https://school.programmers.co.kr/learn/courses/30/lessons/134240

스파르타 알고리즘 풀기 / 2023/01/16 - https://school.programmers.co.kr/learn/courses/30/lessons/12982

사이트

CHECKED

후발대 좋아요 API query 복습

후발대 노드숙련 남은 API 해보기 - https://github.com/jyh7a/week_1_assignment_gittest

우준호튜터님 정예반에서 cors 잠깐 언급한 부분 다시보기

후발대 좋아요 GET,PUT API - https://github.com/jyh7a/week_1_assignment_gittest

이승윤튜터님 노드입문,숙련 - https://www.youtube.com/@happiestcoconut/playlists

JS / DEEP DIVE 공부 : ~2장

오늘의 체크리스트

스파르타 알고리즘 풀기

예산 - https://school.programmers.co.kr/learn/courses/30/lessons/12982?language=javascript
```
배열의 0번 인덱스 뽑기, 빈배열의 경우 undefined 반환
array.shift()
```

Array.prototype.shift()
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/shift


<br>

## JS / DEEP DIVE 공부

<br>

- 3장 자바스크립트 개발 환경과 실행방법
  - 3.1 자바스크립트 실행 환경

모든 브라우저는 자바스크립트를 해석하고 실행할 수 있는 자바스크립트 엔진을 내장하고 있다.
Node.js도 자바스크립트 엔진을 내장하고 있다.

자바스크립트의 실행 환경이 둘로 나뉜 이유는 사용용도에 의해 나누어져있다.
브라우저는 웹페이지를 브라우저 화면에 렌더링 하는것이 주된 목적이고,
Node.js는 브라우저 외부에서 자바스크립트 실행 환경을 제공하는 것이 주된 목적이다.

서로 ECMAScript를 공통적으로 사용하지만 각자의 용도에 맞는 API를 사용한다.


<br>

- 3장 자바스크립트 개발 환경과 실행방법
  - 3.2 웹 브라우저

크롬을 사용하자..!


<br>

- 3장 자바스크립트 개발 환경과 실행방법
  - 3.2 웹 브라우저
    - 3.2.1 개발자 도구

```bash
브라우저에서 제공하는 웹 애플리케이션 개발에 필수적인 강력한 도구다.
제공하는 기능은 다음과 같다.
Elements - 로딩된 웹페이지의 DOM과 CSS를 편집해서 렌더링된 뷰를 확인할 수 있다.
Console - 로딩된 웹페이지의 에러를 확인하거나 js 소스코드에 작성한 console.log 메서드의 실행결과를 확인할 수 있다.
Sources - 로딩된 웹페이지의 자바스크립트 코드를 디버깅할 수 있다.
Network - 로딩된 웹페이지에 관련된 네트워크 요청(request) 정보와 성능을 확인할 수 있다.
Application - 웹 스토리지, 세션, 쿠키를 확인하고 관리할 수 있다.

노드 심화 강의

TypeScript 환경설정

패키지 설치

npm install typescript @types/node ts-node nodemon -D

tsconfig.json 설정

{
  "compilerOptions": {
    "target": "es2016",
    "module": "commonjs",
    "lib": ["DOM"],
    "outDir": "build",
    "rootDir": "src",
    "strict": true,
    "noImplicitAny": true,
    "esModuleInterop": true,
        "noEmitOnError": true,
    "moduleDetection": "force"
  }
}

rootDir를 src로 지정하고 트랜스파일 된 코드는 build에 저장하게끔 설정을 했으니 각각 tsconfig.json과 같은 레벨에 위치한 폴더를 만들어줍니다.

"moduleDetection": "force" 를 통해
변수나 함수명 등 공유하던 식별자들을 선택창에 제한한다.

nodemon.json

{
  "watch": ["src"],   // 주시할 폴더
  "ext": ".ts,.js",   // 주시할 확장자
  "ignore": [],       // 예외
  // "exec": "npx ts-node ./src/*.ts"  // 윈도우 에러 발생
  "exec": "npx ts-node ./src/index.ts"  // 명령어
}

파일이 바뀔때마다 수동적으로 파일을 실행하지 않아도 되게 nodemon 이 따를 수 있는 실행 조건을 설정해 줍니다.

package.json

"start:dev": "npx nodemon -q"

설정한 파일들을 실행시실 스크립트를 만듭니다. 개인적으로 파일이 재실행 될 때마다 나오는 메세지를

`--quiet`또는 `-q` 라는 flag로 감춰줍니다.

production

보통 개발환경에서 main/master 병합이나 배포단계 때 하는 절차 설정 방법입니다.
npm i rimraf --save-dev 노드를 위한 rm -rf (UNIX 명령어)를 설치

package.json 설정

"build": "rimraf ./build && tsc",
"start": "npm run build && node build/index.js" // index.js가 아닐수도 있음 참고!

강의를 보다보니 bash에서 gs, gaa, gcm, gp 를 통해 깃명령어를 썼다.

gs: git status
gaa: git add .
gcm: git commit -m 'message'
gp: git push

딱 이러한 함수일 것 같다.

bash안에서 함수를 정의할 수 있다.
정의를 해보았고 사용도 해보았다.
그러나 배쉬를 껐다 켰을땐 정의되어있던 함수가 사라진다.

정말 자주 사용하는 깃 명령어이므로 지속적으로 사용이 가능한 함수로 만들고 싶다.

.bash_profile이라는 파일을 수정해야 한다.
cd or cd ~ -git bash 홈 디렉토리로 이동
vi .bash_profile - vi에디터로 파일 수정
함수작성 (alias기능 사용 가능)
source .bash_profile - 시스템 환경변수를 등록한다.

열거형 (Enums)

관련된 상수값들을 집합하여 선언을 하며 TS같은 경우는 숫자와 문자형 기반의 열거형을 지원합니다.
물론 JS로도 상수값을 선언할 수 있지만 TS의 enum을 사용하면:

상수를 사용할 때 IDE의 코드예측 지원을 받을 수 있습니다
변경범위가 줄어듭니다

1. 숫자형 이넘

값을 지정하지 않으면 기본값은 숫자 0 이고, auto increment.
문자형 이넘과는 다르게 Reverse mapping이 가능하다.

enum Color {
  Red,
  Green,
  Blue,
}

const myColor: Color = Color.Red;
console.log({ myColor }); // { myColor: 0 }

const yourColor: Color.Blue = Color.Blue;
console.log({ yourColor }); // { yourColor: 2 }

// Reverse mapping
console.log(Color[0]); // Red
console.log(Color[2]); // Blue

2. 문자형 이넘

enum Color {
  RED = "RED",
  GREEN = "GREEN",
  BLUE = "BLUE",
}

const myColor: Color = Color.RED;
console.log({ myColor });

const yourColor: Color.BLUE = Color.BLUE;
console.log({ yourColor });

const otherColor: string = Color.GREEN;
console.log({ otherColor });

Enum 써보기

import Color from './types';

const chorock: Color = Color.GREEN;
console.log(chorock);

// type casting
const colorOfSky: Color.BLUE = Color.GREEN as Color.BLUE;
console.log(colorOfSky);

const faveColor = "LOVE" as Color;
console.log(faveColor);

타입캐스팅은 억지로 타입을 변장시킵니다.
가급적 타입캐스팅을 사용하지 않도록 해야 합니다.

인자로 받아보기

import Color from "./types";

function printRGB(color: Color): Color {
  return color;
}

console.log(printRGB(Color.RED));     // RED
console.log(printRGB(Color.GREEN));   // GREEN
console.log(printRGB(Color.BLACK));   // error

인터페이스의 타입으로 부여하기

import Color from "./types";

enum Direction {
  Up = "Up",
  Down = "Down",
  Left = "Left",
  Right = "Right",
}

// type TTingsInLife = {
//   colorOfPen: Color;
//   keyboardArrow: Direction;
// }

interface IThingsInLife {
  colorOfPen: Color;
  keyboardArrow: Direction;
}

function printThingsInLife(things: IThingsInLife): string {
  return `color of pen: ${things.colorOfPen}, keyboardArror: ${things.keyboardArrow}`;
}

const things = {
  colorOfPen: Color.Blue,
  keyboardArrow: Direction.Up,
};

console.log(printThingsInLife(things));


보통 인터페이스나 타입을 정의할때 식별자 앞에 I 또는 T를 붙인다.
interface - INameOfInterface
type - TNameOfType

Object.<메소드>랑 함께 사용해보기

import Color from "./types";