WEB🛫/React 2

[React] react<->django 회원가입,로그인 기능 만들어보기

1. UI 및 UX 설계 피그마를 사용할까 하다가 빠르게 구현하고자 카카오 오븐을 통해 만들었다. 글자들이 좀 짤린 부분이 있는 것 같은데 이제 봤네... 다음번에는 현업에서 더 자주 사용된다고 하는 피그마를 사용할까 한다. 2. 실제 구현 / FE 🤔어려웠던 점 로그인 후 회원정보를 저장할 때 redux를 사용했었는데 redux는 새로고침하면 초기화된다는 치명적인 단점이 있었다. 예를 들어 로그인을 하게 되면 TodoList페이지에 's TodoList이 부분에서 가 userID로 설정을 해놓은 것인데 redux만을 이용해 유저정보를 저장하니 새로고침시 userID를 찾을 수 없는 상태가 되었다. 💥해결방안으로 로컬스토리에도 유저정보를 저장하기로 하였다. 이를 통해 새로고침 후에도 로컬 스토리지에 담겨..

WEB🛫/React 2021.09.08

[React] input태그로 사진 파일 여러개 업로드하기 + 브라우저에서 미리보기 가능하게 만들기

문제점 react에서 type=file인 input 태그에 사진을 넣고 그 결과물을 console창에 찍어보면 아래와 같이 여러 정보가 나오는데 정작 미리보기할 때 띠울 로컬상대경로는 안보임! react에서 자동적으로 보안상의 이유로 상대경로를 블러처리해버려서 그럼! 해결방안 그래서 우리는 URL.createObjectURL() 이라는 친구를 이용해서 상대경로를 만들어주면됨! const nowImageUrl = URL.createObjectURL(내가 방금 올린 파일) 한 후 nowImageUrl을 뽑아보면 아래와 같이 경로가 들어간 blob type의 친구가 딱 하고 보임! 그래서 이 친구를 이미지 미리보기 할 때 띄워주면 됨 응용해서 만든 페이지 * input 태그는 label을 이용해서 css를 먹..

WEB🛫/React 2021.08.10