찐빵이의 개발일기

자바스크립트에서는 스트링 객체와 문자열 원형을 다르게 취급한다. 문자열 원형과 String 객체는 어떻게 다를까? 원형 문자열 : new 키워드 없이 “” (따옴표)로 생성되는 문자열 String 객체 : new String() 키워드로 생성되는 문자열 const string_prim = "This is string"; const string_obj = new String(string_prim); console.log(typeof string_prim); // string console.log(typeof string_obj); // object 둘 다 String이지만 타입이 다르다. 값을 출력했을 때도 다르게 나오는 것을 확인할 수 있다. 1. 원시 타입을 출력했을 때 2. 객체 타입을 출력했을 때 ..

1. Nullish Coalescing​ function print(something){ const message = something ?? 'there is no message'; console.log(message); } something이 null/undefined 인 경우 "there is no message"가 message에 들어간다. default parameter를 사용하면 undefined 인 경우에만 적용되고, null인 경우에는 적용되지 않는다. 2. Object Destructuring function printStudent(student){ const { name, age } = student; console.log(name); console.log(age); } 객체의 반복을 줄..

공부하는 이유 Vue를 사용해서 개발할 때 여러 컴포넌트(Component)를 만들어서 사용하게 된다. 생성 주기에 따라 컴포넌트에서 해야 하는 일이 추가될 수 있기 때문에, 생명주기를 잘 알고 있어야 한다고 생각했다. 생명주기 (Life Cycle) 이해하기 Vue는 다음과 같은 생명주기를 가지고 있다. 라이프 사이클은 크게 Create, Mount, Update. Destroy로 나눌 수 있다. Create Vue 인스턴스가 생성되고 이벤트 및 라이프 사이클이 초기화된다. SSR 적용 시 서버 사이드에서도 실행 가능하다. beforeCreate 인스턴스 생성 후 가장 먼저 실행되는 단계. Vue 인스턴스의 data와 methods 속성이 정의되어있지 않은 상태다. DOM에 접근할 수 없다. 이 단계가..

1. Pure Function (순수 함수) 함수에서 외부의 값을 참조하면 안 된다. 동일한 인자를 넣었을 때 항상 동일한 결과 값을 내어야 한다. 함수 안에서 외부의 상태 값을 변경하면 절차 지향적 프로그래밍이다. 2. Stateless, Immutability (비상태, 불변성) 함수 인자로 전달된 데이터를 변경하면 안 된다. 멀티스레드 환경에서 사이드 이팩트가 있기 때문이다. 새로운 Object에 결과값으로 만들어서 전달해야 사이드 이팩트를 막을 수 있다. 3. Expressions Only 반복문, 조건문을 사용하지 않고도 배열 내장 메서드를 사용해서 배열에 접근 및 값 변경 가능하다. 4. First-class and Higher-order functions First-class : 함수를 변수..

저번 시간에 ES6에서 추가된 const와 let으로 var를 대신할 수 있다는 사실을 알았다. javascript에서 var을 사용하면 안 되는 이유 그럼 const와 let의 차이점은 무엇일까? 바로 재할당 가능여부이다. const 변수 재선언, 재할당이 불가능하다. const banana = "banana"; console.log(banana); // banana // 재선언 const banana = "apple" console.log(banana); // Uncaught SyntaxError: Identifier 'banana' has already been declared // 재할당 banana = "apple" console.log(banana); // Uncaught TypeError: ..

1. var hoisting Hoisting : 어디에 선언했느냐에 상관없이 선언을 제일 위로 끌어올려주는 것. var을 사용하면 hoisting이 되기 때문에 아래와 같은 이상한 행동을 할 수 있다. 선언하기 전에 값을 할당 값을 할당하기 전에 출력 2. block scope이 없다. { variable = "I am a variable"; var variable; } console.log(variable); 블럭 안에서 변수를 선언하고, 블럭 밖에서 변수를 출력할 수 있다. 3. 재선언이 가능하다. var banana = "banana"; console.log(banana); // banana var banana = "apple"; console.log(apple); // apple 바나나가 사과가 ..

promise와 async await은 비동기적인 일의 결과를 받아야 할 때 사용된다. Promise resolve와 reject 콜백 함수를 전달한다. const promise = new Promise((resolve, reject) => { //promise에는 resolve, reject가 있다. //resolve : 정상적으로 동작했을 경우 일어나는 행동 //reject : 에러가 있었을 경우 일어나는 행동 //프로미스를 만드는 순간 이 안에 있는 내용이 실행된다. //정상 실행인 경우 예시 resolve('Success!'); }); promise .then((value) => { // promise resolve 결과가 여기에 전달된다. // Success가 전달됨 }) .catch((erro..

순수 바닐라 자바스크립트를 이용할 때는 use strict를 쓰는 게 좋다. 자바스크립트는 굉장히 유연하다는 게 특징인데, 개발자가 실수를 할 수 있다는 단점이 있다. 예를 들어 선언되지 않은 변수에 값을 할당 기존에 존재하는 프로토타입 변경 이런 이상한게 가능하다. ECMAScript 5부터 추가된 use strict 을 사용하게 되면 위처럼 비상식적인 것을 사용할 수 없게 된다. (에러가 나서 잘못된 부분을 확인할 수 있다.) use strict 사용법 javascript 파일 제일 위에 use strict를 적어준다. 예시 'use strict' /* 코드 작성 */

웹 개발을 할 때 HTML head에 script를 포함한다. 브라우저는 사용자가 HTML 파일을 다운로드하였을 때 브라우저를 한 줄씩 분석하게 되는데, script 태그가 보이면 script파일을 다운받아야 한다. script를 다운받는 방법은 한 가지 일까? 효율적으로 script파일을 다운로드하는 방법은 무엇일까? fetching : 스크립트를 서버에서 받아온다. executing : 스크립트 실행 1. 헤더에 그냥 추가하기 이 방법은 HTML을 파싱하다가 script태그를 만났을 때 파싱을 멈추고, . js파일을 다운로드, 실행한다. . js파일이 크기가 크거나 인터넷이 느린 경우 사용자가 웹 페이지를 볼 때까지 오랜 시간이 걸린다는 단점이 있다. 2. body 끝부분에 추가하기 브라우저가 HTM..