성공을 즐기자

안녕하세요  지난 시간에 이어서 투두리스트를 만들어보겠습니다.       1. Header 파란 글씨 만들기  오늘 날짜를 위 사진처럼 파란색으로 만들어볼게요  오늘 날짜를 h1태그로 나타내줍니다. {new Date().toDateString()} import "./Header.css"const Header = () =>{ return 오늘은 🔥 {new Date().toDateString() } }export default Header; 그러면 파란 글씨를 적용할 부분은 className이 Header인 태그 안에h1 태그 입니다.   그러면 Header.css에는 어떻게 적으면 될까요?  className이 Header 이고 그 아래에 h1 태그이다. .Head..

안녕하세요 리액트로 투두리스트를 만들어봅시다.    만들어볼 TodoList는 다음과 같습니다! 이 글은 한입크기 리액트 인프런 강의를 기반으로 합니다.    1. 요소 간격 Gap (css) 주기  우선 Header, Editor, List 이렇게 3개의 컴포넌트를 만들어줍니다.  자 이렇게 3개의 컴포넌트를 App.jsx에서 호출해줍니다.그리고 이것들을 묶는 div 태그가 있죠 ?여기에 CSS를 적용해줄거에요  왜냐하면 각 요소별로 간격을 주고 싶기때문이죠  className은 Css 파일에서 . (점) 으로 제어할수있어요 .App.css에 들어가서 className이 App인 요소들의 css를 수정하여봅시다.   display : flex는 유연하게 요소의 배치 조절을 가능하게 합니다. flex-d..

React는 SPA(Single Page Application)을 만드는데 최적화되어있다. 별도록 라우팅기능은 제공하지 않지만 react-router라는 라이브러리를 이용하여 라우팅 할 수 있다. 처음에는 직접 구현하려고 했다가 css가 이상해지고 데이터가 이상하게 보였다. 그래서 그냥 라이브러리를 이용하여 구현하기로 했다. 페이지네이션 라이브러리에도 여러개가 있는데 react-js-pagination를 사용했다. npm install react-js-pagination 이제 페이지네이션을 구현해보자! 파일 구조!! 원래 LostFound와 Notice에 BoardList.js가 각자 있었지만 둘다 거의 (99%) 동일한 코드이기 때문에 BoardPage.js를 만들어서 index.js에서 불러주었다. ..