코드존 코드존

How to use Object Type 함수의 파라미터로 객체 타입 입력 /** const printName = (first: string, last: string) => { return `Her name is ${last} ${first}` } **/ const printName = (name: { first: string, last: string }) => { return `Her name is ${name.last} ${name.first}` } printName({ first: 'SEO', last: 'HYEJIN' }) 객체 타입 변수 선언 객체의 key 이름과 타입을 맞춰줘야 함 let coordinate: { x: number, y: number } = { x: 34, y: 2 } 함수에서..

Function Parameter 파라미터 타입을 지정하지 않으면 암묵적 Any 타입 파라미터로 지정 // 암묵적 Any 타입 파라미터 function square (num) { return num * num } square(5) // 가능 square('strings') // 가능 // 명시적 타입 파라미터 function greeting (name: string) { let temp = name * name // ERROR return `Good morning, ${name}` } greeting(5) // 불가능 greeting('서앶진') // 가능 다수의 타입 파라미터를 가지는 함수는 호출 시에 파라미터 갯수와 타입을 잘 맞춰야 함 // 다양한 파라미터 function doSomethings (..

Why using Typescript? Static Checking : 코드 실행 없이 오류 검사 Typescript 코드 작성 -> 오류 검사 -> Javascript로 컴파일링 -> 실행 컴파일링 과정에서 오류가 발생해도 멈춤X -> 컴파일링 후 터미널에 오류 메시지 표시 Typescript Playground : Typescript 코드 테스트 // Typescript 컴파일링 tsc 파일명.ts How to use Typescript 참고 - https://www.typescriptlang.org/download How to set up TypeScript Add TypeScript to your project, or install TypeScript globally www.typescriptla..

Spread 연산자(...) 란 ? 구조분해할당이란 ? 📌 Spread 연산자 const fruits = [ 'apple', 'banana', 'watermelon' ] const newFruits = [ ...fruits, 'mango' ] // newFruits = [ 'apple', 'banana', 'watermelon', 'mango' ] - ... 을 사용하여 해당 변수의 데이터를 복사한다. const fnc = (...args) => args const arr = fnc(1, 2, 3) // arr = [ 1, 2, 3 ] - 함수의 parameter로 spread 연산자를 사용하면 입력된 매개변수들이 배열로 합쳐진다. 📌 구조분해할당 const fruits = [ 'apple', 'bana..

차세대 Javascript의 모듈식 코드 작성법 Export & Import 📌Javascript module 가져오기 // person.js const person = { name: 'Max' } export default person - default 구문을 사용하여 person 객체를 기본 내보내기 - 기본 내보내기(default)는 어떤 이름으로도 Import 해올 수 있다. // utility.js export const clean = () => {...} export const baseData = 10 - 각각에 export를 달아 각 모듈을 이름 내보내기 - 정의한 이름으로 Import 해올 수 있다. // app.js import person from './person.js' import ..

프로젝트 구축 환경 세팅 개발을 시작하기에 앞서, 원활한 진행을 위해 필요한 라이브러리, 프레임워크 등을 세팅한다.

React + Typescript를 사용하여 프로젝트를 만들어보자. 1. 명령 프롬포트(cmd)를 사용해도 되고, 사용하는 개발 툴의 터미널을 사용해도 됨. npx create-react-app my-app --template typescript my-app : 프로젝트 명. 원하는 이름으로 수정 node version >= 14 (nvm 사용 권장) 2. 시작 npm start http://localhost:3000 으로 실행 3. 폴더 구조 my-app/ node_modules public/ favicon.ico index.html logo192.png logo512.png manifest.json robots.txt src/ App.css App.test.tsx App.tsx index.css in..

Bootstrap Table에 Filter 기능 추가 - 테이블에서 원하는 리스트만 조회 - write 기능이 있는 select box - selected된 조건이 중복 filter가 아니라 각각 filter