태연한 컴공생

• 오버레이 메뉴 구현 메인 화면에서 리스트 아이콘을 클릭하면 전체 메뉴가 화면 위에 오버레이 되는 기능을 구현했다. 이를 통해 사용자가 원하는 메뉴를 빠르게 탐색할 수 있도록 했다. • 기본 구조 오버레이 메뉴는 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.태그명`... 스타일 넣기 ...` ..

이번 프로젝트에서  프론트엔드 개발 중 가장 구현 난이도가 높았던 것 중 하나는 바로 지도 기능이었다.팀원들에게 내가 맡아서 구현하겠다고 큰소리를 쳤지만, 솔직히 자바스크립트를 이번 프로젝트에서 처음 다뤄본 나로서는 구글링과 GPT의 많은 도움을 받았던 것 같다.따라서 복습 차원에서 정리해보려고 하니 참고해주길 바란다!1. 지도 생성하기 NAVER CLOUD PLATFORMcloud computing services for corporations, IaaS, PaaS, SaaS, with Global region and Security Technology Certificationwww.ncloud.com 우선 우리팀은 네이버 지도 API를 사용하기로 결정했기 때문에, 먼저 위의 링크에서 클라이언트 ID를..

이전 글에서 Git과 Github를 대략적으로 다뤘다면, 이제 실제 프로젝트에서 자주 언급되고 협업에서 필수적인 Git Branch 전략에 대해 알아보자! 1. Branch 원리 여러 개발자가 동일한 파일을 동시에 수정하면 변경사항 통합이 어려워진다. 이를 해결하기 위해 Git에서는 파일을 복사(Branch)하여 각자 별도의 작업 공간을 가질 수 있다. 각 개발자는 자신만의 Branch에서 작업을 진행한 후, 모든 변경 사항을 나중에 하나로 합칠 수 있다. 이 방식은 협업뿐만 아니라, 코드의 일부분을 수정해 실험하거나 테스트할 때도 유용한데,  별도의 Branch를 생성해 작업을 한 후 필요없으면 삭제할 수 있기 때문이다. 2. Branch 병합하기 Github에서 Pull request 날려보자오랜만에..

1. 디자인 시스템 [Design] #3 디자인 시스템1. 디자인 시스템이란? 디자인 시스템은 반복적인 디자인 요소를 조직적이고 효율적으로 관리하는 것을 말한다. 이를 통해 회사나 조직의 디자인을 체계화할 수 있다. 디자인 시스템을 어떻게taeyeoxn.tistory.com 몇달 전 디자인 공부를 하며 디자인 시스템에 대해 정리해둔 글이다. 사실 첫 프로젝트 때는 디자인 시스템이 뭔지도 제대로 몰랐고, 필요성을 딱히 느끼지 못했다.디자인을 공부할 때는 디자인 시스템이 있으면 편리하다는 것을 알았지만, 설정하는 과정이 번거롭다고 생각해서 '굳이 꼭 써야 할까?'라는 의문이 들기도 했다. 그런데 이번에 프로젝트를 진행하면서 디자인 시스템은 정말정말 중요하다는 것을 몸소 깨닫게 되었다! 개발자들로만 이루어진 ..

Git과 Github는 프로젝트를 진행할 때 정말 많이 사용하는 협업툴이기 때문에 필수적으로 알고 있어야 한다!나도 처음 사용할때 정말 많이 헤맸고 아직도 가끔은 어렵게 느껴지기 때문에.. 글을 쓰면서 다시 정리해볼 예정이다. 1. Git? Github? 이름이 비슷하지만 둘의 역할은 아주 다르다.간단히 말해 Git은 '버전관리도구'이고 Github는 '깃의 원격 저장소'이다.  • Git 하나의 밈이긴 하지만 작업을 하다보면 위와 같은 상황이 꽤나 자주 발생한다.Git은 폴더의 상태(또는 변경 내역)을 쉽게 기록할 수 있기 때문에 이러한 수고로움을 덜어준다. 또한 단순히 기록만 할 수 있는게 아니라 이전 상태로 돌아갈 수도 있고, 심지어 평행우주(Branch)를 만들 수도 있다. • Github 깃허브..