CSS의 가독성은 어떻게 높일 수 있을까? 단순히 Prettier를 통해 코드 포맷 스타일을 유지하면 끝일까? 내가 중점으로 보고 싶었던 것은 CSS에서 클래스 이름과 들여 쓰기와 상관없이 중괄호 내에 선언되는 프로퍼티들의 순서를 어떻게 정할 것인가?이다. MDN, code guide등의 해외 공식 문서들을 살펴보며 어떻게 정할 것이며, 왜 그렇게 순서를 지키는 것이 좋을지 그리고 CSS를 코드의 관점으로 보고 가독성을 지켜야 되는 이유에 대해 말해보겠다. CSS 프로퍼티 나열 방식에 대한 여러 방법론(Randomly, Grouped by Type, By line length, Alphabetical..)이 존재하지만, 오늘 포스팅할 내용은 타입에 의한 분류법이다. 선언 순서는 단 하나의 원칙에 따라서만..

banilla JavaScript / pnpm + Vite + Vitest + v8(coverage) 이야기가 길어질 수 있으니 차이점만 궁금한 사람은 🔽 아래로 나는 JavaScript 기초 강의를 들으면서 배운대로 테스트 코드도 같이 짜보며 차근차근 공부하고 있어서 모르는 게 참 많다. 그만큼 나중에 스스로 기억하기 쉽고, 나와 같이 비슷하게 제로베이스로 시작하는 모두에게 도움을 주고자 내가 겪은 문제와 그걸 해결한 방법 그리고 왜 문제가 있었는지를 전부 적어볼 예정이다. Vitest는 Jest와 호환이 매우 잘 되지만, 최대한 Vitest에서 일어나는 error로 생각하고 해결하기 때문에 절차가 다를 수 있으니 참고 바란다. 처음 겪는 error들을 보여주기 때문에 완벽하지 않을 수 있다. 성장 과..

2023.08.05 - [Test Code] - New 새 맥북에서 pnpm + Vite 환경 + Vitest 구축하기 Vitest Blazing Fast Unit Test Framework 엄청나게 빠른 단위 테스트 프레임워크 Vite에 대해 들어본 적이 있다면 Vite에서 빌드된 빠른 단위 테스트 프레임 워크인 Vitest에 대해 들어봤을 것이다. Vitest가 무엇인지, 어떻게 사용하는 건지, 왜 나의 앱을 위한 다음 테스트 프레임워크가 될 수 있는지 알아보자! Vite Vitest로 들어가기 전에, Vite의 출현을 먼저 얘기해보겠다. 브라우저에서 ESM(ES Modules)을 지원하기 전까지, JavaScript 모듈화를 네이티브 레벨에서 진행할 수 없었다. 그래서 소스 모듈을 브라우저에서 실행..

Package Manager 패키지 매니저 (패키지 관리 시스템) 컴퓨터의 운영 체제를 위해 일정한 방식으로 컴퓨터 프로그램의 설치, 업그레이드, 구성, 제거 과정을 자동화하는 소프트웨어 도구들의 모임이다. 패키지 관리자는 아카이브 파일로된 소프트웨어 배포판과 데이터인 패키지(package)를 다룬다. 패키지 설치, 업데이트, 삭제 의존성 dependency 관리 패키지 압축 해제 패키지 검색 환경 설정 보안 관리 : 신뢰할 수 있고(authenticity), 손상되지 않음(integrity)을 보장 Package? Package는 소프트웨어나 프로그램 등의 실행 가능한 코드와 관련된 모든 파일들을 포함하는 하나의 단위를 말한다. 이런 파일들은 서로 연관되어 있어서 하나의 기능이나 작업을 수행하기 위해 ..

김영한 님의 『모든 개발자를 위한 HTTP 웹 기본 지식』 강의를 추천받고 수강하게 되었다. 마침 이전에 내가 HTTP 관련하여 공부하고 싶어서 구매한 『HTTP 완벽 가이드』 책을 같이 참고하면서 기록한다. "웹은 어떻게 동작하는가?" 뿐만 아니라 "왜 이것을 이해하는 것이 중요한가?"를 생각하며 공부할 것이다. HTTP (Hypertext Transfer Protocol) WHY? 월드 와이드 웹을 지탱하는 가장 중요한 기술 두 가지는 HTML과 HTTP이다. 이 두 기술은 팀 버너스 리가 웹을 발명할 때 함께 만들어졌다. 이 둘 중 하나라도 빠지면 웹은 성립하지 않는다. HTTP는 웹의 구성요소들이 서로 대화를 할 때 사용하는 프로토콜이다. HTTP를 이해한다는 것은 웹이 어떻게 동작하는지를 이해한..

먼저, 상황 설명 2018 맥북 프로 (intel)에서 2023 맥북 에어(M2)로 기변 하면서 테스트 코드 환경을 그대로 옮겨와야 했다. vite create로 프로젝트 생성하고 vitest 추가하는 것은 이전에 포스팅했던 대로 하면 될 텐데, 기존 프로젝트에 vite + vitest를 얹는 것은 또 새로웠다. 굉장히 수월하게 끝나서 걱정할 필요 없다! 아주 쉽다! 우선 node.js 설치 (npm 자동 설치), pnpm 설치까지는 완료했다는 가정 하에 설명한다. pnpm 설치할 때도 오류가 한 번 있었는데 npm 버전을 node.js에서 자동 설치 된 것보다 업그레이드시켜줘야 함 콘솔 메시지 확인하면서 업그레이드해주면 된다. 굉장히 자세하게 알려줌. 전체 과정 : vite 리포지토리를 로컬 컴퓨터로 ..