ToyProject-MusicCommission Menu 컴포넌트 styled components를 사용하여 styled 메소드를 통해 Link 컴포넌트를 Decorate한다. 중요한 점은 useMediaQuery hook을 사용하고 화면의 크기를 추종하여 useEffect hook의 컴포넌트 생명 주기 업데이트를 실현하게 된다. 갱신될때 마다 PC에서 설정되어야하는 이벤트와 Mobile에서 설정되어야 하는 이벤트가 각각 다르므로 초기화 및 재설정해줘야 하... ToyProject-MusicCommissionToyProject-MusicCommission Home 컴포넌트 Path "/"에 일치하는 사용자에게 첫번째로 보여줄 컴포넌트 Home이다. 재사용 가능한 Menu 컴포넌트가 부착되어있으며 중앙에는 span 태그를 사용하여 문구를 지정하였다. DOM tree -> CSSOM 트리 -> 렌더 트리 -> 레이아웃 -> 페인트 -> 합성 & 렌더 과정을 거쳐서 페이지가 완성되는 것을 기반으로 생각해보자. Span DOM 태그를 react에서 참조하기 위해 함수... ToyProject-MusicCommissionToyProject-MusicCommission Index 컴포넌트 html 캔버스 위의 렌더링을 시작하는 Index 컴포넌트이다. 여기서 root element를 찾아 라우팅을 설정한 App컴포넌트를 탑재시켜준다. 일단 기본적으로 <React.StrictMode>가 적용되어 있다. React Strict 모드란? StrictMode currently helps with: 1.Identifying components with unsafe lifecycles ... ToyProject-MusicCommissionToyProject-MusicCommission App 컴포넌트 기본적으로 서버에 네트워크 요청을 보내 특정 페이지를 출력 받아오는 것이 아닌, SPA(Single Page Application) 구현을 이번 토이 프로젝트의 목표로 하였으니 이 기능을 실현시키기 위한 방법으로 컴포넌트 스위치가 가능한 리액트 라우터를 활용했다. <Routes>부모 태그 안의 <Route> 자식 구조를 활용하여 path에 매칭되는 대표 컴포넌트만 출력되게 만들었다. v6 버... ToyProject-MusicCommissionToyProject-MusicCommission
Menu 컴포넌트 styled components를 사용하여 styled 메소드를 통해 Link 컴포넌트를 Decorate한다. 중요한 점은 useMediaQuery hook을 사용하고 화면의 크기를 추종하여 useEffect hook의 컴포넌트 생명 주기 업데이트를 실현하게 된다. 갱신될때 마다 PC에서 설정되어야하는 이벤트와 Mobile에서 설정되어야 하는 이벤트가 각각 다르므로 초기화 및 재설정해줘야 하... ToyProject-MusicCommissionToyProject-MusicCommission Home 컴포넌트 Path "/"에 일치하는 사용자에게 첫번째로 보여줄 컴포넌트 Home이다. 재사용 가능한 Menu 컴포넌트가 부착되어있으며 중앙에는 span 태그를 사용하여 문구를 지정하였다. DOM tree -> CSSOM 트리 -> 렌더 트리 -> 레이아웃 -> 페인트 -> 합성 & 렌더 과정을 거쳐서 페이지가 완성되는 것을 기반으로 생각해보자. Span DOM 태그를 react에서 참조하기 위해 함수... ToyProject-MusicCommissionToyProject-MusicCommission Index 컴포넌트 html 캔버스 위의 렌더링을 시작하는 Index 컴포넌트이다. 여기서 root element를 찾아 라우팅을 설정한 App컴포넌트를 탑재시켜준다. 일단 기본적으로 <React.StrictMode>가 적용되어 있다. React Strict 모드란? StrictMode currently helps with: 1.Identifying components with unsafe lifecycles ... ToyProject-MusicCommissionToyProject-MusicCommission App 컴포넌트 기본적으로 서버에 네트워크 요청을 보내 특정 페이지를 출력 받아오는 것이 아닌, SPA(Single Page Application) 구현을 이번 토이 프로젝트의 목표로 하였으니 이 기능을 실현시키기 위한 방법으로 컴포넌트 스위치가 가능한 리액트 라우터를 활용했다. <Routes>부모 태그 안의 <Route> 자식 구조를 활용하여 path에 매칭되는 대표 컴포넌트만 출력되게 만들었다. v6 버... ToyProject-MusicCommissionToyProject-MusicCommission