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을 그린다고 한다...
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..
이번에 후배가 인턴을 하게되면서 준비했던 내용을 정리해봤다. 레이첼이랑 둘이서 하다보니 이게 맞는건지 확신이 안들었는데, 이참에 다시 개념을 잡을 수 있었다. (혹시 이 시리즈를 보고 '어 이거 아닌데?' 하시는 분이 계시면 댓글로 알려주시면 감사하겠습니다ㅠㅠㅠ) 첫날에는 가볍게 React에 대해서 학습했다. CRA, Babel, Redux, Webpack 등등 느낌만 받길 원했는데, 내가 처음 React을 접했을때 엄청난 모듈들에 압사 당했을때처럼 후배도 조금 쫄게 되었다. (도망안갔으면 좋겠다고 생각한거 같다...) CRA: https://create-react-app.dev/ Babel: https://babeljs.io/ React + Redux 구조 흐름도 파악하기 둘째날부터 본격적으로 교육을 ..
