230329(수)

🎄 성장일지 4.0

책 행복한 이기주의자(웨인 다이어)의 내용에 자극받아 시작하는 소박한 성장기록

살아있는 꽃과 죽은 꽃은 어떻게 구별하는가?
성장하고 있는 것이 살아 있는 것이다.
생명의 유일한 증거는 성장이다!

🌳 (1.0)키워드
최대한 간단하게 정리, 추후에 보면서 스스로 설명
🍉 (2.0)경험 위주로
단순 정보를 전달하기보다 무엇을 배웠고 어떻게 해결했는지 짧고 간단하게 작성
❄️ (3.0)정해진 템플릿에 맞춰서
키워드, 경험 모두 좋다. 다만 매일 작성하기로 마음 먹은만큼 핵심만 간결하게 정리할 수 있게 템플릿을 작성
(3.1)230102부터 시작되는 학습에 관한 내용 추가
(3.2)230313부터 좀더 경험, 감정 위주의 내용도 담기!
🌾 (4.0)학습 키워드에서 최대한 간단한 정보 제공, 고민에서 내 경험을 자세히 적자!

🔑 오늘의 학습 키워드

Node.js, express

• nodeJS: 크롬의 V8 자바스크립트 엔진을 가져와서 새롭게 탄생시킨 자바스크립트 런타임 환경. 주로 자바스크립트로 서버 개발을 하기위해 사용된다.
  • 특정 브라우저에서의 js api들은 제외하고 HTTP와 파일 시스템 라이브러리들을 포함한 전형적인 여러 OS api를 추가했다.
• express: Node.js 런타임 환경에서 구동되는 웹 프레임워크.
  • 웹 어플리케이션을 만들기 위한 여러 라이브러리와 미들웨어 등이 내장되어있다.
  • 개발자들에게 개발 규칙을 강제하는 프레임워크로 통일성을 향상시킬 수 있다.

import * as express from 'express';
import * as bodyParser from 'body-parser'; // 요청에 대한 body를 파싱하는 역할
import * as dotenv from 'dotenv'; // .env 파일을 통해 보안상 가려야할 데이터를 따로 둔다.
import * as cors from 'cors'; // CORS 에러를 해결하기 위함
import * as mongoDb from 'mongodb'; // mongodb와 연결!

dotenv.config(); // 이제 아래에서 process.env로 어떤 값들을 가져올 수 있다.(숨길 수 있다.)

const app = express();
app.use(bodyParser.urlencoded({ extended: true }));
app.use(cors());

const MongoClient = mongoDb.MongoClient;
const connection = MongoClient.connect(
  `mongodb+srv://${process.env.MONGO_USER_NAME}:${process.env.MONGO_PASSWORD}@${process.env.MONGO_CLUSTER_NAME}.jy2zpck.mongodb.net/?retryWrites=true&w=majority`,
);

let db;
connection
  .then((client) => {
    db = client.db('database-name');
    app.listen(process.env.PORT, () => {
      console.log('listening on');
    });
    app.get('/search', (req, res) => {
      res.json('테스트 문자열');
    });
  })
  .catch((err) => {
    console.log(`에러 발생: ${err}`);
  });

위와 같은 방식으로 local 포트에 서버를 하나 띄우고 client쪽 app에서 fetch api로 통신하면 된다.

🍀 오늘의 고민 키워드

express 그 자체

흐… 그냥 json-server나 msw를 사용할까 하다가, 이번 기회에 이전부터 배우고 싶었던 express를 사용해봤다. 아주 기본적인 서버라서 솔직히 그렇게 어려운 건 없지만 그래도 db에 연결하고 client와 통신도 성공해보고… 여러가지를 해보면서 전반적인 제품의 흐름을 이해할 수 있게 된 것 같아서 만족스럽다.(일단 새로 배우는 건 다 재미있다.)

import * as …

이 부분…!!! 왜 그냥 import 하면 안될까..? 이 부분에 대해선 구체적으로 좀 찾아볼 예정.

📝 요약 및 하루 간단 회고

• 하루종일 서버 구현 공부
• 같은 자바스크립트 언어로 이렇게 다른 걸 만들어낼 수 있다니..! 재미있다ㅋㅋㅋㅋㅋ

오늘의 잘한 점

• 열심히 nodejs 및 express 공부한 점
• 서버 띄우고 나아가서 통신까지 성공한 점

오늘의 아쉬운 점

• 조금 더 순공부시간을 확보해야겠다!

참고

• 강의
• express 공식문서