1) 홈 페이지에 순위, 오늘 날짜 게시글 출력 const todaysList = board.filter(item => item.date === formattedDate) const todaysTopThreeList = todaysList.sort((a, b) => b.likesAcountId.length - a.likesAcountId.length).slice(0, 3) 2) 현재 위치 기준 게시글 출력 const list = useSelector(state => state.board.board) const nearList = list.filter(item => item.loactionCity === nearCity && item.loactionGu === nearGu) const { boardId, ..

React를 사용한 개인 프로젝트를 제작하려고 한다. 사용할 기술 스택은 HTML, Styled-components, React이고 Router, Redux를 이용해 페이지와 변수, 함수를 전역으로 관리할 것이다. 1) 주제 선정일반적인 웹 페이지를 따라 하거나 참고하여 웹을 만드는 것이 아닌 새로운 아이템으로 모바일에서 사용 가능한 웹을 만들고 싶었다. 안드로이드, IOS를 모르니 스마트폰 브라우저에서 사용 가능하게 만들고자 한다. 2) 아이템2-1) 목적매일 아침 유저들의 하늘 사진을 공유하는 것이 주목적이다.2-2) 서브 콘텐츠회원가입을 하면 회원마다 성장시킬 수 있는 나무를 받게 되는데 아침마다 하늘을 찍은 사진을 업로드하여 공유하면 그 회수에 따라 나무가 점차 성장한다.2-3) 공유사진을 업로드..

PC 버전으로 만들었던 팀프로젝트 웹 페이지를 모바일로 수정한 뒤 github를 통해 서로 각자의 브렌치에 저장하여 merge 하는 방법으로 협업했다. https://github.com/yeonhub/TP-EZtour_vanillaJS_mobile GitHub - yeonhub/TP-EZtour_vanillaJS_mobile: [팀 프로젝트] 여행사 홈페이지 제작 (모바일 ver) [팀 프로젝트] 여행사 홈페이지 제작 (모바일 ver). Contribute to yeonhub/TP-EZtour_vanillaJS_mobile development by creating an account on GitHub. github.com main 브렌치에서 테스트를 한 뒤 수정 사항은 project를 통해 관리하였다...

const App = () => { return ( ); }; Router와 Redux를 이용해서 게시판 페이지를 구현했다. notice와 customer는 주소 뒤에 페이지 번호가 붙도록 Route를 구성했고, header와 footer는 항상 나오도록 Layout에 넣었다. { [...data] .sort((a, b) => b.id - a.id) .map(item => ) } 게시글들이 최근 번호가 위로 오도록 id에 sort를 하여 내림차순으로 출력되도록 했다. {id} {title} {date} 게시판의 제목을 클릭하면 해당 글의 내용이 출력되는 페이지로 이동하게 된다. {title} {content} {date} navigete('/notice')}>목록으로 게시글에서 목록으로 버튼을 클릭하면 ..

{ cart.length === 0 ? 장바구니 비어있음쇼핑하러 가기 : 총 개수 : {cart.length} 총 금액 : {totalPrice.toLocaleString('kr-KR')} } Redux, Router를 이용해서 장바구니 페이지를 구현했다. 1) Router 구조const App = () => { return ( ); }; export default App;const Layout = () => { return ( ); }; Layout, Outlet을 이용해서 header와 footer를 항상 표시되게 했다. Home엔 아이템들이 출력된다. 2) 장바구니 버튼 주문하기 버튼을 클릭하면 버튼이 취소하기로 변경이 되고 우측 상단에 장바구니에 담긴 총 아이템 개수를 나타내준다. Cart / {..

https://yeonhub.github.io/AM-module-reactReact Appyeonhub.github.io React로 구현했던 직원명단 관리 페이지를 redux를 사용해 전역으로 변수, 상태, 함수를 관리할 수 있도록 했다. 1) 데이터 관리 기존 javascript나 react에선 직원 명단의 data를 js 파일로 따로 저장해 관리했지만 redux를 사용할 땐 관리자가 있는 staffSlice.jsx에서 관리했다.const initialState = { // 명단 추가 컴포넌트를 보이기 / 숨기기에 사용하는 상태변수 isADD // input으로 입력받는 값들의 키인 name, img, job, tel의 초기값 설정 isAdd: false, name: '', img: '', job: ..

1) 숫자 증감 const Counter = () => { const { counter } = useSelector(state => state.counterR) const dispatch = useDispatch() return ( 카운트 : {counter} dispatch(minus(10))}>-10 dispatch(minus())}>-1 dispatch(plus())}>+1 dispatch(plus(10))}>+10 ); }; 화면에 출력될 Counter 컴포넌트이다. 버튼이 총 4개 있는데 두 버튼은 전달해 주는 매개변수가 있고 나머지 두 버튼은 없다. import { createSlice } from '@reduxjs/toolkit' const initialState = { counter: 0 ..

지난 시간에 Reducer에 대해 간단히 알아보았는데 오늘은 Redux를 사용해 몇 가지 예제를 만들어 보았다. context와 reducer 처럼 상태나 변수를 전역으로 관리할 때 사용하는데 Redux는 기본 내장되어 있는 기능이 아니라 라이브러리를 추가해 줘야 한다. https://redux-toolkit.js.org/ Redux Toolkit | Redux Toolkit The official, opinionated, batteries-included toolset for efficient Redux development redux-toolkit.js.org 1) Redux 라이브러리 추가 yarn 혹은 npm으로 redux 라이브러리를 추가해 준다. 2) Redux DevTools (크롬 확장) ..

context 예제 useReducer 1) context 예제 1 import { createContext, useState } from "react"; export const ChangeColorContext = createContext() const ChangeColorProvider = (props) => { const [color, setCoolr] = useState('tomato') const onColor = (color) => { setCoolr(color) } return ( {props.children} ); }; export default ChangeColorProvider; ChangeColorProvider 안에 들어올 컴포넌트에서 사용할 props를 관리할 관리자를 만들어 준다..