Frontend (16) 썸네일형 리스트형 🚨Redux-Persist 라이브러리 사용해서 로그인 토큰 영구저장하기 1. 문제 상황프로젝트에서 로그인 후 토큰과 로그인 유형을 리덕스에 저장했는데 새로고침을 하면 초기화가 되어 다시 로그인을 해야 했다.2. 해결 방법찾아보니 리덕스 스토어에 데이터를 영구적으로 저장할 수 있는 Redux-Persist 라이브러리를 사용했다.persist는 지속하다, 영속하다 라는 뜻이다. 데이터를 영구적으로 저장할 수 있도록 하는 것이다.이것이 가능한 이유는 Redux-Persist 라이브러리가 LocalStorage와 SessionStorage의 storage를 redux에서 사용하게 해주기 때문이다.이중 LocalStorage는 데이터를 영구적으로 저장하기 때문에 이곳에 저장하게 만들어주면 리덕스 slice를 영구적으로 저장할 수 있다.persist-redux는 어렵지 않다. 우선 프.. 공연 통계 오픈 api 활용해보기 처음에 내가 오픈마켓을 기획하면서 만들고자 한 서비스는 뮤지컬 굿즈 판매 마켓이라는 정체성을 가져가면서 배너 부분에 뮤지컬 주간 랭킹과 공연 정보도 함께 보여주고 싶었다. 뮤지컬, 연극 등 공연과 관련된 공공 API를 제공하는 곳은 공연예술통합전산망이라는 홈페이지였는데 아쉽게도 예매 랭킹은 제공되지 않았다. 당시에는 공연 목록, 공연장 목록,지역별 판매액 등 다양한 정보가 제공되었지만 예매 순위는 전혀 제공이 되지 않아서 원하는 베너 디자인을 포기하고 있었다.그러던 와중 메일을 하나 받았다.이 제목을 보고 설마 내가 원하는 데이터가 추가된건가?! 싶어 두근두근하며 확인했다. 완전 운이 좋게도 예매 통계가 신설되어서 일자별로 통계 확인이 가능했다(주간, 월간도 당연히 가능)어떻게 이 타이밍에 내가 원하는 .. Atomic Design Pattern 사용기 올해의 첫 게시물을 어떤 것으로 할까 하다가 개인프로젝트에 도입해봤던 Atomic Design Pattern(아토믹 디자인 패턴)에 대한 얘기를 해보기로 했다.아토믹 패턴은 많이 들어봤을 법한 디자인 패턴이지만 혹시 아토믹 패턴에 대해 잘 모르거나 도입을 고민중인 사람들이 있다면 이 글을 읽어보시길 추천합니다! 실제로 개발하면서 느낀 점을 담았기에 도움이 될 것 같습니다. 1. 아토믹 디자인 패턴이 뭔데? 👀atomic은 '원자의' 라는 뜻으로, 컴포넌트를 최소한의 단위로 나눠 개발하는 패턴을 말한다.편하게 아토믹 패턴으로 부르도록 하겠다😀다음 사진처럼 atoms, molecules, organisms, templates 들이 모여 하나의 페이지를 완성한다. atoms는 원자 단위, 즉 더이상 나.. react-hook-form 에서 useFormContext 사용하기 (react form에서 props driiling을 막아보자) 저번에 react-hook-form을 사용해서 회원가입과 로그인 폼을 변경했었는데 입력 필드의 유효성 검사라던지, 전송 데이터를 자동으로 객체화해주는 점 등은 너무나 편리하고 맘에 들었다. useForm 적용하는 법이 궁금하신 분들은 이전 글을 참고해주세용https://coding-frog.tistory.com/25 그렇지만 기존의 문제였던 props drilling의 문제가 여전히 계속되고 있었다 ㅠㅠ useform으로 변경한 후에 변경하는 값들을 일일히 state로 저장할 필요는 없었지만 register 함수와 errors 객체는 모든 컴포넌트에서 공유하기 위해서 다 내려보내줘야 했기 때문에 이렇게 지저분한 코드가 완성되었다.이렇게 되면 props drilling 면에서는 이전 코드와 별다를게 없었다.. React Hook Form 라이브러리 사용해보기 - 회원가입과 로그인 폼을 쉽게 만들어보자(feat : 유효성 검사) 시도하게 된 이유내가 만들고 있는 회원가입 페이지에는 꽤 많은 입력 필드가 있다.여기에 판매자 회원가입 필드까지 하면 관리해야 하는 필드가 두배로 늘어난다.뭐 이정도는 대부분의 사이트에서 받고 있는 유저정보이니까 절대 과하지는 않다. 아니 실제 서비스되는 페이지는 여기에 뭐 주소나 별명같은것까지 더 입력해야 하지 않은가? 그래서 이정도 관리하는건 별거 아니라고 생각했다.근데 막상 이걸 일일이 useState로 관리하는 것은 생각보다 번거로운 일이었다ㅠ각 항목마다 유효성 검사를 해야하니까 그에대한 state도 늘어날 뿐더러 나는 아토믹패턴으로 프로젝트를 만들고 있기 때문에 모든 인풋창이 각기 다른 컴포넌트에 있어서 props로 state를 일일이 보내주는 식으로 관리해야 했다. 대충 봐도 이건 아니다 싶.. 리액트 회원가입 시 유저 비밀번호 일치여부 검증 오류 문제상황리액트로 오픈마켓을 만들다가 회원가입 페이지에서 오류를 발견했다. 비밀번호 확인란에서 비밀번호와 같은지 여부가 제대로 반영이 되지 않았다.이 사진에서 보면 비밀번호 확인란에서 '비밀번호가 다릅니다.' 라고 나오는 것을 확인할 수 있다. 이건 비밀번호 확인창에 아무것도 입력하지 않았기 때문에 당연히 정상적이다. 그리고 여기서는 비밀번호와 동일하게 입력하여서 '비밀번호가 확인되었습니다.' 문구와 함께 체크표시가 나타난다.여기까지는 정상적으로 작동한다. 그런데 여기서부터 문제인것은 비밀번호를 수정하려고 할 때이다. 비밀번호를 수정하게 되면 비밀번호확인란에도 비밀번호가 다르다는 문구로 바뀌어야 정상인데 변함없이 그대로인 것을 볼 수 있다. 다만 비밀번호 확인란을 바꾸는 것은 언제든 정상적으로 작동한다... 리액트에서 동적인 UI 만드는 방법 리액트에서 모달창이나 좋아요 버튼같이 사용자가 클릭할 때마다 상태가 변화하는 UI를 만들어야 하는 일이 많다. 자바스크립트에서는 이런 경우 DOM을 이용하여 html을 생성하거나 style을 토글로 관리해주는 방식으로 구현하지만 리액트에서는 그런 개념이 아니기 때문에 헷갈리는 경우가 있다. 따라서 오늘은 동적인 UI를 어떻게 만들어야 하는지 예시를 통해 알아보자! 나는 버튼을 누름에 따라 모달창이 나타나게 하려고 한다.1. 만들고자 하는 UI의 html,css 마크업을 해놓는다.function App() { return ( 모달 보여주세요 모달창입니다 );}먼저 만들고자 하는 UI의 마크업 먼저 해준다. 나는 '모달 보여주세요' 버튼을 누르면 모달.. 자바스크립트 이벤트 실행 후 페이지가 reload 되는 현상: button에 type 지정해라.. ✅문제(problem)멋사 과제를 하던 중 당황스러운 일이 발생했다. 버튼에 클릭 이벤트를 걸어주었는데 이벤트가 실행되고 나서 바로 reload 되면서 변경사항이 말짱 도루묵이 된 것이다. 왜 이런걸까?? ✅해결(solving)검색해보니 form 요소 안에 button 이 들어갈 경우, 타입 지정을 따로 해주지 않으면 자동으로 submit으로 설정된다고 한다. button에 타입을 꼭 넣어줘야 하는 것이다! ✅학습(learn)form 요소 안에 button 이 들어갈 경우, 타입 지정을 button 으로 해주지 않으면 자동으로 submit 으로 지정된다. 이전 1 2 다음
