js 파일을 ts로 변환하던중 getinitialProps를 사용해야하는 부분들이 있었다. getinitialProps은 FunctionComponent가 아니라 NextFuctionComponent로컴포넌트 타입을 지정해주어야 한다. 그런데 getinitialProps = ({ store }) 이런식으로 store를 불러오는 부분에서 store 에 대한 타입이 없다고 계속 에러가 발생 하였다. 이유는 store에 대한 타입이 없기 때문이였다. 그래서 getinitialProps = (ctx:any) 이렇게 지정을 해주고 ctx.store 이런 식으로 가져와서 사용해야 했다. 그리고 Next 버전업이 되면 NextFuctionComponent가 아니라 NextPage를 사용해야 하고 ctx에 스토어 자체..

새로운 서비스의 기획이 조금 수정이 돼서 검색 결과를 어떻게 보여줄지에 대해서 다시 고민을 해보았다. 웹으로 생각을 했을 경우에는 크게 상관이 없었는데 모바일로 보여줄 경우가 문제였다. 모바일은 작은 화면에 최대한 많은 정보를 띄워 주어야 하는데 수정된 기획에서 검색 결과 부분의 크기가 작았기 때문이다. 아직 확정된 것은 아니라서 수정은 가능했기에 최대한 사용자가 평하게 사용할 수 있는 방법을 찾아 보았다. 다양한 앱들과 모바일 버전 웹사이트의 검색을 찾아 보았는데 대부분 검색을 하면 한페이지 전체에 검색 결과를 보여 주었다. 그리고 추가로 추천 검색어 라던지 컨텐츠 등을 띄어서 보여주었다. 이러한 것을 보았을때 역시 전체 화면에 띄워주는 것이 최적의 방법이라는 생각이 들었고 추가로 검색하기전 페이지에서..

소셜 로그인 탈퇴 구현이 되어 있지 않아서 소셜 로그인 탈퇴에 대해서 알아 보았다. 우리 서비스에는 페이스북, 카카오 두가지 소셜로그인이 가능하다. 소셜로그인은 탈퇴라기 보다는 소셜에서 해당 서비스로의 연결을 끊는다는 개념이였다. 즉 내가 해야할 일은 소셜 로그인과의 연결을 끊어주고 우리 디비에 있는 회원정보를 삭제해주는 두가지 일을 진행해야 했다. 카카오 SDK를 사용하여 request 요청을 날려주면 되었다. request 요청을 날리기 전에 먼저 window.kakao.init을 해주어야 하는데 window.kakao 값을 계속 가져오지 못하였다. 다양한 시도를 하다가 class 형 컴포넌트에서 function 컴포넌트로 바꾸어주니 값을 가져올 수 있었다. (무슨 차이인지 아직도 잘 모르겠다... ..

react-table로 만들어진 컴포넌트를 적용하는 작업을 진행 하였다. 해당 컴포넌트는 props로 필수 적으로 columns 와 data를 넘겨주어야 했다. columns는 각 열의 이름이고 data는 행에 들어갈 값들이다. 변수에 각각의 값들을 담아서 넘겨주었는데 처음엔 에러가 났다. 왜 그런지 살펴보니 배열에 담아서 보내주어야 했다. 그래서 다시 배열게 담아서 넘겨주었는데 에러는 나지 않았지만 값이 렌더가 되지 않았다. HTML 테그들은 만들어 졌는데 값은 없었다. 다른 값을 넘겨 주거나 node 형식을 넘겨 줘 보아도 똑같았다. 작업 중에 현재 서비스에 버그가 생겨서 아직 해결을 못한 상황이다. 내일 다시 한번 확인해 보아야 겠다.

webpack에 대해서 공부를 해보았다. 웹팩이란 모듈 번들러로 아래의 그림과 같이 다양한 자원들을 조합해서 하나의 결과물을 만드는 도구이다. 모듈 번들링이란 많은 자원들을 하나의 파일로 병합,압축 해주는 동작을 말한다. react cra 를 reject하여 내가 필요한 것들로만 구성해보는 작업과 webpack을 사용하여 react, sass 를 적용해 보는 작업을 진행하였다. 그냥 따라만 해본거라서 완벽하게 이해는 하지 못했다. 계속해서 연습하면서 익숙해져야 할 것 같다.

기존의 약관 페이지는 택스트만 띄워둔 형태여서 약관 페이지를 새로 만드는 작업을 진행하였다. 기존의 약관들에 관한 글들은 js 파일에 객체 형식으로 저장이 돼 있었다. 오역자들에서 md 파일을 바로 가져다 사용하기 때문에 마크다운 형식으로 바꾸어 보여주려고 했다. 하지만 오역자들에서는 styled-markdown 이라는 라이브러를 사용하고 회사 프로젝트에서는 react-markdown 이라는 라이브러리를 사용하고 있었다. react-markdown 으로는 md 파일을 바로 넣어줄수가 없었다. 그래서 다시 js 파일로 바꾸어 사용하였다. 그런데 이번에는 markdown 문법이 하나도 적용이 되지 않은 채로 나타났다. 왜 그런거지 하고 이리저리 살펴보다가 Tap과 Enter 가 문제 였다. 좀더 보기 쉽게 ..