ijooha 님의 블로그

'포켓몬 도감 사이트 만들기'로 상태 관리 연습하기GitHub 바로가기포켓몬 도감 사이트 바로가기트러블 슈팅         실습 내용 세가지 방식(props-drilling, contextAPI, RTK)으로 만든, 다양한 포켓몬을 확인할 수 있는 포켓몬 도감 사이트이다.모달을 통해 포켓몬의 자세한 정보를 확인할 수 있고, 원하는 포켓몬을 잡거나 놓아줄 수 있다.• 포켓몬을 눌러 포켓몬 상세 정보 확인• 원하는 포켓몬 '잡기' 버튼을 클릭하여 대쉬보드에 포켓몬 추가• 잡은 포켓몬을 클릭하여 포켓몬 놓아주기 헷갈렷던 세가지 방식 모두를 써볼 수 있어서 좋았고, 역시 props-drilling은 복잡하고 싫다 !         컴포넌트 구성 App├── Home├── Dex│ ├── DashBoard│..

페이지 링킹하기        URL Search Params() `URLSearchParams()`는 기본 내장 함수로, 몇 가지 메소드를 사용하여 URL을 컨트롤할 수 있다.  사용법 .get(파라미터)특정 파라미터 값을 가져온다.new URLSearchParams("popup=open").get("popup") //open//응용하기const params = new URLSearchParams(window.location.search); //현재 와있는 주소, "....id=juha"console.log(params.get("id")); // 'id' 파라미터의 값, "juha"를 가져옴 .set(파라미터, 값)특정 파라미터 값을 설정한다.const params = new URLSearchParams..

Redux 상태를 활용해 Toast 알림 문제 해결하기         문제 상황 ⚠️ 버튼에서 toast()를 실행해야 하는데, Dex 페이지(상위 컴포넌트)에서 렌더링되므로 알림이 뜨지 않았다.처음에는 버튼이 클릭됐을 때 toast가 실행되도록 했더니, 버튼 위에 토스트 알림이 뜨는 대참사..(포켓몬 덱스 프로젝트를 하고 있었어서 버튼이 150개였음.)         원인 분석 🧐 toast()는 Dex 페이지에서 실행되지만, 버튼 클릭 시 상태 변경이 Dex에 즉시 반영되지 않는다.어떻게 해야될진 모르겠지만 우선 상태를 관리해서 정보를 넘겨줘야겠다고 생각했다.        해결 과정 💦 그래서 state에 alert: false를 추가했다.이후 버튼을 눌렀을 때 특정 조건(슬롯이 가득 찼거나, 이..

useContext 알아보기         useContext란? useState는 데이터를 최상단 컴포넌트에서 생성한 후 props로 자식 컴포넌트에 계속 전달해야 한다.이를 props drilling이라고 한다. 이를 해결하기 위해 등장한 것이 useContext다.전역 상태 관리 도구는 아니지만, 특정 상태를 전역처럼 쉽게 공유할 수 있도록 도와준다. createContext, useReducer, Provider 등을 활용해1. context 폴더에서 상태를 관리하고2. 필요한 컴포넌트에서 useContext를 통해 가져다 쓰면 된다.           context.js 크게 다섯 가지 단계로 나뉜다.액션 정의초기값 생성reducer 함수createContextProvider  01 액션 정의액..

useRef 알아보기         useRef란? state와 마찬가지로 특정 값을 저장하지만, state와 다르게 값이 변경되어도 컴포넌트가 다시 렌더링되지 않는다. 즉, 렌더링과 관계없이 내부에서 값을 계속해서 유지하는 역할을 한다.          코드 형태 const ref = useRef(초기값); // { current: 값 } 형태          사용 예시 01 기본 예시import { useRef } from 'react';function Counter() { const countRef = useRef(0); const increase = () => { countRef.current += 1; console.log(countRef.current); }; return ..

Styled Components 알아보기          Styled Components란? JavaScript 파일 내에서 CSS를 작성할 수 있도록 도와주는 라이브러리다.컴포넌트 단위로 스타일을 관리할 수 있어서 유지보수가 쉽고 가독성이 좋다.          세팅하기 01 패키지먼저, 사용하고자 하는 프로젝트 터미널에서 패키지를 설치한다.yarn add styled-components   02 확장 프로그램 추가왼쪽 블럭처럼 생긴.. 확장프로그램 설치하는 곳으로 가서'VScode-styled-components'를 검색한 후 설치한다.          사용하기 01 Importimport styled from 'styled-components';사용할 컴포넌트의 상단 부분에서 styled-compo..

babel과 webpack, plugin 알아보기맨 밑에 한눈에 보기 정리 있다!  CRA(Create React App), Vite를 사용하지 않고 애플리케이션을 구성하는 방법을 정리해 보려 한다.위 두가지는 간편하게 자동으로 모든 것을 설정해주지만 커스터마이징에 제약이 많아 실무에 한계가 있다고 함        초기 설정 01 파일 만들기먼저 프로젝트 폴더를 만든 후, 몇가지 파일을 세팅해준다.index.htmlsrc > App.jssrc라는 폴더 안에 App.js 파일  02 react dom 세팅html 파일 안에 root div를 넣어준 후CDN을 통해 react와 reactDOM을 로드한다. (설치 없이 React를 사용할 수 있다.)          Transpiler 프로그래밍 언어의 코드..

useState로 부모 자식 컴포넌트 상속 알아보기  우선 html을 보면 자식 부모 요소들이 있다.그와 마찬가지로 컴포넌트도 부모 자식, 형제 관계들이 있는데파일을 따로 만들어 관리하고 (리액트 장점, 유지 보수가 용이)그 파일들을 부모 자식 간 연결을 시켜주면 된다.(형제끼리 연결하고 싶다면, 부모에게 거쳐서 다른 형제로 이동)         예시 먼저Mom이라는 부모 컴포넌트와Child라는 자식 컴포넌트,Sister라는 형제 컴포넌트가 있다고 가정해보자.** 컴포넌트를 쓸 때는 항상 첫 글자가 대문자다. 파일명도 마찬가지 Mom.jsxfunction Mom() { const sendToChild = 'from mom, to child' //html return ( ..

Hook 알아보기추가로 보면 좋을 링크        Hook? Hook을 사용하면 컴포넌트에서 더 많은 react 기능을 사용할 수 있다.react hook은 정말 다양한데, 가장 중요하고 많이 사용하는 두가지 (state hook, effect hook)을 알아보겠다.         State Hook 전 게시글에서 얘기한 바 있는 그 state가 맞다.State를 통해 컴포넌트는 사용자의 입력과 같은 정보를 기억할 수 있다.전 게시글에서 소개한 사이트의 경우 나라명과 메달 개수를 기억하도록 했다.const ['상태 값', '상태를 변화시키는 함수'] = useState('초기값')상태를 변화시키는 함수를 통해 변하는 값을 계속 저장하고, 상태값으로 이를 렌더 등으로 사용한다.         Effec..

개발은 대부분 협업이 디폴트이기 때문에 주석을 남기듯 커밋에 대한 메시지를 남겨 어떤 부분이 바뀌었는지 공유해야 한다.  Commit Message의 구조type: subject //type: 어떤 의도인지 명시 //subject: 마침표 없이, 동사를 가장 앞에 두고, 첫 글자는 대문자body //긴 설명이 필요한 경우, 무엇을 왜 했는지footer //issue tracker ID를 명시하고 싶은 경우에 작성  type어떤 의도인지 명시feat새로운 기능 추가fix버그 수정docs문서의 수정style코드의 스타일 변경 (코드 정리)refactor코드를 리팩토링test테스트 관련한 코드 추가 / 수정chore코드 수정 없이 설정 변경build빌드 파일 수정ciCI 설정 파일 수정perf성능 개선rena..