개요

연말을 맞아 시상식 서비스를 빠르게 만들기로 결정.

공유 바이럴을 태우려면 카카오톡 인앱 브라우저에서 원활해야했다.

새 프로젝트 진행할 때마다 불편한 영역으로 나를 던지려 시도하는데

그 과정에서 겪은 이슈를 두서없이 정리.

회고

1. 최신 리액트와 next.js

근 몇달 RN만 붙잡고 있었고, latest 리액트를 사용할 기회가 없어서 초반에 헤맴

서버 컴포넌트, 서버 액션, 동시성 등을 이제야 사용해봄.

expo, supabase, next.js 등 서비스 + 개발 도구를 통합 제공하는(뭐라 칭하는 지 모르겠다)

플랫폼이 점점 정교해진다.

개발 시 고려할 부분은 줄어들고 블랙박스는 점점 커지는게 마냥 좋지만은 않았으나

개발 속도는 정말 빨라졌다.

서버 컴포넌트의 행동 제한이 처음에는 불편했음.

쓸 수록 서버/클라이언트 관심사 분리를 강제함으로써 코드 구조와 목적이 명확해지는 걸 느낌.

그 제한에 맞춰 따라가기만 하면서 자연스럽게 역할 구분 방식을 학습하는 효과가 있었음.

2. Tailwind

손에 익은 styled-components를 고집해왔으나

shadcn-ui 맛보려 테일윈드와 재회.

처음엔 한참 삐걱거리다 프로젝트 막바지에서야 적응함.

적응하니 편하더라. 반응형 만들 때 굿.

런타임 CSS-in-JS가 시들해지고 테일윈드가 CSS 프레임워크 주류로 자리잡으면서

익숙해지면 좋을 것이라 생각했는데 이번 기회에 친해졌다.

스타일을 재사용하기보다는

컴포넌트를 재사용하는게 테일윈드 철학인 것 같은데 조금 더 적응이 필요할 듯

3. next-intl

next.js@15 부터 서버 컴포넌트가 기본값.

서버 컴포넌트 국제화를 지원하는 next-intl 을 사용해봄.

HTTP 요청 헤더의 Accept-Language를 이용해 i18n을 적용하는 방식이며

타 라이브러리와 동일하게 클라이언트 측 번역도 가능하다.

동적 메타데이터 생성이 가능한 next.js와의 조합으로 수월하게 오픈그래프도 번역했다.

4. 서버액션 에러 분기

next.js 처음이라 감 못잡은 부분

서버액션은 서버에서 실행되는 함수. 즉, 클라이언트 런타임과 분리된 서비스.

서버액션에서 throw로 던지면 당연히 클라이언트에서 그걸로 분기처리는 불가.

분기 태울거면 200 + 에러코드 조합으로 처리해야한다.

5. Theme

IOS18부터 플랫폼 레벨에서 다크 테마 아이콘, SplashScreen theming을 지원하고

이제 사용자 환경 별 theming이 기본값이 된 듯 하다.

테마 없이 빠르게 무언가를 만들고 싶은데 그렇게 하기가 어려워졌다.

디바이스 레벨의 자체 theming이 있고, UI 라이브러리에서도 자동 지원되다보니

디자인 마치고 테마 바꿔보면 색상 틀어지는 경우가 종종 발생.

이런 건 좀 불편하다.

6. SEO

메타데이터 작성, 오픈그래프 국제화 및 플랫폼 별 노출 방식 고려

처음 해봐서 재밌었다.

도메인 구매해 구글 서치 콘솔도 등록.

검색 시 작성한 description이 나오지 않고 봇이 요약한 대로 노출되는 현상이 있었는데,

해당 링크 참조해 해결.

Description은 서비스 명과 키워드를 포함하는게 좋다고 한다.

7. 애드센스

심사에 시간이 걸리니 미리미리 준비하기

관심 감사합니다.

종종 찾아뵙겠습니다.

평안한 연말 보내세요.

OrganCow님의 아티클

개요

회고