Jerry

인프런, Javascript 핵심 개념 알아보기 - JS Flow, 정재남 👆👆👆 몇 년 전(?) 패키지로 결제한 강의를 지금 와서 제대로 써먹는다 ㅎㅎ 이번 내용은 원래 이 강의를 중심으로 해서 정리하려고 했지만 여하튼 다행인 게(?) 오늘 몸이 메롱이라 하루 종일 누워만 있었는데 뭐라도 하고 해서 조금이나마 마음의 평안(?)이... 🤥🤥🤥🤥 오늘 캡쳐가 조금 있는데 나름 성의를 담아(?) 캡처하여 올렸으니 참고해주시고 아무튼 우리 모두 몸건강, 정신건강 챙기십다!! 키워드 의미를 뜯어보자! Execution은 실행이란 뜻이다. Context은 맥락/환경/상황이란 뜻이다. 이 중에서 Context의 영어적 뉘앙스를 살펴보자! 그중 환경이란 뜻의 건축적 의미를 살펴보자! [건축]에서 환경이란 의미는 '특..

이번엔 이벤트 루프(event loop)를 정리해 보려고 한다. 이벤트 루프를 모르면 자바스크립트 알고 있는 것이 아니라고 하는 이야기를 들었는데 그만큼 이벤트 루프가 자바스크립트에서 자치하는 역할이 크다는 것을 의미하는 것 같다. 이 글을 정리하면서 여러 레퍼런스와 유튜브 영상을 참조하였는데 알고 있는 선에서 최대한 이벤트 루프에 대해서 이야기해보겠다. 아마 이벤트 루프에 대한 개념을 한 번만 보고 이해하기는 힘들 가능성이 높다. 하지만, 여러 번 보면 볼수록 익숙해지고 익숙해지면 더 이해하기가 수월해지지 않을까 생각해본다. 필자 역시 그랬다.ㅎ 먼저, MDN에서 말하는 이벤트 루프를 뭐라고 이야기할까? JavaScript has a concurrency model based on an event lo..

어제 async await에 대해 정리해보았다. (관련 포스트) 오늘은 async를 사용할 경우, 예외 처리하는 법은 어떻게 하는지 알아볼 것이다! 준비됐나?? 시작해보자! 자 저번 글에 이야기 했지만 큰 그림을 위해서 + 복습 차원에서 아는 코드를 예시로 먼저 보도록 하겠다. #1의 result값과 #2의 result값은 무엇일까? 조금이라도 생각해보고 휠을 내려보자! #1 async function myAsyncFunction() { return 'done'; } const result = myAsyncFunction(); console.log(result); #2 function myPromiseFun() { return new Promise((resolve, reject) => { resolve(..

오늘은 자바스크립트 기본 개념 중 하나인 원시 값에 대해 알아보자! MDN에서 자바스크립트 원시값에 대한 정의를 찾아보았다. JavaScript에서 원시 값(primitive, 또는 원시 자료형)이란 객체가 아니면서 메서드도 가지지 않는 데이터입니다. 원시 값에는 6종류, string, number, bigint, boolean, undefined, symbol이 존재합니다. 겉보기엔 원시 값처럼 보이는 null도 있지만, 사실 모든 Object, 모든 구조화된 자료형은 프로토타입 체인에 따라 null의 자손입니다. '자바스크립트에서 원시 값은 객체가 아니면서 메서드도 가지 않는 데이터'라고 하는데 무슨 말일까? 아마 객체가 아니라고 하는 것은 모든 원시 값은 불변성을 지니고 있기 때문일 것이다. - 원..

이번 주제는 async await이다! 이 키워드를 주제로 정하게 된 이유는 async await에 대해 배운지 오래 되어 개념이 가물가물해서 이번 기회를 통해 다시 개념을 정리하고자 하였다. 시작해봅시다 :))) async await이라는 문법은 비동기 처리를 하기 위해서 사용했던 프로미스(promise)라는 문법을 좀 더 편하게 사용하기 위해 async await까지 생겼다고 한다. 먼저, async 함수에 대해서 알아보자 async function 선언은 AsyncFunction 객체를 반환하는 하나의 비동기 함수를 정의합니다. 비동기 함수는 이벤트 루프를 통해 비동기적으로 작동하는 함수로, 암시적으로 Promise를 사용하여 결과를 반환합니다. 그러나 비동기 함수를 사용하는 코드의 구문과 구조는,..

이번에는 '리렌더링이 되는 조건'이라는 주제에 대해서 이야기해보려고 한다. 리렌더링 되는 조건 이란 무슨 뜻일까? 요 며칠간 리액트에 관해 공부하고 있어서 그나마 쉽게 정리를 하지 않을까 싶었지만 리렌더링에 대한 의미에 대해 생각해보니 단순하게 입으로 리렌더링이란 말을 썼지 이 용어 의미하는 바를 제대로 모르고 있었고 NaverD2에 있는 이 글을 보고 이해해볼 수 있을까했는데... D2에 있는 글은 열심히!! 읽어봤지만 필자에겐 아직 어려웠다... 다른 레퍼런스를 참고해 리렌더링에 대해 알아보려고 한다! 가즈아!! 포기하지마!!! 그렇다면 먼저! 렌더링에 대해서 알아보자! 1. 사용자 화면에 View(내용)를 보여 주는 것을 렌더링이라고 한다. 2. React 엘리먼트를 루트 DOM 노드에 렌더링 하려..

Reference 1 메서드는 클래스에 속한 함수다. 자바스크립트에선 메서드는 객체에 속한 함수다. 자바스크립트 안에서 모든 것은 객체다. 함수도 객체다. src https://dev.to/tiffany/what-is-the-difference-between-a-function-and-a-method-in-javascript-3mkj Reference 2 무엇을 표현하고 싶은가에 따라 다르고 시멘틱 하다. 자바스크립트에서는 모든 함수가 객체다. 객체는 키:값의 집합체이다. 만약, 값이 원시 값(Number, String, Boolean)이나 다른 객체라면, 값은 속성으로 볼 수 있다. 만약 값이 함수라면, 이것을 메서드라고 부른다. 보통, "객체에서 OO 메서드를 사용할 거야" 든 지 "이 OO 메서드는..

어제 '리액트 최적화'에 대한 키워드를 정리하다 보니 최적화라는 것이 Virtual DOM과 연관이 있다는 것을 덤으로 알게 되었다. 덩달아 기술면접 관련 스터디 주제에 Virtual DOM이 있는 것이 아닌가?! 이때다 싶어서 이번 주제를 Virtual DOM으로 정했다!! 최적화에 대해 공부하면서 Virtual DOM에 대해 잠깐 보았지만 정말 내가 제대로 알고 있는 것 같지 않았기에 이번 기회를 통해서 관련 개념이 한층 깊어지는 시간이 되었으면 한다. Virtual DOM 이란 무엇일까? The virtual DOM (VDOM) is a programming concept where an ideal, or “virtual”, representation of a UI is kept in memory ..