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