클로저의 정의 주변 상태(어휘적 환경)에 대한 참조와 함께 묶인(포함된) 함수의 조합 - mdn 생성된 당시의 스코프체인을 기억하는 함수 함수가 선언될 때의 렉시컬 환경을 기억하는 함수 클로저의 이해 function makeFunc() { const name = "Mozilla"; function displayName() { console.log(name); } return displayName; } const myFunc = makeFunc(); myFunc(); 함수만 봐서는 리턴된 displayName에서는 name이라는게 없기 때문에 에러가 날 것 같이 생겼다. 하지만 클로저가 형성되어 name 변수에 대한 데이터를 가지고 있기 때문에 에러가 나지 않는다. name이 있는 어휘적 환경에 대한 참조..
분류 전체보기
일급객체 다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체를 가리킨다. 보통 함수에 인자로 넘기기, 수정하기, 변수에 대입하기와 같은 연산을 지원할 때 일급 객체라고 한다. 일반적으로 적용 가능한 연산이라고 하면 다음과 같은 것들이 있다. 변수에 할당될 수 있다. 다른 함수의 인자로 전달될 수 있다. 함수에서 반환될 수 있다. 일급함수 함수를 일급 객체로 취급하는 것을 말한다. 즉, 함수들이 다른 변수처럼 다루어질 때 일급 함수를 가진다고 한다. 1. 변수에 값으로서 함수를 할당할 수 있다. const foo = () => { console.log("bar"); }; foo(); 예제를 보면 변수 foo에 함수를 할당한 다음 함수를 호출할 때 해당 변수를 사용하는 것을 볼 수 있다. 2. ..
·공부기록
SPA는 하나의 페이지를 사용하는 어플리케이션이다. 이 방식을 사용하는 것은 react, vue 등이 있습니다. 그럼 SPA가 무엇인지, 장점과 단점엔 무엇이 있는지 알아보겠습니다. Single Page Application (SPA)란? SPA와 MPA (Multi Page Application) 비교 SPA를 이해하기 위해서는 먼저 전통 방식인 MPA에 대해 알아볼 필요가 있습니다. MPA에서는 각 페이지마다 별도의 HTML이 존재합니다. 사용자가 페이지를 이동할 때마다 새로운 HTML을 서버로부터 요청하고 브라우저가 이를 파싱합니다. 장점: 페이지에 필요한 리소스들만 모아 관리하고 로드할 수 있어 효율적인 리소스 관리가 가능합니다. 단점: 느린 네트워크 환경에서는 사용자 경험이 떨어질 수 있습니다...
자바스크립트는 싱글 스레드 언어이기 때문에 한 번에 하나의 작업만 수행할 수 있습니다. 그럼에도 동시에 여러 작업이 실행되는 것처럼 보이는 것은 비동기 방식을 사용하고 있기 때문입니다. 이런 비동기 처리는 이벤트 루프로 이루어집니다. 동시성? 동시성은 여러 작업이 겹쳐서 실행되는 것처럼 보이게 만드는 방식입니다. 병렬성은 실제로 여러 작업이 동시에 실행되는 것을 의미합니다. 자바스크립트 이벤트 루프는 동시성 방식입니다. 이벤트 루프 이벤트 루프는 Call Stack, Macro Task Queue (Task Queue), Micro Task Queue, render queue로 이루어져 있습니다. Call Stack 함수가 실행되어 실행 컨텍스트가 생성되고 콜스택에 쌓입니다. Macro Task Queu..
싱글스레드. 자바스크립트는 싱글 스레드 언어입니다. 스레드는 뭘까요? 스레드는 프로세스 내에서 실행되는 가장 작은 실행 단위를 말합니다. 💡 프로세스란? 프로그램이 메모리에 로드되어 CPU의 실행시간을 받은 것을 의미합니다. 싱글 스레드 방식은 스레드가 한 개란 뜻으로, 한 번에 하나의 작업만 수행할 수 있다는 특징을 가지고 있습니다. 그래서 하나의 작업이 오래 걸리면 다음 작업이 오래 대기하게 되어 전체 실행 시간이 길어지는 문제가 있습니다. 아래 예시에서 볼 수 있듯이 중간에 정말 많은 연산을 진행하는 코드가 존재한다면 end가 콘솔에 찍히기까지 시간이 오래걸릴 것입니다. console.log("start"); for (let i = 0; i < 10000000000000; i++) { // 많은 연..
·공부기록
repaint repaint는 레이아웃에 영향을 끼치지 않는 요소의 변화에 의해 발생하는 것입니다. DOM API를 통해 visibility를 변경하는 경우나 background-color 등이 변경되는 경우에 발생합니다. reflow (layout) reflow는 웹 페이지의 레이아웃을 다시 계산하고 요소의 크기와 위치를 다시 결정하는 것입니다. 이는 웹 페이지의 구조나 스타일이 변경 되었을 때 발생합니다. reflow가 발생하는 동작에는 어떤 것이 있을까요? 다음과 같은 것들이 있습니다. 윈도우의 크기가 변할 때 폰트가 변경될 때 컨텐츠가 변경될 때 JS에 의해 DOM이 동적으로 변화할 때 (노드 추가, 제거) 변화가 발생한 요소가 영향을 미치는 모든 노드 (자식, 부모, 조상)을 다시 계산하고 렌더..
·공부기록
오늘은 브라우저 주소창에 google.com을 치면 일어나는 일에 대해 공부해봤습니다. 네트워크 측면에서 바라봤을 때 일어나는 일에 중점을 두고 살펴보겠습니다. 1. 브라우저가 도메인 주소에 매치되는 IP 주소를 찾습니다. DNS 데이터는 브라우저와 인터넷의 다양한 위치에 캐싱됩니다. 브라우저의 고유한 캐시, 운영체제 캐시, 회사 네트워크 또는 ISP의 DNS 서버 캐시를 확인합니다. 만약 캐시에서 찾지 못했다면 DNS 서버가 해당 도메인을 호스팅하는 서버의 IP 주소를 찾습니다. 인터넷에 있는 여러 DNS 서버에 요청하여 검색될 때까지 재귀적 DNS 조회를 수행해 웹사이트에 대한 올바른 IP 주소를 찾을 때까지 진행됩니다. 💡 재귀적 DNS 조회란? 한 DNS 서버에서 다른 여러 DNS 서버와 통신하여..
·공부기록
critical rendering path란? 브라우저가 HTML, CSS, JavaScript를 화면에 픽셀로 변환하는 일련의 과정을 말한다. CRP를 최적화하면 첫 렌더링 시간을 향상할 수 있다. 브라우저는 서버로부터 데이터를 받아온 후, HTML을 파싱하여 DOM트리로 변환한다. 스타일시트, 스크립트, 임베드된 이미지 참조 등 외부 리소스에 대한 링크를 발견할 때마다 요청을 시작한다. 가져온 리소스가 처리될 때까지 나머지 HTML 파싱을 중단한다. 브라우저는 요청이 끝날 때까지 계속해서 HTML 구문 분석을 진행해 DOM을 구축하며 이 시점에서 CSSOM을 구성한다. DOM과 CSSOM이 완성되면 렌더트리를 구축해 표시되는 모든 컨텐츠와 스타일을 정한다. 렌더트리가 완성되면 모든 요소의 위치와 크기..
·개발일지
(2022.05.17) 회사에 들어와서 사용하기 어려웠던 React hook 3개에 대해 내가 이해한 언어로 정리해보려 한다. 3개월 가까이 React-Native를 다루며 hook에 대해 어느정도 안다고 생각했는데 막상 글을 쓰기 위해 자료를 더 찾고 정리를 해보니 아직 잘 모른다는 것을 알게 되었다. 제가 이해한 내용을 정리하고 3개월 정도 뒤에 다시 보면서 빈 구멍을 메울 용도로 작성되었습니다. 오개념이 있을 수 있습니다. 잘못된 내용이 있다면 이야기해주시면 감사하겠습니다. useLayoutEffect와 useEffect 리액트 공식문서에서는 useLayoutEffect를 이렇게 설명한다. useEffect와 기본적으로 하는 역할은 같지만 모든 DOM mutation (변형) 이후 paint하기 전..
·개발일지
(2021.11.22) 유난히 이번 달에 여러 이벤트들이 생겼다. 스스로 생각을 정리하기 위해 글을 쓴다. 🧹 클린코드 자바스크립트 리뷰어, 리뷰이 활동 1️⃣ 참여계기 지금 듣고 있는 국비교육에서는 풀스택을 배우고 있다. html,css,js를 한 주에 걸쳐 간단하게 배우고 react, redux 위주로 프론트엔드 기술을 배우고 프로젝트에서도 해당 기술들을 사용했다. 리액트로 개발을 하면서 내가 자바스크립트 활용 능력이 부족하다고 느끼던 와중 넥스트스텝 메인에 클린코드 자바스크립트 코스가 오픈 예정이라 해 알림신청을 해뒀다. 이 시기에 자바스크립트 관련해서 스터디던 강의던 다 해보려고 했었다. 그러다가 어쩌다보니 해당 코스에 참가하게 되었다! 정말 좋은 기회라는 생각이 들어 일정이 바빴지만 참가를 결정..
·개발일지
기술면접 대비로 운영체제의 메모리 파트를 돌아보며 자주 물어보는 질문에 대한 답을 정리했습니다. Q. 프로세스에 할당되는 메모리의 각 영역을 설명해보세요 코드 - 실행 파일을 구성하는 명령어들이 적재되는 메모리 영역 / 프로그램 소스 코드를 저장한다. 읽기 전용 영역이므로 프로세스가 함부로 변경할 수 없다. 데이터 - 프로그램에 필요한 전역변수, 정적변수를 저장한다. 스택 - 함수 호출에 필요한 스택 프레임과 지역변수를 저장한다. 스택은 각 프로세스가 메모리에 로드될 때 크기가 고정되어 런타임에 스택의 크기를 바꿀 수 없다. (컴파일 타임에 크기가 결정되는 것이다.) 힙 - 프로그래머가 관리하는 공간으로 메모리를 동적으로 할당하고 해제할 수 있다. c언어의 malloc()이나 calloc()에 의해 생성..
·개발일지
(2021.10.27) 엘리스 AI트랙 2기 데이터 분석 프로젝트를 마친 후, 느낀점들을 정리했다. 지워져서 다시 씀 🚀 첫 팀 프로젝트 학부 때는 혼자 혹은 최대 3명까지 함께 과제, 프로젝트를 수행해왔다. 이번엔 총 5명으로 프론트엔드, 백엔드, 데이터분석 파트로 역할을 나눴는데 이렇게 많은 인원과 프로젝트를 한 건 처음이라 설레기도 했고 걱정이 되기도 했다. 기존 알고리즘 스터디를 같이해왔던 두 분, 새로 알고리즘 스터디에 들어오신 분, 그리고 프로젝트를 시작하면서 모집한 한 분. 이렇게 팀원이 구성되었다. 알고리즘 스터디장을 맡고 있었던 내가 팀장을 이어서 맡게 되었다. 주제는 OTT와 배달 두 개가 있었는데 평소에 OTT를 4개나 쓰고 있었어서.. 이들의 차이점이 있다는 것을 알고 있었고 흥미로..
