다이어리 앱 AWS S3 정적 호스팅 배포.

Lekosk.dev·2023년 3월 5일
100년 다이어리AWS S3다크모드프로젝트
0

[ Next.js ] 100년 다이어리 앱 제작

목록 보기
10/10

다이어리 앱 배포.
100diary.site

2주만에 돌아왔다. 최근 2주 동안은 시청하고 있던 인프런 강의를 마저 학습을 마무리하였고, 다시 다이어리 앱 개발을 진행해보았다. 이 다이어리 프로젝트는 개발에 약 일주일 정도 소요되었으며 이제 프로젝트를 마무리하려고 한다.

01. 구현

✅ 결과.

  • 페이지 및 컴포넌트 구현
    푸터 컴포넌트 구현.
    통계 페이지 구현.
    설정 페이지 구현.
    헤드 컴포넌트에 메타데이터(og) 적용.

  • 페이지 별 수정 사항
    피드 : 셀렉트 인풋을 이용하여 기분 별로 파이어스토어 페칭.
    날짜 : 오늘 날짜, 전날, 다음날로 이동하는 버튼 추가.
    통계 : 지금까지 산 주를 그래프로 표현.
    통계 : 파이어베이스를 페칭하여, 게시판에 적용된 기분별 갯수 카운트. (행복 4개, 슬픔 2개 ...)
    설정 : useRef를 이용하여 설정 Box 클릭시 버튼 이벤트 제어.
    설정 : recoil 라이브러리을 이용하여 전역상태 설정(다크모드, 생일, 화면사이즈 조정).
    설정 : 브라우저 로컬 스토리지에 값 넣어서 새로고침 해도 설정사항 유지.

  • 스타일
    반응형 : 모바일 환경에서 레이아웃 @media 반응형 구현.
    스타일셋 : 루트를 이용한 스타일 셋 통일.
    스타일셋 : 다크모드 구현.
    antd : antd 컴포넌트에 emotion 스타일 적용.
    antd : 로딩시, 로딩 컴포넌트 (antd Spin 컴포넌트) 삽입.

  • 배포
    빌드 : package.json 스크립트에 "build:ssg": "next build && next export" 추가 후 빌드.
    호스팅 : AWS S3(스토리지)에서 정적 호스팅 배포.
    도메인 : 가비아에서 도메인 구입 후, AWS Route53을 통해 도메인 연결.

✅ 스크린샷.

▼ 다이어리 홈 화면(달력 페이지).

▼ 날짜 페이지. 달력 페이지에서 날짜를 누르면 진입할 수 있다.

▼ 피드 페이지. 기분 별로 분류할 수 있다.

▼ 글 작성, 수정 페이지.

▼ 통계 페이지.

▼ 설정 페이지. 설정사항은 브라우저의 로컬스토리지에 저장된다.

▼ 다크모드 적용.

02. 상태를 저장하자

✅ recoil 라이브러리 : 전역 상태 설정.

recoil은 정말 편했다. redux를 사용안해본 것은 아니였지만, 세팅할 것도 너무 많고 번거로웠다. 물론 리덕스 툴킷이 나왔다고는 하나, 아직 나의 프로젝트 볼륨 안에서는 이정도 기능을 위해서는 recoil 라이브러리면 충분했다.

▼ 화면 사이즈 변경 토글 스위치.

  1. 스토어 셋팅
디렉토리 : src\store\atoms.ts
import { atom } from "recoil";
export const sizeToggleState = atom({
	key: "sizeToggleState", // 스테이트 이름
	default: false, // 초기값
});
  1. 루트app 셋팅
import { RecoilRoot } from 'recoil';
export default function App() {
	return (
		<RecoilRoot>
			<컴포넌트>
		</RecoilRoot>
	)
};
  1. 사용
const [sizeToggle, setSizeToggle] = useRecoilState(sizeToggleState);

이러한 전역 상태 설정을 통해 브라우저에 저장해둘 필요는 없지만 페이지 간에서는 주고받아야 할 정보(예 : 내가 현재 보고있는 페이지의 네비게이션 액티브 등)를 설정할 수 있다.

✅ 로컬 스토리지 : 설정된 내용을 브라우저에 저장.

// 컴포넌트 마운트 시, getItem 함수로 로컬스토리지에서 사이즈를 가져온다.
useEffect(() => {
	const currentSize = localStorage.getItem("size");
    if(currentSize === "mini"){setSizeToggle(true)};
}, [])

// 사이즈가 변경된다면, setItem 함수로 로컬스토리지의 값을 설정한다.
const onChangeSize = (checked: boolean) => {
	setSizeToggle(checked);
    if (checked) {localStorage.setItem("size", "mini")};
    else {localStorage.setItem("size", "full")};
};
// antd의 스위치 컴포넌트는 
<Switch 
	ref={sizeRef}
    checked={sizeToggle}
    onChange={onChangeSize}
/>

여기서 주의할 점은, 로컬스토리지는 ssr에서는 프리렌더링 시 동작하지 않기 때문에 , 하이드레이션 이슈가 발생할 수 있다. 따라서 useEffect로 감싸주거나, 클릭이벤트 발생 시에 접근 할 수 있게 만들어야 한다.

03. 스타일링을 정리하자

※ 복습 및 내가 보려고 작성하는 보일러 플레이트 코드.

✅ 글로벌 스타일 : 전역변수 (var/root) 및 다크모드.

// global.css
:root {
	--background-primary-color: #fff;
	--background-secondary-color: #fafbfc;
	--background-today-color: #ffffd9;
	--highlight-blue-color: #1677ff;
	--highlight-yellow-color: #ffc568;
	--border-color: #dae1e6;
	--text-color: #000;
}
// 다크모드 시, 아래와 같은 속성을 사용한다.
@media (prefers-color-scheme: dark) {
	:root {
		--background-primary-color: #1e1e1e;
		--background-secondary-color: #121212;
		--background-today-color: #383840;
		--border-color: #383840;
		--text-color: #fff;
	}
}
// css 맨 아래에 삽입.
@media (prefers-color-scheme: dark) {
	html {
		color-scheme: dark;
	}
}

✅ 반응형 스타일 : @media.

@media (max-width: 768px) {
    반응형 스타일 내용
}

04. 느낀점

✅ 아직도 궁금한 점과 하고싶은 일은 남아있다.

물론 완벽한 코드는 존재하지 않고 항상 개선점은 보이겠지만, 이 프로젝트를 통해서 익힌 학습 목표는 충분히 달성하였다고 생각했다. 하지만 그럼에도 풀리지 않았거나, 아직 남아있는 궁금증을 아래와 같이 나열해보았다.

  • 메모리 및 네트워크 사용을 조금 더 효율적으로 사용하기 위해선 개발하는데에 어떤 절차를 지향해야 하는가?
  • 호스팅을 통해서 나가는 비용은 얼마나 나오며, 어디까지 나는 부담할 수 있을까?
  • 실무에서 협업을 위해 git플로우에 대한 학습을 진행하였으나, 혼자서는 이를 적용하기엔 아직 거리감이 있었다. 나도 협업 방식을 적용한 팀에서 일해보고 싶다.
  • 모바일에서는 세션스토리지를 활용한 설정사항이 부드럽게 수정이 되지 않는 듯 하다. 모바일 환경은 브라우저와 어떻게 다른가?
  • 인프런으로 GraphQL과 아폴로를 학습하였는데, OPEN API 중 다이어리에 적용할 수있는 API가 있을까?
  • 파이어베이스 APP을 테스트버전으로 열어두었기 때문에 30일이 지나면, 공개가 종료된다. 운영에 있어 파이어베이스, AWS, 도메인 등을 한번에 관리하는 방법이 있을까?
  • 서비스를 배포함에 있어, 개인정보 및 보안을 어디까지 활용하고, 어디까지 적용하여 세상에 배포해야 할까? 단순히 개발하는 todolist를 넘어, 실제로 이 세상의 서비스들은 상당히 많은 행정적인 일을 많이 직면해야한다. 나 또한 그러한 경험을 쌓고싶다.

✅ 정적 호스팅.

포트폴리오 및 학습 목적을 위하여 개발한 이 다이어리앱을 AWS를 통하여 배포까지 해보았는데, 일단 정적호스팅 배포를 했기 때문에, url에 동적페이지id가 담긴 곳은 불러올 수 없었다.

따라서 http://100diary.site 로 접속한다면 바로 http://100diary.site/2023/ 페이지로 이동하게끔 만들어 놓았기 때문에(로그인 기능을 구현한다면, 로그인 화면으로 이동하게 만들 예정) 정상적으로 이용이 가능했지만, http://100diary.site/2023/ 으로 바로 접속한다면 에러페이지로 이동하게 된다.

이를 해결하기 위해선 aws의 ec2로 배포하여 동적 호스팅을 기대할 수 있다. 차후엔 동적 호스팅 및 https 인증, 로그인 등 아래와 같은 사항에 대해 학습 후 적용을 하기로 하자.

✅ 수정 예정사항.

  • 네비게이션에 현재 페이지 하이라이트. (전역 상태)
  • 피드 페이지 : 무한 스크롤 삽입.
  • readme 작성.
  • 달력 페이지에서 2개 이상 작성된 날짜에 마우스 오버 시, 글 갯수 보여주는 팝업 표시.
  • 달력 페이지에서 최근에 작성된 피드가 있다면 new 뱃지 노출.
  • 달력 페이지에서 게시글이 작성된 날짜 마우스 호버 시 프리페칭 적용.

✅ 학습 후 적용사항.

  • EC2와 CDN을 적용하여 동적라우팅.
  • https 인증.
  • 페칭 리팩토링.
  • 피드 페이지에서 검색 기능 추가.(디바운싱 이용)
  • 날짜 페이지에 공휴일 정보를 표기.(api 이용)
  • 로그인 auth 기능 추가.
  • 전체적인 스타일링 컨셉 개선.
  • 모바일(리액트 네이티브)앱 및 넥스트론 앱로 확장.
profile
Lekosk.dev
[ 자아 · 관계 · 우주 ] 를 사랑하는 개발자가 되자.
이전 포스트

파이어베이스 글 수정, 삭제 기능 구현.

0개의 댓글