인스타그램 클론코딩 프로젝트의 frontend 부분 github입니다.
Explore the Organization
Report Bug
·
Request Feature
Table of Contents
Frontend
- 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 필요없는 로직
feat: 새로운 기능에 대한 커밋
fix: 버그 수정에 대한 커밋
build: 빌드 관련 파일 수정에 대한 커밋
etc: 그 외 자잘한 수정에 대한 커밋
docs: README.md 수정에 대한 커밋
style: 코드 스타일 혹은 포맷 등에 관한 커밋(prettier 등)
refactor: 코드 리팩토링에 대한 커밋
/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.tsThis 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
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.jsconst API_KEY = "ENTER YOUR API";
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
- Add Changelog
- 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).
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!
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature) - Commit your Changes (
git commit -m 'Add some AmazingFeature') - Push to the Branch (
git push origin feature/AmazingFeature) - Open a Pull Request
Distributed under the MIT License. See LICENSE.txt for more information.
Your Name - @your_twitter - [email protected]
Project Link: https://github.com/your_username/repo_name
Use this space to list resources you find helpful and would like to give credit to. I've included a few of my favorites to kick things off!
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent