⏳ 2023. 5. 29. - 2023. 6. 4. 라이브러리 vs 프레임워크 라이브러리는 개발 편의를 위한 도구의 모음(공구), 프레임워크는 기반 구조까지(공장) 잡혀 있다. 리액트는 공식 문서에 라이브러리로 소개하고 있고, 이제부터는 리액트에 대해 알아보자! DOM 다루기 CodeSandbox https://codesandbox.io/ CodeSandbox: Code, Review and Deploy in Record Time CodeSandbox is a cloud development platform that empowers developers to code, collaborate and ship projects of any size from any device in record time. cod..
⏳ 2023. 5. 22. - 2023. 5. 28. Async와 Await 은 신이야~ 만든 새럼 천재 😆 불변성과 가변성 js의 mutable에 대해 짧게라도 짚어볼 수 있어서 좋았다. 근본없는 언어라고 욕먹어도 나는 js가 좋아!! 클로저 클로저는 반드시 자주 사용될 것 같은 너낌이다. 유용하게 쓰일 듯! 동작 원리 자바스크립트의 동작 원리는 전혀 모르고 있었는데, 많은 도움이 되었다!! 정규표현식 알고리즘 문제를 풀 때 정규표현식 관련 문제가 나오면 꽤 고생한 기억이 있다. 사실 지금도.. 정규식은 검색없이는 잘 모르겠다. 자주 사용해보며 익숙해질 수 밖에.. 🥲 컴포넌트 굉장히 굉장히 굉장히 굉장히 중요한 개념으로 느껴진다. 컴포넌트를 구현하기 위해서는 상태가 있어야 한다. 원하는 요소를 생성..
정규표현식(RegExp, Regular Expression) 정규표현식을 사용하여 문자를 검색(search)하거나 대체(replace), 추출(extract)할 수 있다. 만들기 // RegExp // 생성자 // new RegExp("표현", "플래그") const regExp1 = new RegExp("the", "gi"); // 리터럴 // /표현/플래그 const regExp2 = /the/gi; 메소드 // 정규식.test(문자열) : 일치 여부 반환 // 문자열.match(정규식) : 일치하는 문자의 배열 반환 // 문자열.replace(정규식, 대체문자) : 일치하는 문자를 대체 const str = ` 010-1234-5678 thesecon@gmail.com Hello world! htt..
자바스크립트 엔진 자바스크립트 엔진은 메모리 힙과 콜 스택으로 이루어져 있다. 엔진이 코드를 읽고 실행하면서 변수나 함수 객체 등을 담아놓는 공간(메모리 힙)과 실행할 코드를 저장할 공간(콜 스택)으로 나뉜다. 콜 스택에 대해 더 알아보자. Call Stack 브라우저에는 엔진뿐만 아니라 다양한 Web API가 존재한다. 이러한 API를 통제하기 위해 Task Queue와 Event Loop가 필요하다. 자바스크립트는 싱글 스레드 언어로, 한 번에 한 개의 일만 처리할 수 있다. 그렇다면 비동기적인 코드에 대해 어떻게 처리하는 것일까? setTimeout(() => { console.log(1); }, 0); console.log(2); 위와 같은 코드를 예시로 자바스크립트의 동작 원리를 이해해보자. 가..
메모리 누수(Memory Leak) 더 이상 필요하지 않은 데이터가 해제되지 못하고, 메모리를 계속 차지하는 현상 불필요한 전역 변수 사용 // ❌ window.hello = "hello"; window.user = { name: "iam454", age: 90 }; window라는 전역 객체는 항상 브라우저에 존재하기 때문에 사용하지 않더라도 가비지 컬렉션으로 데이터가 해제되지 않는다. 분리된 노드 참조 // ❌ const btn = document.querySelector("button"); const parent = document.querySelector(".parent"); btn.addEventListener("click", () => { console.log(parent); parent.re..
Closure 함수가 선언될 때의 유효 범위(렉시컬 범위)를 기억하고 있다가, 함수가 호출될 때 그 유효 범위의 특정 변수를 참조할 수 있는 개념을 의미한다. 쉽게 말하면, 자신이 선언될 당시의 환경을 기억하는 함수이다. 데이터를 보존하고, 접근을 제한하고, 모듈화에 유리하다는 장점이 있다. 그렇다면 클로저의 예시를 살펴보자. // Closure function createCount() { let cnt = 0; return function () { return (cnt += 1); }; } const c1 = createCount(); console.log(c1()); // 1 console.log(c1()); // 2 console.log(c1()); // 3 const c2 = createCount..
Garbage Collection(GC, 쓰레기 수집) 자바스크립트의 메모리 관리 방법 자바스크립트 엔진이 자동으로 데이터가 할당된 메모리에서 더 이상 사용되지 않는 데이터를 해제하는 것을 의미한다. 가비지 컬렉션은 개발자가 직접 강제 실행하거나 관리할 수 없다.
앝은 복사(Shallow Copy) - 참조형의 1차원 데이터만 복사 깊은 복사(Deep Copy) - 참조형의 모든 차원의 데이터를 복사 Object.assign(빈 객체, 복사하고 싶은 객체)이나 전개 연산자로 얕은 복사를 할 수 있다. 그러나 얕은 복사는 1차원의 데이터만 복사하기 때문에, 고차원의 데이터는 같은 주소를 참조하게 된다. 그렇기 때문에 깊은 복사를 하여 완전히 데이터를 분리해주어야한다. 깊은 복사는 고차원의 데이터도 다른 메모리 주소에 값을 저장하기 때문에, 완전하게 연결고리를 끊었다고 할 수 있다. 배열은 복사하고 싶은 배열.concat(빈 배열)이나 전개 연산자로 얕은 복사를 할 수 있다. 객체와 원리는 같다. 깊은 복사를 위해서는 lodash의 cloneDeep을 사용하자!