본문 바로가기

JS40

JS 공부는 다다익선 - 3. 변수 1. 원시 타입 (primitive data type) 원시 타입의 값은 변경 불가능한 값(immutable value)이며 pass-by-value(값에 의한 전달) 이다. 1.1 number 64비트 부동소수점 형(double-precision 64-bit floating-point format : -(2^53^ -1) 와 2^53^ -1 사이의 숫자값) 을 따른다. 정수만을 위한 타입이 없고 모든 수를 실수를 처리한다. 정수로 표시된다해도 사실은 실수다. ※ 프로그래밍 언어에서 실수는 일반적으로 소수를 가리킨다. 2진수, 8진수, 16진수 리터럴은 메모리에 동일한 배정밀도 64비트 부동소수점 형식의 2진수로 저장된다. 자바스크립트는 2진수, 8진수, 16진수 데이터 타입을 제공하지 않기 때문에 이들.. 2023. 9. 20.
JS 공부는 다다익선 - 2. 브라우저 동작 원리 브라우저의 핵심 기능은 사용자가 참조하고자 하는 웹페이지를 서버에 요청(Request)하고 서버의 응답(Response)을 받아 브라우저에 표시하는 것이다. 브라우저는 서버로부터 HTML, CSS, Javascript, 이미지 파일 등을 응답받는다. HTML, CSS 파일은 렌더링 엔진의 HTML 파서와 CSS 파서에 의해 파싱(Parsing)되어 DOM, CSSOM 트리로 변환되고 렌더 트리로 결합된다. 이렇게 생성된 렌더 트리를 기반으로 브라우저는 웹페이지를 표시한다. 자바스크립트는 렌더링 엔진이 아닌 자바스크립트 엔진이 처리한다. HTML 파서는 script 태그를 만나면 자바스크립트 코드를 실행하기 위해 DOM 생성 프로세스를 중지하고 자바스크립트 엔진으로 제어 권한을 넘긴다. 제어 권한을 넘겨 .. 2023. 9. 20.
JS 공부는 다다익선 - 1. 자바스크립트 이해 1. 자바스크립트의 탄생 1995년 당시 넷스케이프 커뮤니케이션즈가 정적인 HTML을 동적으로 표현하기 위해 경량의 프로그래밍 언어를 만들기 위해 브렌던 아이크(Brendan Eich)가 자바스크립트를 개발했다. 2. 자바스크립트의 파편화와 표준화 1996년 8월, 마이크로소프트는 자바스크립트의 파생 버전인 "JScript"를 Internet Explorer 3.0에 탑재하였다. 그런데 문제는 JScript와 자바스크립트가 표준화되지 못하고 적당히 호환되었다는 것이다. 이후 자사 브라우저에서만 동작하는 기능을 경쟁적으로 추가하기 시작하며 브라우저에 따라 웹 페이지가 정상 동작하지 않는 크로스 브라우징 이슈로 인해 모든 브라우저에서 동작하는 웹 페이지를 개발에 어려움이 생겼다. 이에 자바스크립트의 파편화를.. 2023. 9. 19.
(input.type=text) 엔터 시 submit 되는 상황 방지 설명 form 태그 안에서 input 태그에서 엔터를 누를시 submit 되는 상황을 방지하려면 onKeyDown 이벤트에서 엔터 키를 눌렀을때만 기존 이벤트 동작을 막아주어 처리한다. onKeyDown : 키가 입력되었을 때 작동하는 이벤트 핸들러 event.key : 입력된 키 event.preventDefault() : 기본 이벤트 동작을 실행하지 않는 메서드 코드 // event.keyCode, event.which 사용을 권장하진 않는다. event.key === 'Enter' && event.preventDefault()} /> event.keyCode === 13 && event.preventDefault()} /> event.which === 13 && event.preven.. 2023. 6. 19.
eslint prettier 코드 포맷팅 통합 내용 eslint 와 prettier 는 문법 오류를 방지하고 코드 포매팅을 통해 일관적인 코딩 컨벤션(코딩 규약)을 유지하여 코드 작성 및 협업시에 도움이 된다. 다만 이 두 가지가 겹치는 부분이 존재하는데 eslint 와 prettier 모두 코드 포매팅 기능을 제공하기 때문에 겹치는 상황이 생겨 코드작성이 힘들어질 수 있다. 위 과정을 해결할 수 있는 라이브러리가 두 가지가 있다. 관련 라이브러리 eslint-config-prettier eslint입장에서 불필요하거나 Prettier 와 충돌할 수 있는 모든 규칙을 제외해버린다. 단지 규칙을 꺼버리는 것이기에 당연히 다른 규칙과 함께 사용하는 경우에 의미가 있다. eslint-plugin-prettier Prettier의 규칙이 ESLint에 통합.. 2023. 6. 8.
URI 인코딩 및 디코딩 관련 js 메서드 내용 웹 개발시 url 과 관련된 내용을 다루는 상황이 빈번하게 나오지만 url 관련해서 몰랐던 내용이 있어 정리하려 한다. 웹페이지 구현 시 페이지 이동 및 라우팅 관련된 기능을 사용한다면 url 주소를 부분적으로라도 입력해서 사용하는 경우가 일반적인데 만약 주소 일부분에 한글과 같은 인코딩이 필요한 문자가 들어간다면 문제가 될 수 있다. 자동으로 인코딩 및 디코딩 되는 경우 또는 애초에 인코딩 및 디코딩 필요치 않은 문자를 사용한다면 상관없겠지만 문제를 예방하는 차원에서 명확히 처리해주는 js 메서드가 존재했다. 기본 개념 인코딩 : 인코딩은 정보를 다른 형식이나 표현으로 변환하는 과정(웹에서는 주로 문자를 특정 형식의 코드로 변경하는 것을 의미) 디코딩 : 디코딩은 인코딩된 정보를 다시 원래의 형태.. 2023. 6. 7.
JS DocumentFragment documentFragment DocumentFragment 메모리상에만 존재하는 경량화된 DOM 이다 1. DocumentFragment 를 DOM 노드에 추가한다고 해도 DocumentFragment 노드는 등록되지 않고 그 자식 노드들만 추가됩니다. 2. DocumentFragment 를 DOM 에 추가하면 DocumentFragment 노드의 자식 요소들은 더 이상 메모리상에 존재하지 않습니다. 주의사항 DocumentFragment 를 appendChild 와 같은 함수로 DOM 에 추가하고 난 후 DocumentFragment 의 자식노드는 더 이상 생성한 메모리 상의 위치에 존재하지 않습니다. 만약 이를 유지 시키고 싶다면 cloneNode 를 통해 복제하는 방법이 있습니다. 참고 https.. 2023. 3. 14.
JS 이벤트 위임 이벤트 위임 (delegate) 이벤트 흐름을 활용하여 이벤트를 발생시키고 싶은 요소를 이벤트 리스너가 설치된 부모 요소의 자식으로 배치하여 단일 이벤트 리스너가 여러개의 이벤트 대상을 처리할 수 있게 하는 프로그래밍을 이벤트 위임이라 한다. 이벤트 리스너의 event 객체에는 돔에서 일어나는 이벤트의 정보가 들어있다 event.currentTarget : 이벤트가 등록된 요소를 의미 this : 이벤트 리스너안의 this 는 event.currentTarget 가 참조하는 대상과 같다 event.target : 이벤트가 최초에 발생한 요소를 의미 generate item initial item 참고 https://www.inflearn.com/course/%EC%BD%94%EB%94%A9%EC%9D%B.. 2023. 3. 14.
JS 이벤트 흐름 이벤트 흐름 예시 1. 브라우저 화면에서 이벤트가 발생 2. 이벤트가 발생했을 때 브라우저가 제일 먼저 하는 일은 이벤트 대상을 찾아냄 이벤트가 발생한 좌표에 무엇이 있는지 확인하기 위해 렌더링 과정중의 하나인 페인트 기록을 찾아봅니다. 3. 캡처링 단계 최상위 window 객체부터 타겟요소까지 캡처링 단계 의 이벤트 리스너가 등록이 되어 있는지 확인하고 있다면 이벤트를 실행 후 자식요소로 이동 페인트 기록을 통해 좌표를 알아낸 브라우저는 해당 좌표에 위치 한 요소의 이벤트 리스너를 실행 4. 버블링 단계 캡처링이 끝나고, 최초에 이벤트가 발생했던 타겟요소부터 window 객체까지 버블링 이벤트 리스너가 있다면 실행 후 다음 직계 부모 요소로 이동 참고 https://www.inflearn.com/cou.. 2023. 3. 14.
JS reflow & repaint reflow & repaint Reflow ( 레이아웃 다시 구성 ) 생성된 DOM 노드의 레이아웃 변경 시 영향을 받는 모든 노드(부모, 자식)의 수치를 다시 계산하여 레이아웃 트리(렌더 트리)를 재생성하는 작업을 말합니다 Reflow 를 발생하게 하는 속성 width, height, padding, margin, float, position 등등 … 레이아웃에 영향을 주는 모든 속성 Repaint ( 화면 다시 그리기 ) Reflow 과정이 끝나고 재생성된 레이아웃 트리(렌더 트리) 를 다시 레이어에 그리는 작업 Repaint 를 발생하게 하는 속성 color, border-radius, background, box-shadow 등등 … 시각적으로 보여지는 모든 속성 reflow & repaint 와.. 2023. 3. 14.
JS 웹 페이지 렌더링 과정 웹 페이지 렌더링 웹 브라우저의 기본적인 구조 랜더링 단계 1. 파싱 ( 철근 세우기 단계 ) HTML 을 파싱하여 DOM 으로 변환합니다. 오타 혹은 잘못된 문법을 사용했을 경우 예외처리를 합니다. 와 같은 태그를 만나면 리소스를 다운로드 합니다. 태그를 만나면 DOM 파싱을 중단하고 자바스크립트를 해석합니다. 2. 스타일 계산 ( 시멘트 채우기 단계 ) CSS 을 파싱하여 CSSOM 으로 변환합니다. CSSOM 정보를 통해 돔 노드에 대한 스타일을 결정합니다. 결정된 스타일은 크롬 개발자 도구의 computed 항목에서 확인 가능합니다 3.레이아웃 ( 내부 설비 단계 ) 레이아웃 트리(렌더 트리) 를 생성합니다. 돔과 계산된 스타일을 따라가며 요소의 크기나 좌표와 같은 정보를 담은 레이아웃 트리를 생.. 2023. 3. 14.
JS BOM (Browser Object Model) BOM (Browser Object Model) 웹 브라우저의 다양한 기능을 객체처럼 다루는 모델 대표적인 객체 종류 1. window 객체 Global Context (전역 공간)이자 브라우저 창을 나타내는 객체 입니다. 전역 변수나 전역 함수의 경우 window의 프로퍼티처럼 작동하 게 됩니다. 중요 프로퍼티 - innerWidth, innerHeight, screenX, screenY, scrollBy( ), scrollTo( ) 등등 2. screen 객체 사용자 환경의 디스플레이(모니터) 정보를 가지는 객체입니다. 중요 프로퍼티 - availHeight, availWidth, width, height, orientation 3. location 객체 사용자가 보고 있는 페이지의 URL을 다루는 .. 2023. 3. 14.

티스토리툴바