매일 꾸준히

기존 노션클로닝 과제를 뜯어고치던 와중.. 나는 npx serve - s을 이용해 개발환경을 띄우고 있었다. 그럼 npx serve -s는 뭐고 어떻게 동작했었지..?를 묻게 된다. (언젠가 배웠던 것 같은데 까먹은 거 같기도) 바로 npm에 들어가 해당 패키지가 뭔지 살펴봤다. npx-server는 Node.js기반의 정적인 웹 서버 도구이다. -s를 이용해 SPA환경에서 지원도 해준다. 문제는 기존 코드의 props가 흩뿌러져 있는 문제 떄문에 이를 redux로 이용해 마이그레이션하는 과정에서 발생했다. redux를 설치하고 다음의 코드를 적었을 떄 이런 오류가 발생했다. import { legacy_createStore } from 'redux'; import editorChild from './e..

this는 함수를 호출한 방식에 따라 다르게 정의된다. 객체 리터럴의 메서드의 this const circle = { radius:5, getRadius(){ return this.radius; } }; console.log(circle.getRadius()); 객체 리터럴의 메서드 내부에서 this는 메서드를 호출한 객체와 바인딩된다. 다음의 경우를 살펴보자 const person = { name:'LEE', getName(){ return this.name; } }; const anotherperson = { name:'Kim' }; anotherperson.getName = person.getName; console.log(anotherperson.getName()); const getName = ..

https://khj0426.notion.site/JS-b26a1ed38d344131a3b9d5d8766747ed

얕은 복사 vs 깊은 복사 얕은복사는 객체의 참조값(주소값)을 , 깊은 복사는 객체의 실제값을 복사합니다 원시 값을 복사할 떄, 새로운 메모리 공간을 할당하고, 그 곳에 새 원시 값을 넣고, 식별자가 새로운 메모리 공간을 가르키기 떄문에, 복사를 하고 값을 바꿔도, 기존의 원시값에는 아무런 영향도 가지 않습니다. const a = 1; let b = 2; b = 3; console.log(a); //1 console.log(b); //3 //기존 값 a에 영향을 미치지 않는다. 위의 코드를 그림으로 그려보면 다음과 같은 과정을 겪습니다. 이제 변수 b를 변수 c로 복사해 보겠습니다. let c = b; 위의 코드가 실행되면 다음과 같이 3을 저장할 새 메모리 공간을 만들고, 원시 값을 저장하고 c가 그 ..

ECMAScript 2017 (ES8)부터 자바스크립트의 비동기 처리를 도와주는 async/await가 등장하였습니다. promise로도 비동기 처리가 가능한데, 왜 async/await가 등장하였을까요? "Promise도 가독성이 그렇게 좋지 않다" 가 가장 큰 이유입니다. 코드의 가독성은 개발자에게 중요하고, async/await는 개발자에게 읽기 좋은 코드를 만들어줍니다. const makeRequest = () => { getJson().then(data=>{ console.log(data); return 'done'; }) } makeRequest(); const makeRequest = async () => { console.log(await getJson())l return 'done'; }..

캡틴판교님의 블로그를 보고 정리한 내용입니다 https://joshua1988.github.io/web-development/javascript/promise-for-beginners/ 자바스크립트 Promise 쉽게 이해하기 (중급) 자바스크립트 입문자를 위한 Promise 설명. 쉽게 알아보는 자바스크립트 Promise 개념, 사용법, 예제 코드. 예제로 알아보는 then(), catch() 활용법 joshua1988.github.io 먼저 자바스크립트의 비동기 처리란 "특정 코드의 실행이 완료될때까지 기다리지 않고 다음 작업을 실행하는 것" 입니다. 프로미스(Promise)는 자바스크립트의 비동기 처리를 위해 사용되는 객체입니다. (ES6) Promise란 ? "Promise란 코드에서 바로 값을 ..