lexifdev/disaster-msg-project

This project is a website that displays the status of disaster text message alerts in South Korea.

전국 재난 톡

이 웹사이트에서는 전국 각 지역에서 발송된 재난 메시지를 볼 수 있습니다.

⚠️ 현재 로컬 서버에서만 정상적으로 작동합니다. 웹 서버에서는 에러가 발생하여 작동하지 않습니다. 이른 시일 내에 고치도록 하겠습니다.

• PC 버전

• 모바일 버전

기본 정보

• 제작 기간: 2023.09.09 ~ 2023.09.15
• 제작 인원: 1명
• 기술 스택: Next.js 13, TypeScript, Tailwind CSS, React.js.

이 프로젝트의 목표

다음 4가지를 중점에 두고 프로젝트에 임했습니다.

1. TypeScript + Next.js 프로젝트 생성하기
2. OPEN API 사용하기
3. Tailwind CSS 사용하기
4. 무한 스크롤 구현하기

1. TypeScript + Next.js 프로젝트 생성하기

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

2. OPEN API 사용하기

이번 프로젝트에서 공공데이터포털로부터 데이터를 성공적으로 가져오는 것이 저의 목표였습니다.

현재 로컬 서버에서는 정상적으로 작동하니, 절반은 성공했다고 생각합니다.

3. Tailwind CSS 사용하기

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

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

Tailwind CSS를 활용하여 이런 것도 구현해봤습니다.

• 반응형 웹

  

• 다크 모드

  

4. 무한 스크롤 구현하기

이번 프로젝트를 통해 무한 스크롤을 구현하여 원리와 방법을 익혔습니다. 또한 이 과정에서 Next.js 13의 새 기능인 ‘server action’을 알게 되었습니다.

앞으로의 계획

1. 웹 서버에서 발생한 에러 고치기.
2. 새로운 정보가 들어왔을 때, 유저가 새로고침을 하지 않고도 새로운 정보를 볼 수 있도록 구현하기.