Front-end

·Front-end
console.log(score);var score;위 코드를 실행시킨 결과는 어떻게 될까요?1. 참조 에러(ReferenceError)2. undefined 정답은 2번입니다. 이유는 변수 선언의 실행 시점에 연관이 있습니다. 자바스크립트 코드는 기본적으로 인터프리터에 의해 한 줄씩 순차적으로 실행되므로 console.log(score);가 가장 먼저 실행되고 순차적으로 다음 줄에 있는 코드를 실행합니다. 하지만, 변수 선언이 소스코드가 한 줄씩 순차적으로 실행되는 시점, 즉 런타임(runtime)이 아니라 그 이전 단계에서 먼저 실행되기 때문에 참조에러가 아닌 undefined가 출력되는 것입니다.즉, 자바스크립트 엔진은 변수 선언이 소스코드 어디에 있든 상관없이 다른 코드보다 먼저 실행됩니다.⇒ 변..
·Front-end
두 가지 용어파싱(Parsing)프로그래밍 언어의 문법에 맞게 작성된 텍스트 문서를 읽음실행하기 위해 텍스트 문서의 문자열을 토큰(token)으로 분해토큰에 문법적 의미와 구조를 반영하여 트리 구조와 자료 구조인 파스 트리(parse tree)를 생성하는 과정 렌더링(Rendering)HTML, CSS, Javascript로 작성된 문서를 파싱하여 브라우저에 시작적으로 출력하는 것을 말한다.브라우저 렌더링 과정 순서1. 브라우저는 HTML, CSS, 자바스크립트, 이미지, 폰트 파일 등 렌더링에 필요한 리소스를 요청하고 서버로부터 응답을 받는다.2. 브라우저의 렌더링 엔진은 서버로부터 응답된 HTML과 CSS를 파싱하여 DOM과 CSSOM을 생성하고 이들을 결합하여 렌더 트리를 생성한다.3. 브라우저의 ..
들어가며reduce() 함수를 사실 보면 코드가 읽히는데 사용할 순간이 쉽게 떠오르지 않아서 개념 및 원리를 정리하려 합니다. reduce()배열의 각 요소에 대해 주어진 리듀서 (reducer) 함수를 실행하고, 하나의 결과값을 반환한다. 즉, 쉽게 말하면 배열을 순회하며 각 요소에 대하여 이전의 콜백함수 실행 반환값을 전달하여 콜백함수를 실행하고 그 결과값을 반환한다. reduce 메서드의 콜백 함수 4개의 인수초기값 또는 콜백 함수의 이전 반환값reduce 메서드를 호출한 배열의 요소값reduce 메서드를 호출한 배열의 인덱스reduce 메서드를 호출한 배열 자체, 즉 thisconst arr = [1, 2, 3, 4, 5];/*previousValue : 이전 콜백의 반환값currentValue ..
·Front-end
사용 이유 서합 이후 프론트엔드 과제를 하면서 임시 json 데이터를 불러오기 위해 API를 만들어야했다. 서버에 연결해서 하는 방법도 있지만 현재는 임시 json 데이터를 두는 거라고 생각하였기 때문에 라이브러리 중 json-server를 활용하게 되었다. 기본 설정 asset/db에 data.json이라는 파일을 만들고 { "numbers": [ { "id": 1, "number": 1 }, { "id": 2, "number": 2 }, { "id": 3, "number": 3 }, { "id": 4, "number": 4 } ] } json형태의 데이터를 넣어둔다. 라이브러리 설치 npm install -g json-server sudo npm install -g json-server 설정 json..
ssooyeon
'Front-end' 카테고리의 글 목록