NomadCoders Community Clone

노마드 코더 커뮤니티를 기반으로 유저 인증, 게시물 등을 클론한 웹사이트 입니다.

웹사이트 구경하기 -> https://nomad-coders-community-clone.netlify.app

Report Bug · Request Feature

Table of Contents

1. • 기술 스택
2. Getting Started
   • Convention
   • Commit Convention
3. Usage
4. License
5. Contact

기술 스택

Frontend

• React.js
• Recoil.js
• Firebase

(back to top)

Getting Started

convention

• Conding Convention

1. Event Handler 네이밍: ~handler

   const exampleHandler = (): void => {};

2. Handler Function Prop 네이밍: on~

   return <ExampleComponent onSubmit={exampleHandler} />;

3. Interface 네이밍: Pascal Case + ~Props

   interface ExampleProps {
       name: string;
   }

4. styled-components 구조: 최상위 태그에만 한 번

   const StyledTag = styled.div``;
   
   return (
       <StyledTag>
           <div>Not</div>
           <div>There</div>
       </StyledTag>
   );

5. 타입 관리

• 전역적으로 재사용될 타입: src/@types/index.d.ts에서 declare하여 정리(import, export 필요 없음)
• 단 하나의 컴포넌트에만 쓰이는 타입은 해당 파일 내부에 선언해도 무관
• 타입 선언 방식: interface(대부분의 타입) + type alias(원시 타입)

6. 파일(폴더) 네이밍 : Pascal Case(components, pages 제외)

   ExampleFileName;

7. 컴포넌트 폴더 구조 관리

   /SomeComponent
   │ index.js
   │ SomeComponent.tsx
   ├── /SomeChildrenComponent
   │ ├── index.js
   │ └── SomeChildrenComponent.tsx
   /SomeComponent2
   │ index.js
   │ SomeComponent2.tsx

   index.tsx를 자주 사용하게 되면 파일 이름으로 검색해 작업에 용이하지 못하므로 컴포넌트이름.tsx 사용을 지향하고 index.js 로 import를 쉽게 할 수 있게한다.

Commit Convention

feat: 새로운 기능에 대한 커밋
fix: 버그 수정에 대한 커밋
build: 빌드 관련 파일 수정에 대한 커밋
etc: 그 외 자잘한 수정에 대한 커밋
docs: README.md 수정에 대한 커밋
style: 코드 스타일 혹은 포맷 등에 관한 커밋(prettier 등)
refactor: 코드 리팩토링에 대한 커밋

Usage

반응형 레이아웃을 기반으로 하였습니다.

1. Authentication

• 회원가입(일반/github)

• 로그인(일반/github)

• 다시 접근해도 자동 로그인
• 로그아웃

2. Home

• 카테고리 정렬
• 인기순/최신순 정렬
• pinned된 게시물은 최상단 정렬
• 10페이지로 pagination

• 게시글 좋아요(transaction)

3. Search

• 검색 결과를 포함하는 제목을 가진 게시글 필터링
• 10페이지로 pagination

4. Upload

• 제목, 카테고리
• 에디터를 사용하여 게시글 작성
• 개발자는 pinned 여부를 선택

5. Thread

• (본인이 작성한 글이라면) 삭제/수정

• 댓글/대댓글

• 게시글 좋아요(transaction)

6. profile 수정

• 닉네임 수정
• avatar 수정
• 계정 삭제

(back to top)

License

Distributed under the MIT License.

(back to top)

Contact

김영인 - [email protected]

신지호 - [email protected]

Project Link: https://github.com/kimyoungyin/Nomadcoder-study-community

(back to top)