섹션 3: 배열과 오브젝트의 성능 평가 📌 객체의 빅오 1. 객체 키, 값의 삽입, 삭제, 접근의 경우 Insertion, Removal, Access → O(1) 2. 객체의 키로 접근하지 않고 값으로 탐색하는 경우 Searching → O(n) 3. 객체 메서드의 빅오 O(n) Object.keys Object.values Object.entries O(1) Object.hasOwnProperty let instructor = { firstName: "김일남", isInstructor: true, favoriteNumbers: [1,2,3,4] } instructor.hasOwnProperty("firstName"); // true 📌 배열의 빅오 1. 배열 앞이나 중간 인덱스에 요소 삽입, 삭제 배..

1. MySQL 날짜, 시간이 왜 UTC 시간으로 조회될까? MySQL Workbench에서 SELECT 쿼리로 날짜, 시간에 해당하는 데이터를 조회하니 [그림 1]과 같이 원하는 결과가 잘 나왔다. 하지만 내가 만든 서버에 동일한 쿼리를 적용한 API를 호출하면 [그림 2]와 같이 UTC 시간으로 조회가 되었다. 도대체 왜??? 2. 쿼리에 CONVERT_TZ() 적용해 해결 위와 같은 현상이 발생하는 원인은 아직 찾지 못했다. 다만 쿼리에서 CONVERT_TZ()를 이용해 create_date 칼럼의 타임존을 UTC에서 Asia/Seoul로 변경해주어 이 문제를 해결했다. SELECT CONVERT_TZ(create_date, 'UTC', 'Asia/Seoul') AS create_date // 타임..

섹션 2: 빅오 표기법(Big O Notation) 📌 Big O Big O는 코드의 성능을 숫자로 표현하는 것이다. What does better mean? Faster? Less memory-intensive? More readable? 📌 시간 복잡도(Time Complexity) 1~n까지의 합을 구할 때 for문을 이용하는 방법과, 수학 공식 n*(n+1)/2를 이용하는 방법을 비교해 보자! // 코드 수행 시간 측정 var time1 = performance.now() addUpTo(1000000000) var time2 = performance.now() console.log(`Time Elapsed: ${(time2 - time1) / 1000} seconds.`) 위 코드와 같은 방식으로..

1. uuid-apikey 라이브러리 uuid-apikey 라이브러리(https://www.npmjs.com/package/uuid-apikey)를 이용해서 apikey, uuid를 생성하고 API 요청 시 유효한지 검증할 수 있다. 설치 방법은 아래와 같다. npm install uuid-apikey 2. uuid-apikey 적용 // app.js // (생략) // API키 생성 import uuidAPIKey from "uuid-apikey"; console.log(uuidAPIKey.create()); // 터미널에 객체 자료형으로 apiKey, uuid가 찍힌다. 새로운 키를 생성할 필요가 없을 때는 주석 처리한다. // (생략) // app.js // (생략) // key 변수를 app.js..

1. Swagger 설치 swagger-ui-express, swagger-autogen를 설치한다. swagger-ui-express는 서버 구동 시 API 문서를 볼 수 있게 해 주고, swagger-autogen는 API 문서 정보를 담고 있는 swagger-output.json을 자동으로 생성해 준다. npm install swagger-ui-express swagger-autogen 2. ES Modules ES Modules 방식은 아래와 같이 Swagger json 파일을 import 하면 된다. 이때 주의할 것은 assert { type: "json"}을 추가하지 않으면 TypeError가 발생한다. // app.js import swaggerFile from "./swagger/swagg..

섹션 5: 클래스 & 인터페이스 📌 OOP(Object-oriented Programming) 코드에서 실제 사물과 최대한 유사한 객체를 사용해 코드를 이해하기 쉽도록 만드는 것! 📌 class == blueprint 청사진: 아키텍처 또는 공학 설계를 문서화한 기술 도면을 인화로 복사하거나 복사한 도면 🤔 class와 instance의 관계에 대한 내 생각 붕어빵틀과 붕어빵, 필름과 사진, 도장과 도장 찍기 📌 this class Department { name: string; // 필드라고 함. 객체가 아님. // 생성자: 생성하는 객체(인스턴스)의 초기화 작업 constructor(n: string) { this.name = n; } describe() { console.log("Department..

섹션 3: TypeScript 컴파일러(및 구성) 📌 하나의 타입스크립트 파일의 변경 감시 모드 tsc app.ts -w(또는 tsc app.ts -watch) 📌 여러 타입스크립트 파일의 컴파일 tsconfig.json 파일 생성 명령어 : tsc --init js 파일 일괄 컴파일 명령어 : tsc 📌 tsconfig.json 옵션 { "compilerOptions": { // "target" 옵션은 컴파일된 코드를 지원하는 브라우저를 정의. "" 안에서 ctrl+space를 누르면 자동완성을 선택할 수 있음. 참고로 es6는 es2015 // "sourceMap" 옵션은 개발자 도구 Sources에서 js파일 뿐만 아니라 ts 파일도 다룰 수 있게 해준다. 따라서 ts파일을 이용해 디버깅(브레이크 ..

섹션 1 📌 타입 무시 아래 코드를 추가하면 타입스크립트에서 타입을 무시한다. // @ts-ignore 📌 모듈 CSS 모듈 CSS의 경우 page.module.css라는 파일이 있다면 module이라는 키워드 때문에 클래스명이 다른 모듈과 동일하다 하더라도 겹치지 않는다. CSS의 dvw, dvh는 모바일의 경우 페이지에서 주소창이 생기기도 사라지기도 하는데 거기에 맞게 페이지의 사이즈를 맞춰주는 역할을 한다. width: 100dvw; height: 100dvh; 📌 children의 타입 layout.tsx에서 children의 타입은 ReactNode이다. // layout.tsx import { ReactNode } from "react"; type Props = { children: React..