View Code? Open in Web Editor
NEW
๐ป Github Repo ๊ธฐ๋ฐ ๊ฐ๋ฐ ์ฅ๋ ค SNS
Home Page: https://pick-git.com/
Java 70.53%
JavaScript 0.08%
TypeScript 29.08%
HTML 0.05%
Shell 0.27%
2021-pick-git's People
2021-pick-git's Issues
์์
๋ด์ฉ
- ๋ก๊ทธ์ธ ๊ธฐ๋ฅ ๋ฆฌํฉํ ๋ง.
- ๋ก๊ทธ์ธ ๊ธฐ๋ฅ ๊ด๋ จ ํ
์คํธ ์ฝ๋ ์ถ๊ฐ (๋จ์ ํ
์คํธ + ์ธ์ ํ
์คํธ)
๊ตฌํ ๊ธฐ๋ฅ
- ํ์ผ ์
๋ก๋ ๊ธฐ๋ฅ์ ๊ตฌํํ๋ค.
์์
๋ด์ฉ
์ฃผ์์ฌํญ
๊ตฌํ ๊ธฐ๋ฅ
Avatar์ปดํฌ๋ํธ
์์
๋ด์ฉ
์ฃผ์์ฌํญ
- img size์ text size๋ฅผ prop์ผ๋ก ๋ฐ๋๋ค.
๊ตฌํ ๊ธฐ๋ฅ
์์
๋ด์ฉ
- Github API๋ฅผ ์ฌ์ฉํ์ฌ ์ฌ์ฉ์์ Public Repositories ๋ชฉ๋ก ์กฐํ
๊ตฌํ ๊ธฐ๋ฅ
- ๋ฐฑ์๋ ํ๋ก์ ํธ์ ํจํค์ง ๊ตฌ์กฐ๋ฅผ ๋๋ฉ์ธ ๋ฐ ์น ๊ณ์ธต์ ๋ง๊ฒ ๋ถ๋ฆฌํ๋ค.
- ๊ธฐ๋ณธ์ ์ธ ์ํฐํฐ ํด๋์ค๋ค์ ์์ฑํ๋ค.
์์
๋ด์ฉ
- ๋๋ฉ์ธ๋ณ๋ก ์์ ํจํค์ง๋ฅผ ๊ตฌ๋ถํ๊ณ , ์ธ๋ถ์ ์ผ๋ก ์น ๊ณ์ธต์ ๋ง๋ ํจํค์ง ๊ตฌ์กฐ๋ฅผ ์ ์ํ๋ค.
- ์ํฐํฐ ํด๋์ค๋ค์ ์ฐ๊ด ๊ด๊ฒ ๋ฐ ํ๋๋ช
์ ์ ์ํ๋ค.
์ฃผ์์ฌํญ
๊ตฌํ ๊ธฐ๋ฅ
- ์ฌ์ฉ์๊ฐ ๊ธ์ ์
๋ก๋ํ ๋ ์ ํํ ํ๊ทธ๋ฅผ ์ ์ฅํ๋ค.
- ๊ฒ์๊ธ๋ก ์ ์ฅ๋ ํ๊ทธ๋ฅผ ์กฐํํ๋ค.
์์
๋ด์ฉ
- ํ๊ทธ๋ฅผ ์์ํํ๋ค.
์ฃผ์์ฌํญ
๊ตฌํ ๊ธฐ๋ฅ
CountIndicator์ปดํฌ๋ํธ
์์
๋ด์ฉ
์ฃผ์์ฌํญ
๊ตฌํ ๊ธฐ๋ฅ
- ๊ณ์ ์์ ์์ ํ๋กํ ํด๋ฆญ ์ ๊ธฐ๋ณธ ํ๋กํ ์ ๋ณด๋ฅผ ์ ๊ณตํ๋ค.
- ํ์ ์ ํ๋กํ ํด๋ฆญ ์ ๊ธฐ๋ณธ ํ๋กํ ์ ๋ณด๋ฅผ ์ ๊ณตํ๋ค.
- ํต๊ณ ํญ ํด๋ฆญ ์ ํด๋น ์ฌ์ฉ์์ Github ํต๊ณ ์ ๋ณด๋ฅผ ์ ๊ณตํ๋ค.
์์
๋ด์ฉ
- ๊ณ์ ์์ ์์ ํ๋กํ์ ํด๋ฆญํ์ ๊ฒฝ์ฐ
- ํค๋์ ์๋ ํ ํฐ ์ ๋ณด๋ก ์ฌ์ฉ์๋ฅผ ํ์ธํ๋ค.
- ์ฌ์ฉ์์ ์ ๋ณด๋ฅผ ๋ฐํํ๋ค.
- ํ์ธ์ ํ๋กํ์ ํด๋ฆญํ์ ๊ฒฝ์ฐ
- ์ ์ฅ๋์ด์๋ ํ์ธ์ ๊ณ์ ์ ๋ณด๋ฅผ ๋ฐํํ๋ค.
์ฃผ์์ฌํญ
- ๊ธฐ์กด์
/{username}
API๋ก ํ์ธ ๊ณ์ ๋ง ์กฐํํ๊ณ , ์์ ์์ ๊ณ์ ์กฐํ์ /me
API๋ก ์กฐํํ๋๋ก API ๋ช
์ธ๋ฅผ ์ถ๊ฐํ๋ค.
์์
๋ด์ฉ
- ๊ฒ์๋ฌผ ์์ฑ redirect URI ์์
- primary key ๋ฐํ -> unique key ๋ฐํ์ผ๋ก ๋ณ๊ฒฝ
๊ตฌํ ๊ธฐ๋ฅ
- Comment ์ปดํฌ๋ํธ๋ฅผ ๊ตฌํํ๋ค.
์์
๋ด์ฉ
- ์ ์ฒด์ ์ธ ์ํฐํฐ์ DB ์ค๊ณ.
- ์ค๊ณ๋ ๋ด์ฉ๋๋ก ์ํฐํฐ ๊ฐ์ฒด ๊ตฌํ.
- ์ํฐํฐ ๋ฐ ๊ฐ ๊ฐ์ฒด ๋ค์ด๋ฐ ํต์ผ.
์ฃผ์์ฌํญ
- ์ด๊ฒ๋ถํฐ ํด์ผํ ๋ฏ ํฉ๋๋ค..^^ ์ง๊ธ ๊ฐํ์..
๊ตฌํ ๊ธฐ๋ฅ
ContributionGraph์ปดํฌ๋ํธ ๊ตฌํ
์์
๋ด์ฉ
์ฃผ์์ฌํญ
์์
๋ด์ฉ
- ํ์ฌ ๋๊ธ์ ์์ฑํ ์๋ ์์ด๋ ์ด๋ฅผ ์ ์ฅํ ์๋จ์ด ์์ผ๋ฏ๋ก(Enter๋ฅผ ๋๋ฅด๋ฉด ๊ฐํ์ด ๋์ด์ผ ํจ) PostItem ์ปดํฌ๋ํธ์ ๋๊ธ ๋ฌ๊ธฐ ๋ฒํผ์ ์ถ๊ฐํ๋ค.
๊ตฌํ ๊ธฐ๋ฅ
Tabs์ปดํฌ๋ํธ ๊ตฌํ
์์
๋ด์ฉ
- ๋๊ฐ์ ํญ์ ๋ฐ๋๋ค.
์ฃผ์์ฌํญ
๊ตฌํ ๊ธฐ๋ฅ
Chip์ปดํฌ๋ํธ ๊ตฌํ
์์
๋ด์ฉ
- delete๋ฒํผ์ ๊ฐ์ง ์ ์๋ค.
์ฃผ์์ฌํญ
๊ตฌํ ๊ธฐ๋ฅ
SearchHeader์ปดํฌ๋ํธ ๊ตฌํ
์์
๋ด์ฉ
- ์ด์ ํ์ด์ง ๋งํฌ๋ฅผ ํฌํจํ๋ค.
- ๊ฒ์ ์ธํ์ ํฌํจํ๋ค.
์ฃผ์์ฌํญ
๊ตฌํ ๊ธฐ๋ฅ
์์
๋ด์ฉ
์ฃผ์์ฌํญ
๋ฐ์ดํฐ ์ ์ถ ์๋๋ก ์ธ๊ฐ์ชฝ์ ์ ๊ด๋ฆฌํ ๊ฒ.
๊ตฌํ ๊ธฐ๋ฅ
์์
๋ด์ฉ
์ฃผ์์ฌํญ
- ํ์ฌ DDL์ JPA ๊ธฐ๋ฐ์ผ๋ก ์์ฑํ๋ค ๋ณด๋, ์ธ๋ํค ์ ์ฝ ์กฐ๊ฑด ์ด๋ฆ์ด constraint ["FK8KCUM44FVPUPYW6F5BACCX25C ์ ๊ฐ์ด ๋๋คํ๊ฒ ์์ฑ๋ฉ๋๋ค.
- ๋๋ฒ๊น
ํ๊ธฐ ์ด๋ ต์ต๋๋ค.
๊ตฌํ ๊ธฐ๋ฅ
- ํ์ผ ์
๋ก๋ ์ ๊ณต
- ํ์ผ ๋งํฌ ์ ๊ณต
- ํ์ผ ์ญ์ ์ ๊ณต
api ๋ช
์ธ ์ ์์
๋๋ค
๋ฏธ๋ฆฌ ์บ์น๋ฅผ ํ์ด์ผํ๋๋ฐ ๋ท๋ถ์ด๋ค์ใ
ใ
- response body์ json์ ๋ณด๋ด์ค ๋ ๋ฐฐ์ด๋ก ๋ณด๋ด์ค ์ ์๋๊ฑด ๋ฐฐ์ด์ ํํ๋ฅผ ์ ์งํ๋ ๊ฑฐ ์ด๋จ๊น์?
- ๊ฒ์๊ธ ์กฐํ
{ posts: [{} , {}, โฆ] } => [{}, {}, โฆ]
- public repo
{ [{}, {}, โฆ]} => [{}, {}, โฆ]
- ์ฌ์ฉ์ธ์ดํ๊ทธ ๊ฐ์ ธ์ค๊ธฐ
{ tags: [โโ, โโ, โฆ] } => [โโ, โโ, โฆ]
-
๋๊ธ ์์ฑ์ response body๊ฐ ๋ชจํธํ ๊ฒ ๊ฐ์ต๋๋ค
๊ทธ๋ฅ ํ์ฌ post์ ๋ํ comment๋ฅผ ๋ณด๋ด์ฃผ๋ฉด ๋์ง ์์๊น ์ถ์ต๋๋ค
์์)
[{
โauthorNameโ: string,
โcontentโ: string,
โisLikedโ: boolean,
}]
-
postId์ commentId๊ฐ response์ ํฌํจ๋์ด์ผ ํ ๊ฒ ๊ฐ์ต๋๋ค
๊ตฌํ ๊ธฐ๋ฅ
NavigationHeader ๊ตฌํ
์์
๋ด์ฉ
- ๋ก๊ณ ์ ๋ค๋น๊ฒ์ด์
์ ํฌํจ
- ๋ค๋น๊ฒ์ด์
์ ํ, ๊ฒ์์ ํฌํจํ๋ค.
- ๋ก๊ทธ์ธ์ด ๋์ด ์์ผ๋ฉด ํ๋กํ ๋งํฌ์ ๊ฒ์๋ฌผ ์ถ๊ฐ๋ฒํผ์ ๋ณด์ฌ์ค๋ค.
- ๋ก๊ทธ์ธ์ด ๋์ด์์ง ์์ผ๋ฉด ๋ก๊ทธ์ธ ๋ฒํผ์ ๋ณด์ฌ์ค๋ค.
์ฃผ์์ฌํญ
๊ตฌํ ๊ธฐ๋ฅ
- ์ด๋ฏธ์ง ํ์ผ๋ง ํ์ฉํ๋ค.
- ์คํจ ์ 415
์์
๋ด์ฉ
์ฃผ์์ฌํญ
๊ตฌํ ๊ธฐ๋ฅ
์๋์ผ๋ก any ๋ก ์ถ๋ก ๋๋ styled-components ์ theme ๊ฐ์ฒด์ ํ์
์ ๋ถ์ฌํ๋ค.
๊ตฌํ ๊ธฐ๋ฅ
- ํ๋ก ํธ์๋ ๊ฐ๋ฐ ํ๊ฒฝ์ ์ค์ ํ๋ค.
๊ตฌํ ๊ธฐ๋ฅ
Button ์ปดํฌ๋ํธ ๊ตฌํ
์ฃผ์์ฌํญ
width, backgroundColor, fontSize, shape(round or rect) => props๋ก ๋ฐ๊ธฐ
๊ตฌํ ๊ธฐ๋ฅ
- svg ํ์ผ ์ถ๊ฐ ๋ฐ svg ์ปดํฌ๋ํธ๋ฅผ ํ๋์ ํ์ผ์์ import ํด์ฌ ์ ์๋๋ก ์ค์
์๋๋ก ์ค์
์์
๋ด์ฉ
- /src/assets/icons ํด๋ ์ถ๊ฐ
- icons ํด๋ ๋ด๋ถ์ svg import ๋ฅผ ์ํ index.tsx ์ถ๊ฐ
์ฃผ์์ฌํญ
- svg ์ปดํฌ๋ํธ import ๋ ์์ผ๋ก /src/assets/icons/index.tsx ํ์ผ๋ง์ ๋์์ผ๋ก ์ด๋ฃจ์ด์ ธ์ผ ํจ
๊ตฌํ ๊ธฐ๋ฅ
ImageSlider์ ๊ธฐ๋ฅ์ ๊ฐ์
์์
๋ด์ฉ
- ๋ชจ๋ฐ์ผ ์์์ ์ข์ฐ ํฐ์น ์ฌ๋ผ์ด๋ ์กฐ์์ ์ด๋ฏธ์ง๊ฐ ๋์ด๊ฐ๋๋ก ๊ตฌํ
-> ์คํฌ๋กค ์ด๋ฒคํธ๋ ์ ๊ฑฐ
- buttonKind prop์ด stick-out์ผ ๊ฒฝ์ฐ์ ๋ํ ๋ ์ด์์ ์ถ๊ฐ
๊ตฌํ ๊ธฐ๋ฅ
- ํ์ด์ง ์ปดํฌ๋ํธ๋ฅผ ๊ตฌํํ๋ค.
์ฃผ์์ฌํญ
- 1์ฐจ์ ์ธ ๊ตฌํ์ ๋ํด์๋ ์ค์ api ๊ฐ ์๋ ๋ชฉ์
์๋ฒ๋ฅผ ์ด์ฉํ๋ค.
๊ตฌํ ๊ธฐ๋ฅ
api layer ์ถ์ํ
์์
๋ด์ฉ
- data fetchgin api ์ ํ(axios or fetch)
- ์ถ์ํ ์์ค, ์๋ฌ์ฒ๋ฆฌ ์์ค ๊ฒฐ์
- api request ๋ชจ๋ ๊ตฌํ
๊ตฌํ ๊ธฐ๋ฅ
StepHeader์ปดํฌ๋ํธ ๊ตฌํ
์์
๋ด์ฉ
- ์ด์ ํ์ด์ง์ ๋ค์ ํ์ด์ง์ ๋งํฌ๋ฅผ ํฌํจํ๋ค.
- ํ์ฌ ํ์ด์ง ์ด๋ฆ์ ํฌํจํ๋ค.
์ฃผ์์ฌํญ
๊ตฌํ ๊ธฐ๋ฅ
Input์ปดํฌ๋ํธ ๊ตฌํ
์์
๋ด์ฉ
- ์์ด์ฝ ํน์ ์๋ฐํ๋ฅผ prop์ผ๋ก ๋ฐ์ ์ ์๋ค.
- background ํน์ border-bottom์ ๊ฐ๋๋ค.
- text align์ ์ผ์ชฝ ํน์ ๊ฐ์ด๋ฐ ์ ๋ ฌ๋ก ํ๋ค.
์ฃผ์์ฌํญ
๊ตฌํ ๊ธฐ๋ฅ
์์
๋ด์ฉ
์ฃผ์์ฌํญ
๊ตฌํ ๊ธฐ๋ฅ
์์
๋ด์ฉ
- ๋น์ฆ๋์ค ๋ก์ง ์ถ๊ฐ
- ์ฌ๋ผ์ด์ค ํ
์คํธ + ํตํฉ ํ
์คํธ ์์ฑ
๊ตฌํ ๊ธฐ๋ฅ
์์
๋ด์ฉ
์์
๋ด์ฉ
proxy ์์ฑ์ ์ํ ํ๋ก์ ํธ ์
ํ
๊ตฌํ ๊ธฐ๋ฅ
- ์ ์ A๊ฐ ์ ์ B๋ฅผ ํ๋ก์ฐํ๊ฑฐ๋ ์ธํ๋ก์ฐ ํ ์ ์๋ค.
์์
๋ด์ฉ
- ๋ก๊ทธ์ธ ๋ ์ ์ ์ ๋ํด์๋ง ํ๋ก์ฐ/์ธํ๋ก์ฐ ๊ธฐ๋ฅ์ ์ ๊ณตํ๋ค.
- ๋ก๊ทธ์ธ ๋ ์ ์ ๊ฐ ๋ค๋ฅธ ์ ์ ์ ๋ํด์ ํ๋ก์ฐ/์ธํ๋ก์ฐ ํ ์ ์๋ค.
- ์ ์ A๊ฐ ์ด๋ฏธ ์ ์ B๋ฅผ ํ๋ก์ฐ ์ค์ด๋ผ๋ฉด ๋ ํ๋ก์ฐ ํ ์ ์๋ค.
- ์ ์ A์ ์ ์ B๊ฐ ํ๋ก์ฐ ๊ด๊ณ๊ฐ ์๋๋ผ๋ฉด ์ธํ๋ก์ฐ ํ ์ ์๋ค.
- ์ ์ A๊ฐ ์ ์ B๋ฅผ ํ๋ก์ฐ ํ๋ค๋ฉด ์ ์ A์ ํ๋ก์๊ณผ ์ ์ B์ ํ๋ก์ฐ ๊ฐฏ์๊ฐ 1์ฉ ์ฆ๊ฐํ๋ค.
๊ตฌํ ๊ธฐ๋ฅ
TextEditor ์ปดํฌ๋ํธ
์์
๋ด์ฉ
- background color๋ฅผ ๊ฐ์ง ์ ์๋ค.
์ฃผ์์ฌํญ
๊ตฌํ ๊ธฐ๋ฅ
- ์ฌ์ฉ์๊ฐ Github ์ธ์ฆ์ ํตํด ๋ก๊ทธ์ธ ํ ์ ์๋๋ก ํ๋ค.
์์
๋ด์ฉ
- OAuth ๋ก๊ทธ์ธํ๋ฉด Github๋ก๋ถํฐ AccessToken์ ๋ฐ๊ณ , JWT ํ ํฐ์ ์๋ก ๋ฐํํ์ฌ key:value ํ์์ผ๋ก ์ ์ฅํ๋ค.
- OAuth๋ก ์ฒซ ๋ก๊ทธ์ธํ ์ ์ (ํ์๊ฐ์
๊ฐ๋
)์ธ ๊ฒฝ์ฐ DB์ ํด๋น ์ ๋ณด๋ฅผ ์ ์ฅํ๋ค.
- OAuth๋ก ์ฒซ ๋ก๊ทธ์ธ์ด ์๋ ๊ฒฝ์ฐ Github์ ํ๋กํ ์ ๋ณด๋ฅผ ์กฐํํ์ฌ DB์ ์
๋ฐ์ดํธํ๋ค.
์ฃผ์์ฌํญ
๊ตฌํ ๊ธฐ๋ฅ
ImageSlider ๊ตฌํ
์์
๋ด์ฉ
- ์ด๋ฏธ์ง๋ฅผ ์ฌ๋ผ์ด๋ํ๋ฉด์ ๋ณผ์ ์๋๋ก ํ๋ ์ปดํฌ๋ํธ
- ์์ชฝ ๋ฒํผ์ ํตํด ์ฌ๋ผ์ด๋
์ฃผ์์ฌํญ
๊ตฌํ ๊ธฐ๋ฅ
- ์ ํํ Github ๋ ํฌ์งํ ๋ฆฌ์ ์ฌ์ฉ ์ธ์ด ํ๊ทธ๋ค์ ๋ถ๋ฌ์จ๋ค.
- ํด๋น ํ๊ทธ๋ค์ ํด๋ผ์ด์ธํธ์๊ฒ ๋ณด์ฌ์ค๋ค.
์์
๋ด์ฉ
- OAuth๋ฅผ ์ฌ์ฉํ์ฌ Resource Owner์ Repository ์ธ์ด ํ๊ทธ๋ค์ ์กฐํํ๋ค.
์ฃผ์์ฌํญ
๊ตฌํ ๊ธฐ๋ฅ
PostItem ์ปดํฌ๋ํธ ๊ตฌํ
์์
๋ด์ฉ
- ์์ฑ์ ์ ๋ณด, ์ข์์, ๊นํ๋งํฌ, ์ข์์๋ฅผ ํฌํจ
- ๋ก๊ทธ์ธ ์ฌ๋ถ์ ๋ฐ๋ผ ๋๊ธ ์์ฑ, ์ข์์ ์ถ๊ฐ, ์ทจ์๋ฅผ ์ ํ
์ฃผ์์ฌํญ
๊ตฌํ ๊ธฐ๋ฅ
ImageUploader์ปดํฌ๋ํธ
์์
๋ด์ฉ
- ์ด๋ฏธ์ง๋ฅผ base64๋ก ๋ณํํ๋ ๋ก์ง์ ํฌํจํ๋ค.
์ฃผ์์ฌํญ
๊ตฌํ ๊ธฐ๋ฅ
TextEditor ๊ธฐ๋ฅ ๊ฐ์
์์
๋ด์ฉ
- ๊ฐํํ ๋ ๋ฟ๋ง ์๋๋ผ text๊ฐ ๊ธธ์ด์ ธ ์๋ ๊ฐํ๋๋ ๊ฒฝ์ฐ๋ ๊ณ ๋ คํ์ฌ autoGrow ๊ฐ์
๊ตฌํ ๊ธฐ๋ฅ
CircleIcon์ปดํฌ๋ํธ ๊ตฌํ
์์
๋ด์ฉ
์ฃผ์์ฌํญ
- circle size์ text size๋ฅผ prop์ผ๋ก ๋ฐ๋๋ค.
๊ตฌํ ๊ธฐ๋ฅ
- ์ ์ ์ด๋ฆ ์ ๋ํฌ ์ ์ฝ ์กฐ๊ฑด์ ์ถ๊ฐํ๋ค.
์์
๋ด์ฉ
- ๋ช
ํํด์ผ ํด์ ์ ์ฝ ์กฐ๊ฑด์ ์ถ๊ฐํ๋๊ฒ ์ข์ ๊ฒ ๊ฐ์ต๋๋ค.
์ฃผ์์ฌํญ
์์
๋ด์ฉ
- ๋ฐฑ์๋ ๊ธฐ์ ์คํ์ ๋ง์ถฐ ๊ฐ๋ฐ ํ๊ฒฝ์ ์ค์ ํ๋ค.
๊ตฌํ ๊ธฐ๋ฅ
์์
๋ด์ฉ
- ์์ฑ ์๊ฐ ๋ฐ ๋ ์ง ๊ธฐ๋ก
- ๋น์ฆ๋์ค ๋ก์ง ์ถ๊ฐ
- ์ฌ๋ผ์ด์ค ํ
์คํธ ์์ฑ
๊ตฌํ ๊ธฐ๋ฅ
CSS Normalize ์ ์ฉ
์์
๋ด์ฉ
styled components์์ ์ ๊ณตํ๋ normalize๋ฅผ ํ์ฉ
์ฃผ์์ฌํญ
๊ตฌํ ๊ธฐ๋ฅ
- ์คํ ๋ฆฌ๋ถ webpack ์ svgr์ ์ ์ฉํ๋ค.
๊ธฐํ
- tsconfig.json ์ ๋ถํ์ํ ๊ณต๋ฐฑ ์ ๊ฑฐ
๊ตฌํ ๊ธฐ๋ฅ
์ฃผ์์ฌํญ
- ์ด๋ฏธ์ง์ ๋ด์ฉ์ด ํจ๊ป ์
๋ก๋
- ๊ฒ์๋ฌผ ๋ด์ฉ์ ์ต๋ 500์