전체 글

1. PostCSS (1) 성능 순수 CSS 모듈 빌드 타임 시 클래스 이름의 안정성을 보장해주는 기능만 하기 때문에 성능의 문제는 없다. (2) 활용성 순수 CSS이기 때문에 어디서든 사용할 수 있다. (3) 강점 고립성/독립성 보장 => 이름 충돌에 대해서 걱정할 필요 없다. 순수 CSS이기 때문에 CSS 기본 문법만 잘 알아도 빠르게 사용할 수 있다. =>입문자들이 사용하기 좋음 2. Styled Components (1) 성능 CSS를 자바스크립트에서 작성하게 해주는 CSS 라이브러리 보기엔 CSS문법이지만 자바스크립트가 동작한다. Styled Component가 동작하려면 사용자가 자바스크립트를 다 다운로드 받아서, Styled Component가 자바스크립트에서 작성한 코드들을 css파일로 만..

이번 프로젝트에서 내가 담당한 기능은 firebase를 이용해 도서리뷰 데이터를 추가하고 읽어들이는 부분이다. 여러번 구현해봤던 로직이라 이번에도 어렵지 않게 구현할 수 있었다. 간단한 흐름만 정리하도록 하겠다. 1. Firebase를 세팅한다. import { initializeApp } from 'firebase/app'; import { getFirestore } from 'firebase/firestore'; const firebaseConfig = { apiKey: process.env.REACT_APP_FB_API_KEY, authDomain: process.env.REACT_APP_FB_AUTH_DOMAIN, projectId: process.env.REACT_APP_FB_PROJECT_ID..

아래와 같은 Custom Sidebar를 구현해보자. 1. 아래와 같이 CustomSiderbar.jsx 파일을 만든다. (styled component에서 props.theme...은 themeProvider에서 내려준 스타일이다) import React from 'react'; import styled from 'styled-components'; const CustomSidebar = ({ items, setItem, selectedItem }) => { return ( {items.map((item, index) => ( { setItem(item); }} $isSelected={item === selectedItem} > {item} ))} ); }; export default CustomSid..

오늘은 간단한 커스텀 모달창을 구현하는 방법을 알아보도록 하겠다. 1. React 프로젝트를 생성한다. 2. 프로젝트 생성후 CustomModal.jsx라는 파일을 만든다 3. 다음과 같은 코드를 작성한다. import React from 'react'; import styled from 'styled-components'; import { IoClose } from 'react-icons/io5'; const StyledModalContainer = styled.div` position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: rgba(0, 0, 0, 0.35); z-index: 1000; `; const Style..