NVM이란? NVM은 Node Version Manager를 말한다. Node버전을 관리할 수 있도록 도와주는 툴이다. NVM git https://github.com/nvm-sh/nvm#installing-and-updating GitHub - nvm-sh/nvm: Node Version Manager - POSIX-compliant bash script to manage multiple active node.js versions Node Version Manager - POSIX-compliant bash script to manage multiple active node.js versions - nvm-sh/nvm github.com NVM window git https://github.com/co..
프리티어는 코드 포맷의 통일성을 유지시켜주는 javascript라이브러리이다. 우리 팀에서도 자유분방한 팀원들과(?)의 협업을 위해 코드 포맷 통일성 유지시켜야 해서 prettier를 쓰고 있다. 제멋대로 코딩하고 prettier로 세팅해서 commit하면 좋다. intelliJ에서 세팅하기 2023.01.20 - [javascript] - [JS] Prettier란? Prettier Configuration파일 세팅하기 [JS] Prettier란? Prettier Configuration파일 세팅하기 프리티어는 코드 포맷의 통일성을 유지시켜주는 javascript라이브러리이다. 우리 팀에서도 자유분방한 팀원들과(?)의 협업을 위해 코드 포맷 통일성 유지시켜야 해서 prettier를 쓰고 있다. 제멋대로..
var의 문제점 변수 중복 선언이 가능하다. 함수레벨 스코프이다. 외부에서 선언한 변수는 모두 전역변수다. 변수 선언문 이전에 변수를 참조하면 언제나 undefined를 반환한다. var name = "jisu" var name = "zigu" console.log(name) //zigu //const, let은 중복선언 불가 //함수레벨 스코프 function() { var name = "jisu" if(true){ var name = "zigu" } console.log(name) //zigu } //블록레벨 스코프 : let, const function() { let name = "jisu" if(true){ let name = "zigu" } console.log(name) //jisu } con..
onchange onchange 이벤트는 값이 변경된 직후가 아니라, 변경되고 포커스를 잃을 때 발생한다. 입력 : const input = document.getElementById("input"); input.addEventListener("change", function(e) { console.log("onchange", e.target.value) //값이 바뀔때마다 찍히지 않음. //input바깥을 클릭하면 찍힘 }) onchange이벤트는 selectbox등에서 값이 변경될 때 사용한다. 1 2 const select = document.getElementById("select"); select.addEventListener("change", function(e) { console.log("o..
Symbol ES6이전에는 6개의 원시타입이 존재했다. 심볼은 ES6에서 도입된 7번째 데이터 타입이다. 심볼은 다른 값과 절대 중복되지 않는 유일무이한 값을 말한다. 생성 심볼은 심볼 함수를 호출하여 생성할 수 있다. 다른 원시 타입들은 리터럴 방식으로 생성할 수 있지만 ( ex : const arr = [] ) , 심볼은 리터럴 생성 방식이 없다. const mySymbol = Symbol(); console.log(mySymbol); //Symbol() Symbol은 유일무이한 값을 생성하지만, 그 값은 외부로 노출되지 않는다. console.log로 찍어보아도 Symbol()이 보이는 것을 볼 수 있다. 파라미터 심볼은 파라미터를 받는데, 이는 디버깅 용도로만 사용되며, symbol의 유일무이한 ..
props drilling props를 전달, 전달, 전달 해야하는 상황 provide와 inject는 props drilling을 해결하기 위해 나왔다. Provide / Inject 상위에서 dependency provider를 만들고 어떤 descendant든 바로 줄 수 있도록 한다. 이때 inject키워드를 쓴다. export default { provide: { message: 'hello!' } } provide는 app leve에서 할 수 있다. import { createApp } from 'vue' const app = createApp({}) app.provide(/* key */ 'message', /* value */ 'hello!') 아래처럼 inject한다. export def..
ajax를 통해 데이터를 가져오는 방법은 여러가지로 불편하다. 먼저, callback hell이 발생한다. //ajax를 이용해 데이터를 가져오는 함수 const get= (url, successCallback, failCallback) => { // ajax 동작 } get("step1", () => { get("step2", () => { get("step3", () => { //... }) }) }) 두번째로 에러처리에 한계가 있다. 다음과 같은 코드는 에러를 캐치하지 못한다. try{ setTimeout(() => {throw new Error("Error"); }, 1000); } catch(e) { console.error("에러", e) } 이러한 문제는 Promise를 사용하면 해결할 수 ..
함수에는 Constructor인것과 non-constructor인 것이 있다. Constructor은 인스턴스를 생성할 수 있는 객체로 내부메서드 [[Construct]]를 가진다. constructor인 함수는 prototype 프로퍼티를 가진다. non-constructor은 인스턴스를 생성할 수 없는 객체로 내부메서드 [[Construct]]가 없다. 따라서 non constructor인 함수는 prototype 프로퍼티가 없다. Arrow Function ES6에 추가된 문법. 화살표 함수를 말한다. const a = () => { //some code }; 화살표함수는 this, super, arguments 를 가지지 않으며, non-constructor이다. Method ES6이전의 Meth..
