WebProgramming/JS

WebProgramming/JS

[JavaScript] 한 페이지 정리

메소드 https://peter-coding.tistory.com/102 [JS] 메소드(String, Math, Array, Object) String 메소드 https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String String - JavaScript | MDN String 전역 객체는 문자열(문자의 나열)의 생성자입니다. developer.mozilla.. peter-coding.tistory.com 생성자 함수 https://peter-coding.tistory.com/100 [JS] 생성자 함수(Prototype), Class 상속 생성자 함수(Prototype) - JS는 프로토타입 기반의 언어임. 프..

WebProgramming/JS

[JavaScript] Computed Property

안녕하세요, 피터팬입니다! 오늘은 JS의 Computed property에 대해 배워볼건데요. computed property를 직역하면 계산된 프로퍼티입니다. computed property는 객체의 key값을 표현식(변수, 함수 등)을 통해 지정하는 문법입니다. 사용법 let a = "apple"; let b = { [a] : 12345; } 예시 const appleId = "1534"; const carrotId = "3534"; const fruitList = { [appleId]: "Good", [carrotId]: "Bad" }; console.log(fruitList[appleId]); Reference

WebProgramming/JS

[JavaScript] Object Methods(assign,keys,values,entries,fromEntries)

안녕하세요, 피터팬입니다! 오늘은 Object Methods에 대해 배워볼건데요. Object Methods에는 아래 링크처럼 매우 많지만, 그 중에서 자주 쓰이는 것들만 선정해서 배울 것입니다. 1. Object.assign() 사용법 Object.assign()은 깊은 복사를 할 때 사용을 합니다. 아래처럼 복사를 할 경우, user2의 name값을 바꾸려고 의도했지만, user의 name값도 바뀌게 되는 문제가 발생하게 됩니다. 아래와 같은 복사를 포인터값(주소값)만을 복사하는 얕은 복사라고 합니다. let user = { name:'guesung', age:23, } let user2 = user; user2['name']='sunggue' Object.assign은 아래와 같이 사용합니다. le..

WebProgramming/JS

[JS] Array 메소드 (map,filter,reduce,find,concat,slice)

1. map() ; 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환 ex1) numbers의 요소들 각각에 2배를 하여 doubleNumArray에 반환 const numbers = [1,2,3] const doubleNumArray = numbers.map(num=>num*2) console.log(doubleNumArray) // [2,4,6] ex2) number의 요소들을 Number화 시키기 const numbers = ['1','2','3'] console.log(numbers.map(Number)) ex3) map과 assign을 이용한 예시 let userList = [ { name: "Mike", age: 30 }, { name: "Jane", a..

WebProgramming/JS

[JS] JS 라이브러리 (lodash, axios)

lodash ; JS의 인기 있는 라이브러리 중 하나. 보통 array, collection, date 등 데이터의 필수적인 구조를 쉽게 다룰 수 있게 끔 하는데 사용 _.uniqBy(C,'a') ; C객체에서 'a'요소가 중복되는 것 제거 _.unionBy(A,B,'a') ; A객체와 B객체를 합치는데, 중복되는 'a'는 제거 _find(A,{a:'b'}) ; A객체에서 a:'b'인 요소를 찾아 해당 요소를 반환 _findIndex(A,{a:'b'}) ; A객체에서 a:'b'인 요소를 찾아 해당 인덱스를 반환 _remove(A,{a:'b'}) ; A객체에서 a:'b'인 요소를 찾아 해당 요소를 삭제 Axios ; 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이..

WebProgramming/JS

[TS] 타입 별칭 & Interface

타입 별칭 ; Primitive, Union Type, Tuple, Function 등 직접 작성해야하는 타입을 다른 이름으로 지정 가능 // primitive타입 별칭 type MyStringType=string; let myStr:MyStringType='hello'; // Union 타입 별칭 type StringOrNumber=string|number; let another:StringOrNumber='Anna'; // Tuple 타입 별칭 type A=[number,number]; let b:A=[1,2]; // Function 타입 별칭 type EatType=(food:string) => void; Interfaces ; 하나의 타입을 만들어내는 방식 - 컴파일 시 사라짐(js파일에는 존재 ..

WebProgramming/JS

[TS] TS의 타입 시스템? & Compliation Context

타입 시스템 - 컴파일러에게 사용하는 타입을 명시적으로 지정 ; TS에 해당 - 컴파일러가 자동으로 타입을 추론 ; JS에 해당 -> 사용법에 대한 오해 야기 => 비추 - TS의 경우 매게변수에도, return값에도 명확하게 type을 명시해줘야함. function f5(a:number):number{ if(a>0){ return a*38; } } function f7(a:{name:string; age:number}):string{ return `이름은 ${a.name}이고, 연령대는${ Math.floor(a.age/10)*10 }대 입니다.`; } console.log(f7({name:'Mark',age:23})); console.log(f7('Mark')); // 오류 발생 Type 호환성 공변..

WebProgramming/JS

[TS] TypeSCript이란? & 타입

TypeScript ; 자바스크립트의 슈퍼셋인 오픈소스 프로그래밍 언어 - MS에서 개발, 유지하고 있으며 엄격한 문법 지원 - TS는 JS엔진을 사용하면서 커다란 애플리케이션을 개발할 수 있게 설계된 언어 - JS로 작성된 프로그램이 TS 프로그램으로도 동작 - 모든 OS, 브라우저, 호스트에서 사용 가능 설치방법 ; $npm i tsc -g // -g ; 컴퓨터 내 모든 프로젝트에 적용 -> tsc라는 명령어로 사용 가능 but -g는 비추. -> npx tsc라는 명령어로 사용해야함 $ npm init -y ; npm 초기 설정 _ package-lock.json 설치 $ npx tsc --init ; TS 초기 설정 _ tsconfig.json설치 --- ts파일 설치 --- $ tsc(TypeS..

피터s
'WebProgramming/JS' 카테고리의 글 목록