documenting and archiving

리액트 스타일드 컴포넌트(Styled Components)는 컴포넌트 기반으로 스타일을 정의할 수 있는 CSS-in-JS 라이브러리다. 컴포넌트 기반 스타일링이 가능하고, 속성이나 글로벌 테마 등으로 동적인 스타일링도 가능하다.고유한 클래스를 생성해서 클래스 중복 등을 방지할 수도 있다. 전역 스타일링을 위한  GlobalStyles.ts 생성import { createGlobalStyle } from 'styled-components';import reset from 'styled-reset';const GlobalStyle = createGlobalStyle` ${reset} html { ... } body { ... }`;export default GlobalStyles; G..

리액트에서 토글 메뉴를 구현하고, 메뉴 외부 영역을 클릭했을 때 메뉴가 닫히도록 구현하고자 했다. import React, { useState, useRef, useEffect } from "react" export const SubMenu = () => { return ( 메뉴 1 메뉴 2 ) } export const Box = () => { const subMenuRef = useRef(null) const [subMenuShow, setSubMenuShow] = useState(false); useEffect(() => { const handleClose = (e: {target: any}) => { if(subMenuShow && (!subMenuRef.current?.contains(e.tar..

const startTime = 8 * 60; const endTime = 19 * 60; const interval = 30; const generateTime = () => { const time = []; for(let i = startTime; i { return ( {time} ) } const TimeTable = () => { return ( {tableData.map((time, index) => ( ))} ) } 8:00 부터 19:00 까지 30분 간격으로 시간이 표시되는 표를 구현 시작 시간인 8시는 startTime, 끝나는 시간인 19시는 endTime에 선언하고 60을 곱해 분 단위로 만들어준다. 그리고 간격인 30분은 interval이라는 변수로 만들어주었다. generateT..

리액트 프로젝트 실행하면서 분명 react-router-dom 라이브러리를 설치해주었는데도 위 오류메시지가 뜨면서 서버가 정상적으로 실행되지 않았다. npm install --save react-router-dom 으로 입력해주니 정상적으로 실행되었는데, dependencies에 의존성 기록이 되도록 --save 를 붙여주니 해결되었다. 하지만 아직 정확한 원인은 잘 모르겠어서 좀 더 찾아봐야 할 것 같다.