웹 개발

웹 개발/#️⃣ TypeScript

TS | 인터페이스

| 인터페이스 인터페이스 만약 아래와 같이 프론트와 백엔드가 있다고 가정하자 const man = { name: "jae", age: 25, }; // 웹 앱 /// 경계선 // // 서버 function prt(params: any){ console.log(params.city ?? 'default city'); } prt(man); 인터페이스는 일반적으로 타입 체크를 위해 사용되며 변수, 함수, 클래스에 사용할 수 있다. 인터페이스는 여러가지 타입을 갖는 프로퍼티로 이루어진 새로운 타입을 정의하는 것과 유사하다. 인터페이스에 선언된 프로퍼티 또는 메소드의 구현을 강제하여 일관성을 유지할 수 있도록 하는 것이다. ES6는 인터페이스를 지원하지 않지만 TypeScript는 인터페이스를 지원한다. 인터페이..

웹 개발/🌐 JavaScript

es6+ | 자바스크립트의 한계와 Null

만약 객체에 없는 값을 찍으면 undefined가 뜬다 const ob = { name: 'jae', age: 25, uni: 'harvard', major: 'sw' } console.log(ob.country); ?연산자 지금은 콘솔환경이라 undefined 나 나타나지만 나중에 서버환경에서는 errorr가 발생할수있다 만약 어떤 객체에 존재하지 않는 속성에 접근하려고 하면 error가 나타날수 있다 그래서 있는지 없는지 확실치 않을때 ? 를 붙이면 error 대신 undefined를 return 해준다 console.log(ob?.country?.hi.hello.how.are.you); ?? 연산자 console.log(ob.country ?? "seoul"); ob.country 가 null 이면..

웹 개발/🌐 JavaScript

es6+ | 객체

function prt4() { console.log("hello world4"); } const ob = { name: "yongsoo", age: 25, func1: function prt() { console.log("hello world") }, func2: () => { console.log("hello world2"); }, func3() { console.log("hello world3"); }, //아래처럼 변수에다가 넣을 수도 있고 func4: prt4(), //구조분해를 이용하면 prt4: prt4(), //얘를 아래처럼 생략가능 prt4 }; ob.prt4 리터럴 객체 const test = "Test word"; const liter = `test word but ${test} $..

웹 개발/🌐 JavaScript

es6+ | 비구조화 할당

| 비구조화 할당 1.객체의 벨류파라미터 생략 화살표 함수에서 객체를 return할때 // 객체의 키값과 벨류의 파라미터명이 같으면 벨류파라미터 생략가능 const register1 = (ID,PW) => ({ID:ID ,PW:PW}) const register2 = (ID,PW) => ({ID,PW}) console.log(register1("jae",0001)) console.log(register2("jae",0001)) 객체선언할때 //객체 const man = {name: "jae", age:24, sex:"male"}; 키의 값을 뽑아내려면 아래와같이 man.name 이런식으로 적어야한다 console.log(man.name) console.log(man.age) console.log(man...

웹 개발/🌐 JavaScript

es6+ | 화살표 함수

function add(a,b){ return a + b; } // arrow func 기본형 const add2 = (a, b) => { return a + b; }; // return 1줄일땐 return생략가능 const add3 = (a, b) => a + b; // param 1개일땐 ()소괄호 생략가능 const add4 = a => a + 4 // 객체 반환 const add5 = (a) => { return {hello : "world" }; }; //return 이 한줄일때는 return 생략가능 //하지만 객체를 반환할때는 소괄호를 적어줘야함 const add6 = (a) => ({hello : "world"});

웹 개발/#️⃣ TypeScript

TS | 타입 주석과 추론

| 타입 주석과 추론 시작전 tsconfig에서 두가지 옵션을 봐야함 1.모듈 모듈에는 AMD, CommonJS가 있다 AMD는 컴파일된 JS파일이 브라우저에서 돌아가는것을 말하고 CommonJS는 NodeJS에서 돌아가는 것을 말함 그래서 CommonJS로 설정 target은 변환된 JS파일이 어떤 버전으로 변환될것인가 ES6부터 엄청 바꼈는데 ES5 로 우선 설정 | 타입 주석 const a = 1; 이렇게 적고 마우스를 a에 올려놓으면 아무것도 안나옴 하지만 변수옆에 :(콜론)을 쓰고 타입을 적으면 변수 a위에 마우스를 올렸을때 타입이 보인다 const a: number = 1; 만약 이 변수값에 숫자말고 문자열을 적게된다면 const a: number = "Hello"; 이런식으로 잘못됐다고 알려..

이재원
'웹 개발' 카테고리의 글 목록 (18 Page)