[포스코x코딩온] 웹 풀스택 과정 7기 10주차 수요일 회고
포스코 코딩온 웹 풀스택 과정 7기 10주차 수요일 회고
미니 프로젝트
개인 미니 프로젝트를 진행했다.
간단한 TODO 앱의 BE부터 FE까지 스스로 구현해 보는 과제였다.
DB는 MySQL을 Prisma ORM을 사용해 연결했다.
BE는 Express 를 사용했고, FE는 Next를 사용했다.
이번에는 FE, BE를 나누어 프로젝트를 생성했다.
연결성은 조금 아쉬웠지만, 확실히 나누어서 작업하니 경로가 겹치거나 헷갈리지 않아 좋긴 했다.
BE
Prisma
사실 이전 프로젝트에 TODO 관련 서비스도 있어 해당 API를 대부분 그대로 가져왔다.
수업에서는 Sequelize를 기준으로 학습했기에 이번 프로젝트애도 Sequelize를 적용했다.
하지만 이번에는 Prisma를 학습하고 적용 해야했기에 조금 시간이 걸렸다.
Prisma는 TypeScript를 지원하고, Sequelize에 비해 코드가 간결하고 직관적이었다.
그러나 Prisma 적용한 가장 큰 이유는, PlanetScale를 사용하기 위해서였다.
지난 팀 프로젝트를 진행하던 도중 해단 PlanetScale에 대해 알게 되었다. 해당 서비스는 괜찮은 성능의 무료 요금제를 제공한다.
그러나 Vitess로 제작되어 외래키 제약이 걸리지 않는다.
방법을 찾던 도중 Prisma가 이를 대신 처리해준다는 글을 읽었다.
관심이 생겨 Prisma에 대해 찾아보니 Sequelize보다 훨씬 간결하고 직관적이었다.
해당 팀 프로젝트에 적용하기에는 시간이 빠듯하여 적용해보진 못했지만 Prisma에 관심이 생겼다. 그래서 대신 이번 프로젝트에 적용해 보았다.
특히 스키마 코드만 작성하면 타입까지 자동으로 모두 생성해 주는 점이 너무너무너무 편했다.
아무튼 진짜 짱임. TS 짱 프리즈마 짱!
예외 처리
ConnectionError 라는 추상적 에러 클래스를 생성한 뒤, 해당 클래스를 상속 받아 다른 에러 클래스를 만들었다.
이후, sendOrLogErrorMessage 라는 함수를 만들어 에러를 일괄적으로 처리했다.
에러가 ConnectionError에 속한다면 로그 없이 무엇이 문제인지 에러 메시지를 클라이언트에게 전달하고, 그렇지 않을 경우 로그를 남기고 서버 에러 메시지만 전달하도록 만들었다.
지금 생각해보니 클래스로 처리할 거면 메소드로 만드는 방법도 있었을 것 같다.
다음 프로젝트에 적용해 봐야겠다.
FE
Next.js
Next.js는 React의 SSR(Server Side Rendering)을 지원하는 프레임워크이다.
다만 서버에 데이터를 저장하고 불러오는게 주인 앱이다 보니 SSR은 많이 사용하지 않았다.
그래도 그 외에도 디렉토리 기반의 라우팅이나 내부적으로 URL을 숨길 수 있는 기능 등 유용한 기능이 많아 훨씬 편리했다.
SCSS
스타일 시트를 작성할 때 SCSS를 사용했다.
SCSS는 CSS의 상위 집합으로, CSS의 모든 기능을 지원하면서도 더 많은 기능을 제공한다.
특히 변수나 mixin 같은 개념이 있어 코드를 훨씬 간결하게 작성할 수 있었다.