불필요한 태그는 쓰지 않는다. wrapper 역할로만 사용되는 , div 안에 데이터를 넣기 위한 들을 많이 봤다. 써야 한다면 쓰는게 옳다. 하지만 하나의 노드가 추가될 때마다 DOM tree도 깊어진다. 최대한 DOM depth가 많아지지 않도록 해야 한다. 동적인 스타일 변화는 부모에 주지 않는다 변화가 발생하면 repaint는 자식 요소, reflow는 부모와 자식 요소 관계없이 일어난다. 그러니까 동적인 변화를 줘야 한다면 그 요소만 타겟해야 한다. 또한 그 요소에도 최대한 자식 요소가 없도록 구조하는 것이 좋다. inline style 보다는 클래스명이 낫다 클래스명의 변화도 reflow를 일으킨다. 여러 스타일을 인라인으로 추가한다면 스타일 하나 하나가 reflow를 유발한다. 모든 스타일들..
DOM DOM은 자바스크립트가 웹 페이지에 접근하여 내용과 디자인을 바꿀 수 있게 한다. 다른 프로그래밍 언어도 가능하지만 DOM 조작의 대표적인 언어는 자바스크립트다. 그래서 DOM은 프로그래밍 언어가 문서에 접근해서 읽고, 조작할 수 있게 하는 인터페이스다. 어떻게 생겼을까? DOM은 대표적으로 HTML을 통해서 표현된다. JavaScript로 DOM을 직접 조작하면서 화면은 정적이지 않다. 사이트는 이벤트에 따라 컬러가 바뀌고, 다이나믹하게 애니메이션이 일어나기도 한다. 그렇지만 변화가 일어날 때 CPU 소모가 발생한다는 문제가 있다. 자바스크립트는 DOM을 변경하고 검색한다. 문서는 트리 구조다. 변경된 요소를 찾으려면 하위 트리 구조까지 타고 가야 한다. JavaScript가 요소에 변화를 주면..
Polling이 무엇인지 알아보기에 앞서 Web 통신의 특성에 대해 알아야 합니다. Web HTTP 통신은 클라이언트가 서버에 요청을 하고, 응답을 받으면 연결이 끊어지는 특징이 있습니다. 바로 비연결성(Connectionless)이라고 합니다. 그래서 웹은 실시간으로 서비스를 운영할 수 없는 한계가 있습니다......만 Polling 방식을 통해서 실시간처럼 보이도록 할 수 있습니다. 폴링(Polling) 폴링은 업데이트가 갱신되었을 때, 이를 확인하기 위해 사용합니다. 다시 말해 새로운 데이터를 계속 보여주기 위해 반복적으로 API 요청을 하는 방식입니다. 예시 만약 인스타그램과 같은 SNS에 폴링을 적용한다면 사용자는 계속 새로고침을 하지 않아도, 최신 피드를 확인할 수 있습니다. 작동 순서는 대략..
여차저차 갖가지 에러를 해결하며 프로젝트에 맞는 npm install 성공 완료! 그리고 npm run start 에러… import된 css들이 제대로 컴파일이 되지 않는 것 같았습니다. 찾아보니 sass 팀에선 더이상 node-sass를 지원하지 않는다고 합니다. 이는 최신 m1 환경도 지원하지 않는 다는 소리. 공식 사이트에서 dart-sass를 이용하라고 말합니다. We no longer recommend LibSass for new Sass projects. Use Dart Sass instead. If you’re a user of Node Sass, migrating to Dart Sass is straightforward: just replace node-sass in your packag..
해당 어플리케이션 웹사이트에서 가서 직접 설치할 수도 있지만, 더 편하게 터미널에서 명령어로 우리가 필요한 프로그램들을 설치해 보겠습니다. Visual studio code, Chrome 설치하기 우선 저는 비주얼 스튜디오 코드와 크롬이 필수 앱입니다. $ brew install visual-studio-code $ brew install google-chrome 최신 homebrew에는 cask가 기본으로 되어 있어서 --cask 명령어는 생략해도 됩니다. 카카오톡 설치하기 PC톡은 무조건 아니겠습니까… 설치에 앞서서 mas를 설치해야 합니다. cask : 웹사이트에서 받을 수 있는 어플리케이션 설치 mas : 앱스토어에서 받을 수 있는 어플리케이션 설치 // mas 설치 $ brew install m..
에이치아이~ 새로운 랩탑을 장만해서 기분이 좋습니다. 2013년형 에어를 썼던 지라, M1의 성능에 지금도 감탄중입니다. 그런데 이전 인텔 기반에서 M1으로 바뀌면서 개발환경 설정도 다르게 해야 했어요. 7월 끝자락 무더위와 함께한 삽질 과정까지 다 녹여내어 글을 써봅니다. 누군가에게, 또 훗날 나 개굴이에게도 도움이 되길 바라며. Homebrew homebrew는 mac에서 개발환경 세팅할 때 가장 먼저 설치해야 할 패키지 관리 프로그램입니다. 터미널을 킵니다. /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" 위의 명령어를 복사하면 설치가 손쉽게 완료됩니다. (참고: https:/..
