TIL

Express API

2022.10.20

express를 이용해 인증 문자, 메일 보내기

coolsms sdk와 nodemailer를 사용해 요청 넣은 정보로 인증 문자, 메일을 발송하는 api를 만들어봤다.

dotenv 환경변수 분리

dotenv라는 모듈을 사용하면 간편하게 환경변수 분리 및 사용이 가능하다.

import "dotenv/config";
const SMS_KEY = process.env.SMS_KEY;

2022.10.16

express 미들웨어 cors

express를 사용해서 만든 rest-api에 CORS 설정을 더해주고 싶은 경우, cors 미들웨어를 이용하면 쉽게 CORS를 뚫어줄 수 있다.

apollo-server

Apollo server는 TypeScript 기반의 GraphQL 오픈 소스 서버.

2022.10.15

express.js를 이용해 API 만들기

프론트를 공부하면 할수록 DB와 백엔드를 포함한 웹 개발 프로세스 전체를 잘 이해하고 있어야 좋은 개발자가 될 수 있겠다는 생각이 든다.

2022.10.14

CSS 전역 스타일을 관리하는 세가지 방법

  1. Emotion의 ThemeProvider - 일종의 context-api. 단, theme이 변경되었을 때 감싸고 있는 모든 컴포넌트를 리렌더링한다.
  2. JavaScript 상수로 관리 - CSS-in-JS이기에 가능한 방법.
  3. CSS Variable 사용 - 렌더링 효율이 좋다.

2022.10.11

async/await와 마이크로큐

팀원들과 논의하며 공부한 내용. 메모 사진으로 기록.

2022.10.10

e.target.innerText 타입스크립트

페이지네이션 구현 시 EventTarget 안에 innerText가 없다는 에러 발생. as를 이용해 HTMLButtonElement를 강제 지정해주어 해결.

const onClickPage = (e: MouseEvent<HTMLButtonElement>) => {
  const button = e.target as HTMLButtonElement;
  setPage(Number(button.innerText));
};

2022.10.09

고가용성 (High Availability, HA)

고가용성이란 서버에 장애가 나더라도 사용자가 항상 서비스를 이용할 수 있게 하는 것. Primitive와 Secondary 서버를 동시에 운용한다.

2022.10.07

Next/link의 prefetch

Next.js에서 link를 사용하면 prefetch가 이루어진다. 백그라운드에서 페이지를 미리 가져온다.

데이터 통신시 useEffect를 사용하는 경우의 문제점

참고: Why useEffect is a Bad Place to Make API Calls

input 태그의 valueAsNumber

event.target.valueAsNumber를 이용하면 string이 아닌 number 타입으로 데이터를 받아올 수 있다.

추상화, 은닉화

  • 추상화: 복잡한 자료, 모듈, 시스템 등으로부터 핵심적인 개념 또는 기능을 간추려 내는 것
  • 은닉화: private 등을 이용하여 주요 사항이 드러나지 않게 감추는 것

2022.10.04

응집도란?

모듈이 하나의 기능을 중심으로 책임이 잘 뭉쳐있는지를 나타낸다. 낮은 결합도와 높은 응집도를 갖도록 설계된 프로덕트가 좋은 프로덕트다.

Tree shaking

사용하는 모듈에서 불필요한 코드를 제거하는 것. 필요한 일부 유틸만 가져오는 편이 좋다.

Next/Image 사이즈 조정

.parent > span {
  position: unset !important;
  .image {
    object-fit: contain !important;
    position: relative !important;
    height: auto !important;
  }
}