Age of Discovery

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

리액트 공부하다보니 말랑말랑한 바닐라 JS가 그리워져서 아주 간단한 랜덤이미지게임 하나 만들어 봤다. 호스팅 한 후 활동하고 있는 리버풀 팬카페에 배포했는데 반응이 아주 뜨거웠다 ^^ (그 이유는 아래에서 설명하겠다) . 멈춤 버튼을 누르면 랜덤으로 돌아가는 이미지가 멈추면서 한 사진이 고정되는 흔하디 흔한 랜덤게임이다. HTML과 CSS는 간단하니 생략하고 JS 코드를 첨부하겠다. const button2 = document.querySelector('.color-10'); const real_img = document.querySelector('.real-img'); const p_tag = document.querySelector('.div-p'); CSS로 꾸며준 버튼과 img태그 그리고 버튼을 ..

축구선수 쇼핑몰 프로젝트를 진행하다 JSON파일에 대해 알아둬야할 필요성을 느껴 포스팅한다. JSON이란? 1) Java Script Object Notation 의 약자이다. 2) json은 단순한 데이터 포멧이다. 데이터를 표시하는 방법일 뿐이다. 3) json을 쓰는 이유 : json파일이 가지고 있는 데이터를 받아서 객체나 변수에 할당해서 사용하기 위함이다 4) json의 구조 1. Object (객체) 2. Array (배열) 경험상 직접 보는게 훨씬 이해가 쉽다. 이런 모양이다. VS코드 내에서 파일을 생성하고 객체나 배열의 양식을 갖춘 뒤 .HTML .JS 등 확장자를 지정해주는 것 처럼 data1.JSON 이렇게 확장자를 JSON으로 지정해주면 끝 그럼 어디에 쓰느냐? 서버와 통신할 때 주..

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

개발자가 되기로 결심한 이상 수만번, 수십만번의 에러를 필연적으로 겪을 수 밖에 없다. ​ 에러는 오류를 미연에 방지하기 위한 좋은 도구이자 친구다. ​ 해결하는 방법을 익히고 즐기자

다음은 useEffect에 있는 clean up 기능을 알아보자 useEffect(()=>{ console.log('through the wind') return ()=>{ console.log('walk on') } }) useEffect 함수 내에 return 함수를 생성한 후 코드를 작성하면 외부요인에 의해 컴포넌트가 생성되거나 재렌더링 될 때 'through the wind'라는 문구가 출력이 되기전에 'walk on'이라는 문구가 출력 된다. walk on through the wind 가 차례로 console에 출력이 되는것이다. 이 clean up기능은 useEffect 바로 밑의 함수가 실행되기전에 기존에 있던 실행코드를 정리하는 용도로 쓰인다. 예를들어 useEffect(()=>{ let..

지난 게시글에서 포스팅했던 내용을 직접 실행해보자 function App() { let [sort_fun, setSort] = useState('가나다순'); useEffect(() => { { sort_fun == '가나다순' ? console.log('가나다') : console.log('원래대로') } }) { // 리스트를 '가나다'순과 '원래대로'순으로 기능하는 토글버튼 }}>{sort_fun} } 필요하지 않은부분은 생략했다 버튼을 눌렀을때 state가 '가나다'순으로 변경됐을 땐 '가나다'가 콘솔에 찍히고 '원래대로'일 땐 '원래대로'가 콘솔에 찍히게 useEffect를 작성했다. 우측 콘솔창에 정상적으로 출력된다. 맨 처음 가나다가 찍혀있는 이유는 useEffect 안에작성한 코드가 컴포넌..

컴포넌트는 라이프사이클이 존재한다. 거창한건 아니다 크게 3가지로 나눌 수 있는데 1. 생성된다. (mount) 2. 업데이트된다. (update) 3. 삭제된다. (unmount) 각각의 이벤트가 실행될 때 구현하고 싶은 코드를 작성하는 것을 useEffect라고 한다. 바로 컴포넌트를 살펴보자 import {useState, useEffect} from 'react'; function DetailPage(){ useEffect(()=>{ console.log('Hello World') }); return (생략) } 여기선 DetailPage 라는 컴포넌트가 페이지에서 처음 렌더링이 되거나 혹은 State 조작에 의해서 컴포넌트 내용이 변경될 때 useEffect 함수 안의 코드가 실행된다. 위 컴포..

다음과 같이 선수들의 사진을 클릭했을 때 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..

let [player_name, setplayer_name] = useState(['살라', '마네', '디아즈']) let [player_age, setplayer_age] = useState(['1992년 6월 15일', '1992년생 4월 10일', '1997년생 1월 13일']) let [footed, setfooted] = useState(['Left-Footed', 'Both-Footed', 'Right-Footed']) 역시나 마찬가지로 리스트로 사용할 state를 작성한 후 이번엔 input text박스에 글을 입력했을 시 배열을 추가해서 리스트 맨앞에 생성되게 해보자 { let input_text = document.querySelector('.input-text'); if (input_..

let [player_name, setplayer_name] = useState(['살라', '마네', '디아즈']) let [player_age, setplayer_age] = useState(['1992년 6월 15일', '1992년생 4월 10일', '1997년생 1월 13일']) let [footed, setfooted] = useState(['Left-Footed', 'Both-Footed', 'Right-Footed']) 전 게시글과 마찬가지로 State를 4개 생성한 후 list로 작성하여 화면에 띄워주고 props파라미터를 넣어 Modal창을 만든 후 띄워줬다 리스트의 각 타이틀을 클릭했을 때 모달창의 상세정보도 클릭한 선수들의 내용으로 변경하고싶다 지금은 변경이 안된다. 조작해보자! le..