전체 글 103

(항해62일차) 220506 리액트 실전프로젝트 15일차

오늘 한 일: 세부정보 페이지 기능구현 완료 (태그: onKeyUp 사용)/ 유저정보 db및 리듀서 / 이미지 미리보기 / 로그인 관련 기능 내일 할 일: 상세페이지 유저정보 띄우기 / 마이페이지 유저 정보 수정 / 로그아웃 / 토큰 저장위치 변경 / 사진업로드 생각해볼 것: 1. 인풋에 들어갈 수 있는 내용, 길이 등 에러만들 수 있는 부분 생각하기 2. 토큰, 리프레시토큰 관련 내용 3. 리렌더링 어디에서 왜 이루어지는 확인할 수 있는 방법 찾기 4. 필수정보(아이디, 비밀번호) 변경 어떻게 할지 생각하기 5. axios instance관련 내용

(항해61일차) 220505 리액트 실전프로젝트 14일차

폼데이터로 데이터를 서버와 주고 받는 방식이 어려울 것 같다. 우리는 필수정보를 받아 회원가입을 시킨 후 유저정보가 있는 상태에서 폼데이터에 추가정보를 작성하는 구조를 생각했는데, 폼데이터에서 post와 get방식의 요청만 가능하다는 문제가 있었다. 그래서 관련 내용을 찾아본 후 두가지 방법을 생각했다. 첫 번째 방법으로 post로 요청을 보내지만 method_field라는 것을 추가해 실제로는 put의 기능이 가능하도록 하는 방법을 찾았다. 하지만 이 방법은 restful api에 적합하지 않은 api를 사용해야 한다. 또한 json형식의 데이터와 파일을 한꺼번에 처리하는 방식은 서로 다른 리소르를 한번에 처리하기 때문에 적절한 설계가 아니라는 지적을 확인할 수 있었다. 필수정보를 받은 후 로그인이 아..

(항해60일차) 220504 리액트 실전프로젝트 13일차

유저의 추가정보 받는 기능을 구현하고 있다. 예약 기능과 맞물려 계속 서버에 보낼 데이터 내용이 변경되면서 데이터를 받을 페이지도 몇 번 수정했다. 처음부터 구조를 제대로 잡는 것이 아주 중요한 부분임을 느끼고 있다. 평소대로라면 div안에 input이나 button등의 요소를 넣어 페이지를 구성했겠지만, 보내야 할 데이터 중 이미지파일이 포함되어 있어 폼데이터를 사용하기로 결정했다. 요소의 중요한 속성 중 하나인 enctype 때문인데, enctype='multipart/form-data'로 지정해 데이터를 전송할 경우 데이터는 여러 파트로 나뉘어 서버에 전송된다. 즉, 두 형태의 데이터 (이미지파일 / 유저가 작성한 내용) 를 한 번에 서버로 보낼 때 사용할 수 있는 방법이다. 폼데이터로 서버에 데이..

(항해58일차) 220502 리액트 실전프로젝트 11일차

오늘 로그인, 회원가입 관련 유효성검사 코드를 만들면서 로그인과 관련된 기능은 거의 마무리를 지었다. 마음에 걸리는 부분은 토큰을 어디에 저장할지에 관한 문제이다. 지금은 로컬스토리지에 저장하고 있지만 보안 문제로 좋지 않은 선택이라는 글을 많이 봐 다시 한 번 토큰 저장 위치에 관한 내용을 찾아봐야 할 것 같다. 오늘도 서버와의 연결은 미뤄졌다. 서버와의 연결이 이뤄져야 마음놓고 다른 기능에 손을 댈 수 있을 것 같지만 이대로는 계속 일정이 늘어질 것 같아 일단 다른 기능을 먼저 구현하기로 했다. 내일부터 본격적으로 추가정보 받는 페이지를 만들어보려 한다. 사진 저장과 태그 저장이 추가정보 작성 페이지에서 가장 관건이 되는 부분일 것 같다. 내일은 그 두 부분에 관한 정보를 중점적으로 찾아봐야겠다.

(항해99)의 8주차 (220425-220501) WIL

이번 주는 항해99에 참여한지 절반이 넘어가는 주인 동시에 5월이 시작되는 주였다. 벌써 5월이라니 시간이 정말 빨리 지나간다. WIL을 쓸 때는 항상 첫 주가 떠오른다. 그 때와 비교했을 때 이제는 꽤 달라졌다고 말할 수 있다. 아무것도 모르고 리액트를 주특기로 선택했지만 이렇게 재밌게 8주를 보냈다는걸 생각하면 좋은 결정이었다. 실전 프로젝트로만 온전히 한 주를 보냈다. 우리 프로젝트는 선생님과 학생으로 구분된 유저가 화상채팅을 통해 한국어를 가르치고 배우도록 도와주는 웹사이트이다. 그렇다 보니 프로젝트의 메인 기능은 유저들의 1대1 화상채팅이다. 그 외에 화상채팅과 함께 쓰일 번역기능, 유저 목록과 관련된 기능, 유저 정보와 관련된 기능으로 나눌 수 있다. 물론 많은 변화가 있겠지만 우리팀이 생각하..