localStorage5 바로구매 버튼 클릭 시 localStorage에 저장 후 구매 페이지에서 정보 불러오기 개인적으로 이번 프로젝트의 중요 기능 중 하나는 바로구매라고 생각한다. 재미를 소비하기 위해 오는 end user의 입장을 생각했을 때 여러 물건을 사기보단 배송료를 지불하더라도 하나만 살 가능성이 높다고 생각해서 넣은 기능이었다. 하지만.. 우리는 바로구매 로직에 제대로 생각하지 못했고 마감 이틀 전 바로구매에 대해 백-프론트 연결고리가 없다는것을 알게 되었다. 그리고 마감 전날 멘토님께 바로구매 로직의 경우 프론트가 진행하는 것이라는 얘기를 듣게 되었다.. 뒤늦게 다른 홈페이지의 바로구매 버튼을 눌러보니 item이 localstorage에 저장되는 것을 볼 수 있었다. 그렇게 급하게 진행했던 기능이었고 아이디 저장을 localstorage에 했어서 이것 또한 쉬울거라고 생각했는데 아이디저장과 다르게 .. 2023. 7. 18. 토큰 유무에 따라 로그인/로그아웃 구현하기 프로젝트를 시작하기 전 로그인/회원가입을 백엔드와 함께 구현해보았지만 백엔드에서도 jwt 토큰 발급을 제대로 구현해보지 못해 토큰 관리는 이번 프로젝트에서 처음 해보았다. 그래서 이번 포스팅에는 토큰 관리와 그에 따른 ui가 바뀌는 것에 대해 이야기해보려고 한다. response로 오는 token을 localstorage에 저장하기 백엔드에게 post method로 로그인 페이지에서 email과 password를 보내면 백엔드 쪽에서 회원가입이 되어있는 사람이라면 로그인 성공 메세지와 함께 jwt 토큰을 보내준다. 이 때 개발자에 따라서 status code 또는 메세지 또는 두개 다 없이 토큰만 보내줄 수도 있다. 토큰이 localstorage에 들어오면 로그인이 된 상태로 유지된다. login.js .. 2023. 7. 15. 간단하게 Sign In 구현하기 로그인 페이지로 생애 첫 프로젝트를 시작했다. 로그인 페이지는 기존에 하던것과 다른 부분이 GET 요청 뿐이라서 어려움없이 진행할 수 있었던 것 같다. 기획 단계에서 로그인 페이지에 아이디 저장을 하자고 해서 localstorage를 이용해 아이디를 저장해두고 그 값을 defalut value로 불러와 구현을 하였다. 하지만 실제 프로젝트에는 제외하게 된 이유가 2가지가 있다. 첫번째는 추가로 defalut value에 있는 값과 한 글자라도 바뀌게 되면 아이디저장 체크박스가 해제되도록 하고 싶었는데 구현하기가 너무 까다로웠다. 두번째로는 defalut value로 관리를 하다보니 백엔드에게 데이터를 보낼때 인식을 못해서 값이 안 가는것이었다. 두번째 이유로 결국 아이디저장을 추후에 구현하는 것으로 했고.. 2023. 7. 11. [위코드] 4주차 회고록 프로젝트 팀 발표 후 첫 주를 시작했다. 주말동안 회의를 엄청 했는데 1명만 다른의견을 내더라도 모두가 같은 의견이 될 수있게 설득하는 과정이 참 어렵고 길게 느껴졌다. 다른사람의 의견을 바꾼다는 것도, 그 과정이 걸림돌 없이 좋게 지나가는 것도 어려웠다. 이벤트 공부를 하긴 했지만 모두 적용해보지는 않았는데 이번에 hover로 사진을 바꾸는 것을 구현해야하는 순간이 왔는데 mouse over, mouse out event를 처음으로 써보게 되었다. 렉이 걸린것처럼 어떨 땐 되고 어떨 땐 안되고 왜 인지 이유를 못 찾다가 기존에 사용하던 방법은 부정연산자를 썼는데 그때와는 달리 이번엔 over하면 false, out 하면 true로 고정되어있는 값인데 기존처럼 사용하려고 하니 자꾸 오류가 나는 것이었다... 2023. 7. 6. fetch 메소드로 백엔드랑 소통하기 이번주 fetch 함수를 배우고 mock 데이터와 상수 데이터를 만들어서 적용해보는 과제를 해보았는데 백엔드와의 직접적인 소통은 생각보다 어려웠다... 그리고 아직도 리액트가 적응이 안돼서 이게 되네...? 하고 있는 중이라 더 어려웠다. 바닐라자바스크립트로 할 때는 DOM을 직접 조작해야해서 뭔가 꼬고 또 꼬아 다가가는 느낌이었는데 리액트는 그냥 inputValue의 name 값을 가져오면 된다니...! 아직도 적응이 안된다. 리액트로 첨부터 배웠으면 더 쉽게 생각할 수 있었을까 하는 생각도 든다. fetch 함수의 첫번째 인자는 백엔드에게 받는 API 주소이며 두번째는 옵션객체이다. 옵션 객체 안에 method가 GET이라면 옵션객체 전체가 생략 가능하다. 오늘은 로그인과 회원가입 기능이기때문에 PO.. 2023. 6. 22. 이전 1 다음
