개발 공부 일지

boolean 값에 따라 렌더링 유무가 결정이 된다면 &&연산자를 사용하는게 더욱 효율적이라고 배웠다. 스터디 실습 과제로 숫자야구를 구현했고, 배운대로 && 연산자를 잘 사용하고 조건에 따라 렌더링도 잘 되는 것을 확인 할 수 있었다. 하지만 입력창 하단에 보이는 난데없는 0의 등장…😭 F12를 눌러 개발자 모드에서 html 파일을 봤을 때에 저 0이 단순 텍스트로 나와서 원인을 찾는데에 애먹었었다. 그리고 곧 이게 && 연산자를 조건부 렌더링 시 잘못 사용한 예제라는 것을 파악할 수 있었다. 🎯 원인 분석 리액트 공식문서에 있는 조건부 렌더링에 대해 살펴보자. JavaScript에서 true && expression은 항상 expression으로 평가되고 false && expression은 항상 f..

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

💻 리액트 리액트의 가장 큰 장점은 재사용성이다. 화면에 띄워지는 모든 요소들을 '컴포넌트'라는 조각의 형태로 쪼개어 필요한 곳마다 다시 쓸 수 있도록 한다. 이러한 특성 때문에 리액트에서는 "상속"의 개념 대신 "합성"의 개념에 보다 적합하다. 이 합성은 바로 JSX라는 새로운 꼴을 통해 이루어진다. 🎯 JSX란? : HTML과 비슷해보이지만, JS와 XML이 합쳐져 있는 꼴, XML 문법으로 코드를 작성하면 Babel과 같은 도구가 JS로 변환시켜준다. 📚 JSX 특징 열린 태그와 닫힌 태그는 쌍으로 존재 열린 태그와 닫힌 태그 사이에 아무것도 없는 경우 와 같이 한번에 열고 닫는 Self Closing HTML에서는 닫지 않는 input, br도 마찬가지로 닫아줘야한다, ex) , 하나의 컴포넌트에..

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 방식이 있는데, 이 두..