깃허브
https://github.com/dohpark/twitter-advertisement-exposure
개발 기록 노션
Next.JS로 개발자용 개량형 트위터 만들기
기술스택 및 선택 이유
- Yarn berry
- Nextjs
- 서버사이드 렌더링을 지원
- swc를 활용한 짧은 빌드 시간
- 빌드된 파일을 캐싱하여 빠른 로딩을 지원
- Typescript
- 정적 타입 검사를 통한 안정성 및 버그 사전 제거
- 타입을 통한 코드 자동완성 기능을 제공하여 생산성 향상에 도움
- TailwindCss
- 미리 정의된 css 클래스를 활용하여 빠르고 쉽게 css를 적용
- mySql
- 추후에 추가될 수 있는 기능들 (좋아요, 회원가입) 등이 관계형 데이터베이스에 적합
- 작은 규모의 앱으로 퍼포먼스보다는 빠르고 쉽게 사용할 수 있는 mySql 선택
- Prisma
- ORM을 활용하여 비즈니스 로직에만 집중하도록 도와줌
- 쉽게 데이터베이스 정보를 변경할 수 있다. (테이블 내 새로운 컬럼 추가 및 삭제 등)
- Tanstack/react-query
- 서버와의 통신 과정의 상태(loading, success 등) 및 서버 데이터 상태를 쉽게 관리
- 무한스크롤에서 불러온 피드들을 쉽게 캐싱할 수 있음
- React-markdown
- 피드를 마크다운 문법 파싱 및 렌더링 라이브러리
- 다양한 플로그인을 쉽게 주입할 수 있어 추가 기능 확장에 용이함
- React-syntax-highlighter
- react-markdown의 플러그인
- 코드의 문법 하이라이트 기능을 제공
- Remark-gfm
- react-markdown의 플로그인
- table, taskList 등의 마크다운 문법 파싱 기능 제공
구현한 기능
메인페이지
- 무한스크롤로 피드들을 확인할 수 있다.
- 첫 8개의 피드들을 넘기면 4개의 피드마다 광고가 나온다.
- 피드 및 광고의 조회수를 확인할 수 있다.
- 피드 및 조회수는 사용자한테 100% 보여야만 증가한다.
피드 작성 페이지
- 마크다운 문법으로 작성할 수 있다.
- preview 탭을 통해 마크다운이 정상적으로 렌더링하는지 확인할 수 있다.
- 피드에 글 작성 시 @을 이용하여 특정 username을 작성하면 링크를 통해 해당 사용자 페이지로 이동 가능하다.
- 아이디, 비밀번호, 글을 작성하면 트윗하기 버튼이 활성화 된다.