return New;

React 환경에서 화면을 만들고 html2canvas, jsPDF 모듈로 이미지를 PDF 파일로 만드는 작업을 했다. 이전에도 많이 했던 작업이었는데, 처음으로 격은 난관이라 기록하려고 한다. html2canvas로 canvas 객체를 만들어 이미지를 만든 후 화면에 뿌려 확인해보니 Material-UI로 만든 체크박스가 안보였다. 계속 구글링해서 찾아보니 SVG의 문제였다. Canvas을 만들면서 svg을 처리하지 못하는 모양이다. 그래서 html2canvas 옵션을 확인해 적용해봤지만 영향을 주지 않았다. 방법은 Material-UI Checkbox props 명세를 보면 icon, checedIcon이 있다. 이 두개의 props에 이미지 컴포넌트를 넘겨서 해결했다. 직접적인 해결 방법이 아닌것 ..

develop 2021. 1. 14. 14:51

지난 날 힘겹게 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 연동..

develop 2020. 11. 10. 16:35

추석연휴 포함해서 약 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..

develop 2020. 9. 28. 16:52

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..

develop 2020. 9. 25. 16:59

NextJS는 Pre-render을 지원하는데 화면 먼저 그리고 서버에 데이터를 가져와 보여주는 식이다. Pre-render는 크게 두 가지로 구현할 수 있는데, Static 방식과 Server-side 방법이 있다. Static : html 먼저 그리고 데이터를 뿌는 방법 Server-side : 서버에서 데이터를 가져와 html을 보여주는 방법이다. 짧은 영어 독해 능력으로 열심히 해석해보니까, Static 방식은 처음에 보여지는 속도는 빨라도 데이터 변경이 자주 발생하면 좋은 방법이 아니고, Server-side 방식은 조금 느릴수 있어도 데이터가 계속 바뀐다고 한다. Static 방식도 getStaticProps에 'async'을 같이 쓰면 동기되어 데이터를 다 가져오고 html을 그린다고 한다...

develop 2020. 9. 25. 12:02

오랜만에 DB을 해서 두근두근하다. 회사에서 많이 사용중인 DB라 궁금했었는데 이번에 Beter 프로젝트 진행하면서 사용해보려고 한다. 먼저, 설치를 하러 가봅시다. www.postgresql.org/ PostgreSQL: The world's most advanced open source database PostgreSQL is a powerful, open source object-relational database system with over 30 years of active development that has earned it a strong reputation for reliability, feature robustness, and performance. There is a wealth of..

develop 2020. 9. 24. 11:48

2일차부터는 React와 Redux을 연동하는 교육을 진행했다. 아래 모듈을 필수로 포함해 환경 셋팅을 요청드렸다. 내가 정말 도움을 많이 받은 블로그도 같이 소개해드렸다. https://d2.naver.com/helloworld/1848131 redux redux-pender redux-actions 그치만 아무래도 에밀리는 처음으로 스스로 개발 언어를 스터디하는거다보니 어려움이 있었다. 나도 처음에 공부할때 내가 뭘 모르는지도 모르는 상태였는데, 아마 비슷할 것 같다. 그래서 단계별 실습으로 두려움과 복잡함을 극복하고자 아래와 같이 진행 순서를 명시해줬다. 모듈 설치 폴더 구조 만들기 redux + redux-pender 연결하기 redux-action + redux-pender 연결하기 1번까지 완..

develop 2020. 9. 23. 08:09

Beter 프로젝트의 개발환경을 NextJS, Apollo, GraphQl, React, Typescript 구성으로 셋팅하기로 했다. 1. Project 만들기 npx create-next-app cd npm run dev 2. Typescript 셋팅하기 /tsconfig.json 만들기 npm run dev 위 과정을 마치고 pages와 api 폴더에 자동으로 생성되었던 _app.js와 hello.js을 타입스크립트 파일로 바꿨다. // api/hello.js -> api/hello.ts import { NextApiRequest, NextApiResponse } from 'next' type Data = { name: string } export default (req: NextApiRequest..

develop 2020. 9. 20. 20:24