태그는 어디에 위치해야 할까? 브라우저의 구성 요소 렌더링 엔진은 HTML, CSS를 파싱한 결과물로 페이지를 화면에 표시한다. (대표적인 렌더링 엔진으로는 사파리의 webkit, IE의 trident, 파이어폭스의 Gecko, 크롬, 오페라, edge의 Blink(webkit에서 파생)가 있다.) 자바스크립트는 자바스크립트 해석기에서 해석한다. 브라우저의 동작 방식 HTML을 읽기 시작 HTML을 파싱 DOM 트리 생성 Render 트리(DOM tree + CSS의 CSSOM 트리 결합)가 생성 Display에 표시 script를 html에 위치시키는 방법에는 script를 head 태그 안에 위치시키는 경우, body 태그의 맨 아래에 위치시키는 경우, async나 defer를 사용하는 경우가 있다...

노마드 코더 수업을 듣다가 크로미움(크로미엄, 크로뮴 등으로도 부른다.) 브라우저라는 단어가 나왔다. 크롬과 무슨 차이가 있는지 궁금해져서 찾아보게 되었다. Chromium Browser 크로미움 브라우저는 구글에서 개발하는 오픈 소스 웹 브라우저 및 리눅스 계열 운영체제 프로젝트이다. 프로젝트의 산물로 나온 크로미움의 소스 코드는 다양한 브라우저들의 기반 엔진이 된다. 아래의 브라우저들이 크로미움을 기반으로 제작되었다고 한다. 주로 최신 기술을 시험하는 가늠터의 역할을 하며, 윈도우, macOS, 리눅스를 지원한다. 구글 크롬 브레이브 오페라 마이크로소프트 엣지 삼성 인터넷 네이버 웨일 비발디 Electron도 Chromium과 Node.js로 만들어졌다고 한다! 크로미움과 크롬 위키에 나와있는 내용을..

배열의 각 인덱스에 1~10까지의 값을 초기화해준다고 했을 때 보통은 아래와 같은 방법을 생각했었다. let arr1=[]; for(let i=1;i x + x); // [2, 4, 6] //v는 할당할 value, i는 인덱스 Array.from({length: 5}, (v, i) => i); // [0, 1, 2, 3, 4] Array.from({length: 5}, (v, i) => i+1); // [1, 2, 3, 4, 5] Array.from을 이용하여 빈 배열을 초기화 하는 코드 Array.from( {length: 20}, //배열 () => Array(10).fill(0) //각 배열에 적용할 함수 ); // 0으로 초기화된 20*10 짜리 2차원 배열을 리턴

JS의 splice() 메서드에 대해서 정리해보려 한다. Array.prototype.splice() splice() 메서드는 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가해서 배열의 내용을 변경한다. array.splice(start[, deleteCount[, item1[, item2[, ...]]]]) start: 배열의 변경을 시작할 인덱스. - 배열의 길이보다 큰 값이라면 실제 시작 인덱스는 배열의 길이로 설정된다. 음수인 경우 배열의 끝에서부터 요소를 세어나간다. 값의 절대값이 배열의 길이보다 큰 경우 0으로 설정된다. deleteCount (Optional): 배열에서 제거할 요소의 수. - deleteCount를 생략하거나 값이 array.length - start 보다 크면 s..

프로그래머스에서 자바스크립트 코딩테스트 문제를 풀고 다른 사람의 풀이를 보는데 어떤 풀이 밑에 이런 댓글이 달려있었다.(!!) 평소에 substr과 substring, slice를 구분하지 않고 썼었는데 무슨 차이가 있는건지, substr을 권장하지 않는 이유에 대해서도 더 알아보려 한다. 1. substr() str.substr(start, length) substr 함수는 특정 위치에서 시작해서 특정 문자 수 만큼의 문자들을 반환한다. 파라미터로 입력받은 start 인덱스부터 length 길이만큼 string을 잘라내어 반환한다. 첫 번째 글자의 인덱스는 0부터 시작한다. start가 양수일 때 문자열 전체 길이보다 크거나 같을 경우: 빈 문자열 반환 start가 음수일 때 문자열 끝에서 start ..

공부는 하면 할수록 모르는 게 많은 것 같다.. 오늘은 자바스크립트의 map 함수에 대해서 공부한 내용을 정리해보려 한다. - map() 메서드는 배열 내의 모든 요소 각각에 대해 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환한다. arr.map(callback(currentValue[, index[, array]])[, thisArg]) callback: 새로운 배열 요소를 생성하는 함수. 다음의 세가지 인수를 가진다. currentValue: 처리할 현재 요소 index(Optional): 처리할 현재 요소의 인덱스 array(Optional): map()을 호출한 배열 thisArg(Optional): Optionalcallback을 실행할 때 this로 사용되는 값 map은 callback..

Javascript에는 배열의 요소들을 정렬해주는 sort() 함수가 존재한다. 이의 사용 방법을 정리해보려 한다. arrayobj.sort(sortFunction) arrayobj는 임의의 Array 개체, sortFunction은 요소 순서를 결정하는 데 사용되는 함수의 이름이다. 생략하고 arrayobj.sort()로만 쓰면 오름차순, ASCII 문자 순서로 정렬된다. sortFunction 인수에 함수를 지정하면 아래의 값 중 하나가 반환된다. 첫 번째 인수가 두 번째 인수보다 작을 경우: - 값 두 인수가 같을 경우: 0 첫 번째 인수가 두 번째 인수보다 클 경우: + 값 1. 문자 정렬 var fruit = ['orange', 'apple', 'banana']; fruit.sort(); // ..

LifeCycle method는 React component의 생성부터 소멸까지 일련의 이벤트들이라고 할 수 있다. 리액트의 모든 이벤트는 lifecycle을 지난다. 1. Mounting 2. Updating 3. Unmounting 1. Mounting - 컴포넌트가 생성될 때, 다음과 같은 순서대로 호출된다. constructor() static getDerivedStateFromProps() render() componentDidMount() constructor() - React component의 constructor()는 컴포넌트가 마운트되기 전에 호출된다. 보통 개체를 this.state에 할당하여 로컬 상태를 초기화하거나, 인스턴스에 이벤트 처리기 메소드를 바인딩할 때 사용한다. 그리고 ..

자바스크립트로 간단하게 컴퓨터가 생성시킨 난수를 사용자가 맞추는 게임을 만들어 보았다. 구현하면서 몰랐다가 새로 알게 된 내용들을 아래에 정리해보려 한다. (전체 코드는 맨 아래에!) 1. Range 바뀐 값을 실시간으로 보여주기 2. input안에 있는 값이 text인지 확인하기 3. 난수 발생시키기 4. 자식 노드 모두 없애기 1. Range 바뀐 값을 실시간으로 보여주기 range 값이 변경될 때마다 실시간으로 보여주는 것을 하고 싶었는데 addEventListener에서 값을 "change"로 하면 바뀌고 나서의 값만 떠서 그 방법을 찾아보았다. function init() { numberLabel.innerHTML = `Generate a number between 0 and ${numberRa..