TIL (30) 썸네일형 리스트형 코드 리팩토링 어제 회원가입 + 로그인 + 로그아웃을 구현하였는데 기본적인 코드로 구현한거라 내가 짠 다른 코드와 조립하기 위해 코드를 전반적으로 수정하였다.(그 과정에서 여럿 오류가 발생했지만.....) 우선 아이디와 비밀번호로 로그인을 시도할 경우 res에서 토큰을 받아오면 서버쪽에 해당 아이디와 비밀번호가 있다는 말이므로 로그인이 가능하고, 토큰이 아닌 error를 받아올 경우 로그인이 불가능하도록 설정하였다. 에러메세지를 나오게 하고 싶었지만 방법을 몰라 지금 찾고있는 중이다. 그리고 화면 맨 위쪽에 로그인 회원가입이라는 텍스트를 만들어놓고 로그인이 성공하면 보드와 내정보, 로그아웃 버튼으로 변경되게 설정 후 보드버튼을 누르면 보드로, 내정보를 누르면 프로필, 로그아웃을 하면 토큰을 삭제하며 맨 처음화면으로 넘.. 회원가입 + 로그인 + 로그아웃 서버 구현 오늘은 회원가입 + 로그인 + 로그아웃 서버를 구현한 뒤 기존에 만들어놨던 프론트엔드 쪽과 연결하는 작업을 하였다. 우선, 로그인 암호를 보호하기 위한 해싱작업으로 bcrypt라는 모듈을 사용하였고, jsonwebtoken 모듈을 활용하여 로그인 시 서버에서 토큰값을 생성해 클라이언트에 넘겨주면 클라이언트가 이후에 서버에게 요청을 할 때마다 request header에 토큰값을 실어 요청을 하면 되도록 작업하였다. 그 후, 요청이 들어오면 서버는 요청 header에 들어오는 토큰을 디코딩해야하는데 나는 이번 코드에서 jwt_decode(token)를 이용하여 토큰을 디코딩한 뒤 decoded라는 변수에 담아 처음에 넣었던 이름과 email을 얻을 수 있도록 작업하였다. 수정하는 기능 작업 완료, 로그인 + 로그아웃 + 회원가입 서버 구현 이틀동안 고생하면서 겨우 보드, 리스트, 카드의 제목 및 내용을 수정하는 기능을 작업 완료하였다. 여기서 문제점을 찾으면 redux의 reducer에서 return하는 state를 잘못 설정한 것과 payload로 주는 데이터를 잘못 전달하여 reducer에서 인식을 못한 점이라고 할 수 있다. redux에서 배열인 state를 관리하려면 불변성을 유지해야하며 기존의 배열을 수정하는 방식이 아닌 새로운 배열을 만들어 그걸 객체에 넣어줘야한다. 이론적으로는 이해를 하고 있었으나 코드를 작성하면서 몇가지를 파악하지 못해 시간이 오래 걸렸다. 이번에 확실히 알았으니 담번에는 절대 실수가 없을 것이다. 수정하는 기능 작업이 끝났으니 바로 로그인 + 로그아웃 + 회원가입 서버를 구현하는 쪽으로 작업을 들어갔고, .. 보드, 리스트, 카드 수정하는 작업 중 오늘도 제목 및 내용을 수정하는 작업을 하고 있는데 계속해서 막혀 진행이 멈춰있는 상태이다. action.payload로 잘 받아오는 것 까진 확인이 되었느데 reducer부분에서 return이 잘못됬는지 수정이 되지않고 있다. state부터 각각의 객체 및 배열들을 하나하나 확인 중인데 시간이 좀 걸릴 듯하다. 보드, 리스트, 카드 수정작업 오늘은 하루종일 보드, 리스트, 카드의 제목 및 내용을 수정할 수 있도록 하는 기능을 작업하였는데 지금 막혀있다.ㅠㅠㅠㅠ 기존의 배열을 손대지 않고 배열 안의 목록을 수정한 뒤 새로운 배열로 return을 해야하는데 state로 받아오는 부분과 받을 것들을 어떻게 변경하고 추가할 것인지 이 부분을 코드로 못하고 있어 자료를 좀 더 찾아 본 뒤 작업을 이어갈 예정이다. 보드 삭제기능 수정 및 제목 수정기능 추가 어제 삭제기능들을 전부 구현하였지만 보드 쪽에서 삭제기능이 이상하게 동작하여 오늘 그 부분을 수정하여 제대로 동작하도록 완료하였고, 보드와 리스트, 카드의 제목 및 내용을 수정할 수 있는 기능을 작업하였다. 이 부분에서 수정버튼을 onclick하면 form이 열리고 그 안에는 빈 내용이 아닌 props로 받아온 각각의 title들이 보이도록 한 다음 title를 변경하고 완료 버튼을 누르면 그 title들이 보이도록 설계할려고 하는데 지금 그 작업이 쉽지가 않다. console.log로 어떠한 목록들을 받아오고 그 목록들을 보여주는 것 까진 완료를 했는데, title을 변경하여 보여주는 작업 쪽이 진행되지가 않는다......ㅠㅠ 다른 사람들의 코드를 참고하면서 작업하였는데 거의 될듯말듯 한 상태로 멈춰있.. 이전 1 2 3 4 5 다음
