일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 31 |
- 오블완
- inferred type error
- type reference cannot be named error
- components as formulas
- 코드잇 스프린트 FE 1기
- useref 타입
- dynamic metadata
- React
- pure functions
- 특정 dom node만 노출시키고 싶을 때
- 리액트 19 useref
- 이미지 업로드 과정
- next.js
- node.js(express) + ws(websocket) + react
- trigger additional callbacks
- express로 채팅 기능 구현하기
- useimperativehandle 사용법
- 리스티웨이브
- 프리렌더링
- 회고
- CSS module 장점
- express react
- css module classNames
- usemutation custom hook
- useimperativehandle 사용할때
- http.createserver
- 스프린트 여정 마침
- app.listen
- 리액트로 채팅 기능 구현하기
- 티스토리챌린지
- Today
- Total
목록Programming/JS (8)
Life is connecting the dots .

최근 자바스크립트 '이벤트(event)'를 다시 공부하면서 이벤트 전파에 대한 개념을 다시 한번 정리하는 시간을 가졌다. 또한 이벤트 전파와 더불어 이벤트 위임에 관한 개념도 더 확실히 알게 되어 글로 정리하게 되었다. 🫧 이벤트 전파 - 버블링과 캡쳐링 🫧 이벤트 위임 🛠️ 위 개념을 바탕으로 로그인 페이지 폼양식을 이벤트 버블링 개념을 활용하여 리팩토링 하기 이벤트 전파 DOM 트리의 요소 노드에서 발생한 이벤트는 DOM 트리를 통해 전파된다. 즉, 이벤트가 발생했을 때 생성된 이벤트 객체는 이벤트 타깃(event target)을 중심으로 DOM 트리를 통해서 전파되는데 전파 방향에 따라 캡쳐링과 버블링으로 구분된다. ✅ 이벤트 캡쳐링 (capturing phase) 이벤트가 상위 요소에서 하위 요소..

웹사이트 랜딩페이지를 보다 보면, 상단 헤더 메뉴가 사용자가 스크롤 시 진입한 구간에 따라 메뉴의 스타일도 이동되는 것을 볼 수 있다. 그동안 프로젝트에서는 이러한 스타일을 적용할 페이지가 없었기에 한 번도 만들어보지 못했었다. 하지만 최근에 포트폴리오를 만들면서 관련 API를 알게 되어 기능도 익힐 겸 간단하게 적용해 보려고 한다. Observer API의 필요성 MDN공식문서에서 확인하면 타겟 요소가 상위요소 혹은 최상위 요소(=뷰포트)와 교차하는 변경사항을 비동기적으로 관찰하는 방법을 제공한다고 한다. 말 그대로 관찰자 API이다. 🧐 대상을 감시하다가 대상이 정해 놓은 구역에 진입하면 그때부터 만들어 놓은 함수를 시작한다. 과거부터 어떤 특정 요소의 가시성을 확인하고 두 요소들의 가시성, 즉, 서..

스코프란 식별자에게 접근할 수 있는 유효한 범위를 의미한다. 식별자란 변수 이름, 함수 이름, 클래스 이름 등 어떤 값을 구별하여 식별할 수 있는 고유한 이름을 의미 유효한 범위란 식별자 자신을 참조할 수 있는 범위 다시 말하면, 식별자가 선언된 위치에 따라 다른 코드가 식별자 자신을 참조할 수 있는지가 결정되며 이를 스코프라고 한다. 그러므로 스코프란 자바스크립트 엔진이 식별자를 검색할 때 사용하는 규칙이라고도 한다. 스코프의 종류 스코프는 전역(global)스코프와 지역(local) 스코프로 나뉜다. 전역 스코프는 코드의 가장 바깥 영역으로 어디서든지 참조할 수 있다. 반면에 지역 스코프는 함수 몸체 내부를 뜻하며, 자신의 지역 스코프와 하위 지역 스코프(중첩 함수)에서 유효하다. // 자바스크립트 ..

성능최적화 방법을 공부하면서 렌더링에 대해 다시 공부해 보았다. 브라우저가 그려지는 과정과 DOM에 대한 개념, Reflow를 조금이라도 개선시킬 수 있는 방법을 정리해 보고자 한다. 글 내용과 관련된 개념은 아래 참고에 적혀있는 블로그와 책, 강의 등을 참고하여 작성하였다. Critical Rendering Path 브라우저가 서버로부터 HTML 응답을 받고 화면에 그려지기까지의 시퀀스를 "Critical Rendering Path" 라고 한다. CRP에는 6단계가 있다. DOM 트리 생성CSSOM 트리 생성자바스크립트 실행렌더트리로 결합레이아웃 그리기페인팅1. DOM(Document Object Model)트리 생성 브라우저 요청에 의해 서버에서 HTML파일을 받아오면 다음과 같은 과정으로 브라우저가..
1. 객체란 - 객체는 연관된 데이터, 연관된 함수의 모음이다. - 객체는 여러 변수와 여러 함수로 구성되며, 이들은 객체 내부에 있을 때 속성(property)과 메소드(method)라고 부른다. - 객체는 순서가 없는 대신 이름으로 값을 저장한다. 2. 객체 생성하고, 추가하고, 가져오고, 삭제하는 방법 - 생성 var ObjectName = { } ; // 객체 생성 var fruits = { "banana":"yellow", "apple":"red" }; - 추가 및 수정 // 점 표기법(dot notation) fruits.kiwi = "green"; // 괄호 표기법(Bracket notation) fruits["blue berry"] = "purple"; - 접근(읽기) // 점 표기법(do..
1. 함수를 사용하는 이유 - 한번 함수를 구현해 놓으면 함수만 수정해주면 되므로 유지보수에 용이하다. - 반복되는 코드를 함수로 만들어 놓으면 코드가 간결해진다. - 함수의 이름을 잘 정의해 놓으면 어떤 동작을 하는지 대략적으로 알 수 있게 해주며, 같은 함수를 써놓은 코드는 논리적으로 코드가 같다는 것을 알 수 있게 해준다. 2. 함수 선언(Function declarations) - 함수 선언은 지정된 매개 변수(parameter)를 사용하여 함수를 정의한다. - 자바스크립트에서의 함수 선언은 그 선언을 둘러싼 함수의 최상부나 전역 범위(global scope)으로 할당된다(hoisted). 즉, 함수 선언 전에 함수를 사용할 수 있다. (*함수 표현식은 먼저 선언해야 하는 차이가 있다.) // S..
1. 제어문이란 - 제어(Control flow)란 컴퓨터가 스크립트에서 명령을 실행하는 순서입니다. - 조건부나 루프와 같이 순차적인 흐름을 변경해야할 때 사용하는 실행문을 제어문이라고 한다. 2. 조건문(Conditional statements) - 조건에 따라 명령을 수행하도록 하는 제어문이다. - 단순 반복적인 코드를 더 효율적으로 만들어 주고, 복잡한 조건을 간결하게 만들어 주며, 목적에 맞는 기능을 구현해 준다. - 조건이 '참'이다라고 여겨지는 것 : false, undefined, null, 0, NaN, ""(empty string)이 아닌 모든 값 그리고 블리언 객체값이 false를 포함하는 객체. 2_1. if / if else / if else if ... else // Syntax..
1. 자바스크립트란 - 사용자와 동적으로 상호작용 하기 위해 만들어진 언어이다. - 즉, HTML의 정적인 정보를 Javascript가 동적인 정보로 바꿔준다. - HTML과 자바스크립트는 둘다 '언어'이지만 HTML은 한번 만들면 변하지 않는 마크업 언어이고, 자바스크립트는 명령어(코드)를 시간순서에 따라 배치하고 실행시켜 기능을 구현하게 하는 '프로그래밍언어'인 점에서 차이가 있다. 2. 자바스크립트 작동을 위한 - script 태그 - 자바스크립트 코드는 HTML에서 작동한다. - HTML 태그 중 태그 안에 자바스크립트 코드를 작성한다. - 화면에 보여지는 그대로 출력 땐 HTML코드를 사용하지만, 데이터를 입력받아 스스로 계산하는 등 interactive한 결과를 얻고싶을 땐 자바스크립트를 사용..