회사에서 Dark Sky 서비스를 이용하다가 서비스 종료 된다는 사실을 알게됐다. 백엔드 엔지니어 동료분이 기상청 API로 새벽까지 수정해서 작업해주셨는데, 화면에서 총 16개 지역의 최저, 최고 기온을 알려줘야하다보니 백단에서 기상청 API을 16번 호출해야한다. 그러다보니 약 8초정도 되는 어마어마한 대기시간을 그냥 둘 수가 없어서 express 서버 하나 만들어 소캣 통신도 되고, Redis Cache도 사용할 수 있도록 CRA 구조에 추가했다. (소캣은 모든 브라우저에서 애니메이션 일시 중지를 해야되는 요건때문에 추가했다.) 1. 로컬(서버)에 Redis Server 설치, 서비스 시작하기 brew install redis brew services start redis 2. script 추가하기 ..
Beter 프로젝트를 진행하면서 Typescript와 NextJS을 너무 모르고하다보니 진전이 잘 안됐다. 그래서 미니 프로젝트를 만들어 먼저 스터디를 진행하고 이어서 개발하기로 했다. 미니 프로젝트는 Markdown 문서(MD 파일)를 Html로 변경하고 웹 에디터에서 수정하면 워드파일 다운로드 받을 수 있는 Converting 프로젝트이다. 회사에서 노션을 사용하는데 프로그램 설계서를 어떻게 하면 귀찮은 복붙작업없이 바로 워드 문서로 만들수 있을까 고민하다가 찾아보니 MD 파일을 업로드하면 워드 파일로 변환해주는 사이트를 찾았다. 그런데 한번에 여러 파일을 업로드하면 내용을 합쳐줄주 알았는데 아니였다. 변환을 한다고해도 복붙을 해야된다면 굳이 변환하는게 의미 없는 것 같아서 내가 만들어야겠다 싶었다...
React 환경에서 화면을 만들고 html2canvas, jsPDF 모듈로 이미지를 PDF 파일로 만드는 작업을 했다. 이전에도 많이 했던 작업이었는데, 처음으로 격은 난관이라 기록하려고 한다. html2canvas로 canvas 객체를 만들어 이미지를 만든 후 화면에 뿌려 확인해보니 Material-UI로 만든 체크박스가 안보였다. 계속 구글링해서 찾아보니 SVG의 문제였다. Canvas을 만들면서 svg을 처리하지 못하는 모양이다. 그래서 html2canvas 옵션을 확인해 적용해봤지만 영향을 주지 않았다. 방법은 Material-UI Checkbox props 명세를 보면 icon, checedIcon이 있다. 이 두개의 props에 이미지 컴포넌트를 넘겨서 해결했다. 직접적인 해결 방법이 아닌것 ..
지난 날 힘겹게 NextJS와 Apollo Server, Client을 한 프로젝트에 설정했다. 이제 DB 연동해서 사용하면 되는데, 테이블을 추가하면 GraphQL Schema도 추가해야되는게 너무 귀찮았다. 그래서 Prisma2을 적용해봤다. 결과는 대대대만족!!! 혹시 나처럼 NextJS로 백엔드와 프론트엔드를 같은 프로젝트(단순히 폴더를 나눈게 아닌 동작 프로세스가 하나로 이뤄지는 경우)로 하고 싶은 행인이 있을까싶어 git에 올렸다. github.com/yelling95/example-nextjs-apollo-prisma.git yelling95/example-nextjs-apollo-prisma NextJS로 프론트엔드, 백엔드를 같은 환경에서 구동시키고 Apollo와 Prisma로 DB 연동..
추석연휴 포함해서 약 2주일동안 정말 삽질을 많이 한 것 같다. 사실 아직 파야할 곳이 많아 막막하지만 그래도 물꼬가 트여서 써본다. 삽질 포인트는 아래와 같다. 1. Apollo Client와 Apollo Server는 둘다 있어야 되는건가? -> Yes 2. NextJs는 Server Render 방식인데, Server에 Apollo Server 설정을 할 수 있나? -> Yes 3. Typescript, NextJs, Apollo Server/Client을 모두 한 프로젝트에서 사용할 수 있나? -> Yes 1번 포인트에서 많이 헷갈렸던게 나는 Apollo Client가 Query을 실행하면 쿼리로 요청한 값만 전달되어 서버측 Model VO에서 해당부분만 값이 셋팅할거라고 생각했다. 그래서 Apo..