λ°°ν¬ λ§ν¬ | ID | Password |
---|---|---|
https://earthus.netlify.app | [email protected] | 123123 |
- 1. νλ‘μ νΈ κ°μ
- 2. κ°λ° νκ²½
- 3. νμ νκ²½
- 4. μν λΆλ΄
- 5. νλ‘μ νΈ κ΅¬ν
- 6. ν΅μ¬ κΈ°μ
- 7. νΈλ¬λΈ μν
- EarthUs(μΌμ€μ΄μ€)λ μ λ‘ μ¨μ΄μ€νΈμ κ΄λ ¨λ μλΉμ€λ₯Ό μ 곡νλ νλ«νΌμ λλ€.
- μ λ‘ μ¨μ΄μ€νΈμ κ΄μ¬μλ μ¬μ©μκ° λͺ¨μ¬ μ 보λ₯Ό 곡μ νκ³ μ견μ λλλ SNS 곡κ°μ λλ€.
- λΈλλ λ° κ°μΈ ν맀μμ μν ν보λ₯Ό μ§μν΄ μ λ‘ μ¨μ΄μ€νΈ κ²½μ μνκ³λ₯Ό νμ±ν©λλ€.
- λ΄μ€λ ν° λ°νμ ν΅ν΄ μ λ‘ μ¨μ΄μ€νΈμ λν μ΅μ μμκ³Ό μ 보λ₯Ό μ 곡ν©λλ€.
- νλ‘μ νΈ κΈ°ν: 2023.06.01 ~ 2023.06.11
- νλ‘μ νΈ κ°λ°: 2023.06.12 ~ 2023.06.27
νλ‘ νΈμλ | λ°±μλ |
---|---|
μ 곡 API μ¬μ© |
μ’ λ₯ | μ©λ |
---|---|
React | μΉ/μ±μ νλ©΄μ SPAλ‘ κ°λ°ν μ μλλ‘ μ¬μ© |
Recoil | μ μ μν κ΄λ¦¬λ₯Ό μν΄ μ¬μ© |
Styled Component | μ€νμΌ κ΅¬νμ νΈμλ₯Ό μν΄ μ¬μ© |
@tanstack/react-query | λΉλκΈ° API μ€νμ μν΄ μ¬μ© |
axios | μλ²μ ν΅μ μ μν΄ μ¬μ© |
react-router-dom | νμ΄μ§ λΌμ°ν μ μν΄ μ¬μ© |
uuid | μ»΄ν¬λνΈ λ¦¬μ€νΈμ μ λν¬ν key μμ±μ μν΄ μ¬μ© |
react-infinite-scroller | 무ν μ€ν¬λ‘€ ꡬνμ μν΄ μ¬μ© |
swiper | μ¬λ¬ μ₯ μ΄λ―Έμ§ μ€μμ΄νλ₯Ό μν΄ μ¬μ© |
styled-normalize | μΌκ΄λ νμ€ μ€νμΌμ μ μ©νκΈ° μν΄ μ¬μ© |
3-1. νμ 컨벀μ (μμΈν 보기)
- μ½λ 컨벀μ
(ESlint, Prettier, μμ΄λΉμ€λΉ)
- μ½λ μ€νμΌ ν΅μΌμ μν΄ ESlintλ₯Ό κΈ°λ°μΌλ‘ νλ μμ΄λΉμ€λΉ 컨벀μ μ μ¬μ©νμμ΅λλ€.
- μ½λ κ°λ μ± λ° μ μ§λ³΄μμ± ν₯μμ μν΄ μμ± λ°©μμ ν΅μΌνμμ΅λλ€.
{
"singleQuote": false,
"semi": true,
"tabWidth": 2,
"trailingComma": "all",
"printWidth": 80,
"arrowParens": "avoid",
"endOfLine": "auto"
}
- μ»€λ° μ»¨λ²€μ
π init: μ΄κΈ° μ€μ
β¨ feat: κΈ°λ₯ μΆκ°, μμ , λ³κ²½
π fix: λ²κ·Έ, μ€λ₯ μμ
π docs: readme.md, json νμΌ λ± μμ , λΌμ΄λΈλ¬λ¦¬ μ€μΉ (λ¬Έμ κ΄λ ¨, μ½λ μμ μμ)
π style: CSS λ± μ¬μ©μ UI λμμΈ λ³κ²½ (μ ν μ½λ μμ λ°μ, μ½λ νμ, μ λ ¬, μ£Όμ λ±μ λ³κ²½)
π¦ refactor: μ½λ 리ν©ν λ§
π§ͺ test: ν
μ€νΈ μ½λ μΆκ°, μμ , λ³κ²½ λ± (μ½λ μμ μμ, ν
μ€νΈ μ½λμ κ΄λ ¨λ λͺ¨λ λ³κ²½μ ν΄λΉ)
π ci: npm λͺ¨λ μ€μΉ λ±
π³ chore: ν¨ν€μ§ 맀λμ μ€μ ν κ²½μ°, etc λ±
3-2. νμ λ°©μ (μμΈν 보기)
- λ§€μΌ μμΉ¨ 9μ λ°μΌλ¦¬ μ€ν¬λΌ μ§ν
- Git Flow λΈλμΉ μ λ΅ μ¬μ©
- λμ€μ½λ μΉν μ μ¬μ©ν΄μ github νλ μλ¦Ό
- νΌκ·Έλ§ λμμΈ μμ€ν μ¬μ© (μμΈν 보기)
3-3. νλ‘μ νΈ κ΄λ¦¬ λ° μ΄μ (μμΈν 보기)
- Github Projectλ₯Ό ν΅ν μΌμ κ΄λ¦¬ λ° μ½λ 리뷰
- Github Issueλ₯Ό νμ©νμ¬ μ 무 μ§ν νμΈ λ° κ΄λ¦¬
νλ‘μ νΈ κ΅¬μ‘°
earth_us
ββ .eslintrc.json
ββ .gitignore
ββ .prettierrc.json
ββ .vscode
β ββ settings.json
ββ README.md
ββ package-lock.json
ββ package.json
ββ public
β ββ _redirects
β ββ assets
β β ββ favicon.ico
β β ββ meta.png
β ββ index.html
ββ src
ββ App.js
ββ assets
β ββ fonts
β ββ images
ββ components
β ββ blank
β β ββ Blank.jsx
β β ββ blank.style.js
β ββ chatBubble
β β ββ ChatBubble.jsx
β β ββ chatBubble.style.js
β ββ chatPreview
β β ββ ChatPreview.jsx
β β ββ chatPreview.style.js
β ββ common
β β ββ a11yHidden
β β β ββ A11yHidden.jsx
β β β ββ a11yHidden.style.js
β β ββ avatar
β β β ββ Avatar.jsx
β β β ββ avatar.style.js
β β ββ breakLine
β β β ββ BreakLine.jsx
β β ββ button
β β β ββ Button.jsx
β β ββ card
β β β ββ Card.jsx
β β β ββ card.style.js
β β ββ comment
β β β ββ Comment.jsx
β β β ββ comment.style.js
β β ββ header
β β β ββ Header.jsx
β β β ββ header.style.js
β β ββ imagePrev
β β β ββ ImagePrev.jsx
β β β ββ imagePrev.style.js
β β ββ input
β β β ββ Input.jsx
β β β ββ InputError.jsx
β β β ββ input.style.js
β β β ββ inputError.style.js
β β ββ modal
β β β ββ Modal.jsx
β β β ββ modal.style.js
β β ββ qrCode
β β β ββ QrCode.jsx
β β β ββ qrCode.style.js
β β ββ tabBar
β β β ββ TabBar.jsx
β β β ββ tabBar.style.js
β β ββ textArea
β β ββ TextArea.jsx
β β ββ textarea.style.js
β ββ loading
β β ββ Loading.jsx
β β ββ loading.style.js
β ββ onboarding
β β ββ Onboarding.jsx
β ββ profileFeed
β β ββ ProfileFeed.jsx
β β ββ profileFeed.style.js
β ββ profileHeader
β β ββ ProfileHeader.jsx
β β ββ profileHeader.style.js
β ββ profileProduct
β β ββ ProfileProduct.jsx
β β ββ profileProduct.style.js
β ββ userInfo
β ββ UserInfo.jsx
β ββ userInfo.style.js
ββ hooks
β ββ useApiInfiniteQuery.jsx
β ββ useApiMutation.jsx
β ββ useApiQuery.jsx
β ββ useImageUploader.jsx
β ββ useValidations.jsx
ββ index.js
ββ pages
β ββ chat
β β ββ chatList
β β β ββ ChatList.jsx
β β ββ chatRoom
β β ββ ChatRoom.jsx
β β ββ chatRoom.style.js
β ββ error404
β β ββ Error404.jsx
β ββ feed
β β ββ Feed.jsx
β β ββ feed.style.js
β ββ follow
β β ββ Follow.jsx
β β ββ follow.style.js
β ββ intro
β β ββ Intro.jsx
β β ββ intro.style.js
β ββ post
β β ββ postDetail
β β β ββ PostDetail.jsx
β β β ββ postDetail.style.js
β β ββ postUpload
β β ββ PostImageField.jsx
β β ββ PostUpload.jsx
β β ββ postUpload.style.js
β ββ product
β β ββ productDetail
β β β ββ ProductDetail.jsx
β β β ββ productDetail.style.js
β β ββ productUpload
β β ββ ProductUpload.jsx
β β ββ productUpload.style.js
β ββ profile
β β ββ profileDetail
β β β ββ ProfileDetail.jsx
β β ββ profileEdit
β β β ββ ProfileEdit.jsx
β β β ββ ProfileEditForm.jsx
β β ββ profileUpload
β β ββ ProfileImageField.jsx
β β ββ ProfileTitle.jsx
β β ββ ProfileUpload.jsx
β β ββ ProfileUpload.style.js
β ββ search
β β ββ Search.jsx
β ββ sign
β β ββ SignIn.jsx
β β ββ SignUp.jsx
β β ββ sign.style.js
β ββ splash
β ββ Splash.jsx
β ββ splash.style.js
ββ recoil
β ββ earthusDataAtom.js
β ββ modalConfigAtom.js
β ββ modalStateAtom.js
β ββ privateDataAtom.js
β ββ userDataAtom.js
ββ routes
β ββ InitRoute.jsx
β ββ PrivateRoute.jsx
β ββ Router.jsx
ββ styles
β ββ GlobalFont.jsx
β ββ GlobalStyle.jsx
ββ utils
ββ config.js
μ¬μμ§ | μ€μ§μ | μ μ μ |
---|---|---|
Team Leader Semantic Markup Leader |
Documentation Leader Web Accessibility Leader |
Design Leader Optimization Leader |
github | Blog | github | Blog | github | Blog |
λ°μ€ν¬ν | λͺ¨λ°μΌ |
---|---|
5-2. νμ΄μ§ μ€λͺ (μμΈν 보기)
μΈνΈλ‘ | λ‘κ·ΈμΈ | νμκ°μ |
---|---|---|
νΌλ | κ²μ | μ±ν |
---|---|---|
λ΄ νλ‘ν | μ μ νλ‘ν | νλ‘μ |
---|---|---|
κ²μκΈ μμ± | λκΈ | μν μ λ‘λ |
---|---|---|
6-1. μνκ΄λ¦¬ λΌμ΄λΈλ¬λ¦¬ λμ (μμΈν 보기)
- μν κ΄λ¦¬λ₯Ό νλμ λΌμ΄λΈλ¬λ¦¬λ‘λ§ μ§ννλ κ²μ΄ μλλΌ κ°κ°μ λΌμ΄λΈλ¬λ¦¬μ μ₯μ μ μ΄λ €
Client Stateλ₯Ό κ΄λ¦¬νλ
Recoil
κ³Ό ServerStateλ₯Ό κ΄λ¦¬νλReactQuery
λ₯Ό μ‘°ν©νλ μ λ΅μ μν.
6-2. API νΈμΆμ μν 컀μ€ν ν μ μ (μμΈν 보기)
- μ¬μ©μμκ² λ°μ΄ν°λ₯Ό 보μ¬μ£Όλ
get
λ©μλλ₯Ό μ€ννλ κ²½μ°useQuery
κΈ°λ₯μ μ€ν. - μ¬μ©μκ° μ
λ ₯ν κ°μ μ μ‘νλ
Post
Put
λ©μλλ₯Ό μ€ννλ κ²½μ°useMutation
κΈ°λ₯μ μ€ν. - μ¬μ©μκ° μ²¨λΆν μ΄λ―Έμ§ νμΌμ μ μ‘νκΈ° μν΄
Post
λ©μλλ₯Ό μ€ννλ κ²½μ°useMutation
κΈ°λ₯μ μ€ννκ³ μ²¨λΆλ μ΄λ―Έμ§ λ¬Έμμ΄μ μΉνν΄μ λ°ν. - μ¬μ©μκ° μ€ν¬λ‘€ν λλ§λ€ μλ‘μ΄ λ°μ΄ν°λ₯Ό κ°μ Έμ€κΈ° μν΄
useQuery
λ₯Ό κ³μν΄μ νΈμΆνλ κ²½μ°react-infinite-scroller
λΌμ΄λΈλ¬λ¦¬μInfiniteScroll
μ»΄ν¬λνΈμ νΈνμ±μ΄ μ’μuseInfiniteQuery
κΈ°λ₯μ μ€ν.
6-3. μλ§¨ν± λ§ν¬μ (μμΈν 보기)
- κ²μ APIλ₯Ό ν΅ν κΈ°λ₯ ꡬνμμ μΌμΉνλ κ²μμ΄λ₯Ό ννν λ μ¬μ©μμ νμ¬ νλκ³Ό μ°κ΄μ΄ μλ λΆλΆμ μ£Όμλ₯Ό λκΈ° μν΄ μ¬μ©νλ
<mark>
λ‘ νμ΄λΌμ΄νΈ νν.
6-4. μΉ μ κ·Όμ± (μμΈν 보기)
- swiper slide νμΌλ‘ νμ΄μ§ μ ν κ°λ₯.
- λͺ¨λ¬μ΄ μ΄λ Έμ λ λͺ¨λ¬ μμμ ν¬μ»€μ€ μμ§ μκ³ μ΄λ.
<input type=βfileβ />
μ νμΌ μ ν 컀μ€ν°λ§μ΄μ§ λ²νΌ ν ν€λ‘ μ κ·Ό κ°λ₯.- μΌμΉνλ κ²μμ΄μ μ μ©λλ νμ΄λΌμ΄νΈ κΈ°λ₯μ μ²κ°μ μΈ κ°μ‘°λ‘ μΆκ° ꡬν.
- μ€μκ°μΌλ‘ μ λ°μ΄νΈ λλ μ±ν λ©μΈμ§λ₯Ό μΈμν΄ μ€ν¬λ¦° 리λλ‘ μ½μ΄μ£Όλ κΈ°λ₯ ꡬν.
- [μμ§] κ²μ κΈ°λ₯ μ΅μ νλ₯Ό μν debouncing μ μ©
- [μ§μ] useInfiniteQueryμ queryFn νλΌλ―Έν° μ¬μ©
- [μ μ ] ReactQueryλ₯Ό νμ©ν ServerState μ μ΄