이벤트 기초Event는 무언가 일어났다는 신호입니다. 이벤트의 종류마우스 이벤트click - 요소 위에서 마우스 왼쪽 버튼을 눌렀을 때 발생contextmenu - 요소 위에서 마우스 오른쪽 버튼을 눌렀을 때 발생mouseover - 마우스 커서를 요소 위로 움직였을 때 발생mouseout - 마우스 커서가 요소 밖으로 움직였을 때 발생mousedown - 요소 위에서 마우스 왼쪽 버튼을 누르고 있을 때 발생mouseup - 요소 위에서 마우스 왼쪽 버튼을 뗄때 발생 폼 요소 이벤트submit - 사용자가 form을 제출할 때 발생focus - 사용자가 input과 같은 요소에 포커스할 때 발생 키보드 이벤트keydown - 사용자가 키보드 버튼을 누를 때 발생keyup - 사용자가 키보드 버튼을 뗄 때..

ClassName과 ClassList아주 오래전 자바스크립트엔 class 같은 예약어는 객체의 프로퍼티가 될 수 없다는 제약 사항이 있었습니다. 지금은 이런 제약사항이 사라졌지만, 과거엔 class 프로퍼티를 사용할 수 없었기 때문에 className이 도입되게 되었습니다. className무언가를 대입하면 클래스 문자열 전체가 바뀝니다.classList속성값 전체를 바꾸는게 아니라 클래스 하나만 추가하거나 제거합니다.ex) elem.classList.add - (추가)      elem.classList.toggle - (class가 존재할 경우, class 제거, 그렇지 않은 경우 추가)      elem.classList.contains("class") - class 존재 여부에 따라 true/fa..

이번 포스팅에서는 Storybook(스토리북) 에 대해서 알아보겠습니다. 🤔 스토리북이란 무엇인가?스토리북은 무엇일까요? 대부분의 개발자들은 스토리북을 모르거나, 다양한 프레임워크의 대하여 UI 문서화를 제공해주는 것이라고 간단히 알고 있습니다. 그럼 스토리북에 대하여 자세히 알아보도록 하겠습니다. 스토리북이란 UI 컴포넌트 개발, 테스트, 문서화를 위해 사용되는 오픈 소스 도구입니다. 주로 프론트엔드 개발에서 활용되며, React, Vue, Angular, Svelte 같은 다양한 JavaScript 프레임워크를 지원합니다. 스토리북은 컴포넌트를 독립적으로 개발하고 확인할 수 있는 환경을 제공하여 **구성 요소 기반 개발(Component-Driven Development, CDD)**을 촉진합니다...

브라우저 환경과 다양한 명세서 브라우저는 최상단의 window라는 루트 객체로 이루어져있습니다. 문서 객체 모델(DOM)문서 객체 모델(Document Object Model)은 웹 페이지 내의 모든 콘텐츠를 객체로 나타냅니다.  DOM의 주요 개념1. 트리 구조DOM은 문서를 트리 형태의 계층적 구조로 표현합니다.HTML 문서 구조 예) Hello, World! This is a paragraph. 위 문서는 DOM 트리로 표현하면 다음과 같은 구조를 가집니다.Document├── html ├── head │ └── title │ └── "Example" └── body ├── h1 │ └── "Hello, World!..

이번 포스팅에서는 Vercel의 v0 에 대해서 알아보겠습니다. v0가 나온 후로는 프론트엔드의 종말이다. Ai가 나의 일자리를 대체한다라는 말이 많이 나왔습니다. 그러면 우리의 일자리를 정말 대체할 수 있는지 생성형 AI가 얼마나 지원하는지에 대하여 알아보도록 하겠습니다. V0란?v0는 Vercel에서 출시한 베타 버전 UI 생성 서비스입니다. 사용자가 원하는 UI 디자인과 기능을 프롬프트로 입력하면, v0가 이를 기반으로 리액트 컴포넌트를 생성해줍니다. 단순히 이미지만 생성하는 것이 아니라 실제 인터렉션이 가능한 코드를 제공합니다. V0 어떻게 사용하나요?v0를 시작하기에 앞서, 가격대는 Free ~ Enterprise까지 지원합니다. 여기서 필자는 permium의 import from Figma 기..

이번 포스팅에서는 Shadcn/ui 라이브러리에 대해서 알아보겠습니다. OverViewMaterial-Ui 는 유명한 UI 라이브러리라 다들 알고 있을 것 입니다. 근데 2024년부터 갑자기 인기가 급상승하는 라이브러리가 있는데,그 라이브러리는 Shadcn/UI 입니다. 아래의 표를 참고해보면 shadcn/ui가 Material-ui의 인기를 넘은것을 볼 수 있는데, 왜 Shadcn/ui가 인기가 많아졌고, Material-ui와 비교해서 어떤것이 좋은지 장단점에 대해 알아보도록 하겠습니다. MUI(Material-UI)MUI(Material-UI)의 탄생 배경2014년, 웹 애플리케이션 개발이 점점 더 복잡해지면서 효율적이고 일관된 사용자 인터페이스(UI)를 제공할 수 있는 도구에 대한 요구가 증가했습..

이번 포스팅에서는 MSW(Mock Service Worker) 라이브러리를 이용하여 백엔드 API를 모킹(mocking)하는 방법에 대해서 알아보겠습니다. Mock Service Worker란?MSW(Mock Service Worker)는 Service Worker를 이용하여, 서버의 실제 네트워크 요청을 가로채서 모의 응답을 보내주는 API Mocking 라이브러리 입니다.MSW를 사용하면 직접 Mock 서버를 별도로 구현하지 않아도, 네트워크 요청에서 API를 Mocking 할 수 있습니다.  또한, Mocking 테스트를 위한 노드(node.js)환경, 개발 및 디버깅을 위한 브라우저 환경에서 모두 사용할 수 있다는 장점이 있습니다. 그리고 소스 코드 수정 없이 모킹이 필요한 환경에서만 MSW 인스..

테스트 더블(Test Double) 이란?테스트 더블은 영화를 촬영할 때 배우를 대신하여 위험한 역할을 하는 스턴트 더블(Stunt Double)이라는 용어에서 유래된 단어이다.자동화된 테스트를 작성할 때, 여러 객체들이 의존성을 갖는 경우 테스트 하기 까다로운 경우가 있습니다. 예를 들어서 프로덕션 코드에서 Service Layer는 Dao에 직접적으로 의존하고, 따라서 Database 까지 의존하는 형태를 갖습니다.의존 관계가 간단한 경우 테스트 대상과 의존하고 있는 대상을 함께 테스트할 수 있습니다. 이를 Sociable Test 라고 합니다.Sociable Test 에서 우리가 테스트할 Service 객체는 실제 동작하는 Dao 객체를 통해 데이터베이스에 액세스할 수 있습니다.하지만 테스트 대상이..

테스트 코드에는 오랫동안 자리 잡아온 Jest라는 테스트 라이브러리가 있습니다. 그래서 Jest는 많이 알고 있지만, Vitest에 대해서는 잘 모르실 수 있습니다.그래서 Jest와 Vitest의 대하여 알아보고 어느 것을 사용할지 알아보는 시간을 갖도록 하겠습니다.JestJest란?Jest는 JavaScript와 TypeScript 애플리케이션을 테스트하기 위해 설계된 테스트 프레임워크입니다. Facebook(현 Meta)에서 개발했으며, 특히 React 애플리케이션에서 널리 사용되지만, React에 국한되지 않고 다양한 JavaScript 환경에서 활용할 수 있습니다.Jest는 유닛 테스트, 통합 테스트, 스냅샷 테스트 등을 지원하며, 강력하고 유연한 기능으로 인해 업계 표준으로 자리 잡았습니다. J..

테스트 코드(Test Code)란 무엇인가?소프트웨어 개발 과정에서 작성된 코드가 기대한 대로 동작하는지 확인하기 위해 작성된 코드입니다. 테스트 코드는 소프트웨어의 품질을 보장하고, 개발 중에 발생할 수 있는 오류를 조기에 발견하고 수정할 수 있도록 돕는 중요한 도구입니다. 테스트 코드의 이점그러면 테스트 코드를 작성함으로 인해, 얻는 이점은 어느 것들이 있을까요?기능 검증 : 작성된 코드가 요구사항을 충족하고 의도한 대로 동작하는지 확인합니다.오류 방지 : 코드 변경(리팩토링 또는 기능 추가) 중에 발생할 수 있는 기존 기능의 오류를 방지합니다.자동화 : 사람이 직접 확인할 필요 없이 컴퓨터가 자동으로 코드를 테스트할 수 있도록 지원합니다.코드 유지보수성 향상 : 개발자가 변경 작업을 할 때 기존 코..