이번에 정리할 내용은 Closure와 Lexical Scope에 관한 내용입니다. 최근 면접을 보고 있는데 자바스크립트 코어에 관한 부분에서 부실한 점이 많아 차근차근 정리합니다. 🤔 Closure? Lexical Scope? Closure가 뭘까요? 한 걸음 Closer~ 내 맘~ 아니구요. 클로저는 독립적인 변수를 가르키는 함수입니다. 아래 코드가 있습니다. function outerFunc() { var x = 10; var innerFunc = function () { var y = 20; console.log(x); }; innerFunc(); } outerFunc(); outerFunc이 선언되어 있고 함수 내부에는 innerFunc이 선언되고 실행되고 있습니다. 여기서 선언했다는 표현에 포인..

계속해서 Hook들을 소개하겠습니다. 이번 글의 주인공은 useRef입니다. 한정적인 용도라 많이 쓰이진 않지만 알아두시면 좋을 Hook 입니다. 🤔useRef? 공식홈페이지에서는 useRef를 이렇게 소개하고 있습니다. useRef는 .current 프로퍼티로 전달된 인자(initialValue)로 초기화된 변경 가능한 ref 객체를 반환합니다. 반환된 객체는 컴포넌트의 전 생애주기를 통해 유지될 것입니다. 본질적으로 useRef는 .current 프로퍼티에 변경 가능한 값을 담고 있는 “상자”와 같습니다. useRef의 선언은 아래와 같이 할 수 있습니다. const refContainer = useRef(initialValue); 이녀석을 어디에, 어떻게 사용할까요? 크게 두 가지의 용도로 나눌 수..

이번에 알아볼 알고리즘은 병합 정렬 (Merge Sort) 입니다. 합병정렬이라고도 불리며, 분할정복알고리즘 중 하나입니다. 또한 안정정렬에 속합니다. 🤔 과정 및 코드 반씩 나누는 걸 반복하여 1개가 될 때까지 나눈 후 이를 다시 병합(Merge)하면서 정렬해나갑니다. 📝 Python 예시 코드. def merge(left, right): # 왼쪽 시작값 오른쪽 시작값, 병합하며 정리하기위한 빈 배열 i = 0 j = 0 sorted_list = [] while (i < len(left)) & (j < len(right)): # 무한반복하며 왼쪽배열과 오른쪽배열에서 가장왼쪽에 있는 값을 비교 # (각 배열의 왼쪽에 있는 값이 최소값) #크기를 비요하여 작은 정렬하는 배열에 담음. if left[i] <..

계속해서 React Hooks를 소개해드리겠습니다. 이번에 설명드릴 Hook(이하 훅)은 useEffect입니다. 앞서 소개한 useState만큼, 중요하고 자주 사용하는 훅입니다. useEffect는 일반적으로 컴포넌트가 렌더링 될 때마다 작업을 수행할 수 있게 도움을 주는 훅입니다. 클래스형의 componentDidMount와 componentDidUpdate 기능과 유사한 기능을 제공합니다. 또한 return시 CleanUp을 해주는데 이때는 componentUnMount 기능을 합니다. 한번 자세하게 알아볼까요? 👩‍💻 useEffect? import React, { useState, useEffect } from 'react'; function Example() { const [count, se..

React나 Node를 공부하면서, 부족하다고 느껴졌거나 중요한 내용을 정리해서 기록합니다. 처음 작성하는 내용은 비동기 처리와 밀접한 관련이 있는 Async & Await 문법입니다. 비동기 처리를 완전히 이해했다고 말하기는 부족하나, 이 글을 작성하면서도 깨닫는 부분이 많았으면 좋겠다고 생각하며 작성하는 글입니다. 부족한 부분은 댓글로 피드백해주시면 정말! 감사하겠습니다. 💡 시작하기 전에 과거 JavaScript에서는 콜백지옥이라는 말이 있었죠. 비동기 동작을 처리할 때 비동기 함수 안에 또 비동기 동작들을 넣다보면 계속 함수가 중첩이 되어 마치 피라미드처럼 코드가 작성되는 지옥과도 같은 관경을 볼 수 있습니다. 그래서 콜백지옥을 해결하고자 ES6에서 Promise라는 비동기 처리에 사용되는 객체가..