토이 프로젝트29 TodoList 만들기(3) 달력 만들기 date-fns라는 라이브러리의 도움을 받아서 History탭에 넣을 달력을 만들어보았다. Calender 라는 컴포넌트안에 크게 Header, Week, Days 로 나누어서 컴포넌트를 만들어 보았다. curMonth라는, 현재 보고있는 달의 상태를 저장할 변수를 만들고, 이 상태를 변경할 함수를 만든다. subMonths와 addMonths 함수는 date-fns 에서 지원하는 함수이다. Header Header에는 년도, 월, 화살표만 들어가면 된다. format 함수 역시 date-fns에서 지원하는 함수로 특정 날짜를 넣으면 형식에 맞게(yyyy는 2023, M은 3 이런식으로) 렌더링해준다. 각각의 화살표에는 onClick 이벤트로 이전에 만들어둔 prevMonth, nextMon.. 2023. 3. 22. TodoList 만들기(2) 화면전환 효과 페이지 넘길 때 화면전환 효과를 주고 싶었다. 화면은 React Router로 path를 변경하는 것이어서 일반적인 방법으로는 애니메이션을 줄 수가 없었다. 그래서 찾아보니 TransitionGroup 이라는 라이브러리를 찾았다. https://reactcommunity.org/react-transition-group/ React Transition Group Exposes simple components useful for defining entering and exiting transitions. React Transition Group is not an animation library like React-Motion, it does not animate styles by itself... 2023. 3. 19. TodoList 만들기(1) 코드스테이츠 개인과제로 todolist 기획하고 만들기를 하기로 했다. 기획은 3월 10일 수업시간에 만들었다. https://www.figma.com/proto/8f2QQsx7jzWjVZxxSgnxsF/TodoList?node-id=1%3A150&starting-point-node-id=1%3A150 Figma Created with Figma www.figma.com 기획을 바탕으로 만들고, 시간이 남으면 디자인까지 입혀봐야되겠다! typescript 스터디를 하고 있는데 이번 과제를 typescript로 만들어 보기로 했다. 일단 CRA 를 typescript 버전으로 하고, 쓸데없는 파일은 지우고, 필요한 라이브러리(styled-component, react-router)를 install 하고 기.. 2023. 3. 16. React로 웹페이지만들기 - 서울시 문화행사(6) 단일 필터링 구현 처음에는 가볍게 하나의 필터만 구현해봤다. api문서에 따르면 서울시 문화행사의 행사가 총 16개의 분류가 있어서 이것을 바탕으로 필터링을 구현했다. 일단 select 요소에 option으로 각각의 분류를 지정하고 상태변수를 하나 만들어 value, onChange 이벤트와 함께 연동했다.(나중에 배열로 만들어서 렌더링 해야할거같다.) handleClassChage 함수에 상태 변경과 함께 분류에 맞게 fullItem을 필터링하여 배열로 만들어서 store에 있는 전역상태변수 filteredItem에 넘겨준다. 필터링하면 현재 페이지도 1페이지로 만들어준다. const handleClassChange = (event) => { setClassification(event.target.va.. 2023. 3. 13. React로 웹페이지만들기 - 서울시 문화행사(5) 일단 저번에 만든 pagination 과 api로 받은 서울시 문화행사 데이터를 연동해서 나열해보기로 했다. store로부터 전체 데이터(fullItem)과 현재페이지(currentPage), 한페이지당 item개수(limitItems) 변수를 전달받아서 한 페이지당 6개의 item이 렌더링 될 수 있도록 코드를 작성했다. currentPage와 연계해서 index를 설정하는데 알고리즘 문제푸는 기분이었다.. // itemBox.js const ItemBox = () => { const { fullItem } = useSelector((state) => state.fullItem); const { currentPage, limitItems } = useSelector((state) => state.cur.. 2023. 3. 11. React로 웹페이지 만들기 - 서울시 문화행사(4) Pagination 버튼 구현 앞에서 상태를 저장할 store를 만들고 상태를 꺼내와서 쓰는 것을 적용시켜보았는데 이번에는 상태를 사용하면서 이벤트가 일어났을 때 액션 객체를 보내서 상태를 변경시키는 연습겸 구현하는 작업을 진행하였다. 현재 페이지 상태를 만들고 현재 페이지 상태를 변경시키는 Reducer 를 만들고 Pagination 버튼을 구현해 보았다. State, Reducer 일단 createSlice 메서드로 현재 페이지 상태와 reducer를 만들어 보았다. // itemSlice.js export const currentPageSlice = createSlice({ name: "currentPage", initialState: { value: 1 }, reducers: { prevPage:.. 2023. 3. 6. 이전 1 2 3 4 5 다음
