본문 바로가기

PROJECT.2

리엑트를 사용하여 호버효과 구현 기본 스타일링 구현 Wrapper display를 사용하여 요소들을 가로로 나오게 구현 후, 요소 밖은 hidden 처리 및 트렌지션을 넣어 스무스하게 나오게 걸어 둡니다.반응형 디자인도 활용합니다. ( LanguageListItem 컴포넌트에 스타일링 합니다.) ImageContainer 이미지 컨테이너 안에 img 요소를 넣고 가로길이 부모요소의 반을 정의하고 반응형 디자인도 활용합니다. Container/TitleText/ContentText 컨테이너 안에 div 태그를 넣고 가로 반으로 정의를 한다. 반응형 디자인도 구현하였다. 타이틀 및 콘텐트 텍스트들 안에 p태그들을 정의하고 그안에 부모요소 호버시 폰트색깔이 바뀌게 정의한다. 마우스 오버시 검은 배경 나오는 효과 Container 컨테이너 안.. 더보기
리엑트를 사용하여 홈페이지 리스트 구현 #2 리스트아이템 컴포넌트 구현 styled-components div 및 p 를 사용하여 함수 안에 스타일을 원하는대로 스타일링 될 수 있습니다. IntroListItem 컴포넌트는 list라는 객체를 받아서 해당 객체의 title 및 content 속성을 표시하며, 이는 해당 컴포넌트를 재사용 가능하게 만듭니다. 이 컴포넌트는 외부에서 list라는 props를 통해 제공을 합니다. 리스트 컴포넌트 구현 IntroListItem 컴포넌트를 사용하기 위해서 IntroListItem 컴포넌트를 가져옵니다. IntroList lists 배열을 순회하면서 각 요소에 대해 IntroListItem 컴포넌트를 렌더링합니다. 각각의 IntroListItem 컴포넌트에는 key 속성으로 list.id 값을 전달합니다. 이.. 더보기
리엑트를 사용하여 홈페이지 리스트 구현 #1 리스트아이템 컴포넌트 구현 styled-components 각 요소는 Wrapper, ImageContainer, Container, TitleText, ContentText라는 이름으로 정의되어 있습니다. LanguageListItem props를 통해 post와 onClick을 받아옵니다. 이 컴포넌트는 Wrapper라는 div 요소를 렌더링하며, 이 div를 클릭할 때 onClick 함수를 호출합니다. Wrapper 내부에는 post의 imageUrl을 소스로 하는 ImageContainer와 post의 title과 content를 보여주는 Container가 있습니다. LanguageListItem 컴포넌트는 외부에서 post와 onClick을 props로 받아와 이를 화면에 렌더링합니다. 리스트.. 더보기
리엑트를 사용하여 동적으로 브라우저이동하기 URL 라우팅 하기 react-router-dom BrowserRouter, Routes, Route 컴포넌트를 가져옵니다. 이 컴포넌트들은 React 애플리케이션에서 브라우저의 주소와 라우팅을 관리하는 데 사용됩니다. 페이지 컴포넌트 MainPage, PostWritePage, LanguageViewPage, PortFolioViewPage, PostViewPage는 각각 메인 페이지, 포스트 작성 페이지, 언어 뷰 페이지, 포트폴리오 뷰 페이지, 포스트 뷰 페이지를 나타냅니다. App 컴포넌트는 React Router의 핵심 요소 중 하나로, 브라우저의 주소와 라우팅을 관리합니다. 여기서는 애플리케이션의 최상위에 위치하며, 브라우저의 주소 변화에 따라 다른 컴포넌트를 렌더링합니다. 컴포넌트는 여러 개.. 더보기
리엑트를 사용하여 재사용 가능한 ui 만들기 버튼만들기 StyledButton styled-components를 사용하여 스타일이 지정된 버튼 컴포넌트를 정의합니다. 버튼은 특정한 스타일 및 마우스 호버 시의 스타일 변경을 포함합니다. Button 함수형 컴포넌트를 선언합니다. 이 컴포넌트는 title과 onClick이라는 props를 받습니다. 컴포넌트 내부에서는 StyledButton을 렌더링하며, 클릭 이벤트가 발생하면 onClick 함수를 호출합니다. 마지막으로 Button 컴포넌트를 내보냅니다. 버튼 컴포넌트 가져오기 useNavigate() 훅을 사용하여 navigate라는 함수를 선언합니다. 이 함수는 React Router의 내장 함수로, 지정된 경로로 이동할 때 사용됩니다. 이 버튼은 "글 작성하기"라는 제목을 가지며, 클릭 이벤트.. 더보기

티스토리툴바