태연한 컴공생

• 오버레이 메뉴 구현 메인 화면에서 리스트 아이콘을 클릭하면 전체 메뉴가 화면 위에 오버레이 되는 기능을 구현했다. 이를 통해 사용자가 원하는 메뉴를 빠르게 탐색할 수 있도록 했다. • 기본 구조 오버레이 메뉴는 Header 컴포넌트에서 상태를 관리하고, 해당 상태를 Menu 컴포넌트에 props로 전달하여 열고 닫는 동작을 제어하는 방식으로 구현했다. Header.jsximport { useState, useEffect } from 'react';import { useLocation } from 'react-router-dom';const Header = () => { const location = useLocation(); const [isOpen, setIsOpen] = useState(fal..

• 검색 기능 사용자가 기사 제목을 검색하면, 해당 기사가 존재하는 경우 결과를 표시하는 검색 기능을 구현해보았다. 1. 검색어 입력 처리 우선, 검색어를 저장할 수 있는 search 상태를 생성하고 입력값이 변경될 때 이를 감지하는 onChangeSearch 함수를 만들었다.const [search, setSearch] = useState("");// 검색어 입력 처리 함수const onChangeSearch = (e) => {    setSearch(e.target.value);}; 2. 검색 페이지로 이동하기 다음으로 버튼 클릭 시 search 상태를 기반으로 검색 페이지로 이동하는 handleSearchClick 함수를 만들었다.// 검색 버튼 클릭 시 처리 함수const handleSearchC..

1. 기사 등록하기 기능 사용자가 입력한 데이터를 기반으로 새로운 기사를 추가하는 기능을 구현해야 했다. • 입력값을 관리하는 State 설정 먼저 사용자가 입력한 값을 저장하고 관리할 State가 필요하다. 여러 개의 입력값을 하나의 State에서 효율적으로 관리하기 위해서는 객체 형태의 데이터를 저장하도록 설정해야 한다.import { useState } from 'react';const Editor = ({}) => {    const [input, setInput] = useState({        createdDate: new Date(),        title: "",        reporter: "",        content: "",    }); • 날짜 입력값 처리 다음으로 날짜 ..

1. CSS-in-CSS vs CSS-in-JS  • CSS-in-CSSCSS를 별도의 .css 파일에 작성하고, HTML이나 React 컴포넌트에서 className이나 id로 연결한다.  • CSS-in-JSJavaScript 코드 안에서 CSS를 작성한다. 대표적으로 Styled-Components, Emotion 등이 있다. 2. Styled-Components Styled-Components는 CSS를 별도의 파일이 아니라, 컴포넌트 안에서 바로 작성한다. 그리고 특정 이름을 가진 컴포넌트를 생성해서 그 안에 스타일을 넣는다. 기존 HTML 파일           Styled-Components의 작성 방법은 다음과 같다.const 컴포넌트명 = styled.태그명`... 스타일 넣기 ...` ..