바닐라 JS

안녕하세요 동쪽별입니다. 최근에 바닐라 자바스크립트로 SPA(Single Page Application)를 개발해보았습니다. 이와 관련하여 SPA 개발을 위한 컴포넌트를 구현한 경험에 대해 공유해보려 합니다. 컴포넌트? 컴포넌트는 리액트로 만들어진 앱을 이루는 가장 최소한의 단위로, 리액트(React)에서 가장 중요한 구성요소입니다. 그래서 컴포넌트가 정확히 무엇일까요? 실제 리액트 공식 문서의 Components and Props 부문을 보면 아래 문장이 명시되어 있습니다. Conceptually, components are like JavaScript functions. They accept arbitrary inputs (called “props”) and return React elements d..

안녕하세요. 동쪽별입니다. 이번 글에서는 바닐라 자바스크립트로 모달을 직접 구현해본 경험을 공유하고자 합니다. 위 이미지와 같이 날짜 입력 아이템을 클릭시 캘린더 모달이 렌더링 되도록 구현했습니다. 모달은 position: absolute 스타일을 적용하여 쉽게 퍼블리싱할 수 있습니다. 그런다음 클릭 이벤트 발생시 모달 Element를 DOM에 추가하거나, display: none 이었던 모달 Element 스타일을 display: flex 로 변경하는 등의 방식으로 렌더링할 수 있겠죠. 문제는 모달 외 영역 클릭시 해당 모달을 제거하는 동작을 구현하는 것이었습니다. 또한, 모달 제거와 동시에 날짜 입력 아이템의 포커싱 또한 비활성화해야 했습니다. 첫번째 방법 : 상위 Element 에서 이벤트 전파 해..

안녕하세요. 동쪽별입니다. 최근 프로젝트를 진행하다가 로컬에 저장되어 있는 xlsx 파일을 읽고, 파싱하는 기능을 구현해 보았어요. 보통 서버에서 이를 진행하여 데이터를 보내주지만, 서버 없는 SPA를 구현 중이라 클라이언트 단에서 이를 수행해야 했답니다.. 위 파일 구조의 루트 디렉터리에 있는 xlsx 파일을 ./src/utils/api.js 파일에서 다룰 수 있게 했습니다. xlsx 파일 읽기 xlsx 파일을 가져오기 위해 Fetch API를 사용했어요. Fetch API? Fetch API는 HTTP 파이프라인을 구성하는 요청과 응답 등의 요소를 JavaScript에서 접근하고 조작할 수 있는 인터페이스를 제공합니다. Fetch API가 제공하는 전역 fetch 메서드로 네트워크의 리소스를 쉽게 비..