Beter 프로젝트를 진행하면서 Typescript와 NextJS을 너무 모르고하다보니 진전이 잘 안됐다. 그래서 미니 프로젝트를 만들어 먼저 스터디를 진행하고 이어서 개발하기로 했다. 미니 프로젝트는 Markdown 문서(MD 파일)를 Html로 변경하고 웹 에디터에서 수정하면 워드파일 다운로드 받을 수 있는 Converting 프로젝트이다. 회사에서 노션을 사용하는데 프로그램 설계서를 어떻게 하면 귀찮은 복붙작업없이 바로 워드 문서로 만들수 있을까 고민하다가 찾아보니 MD 파일을 업로드하면 워드 파일로 변환해주는 사이트를 찾았다. 그런데 한번에 여러 파일을 업로드하면 내용을 합쳐줄주 알았는데 아니였다. 변환을 한다고해도 복붙을 해야된다면 굳이 변환하는게 의미 없는 것 같아서 내가 만들어야겠다 싶었다...
지난 날 힘겹게 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을 그린다고 한다...