본문 바로가기

728x90
반응형

JavaScript

(13)
리액트2 - 스타일 https://styled-components.com/ Age" data-og-host="styled-components.com" data-og-source-url="https://styled-components.com/" data-og-url="https://styled-components.com/" data-og-image="https://scrap.kakaocdn.net/dn/nSgww/hyWKwAyfhu/QlMdJ7QqKkkEt2K1j8ugTK/img.png?width=652&height=652&face=0_0_652_652,https://scrap.kakaocdn.net/dn/bBcxq0/hyWKvhm1iY/AUW05CkfWGKuZJX3zBzTaK/img.png?width=652&height=6..
리액트-1 (데이터 변경 감지해 UI를 동적으로 렌더링하는 엔진) https://reactjs-kr.firebaseapp.com/docs/installation.html기존의 뷰 프로세스 [CSR]1. 요청 -> view(html) -> 화면을 전달하면 브라우저가 렌더링 [전체 변경]2. view -> 자바스크립트의 비동기 요청 -> ajax를 통해 부분 변경-> json으로 응답 -> 응답받은 데이터를 이용해 렌더링 [부분 변경]3. 복잡한 화면일수록 부분 변경이 어렵다. [성능과 구현 측면에서][SSR]-> 부분변경 x -> ajax -> html -> 그림그리기리액트: ajax -> 데이터 변경감지 -> UI가 자동 업데이트 [옵저버 패턴]*npm, npx(1) npm 프로젝트별로 라이브러리 관리 / 모든 프로젝트가 공유하도록 사용도 가능 (여러 버전 사용 불가능..
노드의 기능 REPL Read Eval Print Loop $node로 입력해서 >로 바뀌면 자바스크립트 입력 자바스크립트 코드 실행 $node [자바스크립트 파일 경로] 코드 -> 모듈화 (CommonJS 모듈,ECMAScript 모듈) 브라우저의 this와 다른 노드의 this 노드에서 최상위 스코프의 this는 module.exports를 가리킨다. 브라우저에서는 window 객체를 가리킨다. 노드에서 함수 선언문 내부의 this는 global 객체를 가리킨다. 브라우저에서는 window 객체를 가리킨다. 노드의 내장 객체 CommonJS 모듈 require로 모듈 불러오기 module.exports로 모듈 한번에 내보내기 exports 객체로 각각의 변수를 대입하기 exports객체와 module.export..
타입스크립트 제네릭 (+상한 제한) //제네릭 //:클래스나 함수, 인터페이스를 다양한 타입으로 재사용 가능 // -> 실제로 사용할때 타입을 선택할 수 있다. //즉, 특정한 타입을 고정하지 않고 나중에 실제로 사용될 타입을 동적으로 지정 //function getSize(arr):number{ //에러 발생 : 타입을 명시하지 않았기 때문에 // function getSize(arr:number[]):number{ //-> 숫자배열이라고 타입 명시 -> 문자열로도 이 메서드를 쓰고 싶은데? //(1) 함수 오버로드 // 함수 오버로드 정의 function getSize(arr: string[]): number; function getSize(arr: number[]): number; function getSize(arr:number[]..
타입스크립트 클래스 // 클래스 // class Car{ // constructor(color){ // this.color = color; // } // start(){ // console.log("start"); // } // } // const bmw2 = new Car("red"); //자바스크립트에서의 클래스 class Car{ color:string; //1. 멤버변수는 미리 선언해줘야한다. constructor(color:string){ //2. 매개변수 타입 명시 this.color = color; } start(){ console.log("start"); } } const bmw2 = new Car("red"); //타입스크립트에서의 클래스. - 멤버변수 미리 선언하는 방식 class Car2{ constru..
타입스크립트 리터럴, 유니온/교차타입 //리터럴, 유니온/교차타입 //JS 변수 선언 타입 //const : 상수 //let : 변수 const userName1 = "Bob"; //문자열 "Bob"이 타입 - 문자열 리터럴 타입 let userName2:string|number ="Tom"; //문자열이 타입 userName2=3; //숫자도 들어가게 하려면 선언시에 타입을 2개로 명시 //enum과 유사한 타입 type Job = "police" | "developer" | "teacher"; interface User6{ name : string; job : Job; } const user7:User6={ name :"Bob", job: "developer" }; //유니온 타입 interface HighSchoolStudent{ na..
타입스크립트 함수 function add2(num1: number, num2: number):number { console.log(num1+num2); return num1+ num2; } function add3(num1: number, num2: number):void { console.log(num1+num2); } function isAdult2(key:number):boolean{ return age>19; } //인터페이스처럼 함수의 매개변수도 옵셔널로 지정 가능 (optional parameter; 선택적 매개변수) function hello(name?:string){ //function hello(name:string){ return `Hello, ${name||"world"}`; //name이 없으면 wo..
자바스크립트 call, apply, bind (+ 스프레드 연산자, 나머지 매개변수) 함수 호출 방식(어디서, 어떻게)과 관계없이 this 지정하는 방법 : call, apply, bind call(this로 사용할 매개변수, ...매개변수: 호출한 함수에 전달할 매개변수) : 일반적인 함수와 같이 매개변수를 직접 받는다. call에 this로 사용할 객체를 파라미터를 담아서 함수를 호출하면 해당 함수가 주어진 객체의 메서드인 것처럼 사용 가능 즉, call의 첫 번째 매개변수: this로 사용할 값, 그 외의 매개변수 : 호출하는 함수로 전달 (1) this.name이 mike, tom이 됨 (2) update에 this로 사용할 매개변수 mike 전달, 나머지는 호출할 함수로 전달 1999, 'singer apply(this로 사용할 매개변수, 배열 [ ]) : 두 번째 매개변수를 배..

728x90
반응형