지코딩

뷰 작업과 기능구현 중 생각하지 못했던 부분을 추가하고 있다. 서비스 개시가 다가올수록 마음은 조급해지는데, 이상하게 해야 할 일은 점점 늘어나는 기분이다. 오늘만 하더라도 오전에 마이페이지 뷰 작업을 마치고 오후에 마이페이지 관련 모달창을 만들 계획이었지만, 오전에는 회의로 시간을 보내고 오후에는 추가정보를 받는 페이지에서 이런저런 수정작업을 거치다 보니 생각보다 작업 더디다. 결국 오늘은 마이페이지 뷰 작업까지만 마칠 수 있었다. 이번주에 서비스를 개시해 유저 피드백을 받아보려면 늦어도 금요일에는 작업이 완료되어야 할 것 같아서 걱정이 된다. 디자인이 늦어져 기능을 구현하고 뷰작업을 진행하다 보니, 같은 일을 여러 번 하게 되는 것 같다. 이번 프로젝트를 진행하면서 왜 기획이 중요한지, 기획자와 디자..

프로필 사진으로 쓰일 파일을 받기 위해 서버에 보내는 데이터의 형태를 폼데이터객체로 변경했다. 기존에는 제이슨 구조로 데이터를 보냈으나, 몇 가지 이유가 있어 폼데이터객체를 사용하게 되었다. 1. 폼데이터는 폼 안의 모든 데이터를 스트링으로 변환할 필요 없이 인코드할 수 있다. 2. 서버에서 별도의 과정없이 데이터를 받을 수 있다. 3. 폼데이터를 사용하지 않고 이미지파일을 dataURL로 변형해서 보낼 수 있지만, 훨씬 길어지고 오류가 발생할 수 있다. 다만 폼데이터객체로 서버와 통신할 때는 get, post 로만 요청할 수 있다는 단점이 존재했다. 이후 프로필을 수정하기 위해서는 삭제요청 후 다시 다른 파일을 업로드하는 방식으로 구현해야 할 듯 하다. 폼데이터에 전송할 데이터를 추가할 때는 .appe..

개인적인 사정으로 3일동안 프로젝트에 참여하지 못하면서 일정이 매우 빠듯해졌다. 자리를 비운 사이에 중간발표가 있어 걱정했는데 다행히 다른 팀원들이 고생해 준 덕분에 잘 진행될 수 있었다. 이번 주에 뷰 작업을 많이 진행해야 했지만 중간에 크게 공백이 생겨 작업 진행에 차질이 생겼다. 우선 급한대로 로그인 페이지부터 뷰작업을 진행하고 있다. 우리 팀은 피그마를 활용해 디자이너님과 기획회의를 함께 진행했는데, 실제로 구현해보니 많이 크다는 생각이 든다. 그래서 왜 그럴까 관련 내용을 찾아보니 다른 웹사이트에 비해 컨텐츠의 width를 많이 크게 잡은게 원인이었다. 반응형 웹을 만들기에는 시간이 부족하고, 또 화상채팅이 핵심기능인 만큼 반응형이 크게 필요치 않다고 생각해서 컨텐츠 크기를 고정하는 적응형으로 ..

TIL을 쓰는 주기가 점점 늘어지고 있다. 매일매일 써야겠다는 처음의 마음가짐은 실전프로젝트를 진행하면서 점점 흐려지고 있다. 그동안 미뤄졌던 뷰작업을 이제는 시작해야 하지만, 계속 수정사항이 생기면서 미뤄지고 있다. 메인페이지의 리스트에서 튜터를 선택할 경우 detail페이지에서 보여주고 다시 수정할 수 있도록 만드는 작업을 진행했다. 여기에서 튜터정보를 리덕스의 어떤 모듈에서 서버로부터 받아올지 고민을 했다. 두가지 선택이 있었는데 첫번째로는 튜터 모듈에서 받아오는 방법이다. 일반적으로 여기에서 받는 것이 자연스럽다고 생각했지만, 나중에 마이페이지에서도 똑같은 데이터를 받아오는데 따로 api를 만드는 것이 불필요하다는 생각을 했다. 그래서 생각한 두번째 방법은 유저안에 detail이라는 상태를 만들어..

본격적인 기능구현이 시작된 한 주였다. 디자이너가 두 명 모두 나갔지만 다행히 새로운 두 명이 합류했다. 디자인이 상당히 늦게 나올 것 같아 우선 기능 중심으로 개발을 진행하고 있다. 내가 담당하는 부분은 유저정보로 로그인과 회원가입, 추가정보 등의 데이터와 관련된 기능을 작업했다. 공교롭게도 팀프로젝트가 시작된 후로 로그인, 회원가입 부분을 처음 담당했는데 고려해야 할 부분이 생각보다 많았고, 찾아보면 넣을 만한 디테일한 요소도 많이 있었다. 시간이 많다면 더 보강하고 싶은 것들을 적어 놓았다. 6주차 미니프로젝트 때에도 들었던 CICD와 관련된 부분을 이번 멘토링 때 다시 한 번 듣게 됐다. CICD는 새롭게 추가한 기능이나 수정한 내용을 실시간으로 배포하고 유저 환경에서 바로 확인할 수 있는 장점이..

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

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

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

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

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