Instagram-Clone-Coding/React_instagram_clone

FE-Instagram-Clone

인스타그램 클론코딩 프로젝트의 frontend 부분 github입니다.
Explore the Organization

Report Bug · Request Feature

Table of Contents

- Built With
Getting Started
Usage
Roadmap
Contributing
License
Contact
Acknowledgments

Built With

Frontend

(back to top)

Getting Started

convention

Conding Convention

Event Handler 네이밍: ~handler
```
const exampleHandler = (): void => {};
```

Handler Function Prop 네이밍: on~

return <ExampleComponent onSubmit={exampleHandler} />;

Interface 네이밍: Pascal Case +
- props으로 넘길 때 ~Props
```
interface ExampleProps {
    name: string;
}
```
- 다른 모든 경우, ~Type

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

const StyledTag = styled.div``;

return (
    <StyledTag>
        <div>Not</div>
        <div>There</div>
    </StyledTag>
);

타입 관리

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

파일(폴더) 네이밍 : Pascal Case(components, pages 제외)
```
ExampleFileName;
```
컴포넌트 폴더 구조 관리
```
/SomeComponent
│ index.js
│ SomeComponent.tsx
├── /SomeChildrenComponent
│ ├── index.js
│ └── SomeChildrenComponent.tsx
/SomeComponent2
│ index.js
│ SomeComponent2.tsx
```
index.tsx를 자주 사용하게 되면 파일 이름으로 검색해 작업에 용이하지 못하므로 컴포넌트이름.tsx 사용을 지향하고 index.js 로 import를 쉽게 할 수 있게한다.
관심사 분리 UI와 로직을 분리합니다.

UI 담당: .tsx
로직 담당
- custom hook: hooks 필요한 로직
- utils: hooks 필요없는 로직

Commit Convention

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

Directory Structure

/src
│ App.tsx
│ Index.tsx
│ react-app-env.d.ts
│ Routes.tsx
├── /@type
│ └── index.d.ts
├── /app/store
│ ├── /ducks
│ │ └── /각 기능 단위 폴더 이름
│ │   └── ...Slice.ts
│ │   └── ...Thunk.ts
│ ├── hooks.ts
│ └── store.ts
├── /assets
│ ├── Images
│ └── Svgs
├── /components
│ ├── /Commmon
│ ├── /Direct
│ ├── /Home
│ ├── /Login
│ └── /Signup
├── /pages
│ ├── /Direct
│ ├── /Home
│ └── /Login
├── /styles
│ ├── /UI
│ ├── globalStyles.ts
│ ├── styled.d.ts
│ └── theme.ts

Prerequisites

This is an example of how to list things you need to use the software and how to install them.

npm
```
npm install npm@latest -g
```

Installation

Below is an example of how you can instruct your audience on installing and setting up your app. This template doesn't rely on any external dependencies or services.

Get a free API Key at https://example.com

Clone the repo

git clone https://github.com/your_username_/Project-Name.git

Install NPM packages
```
npm install
```
Enter your API in config.js
```
const API_KEY = "ENTER YOUR API";
```

(back to top)

Usage

Use this space to show useful examples of how a project can be used. Additional screenshots, code examples and demos work well in this space. You may also link to more resources.

For more examples, please refer to the Documentation

(back to top)

Roadmap

[x] Add Changelog
[x] Add back to top links
[] Add Additional Templates w/ Examples
[] Add "components" document to easily copy & paste sections of the readme
[] Multi-language Support
- [] Chinese
- [] Spanish

See the open issues for a full list of proposed features (and known issues).

(back to top)

Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!