Laugh Log : 실시간 텍스트 에디터 편집 App

Laugh Log는 팀원을 초대하여 실시간으로 텍스트 에디텨 편집이 가능한 앱입니다. Laugh Log →

Troubleshooting

• AWS EC2 https 배포와 네트워크 3 (EC2 HTTPS 배포)
• AWS EC2 https 배포와 네트워크 2 (인스턴스에서 서버 띄우기)
• AWS EC2 https 배포와 네트워크 1 (EC2 인스턴스 생성 및 Elastic IP 연결)
• CSS‐in‐JS와 Next.js에서 Tailwind를 추천하는 이유
• Tailwind Theme, @layer base, components, utilities 활용하기
• Tailwind에서 CSS Nesting 문법 사용하기
• Next 환경 변수 설정 시, prefix로 NEXTPUBLIC 은 언제 붙여야 하는가?

Contributor (R&R)

@JitHoon (최지훈)

1. 텍스트 에디터 페이지
2. 텍스트 에디터 CRUD
3. 실시간 텍스트 에디터 편집 기능 (Socket)
4. 비동기 요청 컴포넌트 관리 및 UX 개선 (Tanstack-Query)
5. 성능 최적화 (Lighthouse(70 -> 99))
6. Socket Backend server Deploy (EC2)
7. Client CI/CD (Vercel)

@ovoxiix (한은지)

1. 대시보드 페이지
2. 팀 CRUD (Firestore, Clerk)

@Bumang-Cyber (정범환)

1. 랜딩 페이지
2. Figma
3. 디자인 시스템 (Tailwind)

Tech Requirment (Tech Stack)

Frontend

• TypeScript
• Next.js 13 (create-next-app)
• React 18
• Socket.io-client
• Tailwindcss, Radix UI
• ESLint, Prettier
• Vercel, Github Actions
• Clerk (회원 인증 및 관리)

Backend

• Node.js
• Express
• Socket.io
• AWS EC2

Main Page Images & Learning Points

랜딩 페이지

• Lighthouse 성능 최적화 (최초 로드 속도 개선)

실시간 텍스트 에디터 페이지

• Next.js Server Component로 한 페이지에서 다양한 렌더링 전략 구현

• 디바운싱(debouncing)를 활용한 실시간 서버 요청 최적화

• Block 단위의 텍스트 에디터 실시간(socket) 상태 관리

• AWS EC2 백엔드 https 배포

대시보드 페이지

• Tanstack-Query를 활용한 서버 상태 관리 및 UX 개선

Other Page Images

로그인 페이지

Script

client

$ npm run build
$ npm run dev

• .env 파일이 필요합니다. (담당자: @JitHoon)

Server

$ npm run server