Front-end study
-
Javascript Prototype : 상속을 위해Front-end study/Javascript 2023. 3. 9. 18:48
# 모든 객체들의 조상 object Javascript 에서 protype 은 모든 객체들의 조상 object 다. Java 의 Object 객체와 같은 개념이다 Javascript 에서 interface나 generic 같은 개념은 없지만 Protype 이란 개념이 있어서 Javascript 에서 객체지향프로그래밍을 가능하게 한다. 결국 상속을 하기 위해 쓰이고 코드를 재사용하기 위해 쓰인다. //Object 객체에서 상속을 위한 javascript 코드 DelonghiEspCoffeeMachine.prototype = Object.create(CoffeeMachine.prototype); Typescript 에서 class 를 작성하고 상속하는 코드를 작성한 후 ES5 버전의 Javascript 에서..
-
Javascript {...} [...] destructuring assignment : 구조 분해 할당Front-end study/Javascript 2023. 3. 7. 16:55
# 'Destructuring assignment' 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 자바스크립트 expression 입니다. 1. Try //간단한 예제 let a, b, rest; [a, b] = [10, 20]; console.log(a); // Expected output: 10 console.log(b); // Expected output: 20 [a, b, ...rest] = [10, 20, 30, 40, 50]; console.log(rest); // Expected output: Array [30, 40, 50] //더 많은 예제 var a, b, rest; [a, b] = [10, 20]; console.log(a); // 10 console..
-
JSX 기본(기초) 문법Front-end study/React & Vue 2023. 2. 9. 19:43
#Javascript 파일내에서 JSX (JavaScript Xml)는 일반 html 처럼 사용하면 되지만 주의할 사항이 3가지 있음! 1. 리액트에서 JSX를 반환할 때는 꼭 하나의 태그만 반환 만약 다수의 태그를 반환하고 싶다면 아래 2가지 예시 처럼 부모 태그로 감싸준다. 1) 텅빈 태그(fragment)로 감싸기 2) div 태그로 감싸기 2. class를 사용할 경우 => className 으로 사용 3. Javascript 코드 작성이 가능 xml 태그 내에 Javascript 코드 작성이 가능하고 중간 중간에 넣을 수 있다. 단, Javascript 코드를 작성하려면 중괄호 { ... } 안에서만 사용할 수 있다. # 참고로 HTML 코드를 JSX 로 자동 변경해 주는 사이트 JSX에 익숙해..
-
-
Arrow function expressionsFront-end study/Javascript 2023. 1. 26. 18:20
개요 arrow function 표현식은 전통적인 함수 표현식에 대한 간단한 대안으로, 몇 가지 의미적 차이와 의도적인 사용 제한이 있어요. this나 super에 대한 바인딩이 없고, methods 로 사용될 수 없습니다. new.target키워드가 없습니다. 일반적으로 스코프를 지정할 때 사용하는 call, apply, bind methods를 이용할 수 없습니다. 생성자(Constructor)로 사용할 수 없습니다. yield를 화살표 함수 내부에서 사용할 수 없습니다. 문법 기본 문법 param => expression (param) => expression (param1, paramN) => expression param => { statements } (param1, paramN) => { s..
-
node_modules 폴더 관리Front-end study/React & Vue 2023. 1. 20. 16:28
# github 형상관리 시 필요없는 node_modules 폴더 삭제하기 1. vs code 에서 git bash 모드로 진입 2. 해당 branch 로 가서 (나는 main branch) 3. git rm --cached -r node_modules 4. 위 명령어를 입력하고 enter! 5. 연동된 Source tree 에서 스테이지에 삭제(마이너스)로 올라와 있는 모든 파일들을 커밋! # VS code 에서 나의 PC에 있는 node_modules 폴더를 삭제한 경우 1. 동료의 package.json 파일이 잘 돌아간다면 해당 파일을 copy 후 paste 한다. => package.json 파일이 기본적으로 필요하다 2. npm install => 안 되면 3. npm install --leg..