D.JOUNG

개요최근 렌더링 최적화를 공부하면서 리플로우와 리페인팅 방지에 각별히 신경을 쓰게 됐다. 리팩토링하는 코드 내에서 getBoundingClientRect() 메소드를 자주 호출하는 부가 있는데, getBoundingClientRect()는 아래 포스팅에 정리되어있는 리플로우 유발 메소드 중 하나다.https://gist.github.com/paulirish/5d52fb081b3570c81e3a What forces layout/reflow. The comprehensive list.What forces layout/reflow. The comprehensive list. - what-forces-layout.mdgist.github.com 그런데 성능탭을 열어 타임라인을 살펴봐도 성능에 문제가 될 정도로..

개요 시작 화면에서 마우스 경로를 따라 움직이는 커스텀 마우스를 그리기 위해 태그를 사용하였다. Canvas API의 OffScreenCanvas 인터페이스는 화면에 노출되지 않는 캔버스를 제공하여 Canvas API의 성능 최적화를 돕는다.DOM 작업을 다른 스레드에게 분업하여 병렬 처리를 하면 좋겠지만, 기본적으로 멀티 스레드는 HTML 요소 객체를 참조하거나 수정하는 게 불가능하다. DOM Tree와 CSSOM을 생성하고, Render Tree를 만들고, Render Tree 기반으로 화면을 그리는 일련의 과정은 동기적으로 작동하는 부분이 있기 때문에, 여기에 멀티 스레드가 관여했다가는 순서가 이상하게 꼬일 수 있기 때문이다. 하지만 HTMLCanvasElement( 태그)는 특별히 transfe..

고정폭 글꼴이란?고정폭 글꼴이란 말 그대로 글자의 가로 길이가 일정한 글꼴을 뜻한다. 모노스페이스(mono-space) 글꼴이라고도 부른다. 구글 폰트(Google Fonts)에서 필터링으로 모노 스페이스 글꼴만 검색할 수도 있다. 필터 기능의 Classification 항목을 들여다보면 'Monospace' 버튼이 바로 보일 것이다. 고정폭 글꼴은 결과값을 콘솔에서 출력하는 프로그램을 실행시킬 때 출력 결과의 가독성을 높이는데 많은 도움을 준다. ansi-code와 고정폭 글꼴을 함께 사용하면 눈이 아주 편안한 포멧팅이 가능할 것이다. VS Code 에서 터미널 글꼴 설정그럼 이제 개발자들이 많이들 사용하는 VS Code IDE에서 고정폭 글꼴을 적용해보자. VS Code를 실행한 후 아래 경로로 들어..

작년 말 쯤 공부를 시작했다. 취업을 준비중인 입장이기에 공부할 시간은 널널한 편이었지만, 몇년 전 공부해보려다가 작심삼일 났던 적이 있어 이떻게하면 그 꼴을 피할 수 있을지부터 고민했던 것 같다.   1. 필기 시험 준비 시험을 위한 공부를 한 적이 까마득한 옛날이었기에 '공부하는 법' 조차 가물가물했던 상황. 일단 정석대로 교재부터 골라보기로 했다.  인터넷에 검색해보니 당시 많은 추천을 받던 교재는 주로 수제비의 문제집들이었다. 하지만 이론서를 구입해 정독하기에는 너무 시간이 오래 걸릴 것 같았고, 다시한번 작심삼일의 길을 갈 것이 뻔해보였다. 그러던 중 내 눈에 들어온 책이 이기적 출판사의 '정보처리기사 필기 핵심이론+문제집' 책이었다.  사실상 내 필기&실기 통틀어 내 합격에 가장 큰 공헌을 해..

동적 타입 언어와 정적 타입 언어의 차이는 다른 코딩 일기 포스팅에서 몇 번 언급한 적이 있다. 하지만 이 둘의 차이를 좀 더 구체적으로 알고싶어 챗지피티의 힘을 빌렸다. 정적 타입 언어인지 동적 타입 언어인지는  변수의 타입이 어느 시점에 결정되느냐에 따라 결정된다. 컴파일 타임(파일 수준)에 결정되면 정적 타입 언어, 런타임(앱 실행)에 결정되면 동적 타입 언어이다.  애초에 프로그래밍에서 정적, 동적 이라는 단어를 사용했을 때의 의미는 대부분 위의 의미와 일맥상통한다.  정적 타입 언어 (Statically Typed Languages) 는 앱 실행 전 모든 변수의 타입이 미리 설정되고, 컴파일러가 타입 체크를 수행해 오류를 미리 잡아낼 수 있어 매우 안정적이다. 하지만 동적 타입 언어에 비해 유연..

즉시 실행 함수란 함수를 정의하고 바로 실행하는 패턴이다. 익명함수를 정의한 후 바로 실행된다. 구조는 다음과 같다. (function (BoardStatus) { ... })(...); (function (BoardStatus) { ... }) 부분에 함수가 정의되고, (...) 부분에서 실행된다. 익명함수이기 때문에 해당 함수는 다시 재활용할 수 없다. 타입스크립트에서는 자료형(타입)을 지정하는 방식으로 enum 자료형을 지원하고 있다.  enum 자료형은 타입 스크립트가 자바 스크립트로 컴파일 될 때 즉시 실행함수 형태로 변환된다. //타입스크립트 표현식export enum BoardStatus { PUBLIC = 'PUBLIC', PRIVATE = 'PRIVATE',}//javascript 컴..

자바스크립트와 파이썬은 C++나 JAVA와 달리 변수 타입이 동적으로 설정된다. 변수 타입이 런타임에서 결정된다는 뜻이다. 때문에 파일 수준이나 멤버 수준에서 정적으로 타입을 지정하는 C++나 JAVA와 달리 함수에서 동적으로 클래스의 멤버를 수정하거나 추가하는게 가능하다. 예를 들면 다음의 예시다.  #동적으로 클래스의 멤버 변수를 추가하는 경우class MyClass: passobj = MyClass()obj.new_attr = "New Attribute"print(obj.new_attr) # 출력: New Attribute#클래스를 함수 안에서 정의하는 경우def create_class(): class InnerClass: def __init__(self, value): ..

html 구조가 복잡해지다보면 marin 영역끼리 겹치는 마진 상쇄 현상과 심심찮게 마주한다. 마진 상쇄가 발생하는 경우는 대략 다음과 같다.1. 형제 노드끼리 맞닿는 영역에 각자 마진영역이 설정되어있을 경우 (더 넓은 쪽이 작은 쪽을 상쇄한다.)2. 부모 요소의 상단 마진 과 자식 요소의 상단 마진이 맞닿았을 경우 (부모 요소의 마진만 적용되고, 자식 요소의 마진은 상쇄된다.) - 개인적으로 가장 짜증난다. chat-gpt한테 물어보면 몇가지 경우 더 있지만, 난 주로 위 두 가지 경우를 많이 마주쳤다. 짜증나긴 하지만 오류는 아니라고 하고, 브라우저가 레이아웃을 더 깔끔하게 관리하기 위한 규칙이라는 모양이다. 마진 상쇄는 블록 요소에서만 발생하기 때문에, 요소를 인라인 속성(inline, inline..

Next(React)에서는 HTML img 태그 대신 Image라는 자체 태그를 따로 제공하고 있다. Image 태그는 서버에서 이미지를 미리 받아와 화면에 더 빠르고 최적화된 방식으로 이미지를 표시할 수 있게 해준다.  보통 컨테이너(div) 크기에 맞게 반응형으로 이미지를 조절하고 싶을 때는 이미지를 div 백그라운드 속성으로 지정하거나 div 태그를 중복해서 작성한 다음 안쪽 div에 absolute 속성을 먹여 적용한다.  하지만 Image 태그를 사용하면 위와 같은 복잡한 방식 필요 없이 간단하게 부모 크기에 이미지를 맞출 수 있다. 일반적으로 구글링을 검색했을 때 나오는 방법은 다음과 같다.  layout 속성에 fill 값을 주어 이미지를 컨테이너에 꽉 채우고, objectFit 속성에 co..

해당 에러는 주로 map 함수를 이용해 반복적인 컴포넌트를 생성했을 때 발생한다. 편집기에서 빨간줄 긋고 안내해주는 대로 반복되는 컴포넌트에 key 속성을 추가해주면 문제없이 작동한다. 하지만 key 속성을 제대로 추가해줬는데도 자꾸 경고문이 발생해서 잠깐 골치가 아팠다.  경고문 발생 이유는 단순했다. 컴포넌트를 안에 넣고 까지 포함하여 반복 생성했던 것...컴파일러가 까지 자식 컴포넌트로 인식해 key 프롭스가 없다는 경고문을 자꾸 뱉었던 것이었다.