개발 공부 일지

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) 💡 /**/ ..

프론트엔드 직무를 희망한다면, CSS를 직접 다뤄 봤다면, CSS가 불편하다고 느낀 적이 있을 것이다. 요소 하나하나에 스타일링 코드들을 덧붙이다 보면 비어있던 파일은 어느새 눈덩이처럼 금방 불려져 감당할 수 없을 정도로 커져있던 적, 다들 있을 것이다. 이를 위한 구원자가 바로 Sass/SCSS이다. Sass/SCSS는 CSS에서 제공하지 않는 편리한 기능들을 제공해준다!! 이제 다시 정리해보자. 🎯 Sass/SCSS란? CSS로 컴파일되는 스타일 시트 확장 언어이며 CSS 전처리기 중 하나이다. 브라우저는 Sass/SCSS 파일을 컴파일하지 못하기 때문에 개발은 Sass/SCSS를 기반으로 작성하되, CSS로 import하여 활용한다. Sass 작성방식 Sass 방식과 SCSS 방식이 있는데, 이 두..

실제 Momentum처럼 배경에 랜덤한 이미지를 설정하고 싶었는데 이미지를 지정하면 자꾸 아래와 같이 여러 장의 사진이 반복되는 상황이 펼쳐졌다. 이미지의 해상도가 낮을 수록 여러개의 이미지가 반복되었다. img 폴더에는 있는 모든 이미지들이 0.jpg, 1.jpg, ... 이렇게 규칙적으로 되어있어, 이미지파일의 이름들을 담은 배열을 별도로 생성하지 않았다. JS로 body의 배경 이미지를 변경하는 코드는 다음과 같이 작성하였다. (사실 Nico는 JS에서 style을 건드리는걸 별로 좋아하지 않는다고 했던 것 같은데, CSS에서만으로도 랜덤한 이미지 설정이 가능한지 몰라서 그냥 작성하였다ㅎㅎ) /* js/backgound.js */ const imgNum = Math.floor(Math.random(..