솔적솔적

오늘의 글은window.location.reload()가 위험할 수 있는 이유와,React 프로젝트에서의 더 좋은 새로고침 전략에 대해서 정리해보고자한다. 버튼 클릭 시 “새로고침”이 필요하다는 요구사항을 종종 만납니다. 흔히 떠올리는 건 바로window.location.reload();하지만, 구현하면서 항상 생각해야한다.이 코드가 우리 프로젝트에 적합한 코드인가? 왜 섣부른 전체 리로드가 위험할까 🤔상태 손실이 되어도 괜찮은가: 메모리 기반 상태(React state, Zustand 등 사용 시) 전부 초기화된다.현재 참여 중인 프로젝트는 i18n을 적용해 한국어/일본어 다국어 선택 기능을 제공하고 있는데,단순히 window.location.reload()를 사용하면 이 상태들도 모두 초기화..

React를 사용하려면 Redux의 개념과 어떻게 사용하는지에 대해서 알아야한다는데, 설치 과정이 요리갔다 저리갔다여서 간단명료하게 설치방법과 셋팅, Redux를 왜 쓰는지에서 알아보고자한다. 만들려는 것은 Redux를 이용하여 장바구니만들기이다. (목표목표~) | 페이지 이동 경로 설정 우선 페이지 이동할 수 있도록 라우터 경로 설정, | 장바구니인 Cart.js 컴포넌트 생성 Cart.js 컴포넌트를 만들기 ( 디자인은 우선 간단하게 bootstrap 라이브러리의 table 을 사용) import {useState, memo, useMemo} from 'react'; import {Table} from 'react-bootstrap';..

오늘은 리액트에서 Ajax의 요청방법은 어떻게 하나? 에대해서 알아보고자합니다만, 그전에 Ajax에 대한 개념과 Ajax를 사용하려할 때 알아야 할 요청방법들에 대해서도 살펴보도록 하겠습니다. 자, 그럼 먼저 오늘 목표로 하려하는 Ajax, 요녀석은 뭘까요? | Ajax 란? Ajax란 Asynchronous JavaScript and XML의 약자로 웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만을 갱신할 수 있는 것입니다. Ajax를 이용하면 백그라운드 영역에서 서버와 통신하여, 그 결과를 웹 페이지의 일부분에만 표시할 수 있습니다. 예를들어, 홈페이지에 3영역으로 나눠져있습니다. 내가 검색하고 싶은 것을 검색할 수 있는 검색 영역, 검색해서 나오는 목록 수(조회영역) 검색해서 나온 목..

| Lifecycle이란 예를들어서 detail페이지있잖아요, 화면에 detail페이지가 보이는 순간 이 때를 페이지에 장착이 된다. 또는 마운트(mount)된다라고도하고, 컴포넌트 안에서 state 조작을하면 update되는 과정도 있고, 컴포넌트가 쓸모가 없어지는 경우, 이 경우 컴포넌트 제거되는데 이게 unmount 라고한다. 이런 살아나서 죽는 생물같이 리액트에도 삶의 주기가 있다는 것. mount update unmount 이 라이프사이클을 알고 있다면, 중간중간 내가 코드에 간섭을 하여, 특정코드를 실행할 수 있다. update될 때 특정 코드 실행할 수 있고, unmount될 때 중간에 코드를 넣어 실행할 수 있다는 것이다. 그리고 function들 안에서 기본적으로 쓸 수 있는 함수, us..