🌐 CodeRamsay - Frontend Repository

코드램지(CodeRamsay)는 회원가입 없이 링크 공유만으로 즉시 시작하는 실시간 코드 리뷰 협업 툴의 프론트엔드 프로젝트입니다.

📖 프로젝트 개요

CodeRamsay는 사용자가 코드 파일을 업로드하고 생성된 링크를 공유하면, 참여자들이 실시간으로 동기화되는 화면을 보며 코드의 특정 부분을 드래그하여 즉시 댓글을 남길 수 있는 웹 서비스입니다. 다수의 동시 접속 환경에서도 끊김 없는 실시간 협업 경험을 제공하는 것을 목표로 합니다.

✨ 주요 기능

• 파일 업로드: 사용자는 리뷰를 원하는 코드 파일을 웹에 업로드할 수 있습니다.

• 실시간 세션 공유: 업로드 후 생성된 고유 링크를 통해 다른 참여자들을 실시간 리뷰 세션에 초대할 수 있습니다.

• 코드 동기화: 모든 참여자는 동일한 코드 화면을 실시간으로 동기화하여 보게 됩니다.

• 영역 지정 댓글: 코드의 특정 부분을 드래그하여 해당 위치에 정확하게 댓글을 남길 수 있습니다.

🛠️ 기술 스택 및 선정 이유

본 프로젝트는 React와 Next.js를 핵심 기술 스택으로 사용합니다. 학교 수업의 요구사항을 충족함과 동시에, 현대적인 웹 애플리케이션의 성능과 사용자 경험을 극대화하기 위해 다음과 같은 이유로 이 조합을 선택했습니다.

1. React: 컴포넌트 기반 UI 라이브러리

React는 UI를 독립적이고 재사용 가능한 컴포넌트 단위로 개발할 수 있게 해주는 JavaScript 라이브러리입니다. 이를 통해 다음과 같은 장점을 얻습니다.

• 코드 재사용성: 버튼, 카드, 입력창 등 공통 UI 요소를 컴포넌트로 만들어 프로젝트 전반에 걸쳐 일관되게 재사용할 수 있습니다.

• 유지보수 용이성: 컴포넌트 단위로 코드가 분리되어 있어 특정 기능의 수정이나 업데이트가 필요할 때 해당 부분만 집중하여 작업할 수 있어 유지보수가 편리합니다.

2. Next.js: React 프레임워크

React는 기본적으로 CSR(Client-Side Rendering) 방식으로 동작합니다. 이는 초기 로딩 시 빈 HTML 파일을 받은 후 브라우저에서 JavaScript를 실행하여 화면을 그리는 방식으로, 첫 페이지 로딩 속도가 느리고 검색 엔진 최적화(SEO)에 불리하다는 단점이 있습니다.

Next.js는 이러한 React의 한계를 보완하고 강력한 추가 기능을 제공하는 프레임워크입니다.

• 서버 사이드 렌더링(SSR) 지원: Next.js는 SSR을 통해 서버에서 최종 HTML을 완성하여 브라우저에 전달합니다. 사용자는 완성된 페이지를 즉시 보게 되어 초기 로딩 속도가 매우 빠르며, 검색 엔진 크롤러 또한 페이지의 모든 콘텐츠를 쉽게 수집할 수 있어 SEO 성능이 극대화됩니다.

• 향상된 사용자 경험: Pre-rendering과 같은 최적화 기법을 통해 사용자에게 더 빠르고 부드러운 웹 경험을 제공합니다.

• 파일 기반 라우팅: 폴더 구조만으로 직관적인 페이지 라우팅을 설정할 수 있어 개발 생산성이 향상됩니다.

결론: React의 뛰어난 컴포넌트 기반 아키텍처로 개발 효율성과 유지보수성을 확보하고, Next.js를 통해 SSR을 구현하여 초기 로딩 속도와 검색 엔진 최적화(SEO)라는 두 마리 토끼를 모두 잡아 최고의 사용자 경험을 제공하고자 합니다.

🚀 시작하기

사전 요구사항

• Node.js (v18.x 이상)

• npm 또는 yarn

설치 및 실행

1. 리포지토리 클론:

git clone https://github.com/codeRamsay/codeRamsay_FE.git
cd codeRamsay_FE

2. 의존성 설치:

npm install

# 또는 yarn install

3. 개발 서버 실행:

npm run dev

# 또는 yarn dev

브라우저에서 http://localhost:3000으로 접속하여 프로젝트를 확인할 수 있습니다.

👥 팀원

• Frontend Lead: 곽민서, 전성민