개발 공부 일지

when2Meet이라는 그룹 일정 조율 사이트를 리뉴얼하는 프로젝트에 참여하게 되었다. 해당 웹 사이트에서의 주요 기능 중 하나가 드래그 해서 되는 일정을 선택할 수 있도록 하는 건데, 그 부분이 핵심이라 팀장이 일주일 동안 공부하고, 간단하게 구현까지 해보라는 과제를 내주셨다! 그래서 이것저것 알아보니, 우리 프로젝트에 딱 알맞는 react-table-drag-select 라는 모듈이 있었으나 현재는 deprecated 되어 사용할 수 없었다. dragselect 라는 개인 개발자가 만든 모듈이나, 생명주기를 이용하여 구현을 하신 분도 있었다. 하지만, 리액트에서 생명주기 함수까지 사용하고 싶지는 않았고, 더 대중적인 모듈을 찾고자 했다. 그 와중에 발견한 한줄기 빛이 바로 react-selecto....

Scss를 작성하고자 할 때, 기본적인 파일 구조는 어떻게 되며, 사용 방법은 어떻게 되는지 알아보자. 💻 파일 구조 - index.html - style - style.css 메인으로 띄울 html 파일과 style 폴더를 만들어 그 안에 CSS 파일들을 생성할 것이다. 다만 이때 .css 대신 .scss 파일을 생성한다. SCSS는 처음에도 언급했듯이 브라우저가 컴파일 할 수 없다. 따라서 우리는 SCSS을 활용하여 파일을 작성하고 SCSS 컴파일러가 파일을 읽고 속성에 맞는 CSS로 매핑시켜 자동으로 CSS 파일을 생성해준다. 웹에는 그 후에 올라가게 되는 것이다. 즉 우리는 편하게 SCSS로 작성하기만 하면 컴퓨터가 자동으로 CSS 파일을 생성해준다는 것!! 🎯 중첩(Nesting) 💡 /**/ ..