본문 바로가기

전체 글

(88)
[React] 최적화 훅 useMemo, useCallback React는 state가 변경되면 리렌더링을 한다. 다시말해 Virtual DOM과 DOM을 비교하여 변경된 부분을 반영하고 다시 렌더링 해주는 과정을 거친다. 이러한 과정에서 비효율적인 문제가 존재한다. 무조건 state가 변경되면 변경된 state와 무관한 컴포넌트의 구성요소가 리렌더링이 된다는 것이다. 이렇게 되면 불필요한 연산을 하는 것은 물론이고 연산을 다시하는 과정을 거쳐서 결과적으로 성능 저하로 좋지 않은 사용자 경험을 제공한다. 그걸 극복하기 위해서 나온 훅들이 useMemo와 useCallback이다. useMemo const Example = () => { const [textInput, setTextInput] = useState(''); const [count, setCount] =..
[HTML] <!DOCTYPE> 크롬 개발자 도구로 HTML 문서를 보면 항상 최상위에는 가 있다. 은 태그와 비슷한 모습을 하고 있지만 태그는 아니다. 바로 브라우저에게 HTML에 버전을 알려주는 구문이다. 그렇기 때문에 브라우저가 파싱을 하기전에 문서의 버전을 알려주기 위해서 최상단에 위치하고 있는 것이다. HTML 4.01에서 DOCTYPE 선언은 SGML을 기반으로 하기 때문에 DTD를 참조해야 한다. DTD는 브라우저가 콘텐츠를 정확하게 표현하도록 마크업 언어에 대한 규칙을 명시한다. 하지만 HTML5는 SGML을 기반으로 하지 않기 때문에 DTD를 참조할 필요가 없다. SGML(Standard Generalized Markup Language) : IBM에서 1960년대 개발한 마크업 언어이다. ISO 표준이라고 한다. SG..
[JS] 함수를 호출하는 call / apply / bind 차이점 함수 호출을 하는 방법은 함수의 이름 옆에()을 붙이는 방법으로 널리 쓰이고 있다. 자주 사용되진 않지만 함수를 호출하는 방법은 그 밖에 call, apply라는 함수를 사용하여 호출할 수 있다. function foo(a, b, c) { console.log(a + b + c); }; foo(1, 2, 3); // 6 foo.call(null, 1, 2, 3); // 6 foo.apply(null, [1, 2, 3]); // 6 1. Function.prototype.call() 두 개의 매개변수를 받는 함수이다. MDN에 따르면 아래와 같은 인자를 넘겨주어야 한다. thisArg: func 호출에 제공되는 this의 값 arg1, arg2, ...: func이 호출되어야 하는 인수 간단하게 말해 첫번..
웹 표준과 접근성 월드 와이드 웹에서 공식적으로 정한 웹의 표준이다. 웹 사이트를 개발한다면 꼭 지켜야하는 사항이기도 하다. 어떤 운영체제나 브라우저를 사용하더라도 웹페이지가 동일하게 보이고 정상 작동해야함을 의미. 표준화 단체인 W3C가 권고한 표준안에 따라 웹사이트를 작성할 때 이용하는 HTML, CSS, JavaScript 등에 대한 규정이 담겨 있다. ※ 웹 표준의 장점 개발 및 운영의 효율성 제고. 즉 소스의 통일화로 수정 및 운영관리가 용이하다. 다양한 브라우저, 휴대폰 PDA, 장애인 지원용 프로그램에서도 대응이 가능하므로 접근성이 향상 되고, 장애인, 고령자 등을 포함한 사용자층도 확대 가능하다. 논리적이고 효율적으로 작성된 웹 문서는 코드의 양이 줄어 파일 크기가 줄고 서버부담의 감소로 이어질 수 있다. ..
[JS] 이벤트 버블링과 캡처링 중첩된 엘리먼트들 중 어느 한 요소에 이벤트 핸들러를 등록하면 중첩된 엘리먼트들 모두 전파되는 현상을 말한다. 이런 현상을 HTML DOM API의 이벤트 전파(Event Propagation)라 말하고 두 가지 방식으로 구분된다. 이벤트 버블링 : 이벤트가 발생한 요소부터 window 까지 이벤트를 전파한다.(👆) 이벤트 캡처링 : window 로부터 이벤트가 발생한 요소까지 이벤트를 전파한다.(👇) 둘의 차이는 방향에 있다. 상위 계층요소에서 하위로 간다면 이벤트 캡처링 그 반대인 하위 요소에서 상위 계층요소로 전파된다면 그것을 이벤트 버블링이라고 말한다. 이벤트 버블링 var divs = document.querySelectorAll('div'); divs.forEach(function(div) {..
[JS] 이벤트 루프(Event Loop) 이미지 좌측에 JavaSciprt Engine에 관한 Memory Heap, Call Stack에 관한 내용은 해당 게시글을 참조하면 된다. WEB APIs 이미지 우측에 Web APIs는 JS로 묶은 것 밖에 있다. JS 엔진에 대한 것이 아니라는 것을 의미한다., Web API는브라우저에서 제공하는 API로, DOM, Ajax, Timeout 등이 있다. Call Stack에서 실행된 비동기 함수는 Web API를 호출하고, Web API는 콜백 함수를 Callback Queue에 밀어 넣는다. Callback Queue 비동기적으로 실행된 콜백 함수가 보관되는 영역이다. JavaScript로 작성된 함수들의 호출이나 선언이 Memory Heap에 저장된다는 것이 차이점이다. 예를 들어 setTime..
Cors란 무엇인가? CORS(Cross-Origin Resource Sharing)는 교차 출처 리소스 공유라는 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제이다. 즉, 무분별하게 클라이언트가 다른 리소스에 접근하는 것을 막는 보안 이슈이다. 예를들어 클라이언트가 3000포트이고 서버가 5000포트라면 클라이언트가 서버에 접근하면 연결을 차단한다. 이유는 포트가 달라서이고 도메인이 달라도 안돼고 아이피가 달라도 안됀다. 다시말해서 처음 리소스를 요청했던 그 주소가 아니라면 차단해버린다는 것이다. 하지만 프론트엔드를 개발하다가 서버에 요청을 보낼때 아래와 같은 오류가 console에 찍히는 경험을 해보았을 것이다. Access to XMLHttpRequest..
[JS] 자바스크립트 동작원리 컴퓨터는 이진코드(0, 1)두개의 값만 알아들을 수 있다. 하지만 우리가 작성하는 자바스크립트는 0, 1이 아닌 영어에 가깝고 영어를 알고있다면 배우지 못한 사람도 대충은 알아볼 수 있고 배운다면 영어로 코딩 또한 가능하다. 그렇다면 컴퓨터는 어떻게 우리가 영어로 작성한 자바스크립트 코드를 알아들을 수 있는지 알아보자. 자바스크립트의 엔진 자바스크립트 코드를 동작시키는 장치를 엔진이라고 말한다. 현재 사용되는 엔진은 대부분 Google에서 C++로 작성된 V8엔진을 사용하며 Chrome과 Node.js에서도 해당 엔진을 사용한다. 개발자가 작성한 자바스크립트 코드는 V8엔진에 의해서 컴퓨터가 알아들을 수 있는 언어로 변환된다. 그럼 어떻게 변화되는지 알아보자. 자바스크립트(V8) 엔진구조 자바스크립트 엔..