프린세스 다이어리

Q. 자바스크립트에서 변수를 선언하고 값을 할당하는 일련의 과정을 설명해보세요. (1) 변수 선언 키워드 (var, let, const)로 변수 이름을 선언하면, 메모리 공간을 확보하여 값을 저장하기 위한 준비를 한다. - 메모리 공간을 확보하고 - 변수 이름과 확보된 메모리 공간의 주소를 연결한다. -> 즉 값을 저장할 수 있게 준비하는 것이다. -> 이 메모리 공간은 해제되기 전까지는 보호된다. (2) 자바스크립트 엔진은 변수 선언을 2단계에 걸쳐 수행한다. - 선언 단계: 변수 이름을 실행 컨텍스트에 등록해서 자바스크립트 엔진에 변수의 존재를 알린다. - 초기화 단계: 값을 저장하기 위한 메모리 공간을 확보하고, 암묵적으로 undefined를 할당해 초기화한다. (초기화 단계를 거치지 않으면, 확보..

1. SSR vs CSR? 브라우저에서 실제로 우리가 보는 화면을 최종적으로 어디서 만들어서 보여주느냐, 어떻게 개발하느냐에 따라서 CSR, SSR로 나뉜다. CSR은 클라이언트 사이드 렌더링으로, 처음에 브라우저가 서버로부터 HTML과 static 파일을 받아오고 나면, 사용자의 요청에 따라 js를 통해 view를 동적으로 렌더링하는 방식이다. 화면에 보여줄 내용을 클라이언트에서 생성하기 때문에 클라이언트 사이드 렌더링이라고 한다. SSR은 서버에 새로운 페이지에 대한 요청을 할 때마다 서버로부터 HTML과 data가 덧붙여진 템플릿을 받아온다. 요청할 그 때마다 브라우저의 새로고침이 일어나는 것이다. 서버에서 view가 어떻게 보여질지 해석하여 보내주기 때문에 서버 사이드 렌더링이라고 한다. 2. C..

this란 함수를 호출할 때 생성되는 실행 컨텍스트 객체다. this가 가리키는 대상은 어떻게 this가 호출되는지에 따라 다르다. 아래 상황별로 this의 의미를 나눌 수 있다. → 전역 공간에서의 this → 메서드로서 호출할 때 내부에서의 this → 함수로서 호출할 때 내부에서의 this → 콜백 함수 호출 시 내부에서의 this → 생성자 함수 내부에서의 this 1. 전역 공간에서의 this 전역 공간에서 this는 전역 객체를 가리킴. (this 콘솔에 찍으면 전역객체 나온다는 뜻) console.log(this) // {alert: f(), atob: f(), blur: f(), ...} console.log(window) // {alert: f(), atob: f(), blur: f(),..

HTML 요소에서 이벤트가 발생하면 해당 요소를 포함한 모든 조상 요소에 이벤트를 전달한다. 왜 전달하는지 알아보고 이벤트가 전파되는 과정을 설명한다. 예전에 정리한 블로그글 이제서야 다시 필요해서 퍼옴.ㄷㄷ 1. 이벤트의 전파 과정 3단계 Window 객체나 XMLHttpRequest 객체처럼 단독으로 존재하는 객체에서 이벤트가 발생하면, 브라우저는 해당 객체에 등록된 이벤트 처리기를 호출한다. 반면, 이벤트가 HTML 요소에서 발생하면 해당 요소와 조상 요소에 등록된 모든 이벤트 처리기가 호출된다. 자식 요소를 클릭하면, 컴퓨터는 자식 요소를 클릭한 건지, 부모 요소를 클릭한 건지 모르기 때문이다. → 그러니까 p 태그에 클릭 이벤트가 설정돼 있으면, p 태그를 클릭해도 div, form 태그에 할당..

앞에 내용이랑 이어진다. > 자바스크립트는 싱글 스레드 언어라면서 어떻게 비동기 함수 사용할 수 있나요 자바스크립트는 싱글스레드 언어라면서 어떻게 비동기함수 사용할 수 있나요 자바스크립트는 기본적으로 한 번의 한 작업만 수행 가능한 싱글 스레드 언어다. 하지만 자바스크립트는 웹 브라우저나 NodeJS와 같은 멀티 스레드 환경에서 실행된다. 자바스크립트가 멀티 스레 eunjinii.tistory.com function second() { setTimeout(function() { console.log("how's everything going?") }, 2000); } function first(){ console.log("hello it's me"); second(); console.log("heyyyy..

자바스크립트는 기본적으로 한 번의 한 작업만 수행 가능한 싱글 스레드 언어다. 하지만 자바스크립트는 웹 브라우저나 NodeJS와 같은 멀티 스레드 환경에서 실행된다. 자바스크립트가 멀티 스레드로 실행될 수 있도록 도와주는 장치에 대해 정리해보았다. 1. 콜백 함수가 실행되는 순서 console.log('123'); setTimeout(function() { console.log('567'); }, 300); console.log('987'); 123 987 567 여기 콘솔 로그 중간에 setTimeout이라는 함수가 있다. 이 함수는 첫 번째 인자로 들어간 함수를 두 번째 인자로 들어간 숫자만큼의 ms(밀리세컨드)를 기다렸다가 실행하도록 한다. 이 코드에 setTimeout 함수만 놓고 보면, 300m..

구글 라이트하우스는 각자가 관리하는 사이트의 성능과 접근성 등을 테스트하여 SEO에 도움이 될 수 있는 방안을 제안해 주는 툴이다. 라이트하우스 보고서를 활용하는 방법은 이 글에 정리했다. 회사에서 개발한 프로젝트 일부가 첫 로딩 속도가 너무 느려서 라이트하우스를 활용해 성능을 개선해보려고 한다. 역시 측정 결과 극악의 성능을 자랑한다. 인터넷 상에서 본 점수 중에서 가장 낮은 점수다. 배포한 상태는 이거보다는 훨씬 나은데, 로컬 서버로 열어보면 100점 만점에 9점이 나온다. 이제 이것의 성능을 구글 라이트하우스 리포트에 나온 내용을 활용하여 'Performance' 부분을 개선해보려고 한다. 1. 압축된 페이로드 응답 받기 먼저, 맨 처음으로 제안된 Enable text compression 항목에서..

1. Uncaught ReferenceError: __exports__ is not defined 오류 시나리오: vscode 상으로는 웹팩 데브 서버 실행해서 컴파일되고 서버 실행 잘 되는데, 브라우저에서 확인해 보면 자바스크립트 파일 읽는 도중에 __exports__가 undefined라 함 해결법: node_modules 모두 삭제, yarn.lock이나 package.json 비슷한 패키지 정보 모두 삭제 후 재실행. 문제 발생 이유는 모르겠으나 소스 수정하고 머지하는 과정 중에 패키지가 꼬인 게 아닐까 싶음 해결하는 데 소요된 시간: 3시간ㅎㅎ 2. Vscode에서 주석 처리하고 save 하면 주석이 모두 사라짐 (Vue 파일만 해당함) 오류 시나리오: git pull 받고 평소처럼 소스 수정하..