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..
1. DB 접속 정보 Config 만들기 DB 정보는 환경변수로 관리하고 싶어서 dotenv 모듈을 설치해 아래와 같이 .env 파일을 만들었다. DB_USER=... DB_PASSWORD=... DB_HOST=... DB_PORT=... DB=... 그리고 /config/db.js을 만들어서 require로 불러올수 있도록 export 했다. require('dotenv').config() module.exports = (() => { return { "user": process.env.DB_USER, "password": process.env.DB_PASSWORD, "host": process.env.DB_HOST, "port": process.env.DB_PORT, "database": proces..
NextJS는 Pre-render을 지원하는데 화면 먼저 그리고 서버에 데이터를 가져와 보여주는 식이다. Pre-render는 크게 두 가지로 구현할 수 있는데, Static 방식과 Server-side 방법이 있다. Static : html 먼저 그리고 데이터를 뿌는 방법 Server-side : 서버에서 데이터를 가져와 html을 보여주는 방법이다. 짧은 영어 독해 능력으로 열심히 해석해보니까, Static 방식은 처음에 보여지는 속도는 빨라도 데이터 변경이 자주 발생하면 좋은 방법이 아니고, Server-side 방식은 조금 느릴수 있어도 데이터가 계속 바뀐다고 한다. Static 방식도 getStaticProps에 'async'을 같이 쓰면 동기되어 데이터를 다 가져오고 html을 그린다고 한다...