전국 재난 톡: https://disaster-msg-project.vercel.app/

개발 취지

나는 우리나라의 재난과 관련된 언론 보도가 수도권 편향적이라는 점을 인지하게 되었다. 이런 언론 보도로 인해, 전국에서는 다양한 재난 사건이 발생함에도, 사람들은 주로 수도권에서 발생한 사건·사고에만 주목하는 경향이 있다.

그래서 '전국 재난 톡'을 통해 전국 각 지역에서 발송된 재난 메시지를 보여줌으로써, 지방에서도 다양한 재난 사건과 사고가 발생하고 있다는 사실을 알리고 싶었다.

또한, '전국 재난 톡'은 실종자 정보 열람을 타지역 사람들에게도 가능하게 함으로써, 정보 공유와 협력 촉진의 장으로 활용하게 만들고 싶었다.

기술 스택

1. TypeScript
2. Next.js 13
3. Tailwind CSS

1. TypeScript

지금까지 나에겐 TypeScript를 사용할 수 있다는 것을 증명할 수 있는 프로젝트가 없었다. 이번 프로젝트에서는 이력서에 기술된 내용을 증명하기 위하여 이처럼 기술을 택했다.

2. Next.js 13

Next.js의 새로운 버전에 익숙해지기 위해 사용했다.

이번 프로젝트에서는 다음과 같은 신 기능을 사용했다.

2-1. Server Actions

Server Actions를 통하여 서버에서 사용하는 기능을 Client Component와 이어줄 수 있었다. 참고 자료

아래는 내가 쓴 코드의 일부이다.

• 클라이언트 컴포넌트
  

• actions.ts의 getData
  

2-2. Data Fetching

Next.js 13에서 나온 새로운 방법으로 Data Fetching을 해봤다.
이 방법에 관해서는 이전 블로그 포스팅에서 상세히 작성했다.

나는 이번 프로젝트에서 SSR을 구현했다.

getData()의 일부 코드.

3. Tailwind CSS

https://tailwindcss.com/

지금까지는 CSS module을 사용했다. 그러나 CSS module을 사용하면 파일 수가 많아지고, 스타일 변경 시 매번 파일을 이동해야 하는 번거로움이 있다.

그래서 이런 단점을 보완하는 Tailwind CSS를 프로젝트를 통해 연습해 봤다.

써본 결과, 편했다.....
Tailwind CSS가 더 컴포넌트 '모듈화'에 적합하다는 생각이 들었다.
앞으로도 잘 쓸 것 같다.

후기

사실 이 프로젝트는 몇 달 전에 진행했다가 한번 중단했던 프로젝트였다.
당시 이 프로젝트를 팀 프로젝트로 하고 싶었는데, 각자의 사정으로 흐지부지 되었고, 그렇게 잊혀졌던 프로젝트였다.

그러던 9월의 어느 날,아르바이트 하던 중 할 일을 다하고 멍 때리는 중에 문득 이 프로젝트가 떠올랐다. 그리고 개인 프로젝트로라도 진행해야 겠다는 생각이 들었다. 나는 곧바로 스케치하기 시작했다.

이 스케치를 기반으로 진행하였고, 처음 써본 기술로 며칠 만에 사람들에게 공개할 수 있을 정도로 완성되었다.

뿌듯하다.