메로그

성능 탭 화면단의 개발을 하다보면, 페이지의 동작이 어떠한 순서를 가지고 있는지, 성능이 얼마나 나오는지 확인하고 싶은 경우가 생긴다. 그럴 때는 개발자 도구의 성능 탭을 사용을 하면 되는데, 성능 탭은 자동으로 페이지를 분석하는 것이 아닌, 기록 버튼을 눌러 해당 페이지의 동작을 녹화 한 뒤, 녹화된 내용을 토대로 분석한 기록들이 나오게 됩니다. F12 를 눌러 개발자 도구를 열고 성능 탭을 누르면, 아래와 같은 화면을 볼 수 있을 것 입니다. 왼쪽 위의 녹화 표시로 되어있는 것을 누르면 페이지의 녹화가 시작되고 거기서 일어난 동작들을 분석(플로우, 렌더링 속도)합니다. 우리가 자주 쓰는 네이버 페이지에서 한 번 해보자. 녹화를 끝내면 아래와 같이 네트워크, 프레임, 기본 등등 해서 분석된 내용이 나오..

classList, className classList, className 을 이용하여 요소에 적용된 클래스를 조회할 수 있습니다. classList 는 요소의 적용된 클래스를 리스트 형식으로 반환해주는 속성입니다. className 는 classList 를 공백으로 구분시킨 문자열입니다. 추가, 삭제 classList 의 add, remove 함수를 이용하여 클래스를 동적으로 추가하고 제거할 수 있습니다. classList.add("className"): 지정한 클래스를 추가해줍니다. classList.remove("className"): 지정한 클래스를 제거합니다. 간단한 예제를 아래와 같이 만들 수 있습니다. classList.contains 를 이용하여 클래스가 있는 경우에는 제거하고 없는 경우에..

버전 오류 node-sass 를 최신버전으로 업데이트 했다가 다음과 같은 오류를 볼 수 있을 것입니다... (함부로 최신버전은 쓰는 것이 아닙니다..) 이런 경우에는 버전 업그레이드로 인해 몇가지 라이브러리가 호환이 되지 않아 발생하는 문제임으로 이럴 때는 버전 다운그레이드를 통해 호환을 맞춰줍시다. 해결 아래와 같이 node-sass 를 한 번 지웠다가 다시 설치해줍시다. version 에 다운그레이드 할 노드 버전을 올려주시면 됩니다. npm uninstall node-sass npm install node-sass@ // npm install node-sass@5.0.0 yarn remove node-sass yarn add node-sass@ // yarn add node-sass@5.0.0

PowerMode Combo 기능 끄기 VSCode 에서 정말 애용하고 있는 PowerMode 에는 기본적으로 콤보 기능을 제공하고 있지만, 개인적으로 화면상에 정신없고 눈이 아픔으로 해당 기능을 끄는 방법을 제공합니다. File > Preferences > Settings 로 들어가서 PowerMode 를 검색합니다. 다음 이미지의 해당 구간(Counter 와 Timer)을 default 또는 show 로 되어있는 경우, hide 로 변경하면 됩니다.

package-lock.json 해당 파일은 package.json 의 부족한 정보로 인해 역할을 대신 합니다. package.json 을 사용하여 원래는 node_modules 가 다운로드 되지만, 같은 패키지를 이용해서 다운로드 하는 경우, 개발시 환경이 다르거나, npm, node 버전이 다르거나.. 의 이유로 오류가 발생하는 것을 볼 수 있습니다. 그런 경우에, package-lock.json 을 사용하면, 패키지가 수정되었거나, node_modules 가 변경될 때 의존성을 주입하여 자동 생성되도록 합니다. package-lock.json 이 있는 경우, package-lock.json 을 보고 node_modules 가 생성된다는 것입니다. (package.json 이 아니라...) 비고 간단..

Cannot find module '@babel/helper-builder-react-jsx' yarn upgrade 이 후에 다음과 같은 오류가 발생하는 경우가 있다. 이의 경우, 모듈이 제대로 설치되지 않은 것 임으로 설치된 node_modules 를 삭제하고 다시 설치해주면 된다. cli rm -rf node_modules yarn