본문 바로가기

JavaScript

(94)
TS, 기본적인 CRUD TS, 기본적인 CRUD 인터페이스를 이용한 데이터 모델링 📄 src/items/item.interface.ts // BaseItem -> 아이템을 수정, 등록할 때 사용 export interface BaseItem { name: string; price: number; description: string; image: string; } // Item -> 특정한 값을 검색하거나 삭제할때 사용 export interface Item extends BaseItem { id: number; } 📄 src/items/items.interface.ts import { Item } from "./item.interface"; // 아이템들을 합치기 위한 인터페이스 생성 export interface Items ..
TS Utility Types TS Utility Types 📌 partial 필수 사항을 선택사항으로 변경 interface Toppings { tomatoes: boolean; onion: boolean; lettuce: boolean; ketchup: boolean; } const myToppings: Toppings = { tomatoes: true, onion: true, lettuce: true, ketchup: true, }; const partialToppingsIWant: Partial = { tomatoes: true, onion: undefined, }; console.log( "~ file: index.ts:19 ~ partialToppingsIWant", partialToppingsIWant ) myToppin..
Type Script 제너릭타입(Generic types) Type Script 제너릭타입(Generic types) 📌 제너릭이란? 선언 시점이 아닌 생성 시점에 타입을 명시하여 하나의 타입만이 아닌 다양한 타입을 사용할 수 있도록 하는 기법 전달받은 타입을 확인 및 반환을 할 수 있고 타입을 제한 할 수도 있습니다. 📌 배열 선언 📌 제너릭을 굳이 사용하는 이유는? 제네릭을 선언할 때 관용적으로 사용되는 대표적인 식별자로 T가 있고, 그 외에 U와 V가 있습니다. 반드시 T, U, V를 사용하여 하는 것은 아니지만 관용적인 식별자를 쓰는게 모범적입니다. 📄 index.ts interface MyInterface { value: string | number | string[]; } const stringObject: MyInterface = { value: "..
Type Script 열거형(Enums) Type Script 열거형(Enums) numberEnum 📄 index.ts enum Color { Red, Green, Blue, } console.log("---------") const myColor = Color.Red; console.log(myColor); // 0 const yourColor = Color.Green; console.log(yourColor) // 1 const myNewColor = Color.Blue; console.log(myNewColor) // 2 console.log("---------") console.log(Color["Green"]) // 1 // reverse mapping console.log(Color[0]) // Red console.log(Colo..
TS, 내가 만든 포켓몬 크롤링 프로그램 TS, 내가 만든 포켓몬 크롤링 프로그램 TS, 포켓몬 카드 만들기 📌 설치 모듈 npm i typescript -D tsc --init 📌 async await const fetchData = async (): Promise => { for (let i = 1; i setTimeout(resolve, 1000)); console.log("Hello, World!"); } greet(); 일반함수 greet()는 함수가 완료될때까지 기다렸다가 사용되므로 1초 후에 Hello, World! 를 기록한다. 크롤링? 스크래핑? 크롤링 : URL을 탐색해 반복적으로 링크를 찾고 가져오는 과정 스크래핑 : 우리가 정한 특정 웹 페이지에서 데이터를 추출하는 것 📌 크롤링 불법인가? robots.txt 사용 http..
후발대_node.js 숙력주차 과제 복습 후발대_node.js 숙력주차 과제 복습 후발대 강의 복습하면서 front단 ejs도 학습하기 위해 해보는중... 어제 목표는 방대했으나,,, 내일은 해당 코드를 ejs이용하는걸로 바꾸고~ 지금은 그냥 html과 다를게 없다... submit 버튼을 누르면, 아래 창에 "nickname과 일치하는 회원이 존재합니다." 라는 안내 문구가 띄워지면서 회원가입 안되도록 하는것을 구현해 볼 생각이다. + 로그인, 미들웨서 로그인한 회원만 posting할 수 있게끔 하는것까지 할 계획인데... 로그인 미들웨어만 해도 뭐... 설이 있으니깐!!! pagination과 좋아요 기능을 front단까지 해보는게 목표다!
타입스크립트 기초문법2 타입스크립트 기초문법2 📌 초기 설정 npm init -y npm i typescript @types/node ts-node -D tsc --init 📄 tsconfig.json { // 암시적 any 타입을 허용하지 않는다. "noImplicitAny": true } 함수 function sum(a, b) { return a + b; } 아무런 타입을 지정해주지 않으면, any타입으로 인식. 오류 발생하지 않으나, any타입은 지양해야 함. // any type 오류를 나게 하자 // tsconfig.json => "noImplicitAny": true function sum(a: number, b: number): number { return a + b; } 📌 함수의 인자 function sum(a..
타입스크립트 기초문법1 타입스크립트 기초문법1 📌 초기 세팅 tsc --init npm -init y npm i @types/node 📄 tsconfig.json { // scr 폴더 하위의 모든 .ts 확장 파일 "include": ["src/**/*.ts"], "compilerOptions": { "lib": ["ES2021"], // esModuleInterop 속성이 위의 코드 처럼 true로 설정될 경우, ES6 모듈 사양을 준수하여 CommonJS 모듈을 가져올 수 있게 됩니다. // e.g. typescript-test.ts => import express from "express" "esModuleInterop": true, "target": "ES2021", "outDir": "dist", "strictNull..
TypeScript란? TypeScript란? 엄격한 문법, JavaScript의 superset(ES5) 자바스크립트에 타입을 부여한 언어(자바스크립트의 확장된 언어) 모든 운영체제, 모든 브라우저, 모든 호스트에서 사용 가능(오픈 소스) 에러 사전 방지 코드 가이드 및 자동 완성으로 개발 생산성 향상 📌 필요 모듈 npm i typescript -g npm ls -g 📌 오류 발생 tsc tsc : File C:\Users\xxxxh\AppData\Roaming\npm\tsc.ps1 cannot be loaded because running scr ipts is disabled on this system. For more information, see about_Execution_Policies at htt ps:/go.m..
javascript 구조 분해 할당 javascript 구조 분해 할당 📌 객체 구조 분해 할당 destructuring assignment const data = { user: { name: 'John', age: 30, address: { city: 'New York', country: 'USA' } } }; const {name: userName, address: { city: userCity }} = data.user; console.log(userName); // 'John' console.log(userCity); // 'New York' 배열의 데이터 또는 객체의 속성을 별개의 변수로 추출하는 방법 배열이나 객체에 저장된 데이터에서 여러 값을 추출하는 간결하고 편리한 방법이다. 📌 프로젝트 코드 업그레이드! 📄 gyeonggi..