로니의 개발 이야기

Debounce와 Throttle이 필요한 이유? Debounce와 Throttle은 DOM 이벤트를 기반으로 실행하는 자바스크립트 이벤트를 제어하기 위해 필요하다. 즉, 불필요한 호출을 방지하기 위해 사용하는 것이다. 먼저 아래의 예시를 한 번 보자. 스크롤을 내릴 때, 엄청나게 많은 이벤트가 발생하게 되면서 그 이벤트에 대한 콜백(callback)이 발생하게 된다. 그렇게 되면 그 콜백을 수행하기 위한 리소스가 많이 사용되고 따라서 성능적인 이슈가 발생할 것이다. 그렇다면 Debounce와 Throttle은 어떻게 동작하는 걸까? Debounce Debounce는 이벤트를 그룹화하여 일정 시간이 지난 후 하나의 이벤트만 발생하도록 하는 기술이다. 예시로 시간을 200ms로 두고 작업을 진행해 보았다...

npm install을 진행했는데, npm sill idealtree buildDeps에서 멈추는 현상이 발생하여서 해당 문제를 해결해보기로 했다. 먼저, https://ggodong.tistory.com/318 글의 3번을 따라서 진행해보았다. 아래 명령어를 입력 후 npm install을 진행해보았다. npm set registry http://registry.npmjs.org/ 일단 npm sill idealtree buildDeps에서 멈추는 현상은 사라졌지만, 아래와 같은 메시지가 나와서 뭔가 해결되지 않은 느낌이 들었고, 아래의 메시지에서 해결책을 찾아보고자 했다. 메시지 내용은 2021년 10월 4일부터 패키지 설치를 포함하여 npm 웹 사이트 및 npm 레지스트리에 대한 모든 연결은 TLS..

타입스크립트로 작업을 진행하면서 아래와 같은 오류가 발생해서 간단하게 정리해보고자 한다. '파일 이름.ts' cannot be compiled under '--isolatedModules' because it is considered a global script file. Add an import, export, or an empty 'export {}' statement to make it a module. 해당 오류에 따르면, isolatedModules가 적용되어 있는 상태에서는 파일이 전역 스크립트 파일로 간주되기 때문에 컴파일될 수 없다고 말한다. 그래서 import, export 구조를 만들어 주거나 export {}를 넣어주어서 모듈로 만들어 주거나, isolatedModules 를 tsco..

목표 시멘틱 마크업이 무엇인지에 대한 이해 시멘틱 마크업의 사용 이유 정리 시멘틱 마크업의 사용법 알기 시멘틱 마크업?(Semantic Markup) 시멘틱 마크업은 글자 그대로 해석하면, ‘의미론적인 HTML 태그 문서 작성’을 뜻합니다. 즉, 의미를 잘 전달 할 수 있도록 HTML 태그 문서를 작성하는 것을 말합니다. 그렇다면 이러한 방식은 왜 사용되는 것일까요? 시멘틱 마크업을 사용하는 이유 시멘틱 마크업을 사용함에 따라 얻을 수 있는 효과는 다음과 같습니다. 웹 접근성에 효율적 시각 장애가 있는 사용자가 화면 판독기로 페이지를 탐색할 때 의미론적 마크업을 푯말로 사용할 수 있기 때문입니다. 코드 가독성에 따른 유지 보수의 용이 끊임없는 div 들을 탐색하는 것보다, 의미 있는 코드 블록을 찾는 것..

실행 컨텍스트는 자바스크립트에서 가장 중요한 핵심 개념 중에 하나입니다. 자바스크립트에서 작동하는 다양한 것들의 동작 원리를 담고 있기 때문입니다. 이를 정확히 이해하는 것은 자바스크립트 개발자에게 매우 중요합니다. 목표 실행 컨텍스트에 대해서 이해한다 실행 컨텍스트란? 실행 컨텍스트는 실행 가능한 코드에 제공할 환경 정보들을 모아놓은 객체를 말합니다. 따라서, 우리가 코드를 작성하고 실행하게 된다면 실행 컨텍스트 내부에서 실행되고 있는 것입니다. 여기서 말하는 실행 가능한 코드는 아래와 같습니다. 전역 코드 : 전역 영역에 존재하는 코드 함수 코드 : 함수 내에 존재하는 코드 Eval 코드 : eval 함수로 실행되는 코드 block 코드 : while, if , for, function 등에서 만들어..

리액트는 DOM에 리액트 컴포넌트를 렌더링 해주는 render메소드를 제공한다. ReactDOM.render(element, container[,callback]) render는 컨테이너 DOM에 element를 렌더링 하는 함수이다. 이 render함수는 container의 자식으로 react component를 넣어주는데, 기존에 이미 렌더링 된 react component가 있다면, 업데이트만 해주게 된다. 그리고 렌더링이 완료되면 세 번째 인자로 전달된 callback이 실행되게 할 수 있다. 이 방식은 CSR(Client Side Rendering)을 할 경우에 사용된다. 그렇다면 SSR(Server Side Rendering)을 사용하는 프레임워크를 사용할 경우에는 어떻게 해야 할까? 이때 사..

React 환경에서 개발을 진행하면서 CRA를 통해 보통 개발 환경을 구축해왔다. 하지만, '프론트엔드 개발자라면 빌드 시스템을 직접 구축할 수 있어야 하지 않을까?'라는 생각이 들었다. 또한 상황에 맞게 환경 설정을 수정하며, 성능을 개선해 나가는 작업이 필요하다고 생각했다. 이번 작업은 macOS 환경에서 진행하였고, CRA 없이 react 개발 환경 구축을 시작해보겠다. package.json 만들기 가장 먼저 내가 작업하고자 하는 위치에 가서 프로젝트 초기화를 통해, 어떤 프로젝트를 진행하고자 하는지에 대한 정보를 입력한다. yarn init 명령어를 통해서 내가 작업하고자 하는 폴더를 node.js 프로젝트로 초기화 시킨다 해당 명령어를 진행하면 아래와 같은 question이 나오게 되는데, 내..

2022년 3월 29일부로 react version 18을 사용할 수 있게 되었다. v17에서 v18로 업데이트되면서 root API에서 변화가 생겼는데, 이번에 그 부분에 대해서 다뤄볼까 한다. ‘root’는? root는 react가 렌더링 할 트리를 추적하는 데 사용하는 최상위 데이터 구조에 대한 포인터이다. Legacy root API(v17) : root는 DOM 요소에 연결하고 DOM 노드를 통해서 액세스 했다. New root API(v18) : root를 만들어주고, 그것을 렌더링 한다. // Before import * as ReactDOM from 'react-dom'; import App from 'App'; const container = document.getElementById('..

브라우저의 핵심 기능은? 사용자가 참조하고자 하는 웹페이지를 서버에 요청(request)하고 서버의 응답(response)을 받아 브라우저에 표시하는 것이다. 자원의 주소는 URI에 의해 정해진다. 그렇다면 브라우저는 어떻게 동작할까? 브라우저는 서버로부터 HTML, CSS, Javascript, 이미지 파일 등을 응답받는다. 렌더링 엔진은 HTML 문서를 파싱 해서 각각의 태그를 DOM 노드로 변환하여 DOM 트리를 생성하고 CSS 문서를 파싱 해서 CSSOM 트리를 생성한다. 그리고 이 둘을 결합하여 렌더 트리를 만들게 된다. 그 다음은 레이아웃 단계이다. 이 단계에서는 각 노드의 크기와 위치, 레이어 간 순서와 같은 정보를 계산하여 어디에 배치할지, 어떤 크기를 가질지가 정해진다. 페인팅 단계에서는..

var, const, let의 차이점을 비교하려면 var의 문제점을 알아야 한다. 그렇다면 var를 사용함으로써 어떤 문제가 발생하게 될까? var를 사용하면서 발생하는 문제점 ⓵ 변수 중복 선언 가능하여, 예기치 못한 값을 반환할 수 있다. ⓶ 함수 레벨 스코프로 인해 함수 외부에서 선언한 변수는 모두 전역 변수로 된다. ⓷ 변수 선언문 이전에 변수를 참조하면 언제나 undefined를 반환한다. ⓸ 어떤 의도로 선언되었는지 알 수 없다. 위와 같은 문제들이 발생할 수 있는데, 이를 개선하기 위해 ES6에서 나온 새로운 키워드가 const와 let이다. 이제 var, const, let의 차이에 대해서 알아보겠다. var, const, let의 차이 const와 let은 중복 선언이 불가능하다 → 어떤..