styled component

[React+TS+StyledComponent] 사이드바 만들기 + 외부 클릭시 닫히는 기능

시작하기 햄버거 버튼을 누르면 사이드 메뉴가 나오고, 사이드 메뉴 내부에 있는 x 표시나 사이드메뉴 외부를 누르면 사이드메뉴가 닫히는 기능을 구현한다. 버튼 누르면 사이드메뉴가 나오기 버튼을 누르면 사이드 메뉴가 나오게 하는 것은 간단하다. 우선 헤더와 사이드메뉴 이렇게 두 개의 컴포넌트를 준비한다. 그리고 햄버거 버튼에 클릭 이벤트를 걸어주고, 나는 useState 변수를 사용해서 구현했다. Header.tsx function Header() { const [isOpen, setIsOpen] = useState(false); const toggleSide = () => { setIsOpen(true); }; return ( ); } 1. 사이드 메뉴 컴포넌트를 Header안에 같이 넣어줬다. 파라미터로..

[WEB] Next.js + Typesctipt + StyledComponents 프로젝트 생성하기

이번에 새로운 사이드프로젝트를 진행하면서 기술 스택들이 정해졌고, 해당 스택들을 사용해서 프로젝트를 생성하려고 한다. react와 scss로 작업해본 경험이 있어서 이번엔 크게 next.js (react를 했으니 그래도 좀 수월하지 않을까라는 생각) 와 typescript, styled-component를 사용해보려고 한다. next 프로젝트 생성하기 with Typescript $ npx create-next-app --example with-typescript [프로젝트 이름] typescript와 같이 next프로젝트를 생성해주는 명령어이다. 실행이 끝나면 cd 를 사용해서 프로젝트로 이동해준다. $ npm install npm install를 사용해서 필요한 패키지들을 설치해준다. 설치가 다 되면..