최근 면접 이야기최근 기술면접에서 다음과 같은 질문을 받았다. "JS에서 Array에 모든 데이터를 Array에 넣고, find()로 찾으면 되지, 왜 굳이 객체를 사용할까요?" 이 질문에 대해 "find()는 O(N)이지만, 객체는 프로퍼티를 통해 값을 조회할 수 있어서 O(1)이기 때문에 사용한다고 생각합니다." 라고 대답했고, 다음과 같은 꼬리질문들이 이어지기 시작했다.객체는 어떻게 값을 저장하길래 O(1)인가요?객체는 값을 가져올 때 항상 O(1)인가요? 정말인가요? 최근 학습했던 JS와 V8의 메모리 구조와 관리 내용을 기반으로 알고 있던 지식을 버무려 답하고자 했다. 생각하는 시간을 가질수록 머리가 하얘져서, 객체의 프로퍼티 - 값 형태에 집착했고, 해시 구조로 저장된다는 답을 드렸다. 그 ..

서론 출근길 최고의 선택 중 하나인 널개님의 CS 영상을 보면서 출근을 했다. 오늘 영상의 주제는 다음과 같았다.스택이 무한정 커졌다고 가정할 때, 힙은 불필요할까?힙의 파편화에 대해 알고있나? 유튜브를 보는 내내 30분 동안 지하철에서 머리속에 흩어져 있는 지식을 조합해서 대답을 만들어보았다. 일반적으로 메모리 공간은 스택, 힙, 코드, 데이터가 어쩌고.....JavaScript의 실행 컨텍스트가 스택으로 관리되고 내부적으로는 동적으로 생성되고 가비지 컬렉션이 어쩌고......Primitives는 일반적으로 스택에 저장되고.......힙 파편화는 메모리 할당, 해제가 반복되면서 어쩌고.... 디스크 조각모음 어쩌고.... 힙 파편화가 아니라, 내 머리 속의 파편부터 GC하고 싶은 출근길이었다.. ..

결정장애라 메뉴선정시에 항상 어려움을 겪곤 한다. 학원 수강 중 메뉴 선정에 대한 고민을 하였고, 결국 오픈소스를 활용하여 돌림판 제작을 시작했다. See the Pen Untitled by magic (@mag11c) on CodePen. 자주가는 식당들을 product 배열에 미리 추가한 뒤, 해당 배열의 길이와 동일하게 색상 배열을 만들어 색상을 미리 추가시켰다. 그리고 새로운 메뉴를 추가할 수 있다. const $c = document.querySelector("canvas"); const ctx = $c.getContext(`2d`); const menuAdd = document.querySelector('#menuAdd'); const product = ["햄버거", "순대국", "정식당", ..

HTML todos Left click to toggle completed. Right click to delete todo input에서 입력된 값을 ul의 li에다가 담을 것이며, 스토리지를 이용해 새로고침해도 리스트가 남아있게 할 예정이다. 자바스크립트 공부를 위함이니 css는 맨 아래에다가 작성 해 두겠다. JS 새로고침 이후에도 유지되기 위해 스토리지를 활용할 것이다. localStorage에 데이터를 넘겨주기 위해 배열을 JSON.stringify() 메서드로 포맷팅한 뒤 넘겨주었다. const form = document.querySelector('form'); const input = document.querySelector('input'); const ul = document.queryS..

웹 스토리지 ( Web Storage ) 기존 쿠키의 문제점을 보완하기 위해 사용한다. https://mag1c.tistory.com/187 쿠키와 세션 (Cookie & Session) HTTP 프로토콜의 특징 비연결성 ( Connectionless ) 클라이언트가 서버에 요청(Request)할 때, 그에 대한 응답(Response)을 한 후, 연결을 끊는다. 비상태성 ( Stateless ) 클라이언트의 상태 정보를 가지지 않는 mag1c.tistory.com 웹 스토리지의 특징 1. 브라우저 내부에 Key, Value 쌍을 저장하는 공간이다. 2. 네트워크 요청 시 서버로 전송되지 쿠키에 비해 않아 많은 자료보관이 가능하다. (2MB이상) 3. 서버가 HTTP 헤더를 통해 스토리지 객체를 조작할 수..

쿠키에 대한 자세한 설명은 아래에 https://mag1c.tistory.com/187 쿠키와 세션 (Cookie & Session) HTTP 프로토콜의 특징 비연결성 ( Connectionless ) 클라이언트가 서버에 요청(Request)할 때, 그에 대한 응답(Response)을 한 후, 연결을 끊는다. 비상태성 ( Stateless ) 클라이언트의 상태 정보를 가지지 않는 mag1c.tistory.com 자바스크립트에서의 Cookie 사용하기 document.cookie 프로퍼티를 이용하여 생성, 삭제 및 조회가 가능하다. document.cookie는 name=value 쌍으로 구성되어 있고, 각 쌍은 ; 로 구분한다. 쌍 하나는 하나의 독립된 쿠키를 나타내며, ; 을 기준으로 document...

Promise사용 시 불편한 점들 1. then()을 연속적으로 호출하여 문제 발생 시 혼란을 겪을 수 있다. 2. 복잡한 구조의 비동기처리 코드 작성 시 코드의 가독성이 저하된다. 3. 동기코드와 비동기코드가 섞여있을 때 예외처리 하기가 난해하다. async / await Promise의 불편한 점들을 해결하기 위해 ES7에서 async/await가 추가되었다. async function f() { return 1; } f().then(alert); // 1 async는 function 앞에 위치하며, async가 붙은 함수는 항상 Promise를 반환한다. Promise객체를 생성하지 않더라도 Promise 객체가 리턴되는 것에 주의하자. await는 async함수 내부에서만 동작한다. async f..

프로미스(Promise) 비동기 처리를 위해 사용되는 객체이며, 콜백 패턴의 한계를 보완하기 위해 사용한다. 장점 비동기 처리 시점을 명확하게 표현 가능 연속된 비동기 처리 작업을 수행하기 편하며, 작업 상태를 쉽게 확인 가능 코드의 유지보수성이 증가. const promise = () => new Promise((resolve, reject) => { let sum = 1 + 1 if(sum == 2) { resolve('correct') } else { reject('incorrect') } }) promise().then((message) => { console.log(message) }).catch((message) => { console.log(message) }) resolve와 reject ..