npm install -D @babel/core @babel/cli바벨이 설치되면 node_modules / .bin / babel 이 있는 것을 알 수 있다.이제 app.js를 만들고 코드를 쳐본다// app.jsconst alert = (msg) => window.alert(msg);그리고 바벨을 실행시켜본다.npx babel app.jsapp.js에 작성했던 코드가 잘 나오는 것을 알 수 있다.바벨은 세 단계로 빌드를 진행한다.파싱 (Parsing)코드를 읽고 AST(추상 구문 트리)로 변환하는 단계를 ‘파싱’이라고 한다. 이것은 빌드 작업을 처리하기에 적합한 자료구조인데, 컴파일러 이론에 사용되는 개념이다.변환 (Transforming)추상 구문 트리를 변경하는 것을 ‘변환’ 단계로, 실제 코드를..

이 게시글은 이효린의 애자일 방법론 적용기시리즈 중 하나입니다.1.[🚖모여타 회고] 1. 좋은 팀원을 만나기까지 | 팀 구성, 팀원 모집의 과정2. [🚖모여타 회고] 2. 이름뿐인 애자일 | MVP? MXP!3.[🐾놀멍 회고] 3. 10일 동안 640명이 쓴 서비스 만들기(1) | 애자일 방법론(Scrum), 유레카 최종 프로젝트 우수상4. [🐾놀멍 회고] 4. 10일 동안 640명이 쓴 서비스 만들기(2) | 서비스 배포 과정, 유레카 최종 프로젝트 우수상  모여타는요 ! K-해커톤 참가를 위해 만들어진 팀입니다. 사실 당시 저의 상황은 사이드프로젝트는 하고싶은데.. 대외동아리에 들어가기엔 프로젝트 경험이 부족한 상황이었습니다. 근데 그러던 중막상 든 생각이... 내가 팀을 만들면 되지 않을..

문제 상황바닐라JS로 모달을 만들며 dom을 가져와 이벤트리스너를 달아주고있었습니다.본격적으로 모달을 만들기 전, 이벤트가 잘 달리는지 확인을 위해 단순히 이벤트리스너를 다는 코드를 구현했는데 다음과 같은 에러가 발생했습니다. 문제 발생 코드 삭제   원인 파악위 에러는 addEventListener을 실행하던 도중 이벤트를 추가할 돔 요소가 null이기에 발생한 에러였습니다.이에 저는 document.getElementById("delete")를 실행 하는 과정에서 돔을 찾지 못한 것이라 판단했습니다.코드가 잘못되었나 ?그러나 document.getElementById("delete") 코드 및 button 태그 자체에는 문제가 없었습니다.그럼에도 delete버튼 노드의 값이 null이라는 것..

개발 배경모여타 프로젝트의 디자인이 나왔는데, 기본 홈 화면이 아래와 같은 디자인이었습니다. 목록보기 버튼을 누르거나, BottomSheet의 핸들을 잡아 위로 올리면 아래에 있던 BottomSheet가 위로 올라오는 방식으로 동작해야 했습니다.  처음엔 라이브러리를 사용하려 했으나, 모여타는 웹 앱이었기에 관련된 라이브러리를 찾을 수 없었습니다 🥲(모바일에는 해당 라이브러리가 많던데...) 그래서 결국 그냥 내가 만들어야겠다 ! 생각했고, 정말 스트레스 받아가며 열심히 만들었습니다..!!   BottomSheet란?바텀시트(BottomSheet)는 화면 하단에서 올라오며 유저에게 추가적인 정보를 보여주는 UI 컴포넌트입니다. MaterialUI 에선 BottomSheet를 3가지로 정의하고 있습니다...