Age of Discovery

로컬 스토리지를 이용한 최근 본 상품 기능 구현 2탄을 시작하겠다. 전 편에서 선수들의 상세페이지에 접속했을 때 로컬스토리지에 선수들의 이름을 저장하는 것 까지 완료했다. 이젠 메인메뉴로 돌아왔을 때 우측에 최근 본 상품 박스를 띄워보자. import { useEffect, useState } from "react"; 역시나 useEffect와 useState는 필수로 import해주고 function App() { let get_local = JSON.parse(localStorage.getItem("data")); 여기서도 get_local이라는 변수에 기존에 로컬에 저장되어있던 'data'의 키를 가진 값 (즉 선수들의 이름)을 할당해준다. useEffect(() => { get_local === ..

리액트 막 배우기 시작했을 때 투두리스트를 만들어보려고 했었다. 언제나 그랬듯 LocalStorage를 이용하려 했고 결과는 실패였다. useEffect에 대한 개념이 안잡혀있었기 때문 자 물약챙기고 마나채워서 다시 시작해보자! 메인화면 우측에 우측에 간단한 div 박스를 만들어 최근 본 상품 기능을 fix시키겠다. 선수들의 사진을클릭해 상세페이지인 Detail 컴포넌트로 넘어간 후 다시 메인화면으로 돌아왔을 때 최근 본 상품의 이름이 나오게 끔 해보자 우선은 선수들의 상세페이지를 눌렀을 때 선수들의 이름을 LocalStorage에 저장하자 import { useEffect, useState } from "react"; import { useParams } from "react-router-dom"; c..

쇼핑몰 프로젝트 이전 글에서 못 다룬 쇼핑카트 수량 줄이기와 리스트 삭제를 마저 다뤄보자. let players = createSlice({ name: "players", initialState: [], reducers: { addCount(state, action) { let nums = state.findIndex( a => a.id === action.payload); state[nums].count++; }, minusCount(state, action) { let nums = state.findIndex( a => a.id === action.payload); if (state[nums].count > 1) state[nums].count--; }, deleteCount(state, action..

다음은 장바구니에 담겨 있는 선수들의 수량을 추가하거나 감소시키고 삭제하는 기능까지 구현해보자. ( 이번 포스팅은 꽤 길다 ) let players = createSlice({ name: "players", initialState: [ { id: 0, name: "Mohamed Salah", count: 1, }, { id: 1, name: "Sadio Mane", count: 1, }, ], }); 예시로 넣어놨던 Salah와 Mane는 빼주고 시작하자 let players = createSlice({ name : 'players', initialState : [ ], reducers : { } }) reducers: { } 가 생겼는데 이건 기존에 저장되어있는 initialState를 조작하는 함수를..

Redux를 이용한 장바구니 2탄 시작한다. Redux를 사용할 환경세팅이 마무리 됐으면 store.js에서 state를 만들어보자 기본 모양은 이런식이다 변수를 선언해주고 let players = createSlice({ name : 'players', initialState : 0, }) players 변수에 createSlice()를 할당해준다 createSlice안에는 이름인 name: '문자열'과 초기 state인 initialstate를 객체로 할당해줘야한다. let players = createSlice({ name : 'players', initialState : [ { id : 0, name : 'Mohamed Salah', count : 1 }, { id : 1, name : 'Sadi..

산을 오르는 이유가 무엇입니까? 산이 거기 있기에... Redux를 배운 이유가 무엇입니까? 그게 거기 있기에.. 축구선수 쇼핑몰인만큼 장바구니는 당연히 있어야겠지... 리액트의 꽃이라고 할 수 있는 redux 지금 시작~~합니다 사실 배웠다고 제대로 사용할 수 있다고 말할 수 없지만 코딩애플 센세께선 항상 배운걸 어디에 적용할지 고민하라그랬다. 어떻게 사용하는지를 배우는거지 왜 사용하는지는 직접 생각해야한다. 그동안 state를 사용할 때 자식 컴포넌트에서 물려와서 props를 이용했었다. 하지만 리덕스를 설치한 후 여러가지 세팅을 해주면 props를 일일이 가져올 필요가 없어진다. 그래서 프로젝트 크기가 어느정도 되면 redux를 사용하는게 훨씬 편하다고한다. 하지만 나는 아직 중간급 규모의 프로젝트..

서버에서 받아온 데이터를 이용해 상품리스트가 추가로 작성되는 더보기 버튼 기능을 구현해보자 const List = (props) => { return ( {props.player.name} {props.player.age} {props.player.position} ) } 기존에는 이미지를 상대경로로 지정해서 public 폴더안에 있는 png 파일을 가져왔으나 서버에서 데이터를 편하게 받아오기 위해서 직접 이미지와 객체배열로 구성된 JSON 파일을 배포하여 절대경로로 이미지를 받아왔다. .JSON파일을 이용하는 것과 웹을 배포하는 건 처음이었지만 생각보다 간단해서 놀랐다... 더보기 버튼의 소스코드는 다음과 같다. { axios.get('JSON 파일 경로') .then((result) => { let ..

다음과 같이 선수들의 사진을 클릭했을 때 Route를 이용해 각 선수들의 상세페이지로 이동하게 하고 싶다. 확장성을 위해 URL뒤에 /:id를 입력하면 /detail/'아무거나' 어떻게 입력하든 그 페이지를 보여준다. 정확히는 오류를 띄우지 않는다. detail.js파일을 생성 후 DetailPage 컴포넌트를 만들어보자 import { useParams } from "react-router-dom"; const DetailPage = (props) => { let {id} = useParams(); return( {props.player[id].name} {props.player[id].age} {props.player[id].position} 주문하기 ) } export default DetailPa..

축구선수 사진을 클릭했을 때 해당 축구선수의 상세내용을 보여주는 페이지를 띄워주고 싶다. 배운 내용을 바탕으로 구현해보자. 기존 자바스크립트에선 URL을 입력하면 그 주소에 해당하는 HTML파일을 띄워주기만 하면 됐다. 하지만 리액트는 index.html 파일 단 한개만을 쓰기 때문에 app.js파일 내에서 route를 사용한다. 자세히 살펴보자 route를 사용하기 위해서는 npm install react-router-dom@6 터미널에서 npm install react-route-dom@6 를 입력후 설 치해준다. 다음 index.js 파일 상단에 import { BrowserRouter } from 'react-router-dom'; 이 코드를 import해주고 const root = ReactDO..

{ let player1 = [...player] player1.sort((a, b) => a.name.toLowerCase() '가나다순' 이런식으로 가나다순 정렬기능을 담은 버튼을 생성했다. 하지만 일회성이었고 다시 원래대로 되돌리는 버튼을 만들고 싶었다 한마디로 토글버튼을 원했다 구글링을 동반해 이런저런 시도를 해봤지만 애당초 State변경함수는 데이터의 배열자체를 바꿔주기 때문에 그 전으로 되돌리는 기능은 찾기 어려웠다.. 꽤 오랜시간 고민끝에 삼항연산자를 이용해 각 data의 고유 id를 정렬하는방식이 낫겠다 싶었다. { let player_1 = [...player]; let player_2 ..

축구선수를 쇼핑하는 페이지 구성을 완료했다. 가장 먼저 가나다순으로 정렬하는 버튼을 만들어보자 let [player, setplayer] = useState(data); { let player1 = [...player] player1.sort((a, b) => a.name.toLowerCase() '가나다순' 버튼을 생성한 후 onClick함수를 붙여주고 player 데이터의 스프레드연산자를 player1 변수로 저장해준다 (원본을 해치지 않고 재활용하기 위함) 그리고 player1을 sort 내장함수로 정렬해준다 정렬 기준은 data의 선수들 name이다. data가 가나다순으로 정렬됐다 근데 맘에 안..

축구선수를 장바구니에 담는 쇼핑몰을 만들어보자 우선 서버와 DB는 다룰줄 모르기 때문에 (node.js 후딱 배워야겠네) 데이터는 객체로 구성된 배열을 자바스크립트 파일에 저장 해두었다 이 데이터를 자유자재로 다룰 수 있어야 다음에 서버와 연동했을 때도 수월하게 작업할 수 있을 것이다 그동안 수강했던 코딩애플 센세의 강의를 토대로 내가 재밌게 즐길만한 쇼핑몰을 만들어보자 let data = [ { id : 0, name : 'Mohamed Salah', age : '1992년 6월 15일', position : 'Right-wing' }, { id : 1, name : 'Sadio Mane', age : '1992년 4월 10일', position : 'False-nine' }, { id : 2, nam..