# <span id="top">
ย ์ฌ๋ฅ ๊ธฐ๋ถ ๋ฐ ํ๋งค ํ๋ซํผ ๋ฌด์ง๊ฐ ๋ง์ผ</span>
-
ย ์ฌ๋ฅ ๊ธฐ๋ถ ๋ฐ ํ๋งค ํ๋ซํผ ๋ฌด์ง๊ฐ ๋ง์ผ</span>
- -
ํ
์คํธ ๊ณ์
shell test1 id : rainbowmarket@official.com test1 pw : 123456
Plain Text
๋ณต์ฌ
<img width="100%" src="
"></img>
- ๋ชฉ์ฐจ
<br>
<br>
<br>
<br>
<br>
<br>
## ํ๋ก์ ํธ ์๊ฐ
### ๊ฐ์
- ๋ ์ธ๋ณด์ฐ ๋ง์ผ์ ์ฌ๋ฅ์ ๊ธฐ๋ถํ๊ฑฐ๋ ํ๋งคํ๋ SNS์
๋๋ค.
- ์์ ์ด ๊ฐ์ง๊ณ ์๋ ์ฌ๋ฅ์ ํ์๋ก ํ๋ ์ฌ๋๋ค์๊ฒ ๊ธฐ๋ถํ์ฌ ๋์์ ์ฃผ๊ฑฐ๋, ๋์์ด ํ์ํ ์ฌ๋์ด ๊ฒ์๊ธ์ ์ฌ๋ ค ์ํ๋ ์ฌ๋ฅ์ ๊ฐ์ง ์ฌ๋์ ์ฐพ์ ๋์์ ๋ฐ์ ์ ์๋ SNS์
๋๋ค.
- ์ฌ๋ฅ ๊ธฐ๋ถ๋ฅผ ํ์ง ์์๋ ์ด๋ค ์ฃผ์ ์ ๋ํ์ฌ ๋๊ธ์ ์ฃผ๊ณ ๋ฐ๊ฑฐ๋ ๋๋ ์ฑํ
์ ํจ์ผ๋ก์จ ์๋ก์ ์๊ฐ์ ๋๋ ์ ์์ต๋๋ค.
- ๋ง์์ ๋๋ ํผ๋ ๊ฒ์๋ฌผ์ ์ข์์๋ฅผ ๋๋ฅผ ์ ์์ต๋๋ค.
- ์ฌ์ฉ์ ๊ฒ์์ ํตํด ํ๋ก์ฐ๋ฅผ ํ์ฌ ํ ํผ๋์์ ๊ฒ์๋ฌผ์ ํ์ธํ ์ ์์ต๋๋ค.
### ์ ์ ๊ธฐ๊ฐ
2022.12.09 - 2023.01.03
<p align="right"><a href="#top">Top</a></p>
## ํ์ ์๊ฐ
| ์ด์์ฐ | ๊น๋ค์ | ๊ถ์งํ | ์ด์ ์ง |
| ------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------- |
| <img src ="
Top</a></p>
## ํ์ ์๊ฐ
| ์ด์์ฐ | ๊น๋ค์ | ๊ถ์งํ | ์ด์ ์ง |
| ------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------- |
| <img src ="" width="150px" height="150px"/> | <img src ="
" width="150px" height="150px"/> | <img src ="
" width="150px" height="150px"/> | <img src ="
" width="150px" height="150px"/> |
| <center>
</center> | <center>
</center> | <center>
</center> | <center>
</center>|
### ์ญํ ๋ถ๋ด
<img src="
"/>
<p align="right"><a href="#top">Top</a></p>
## ๊ฐ๋ฐ ํ๊ฒฝ
### ๊ธฐ์ ์คํ
- Front-End
- HTML, CSS, JavaScript, React, styled-components
- Back-End
- ์ ๊ณต๋ API ์ฌ์ฉ
- Design
-
Top</a></p>
## ๊ฐ๋ฐ ํ๊ฒฝ
### ๊ธฐ์ ์คํ
- Front-End
- HTML, CSS, JavaScript, React, styled-components
- Back-End
- ์ ๊ณต๋ API ์ฌ์ฉ
- Design
-### ํ์๊ด๋ฆฌ ๋ฐ ํ์
๋๊ตฌ
- GitHub, Git
- GitHub Issues : ๊ฐ์ ํ๋ ๋ด์ญ์ ๋ํด ์ด์ ๋ฑ๋ก ํ ์์
์งํ
- Discord : ์ค์๊ฐ ์ํต ๋ฐ ํ๋ฉด ๊ณต์
- Slack : ๊ฐ ์ปดํฌ๋ํธ๋ณ ์ ๋ฌ ์ฌํญ ์์ฑ
- VScode liveshare : ๊ณตํต์ ์ธ ๋ฌธ์ ๊ฐ์ด ํด๊ฒฐ
- Notion :
### ์ด์ ๊ด๋ฆฌ
- ๊ฐ์ ํ๋ ๋ด์ญ์ ๋ํด
ํ ์์
์งํ
<img width="400px" alt="sfd" src="
">
-
<br>
<img width="400px" alt="projects" src="
">
- Slack ์ฌ์ฉํ์ฌ ๊ฐ ์ปดํฌ๋ํธ๋ณ ์ ๋ฌ ์ฌํญ ์์ฑ
<img width="400px" alt="asvasv" src="
">
<p align="right"><a href="#top">Top</a></p>
## ๊ตฌํ๊ธฐ๋ฅ
---
|<center>Splash</center>|<center>ํ์๊ฐ์
</center>|<center>๋ก๊ทธ์ธ</center>|
|---|---|---|
|<img width="275px" height="500px" src=https://user-images.githubusercontent.com/63508955/211530261-b2d718c2-a69b-4224-b9b5-cebbdc8c128d.gif></img>|<img width="275px" height="500px" src=https://i.imgur.com/UqAQYqf.gif></img>|<img width="275px" height="500px" src=https://i.imgur.com/vE7LvrW.gif></img>
| <center>ํํ๋ฉด</center> | <center>๊ณ์ ๊ฒ์</center> | <center>์ ์ ํ๋กํ</center> |
| --- | --- | --- |
|<img width="275px" height="500px" src=https://i.imgur.com/H1hpMGk.gif></img>|<img width="275px" height="500px" src="
Top</a></p>
## ๊ตฌํ๊ธฐ๋ฅ
---
|<center>Splash</center>|<center>ํ์๊ฐ์
</center>|<center>๋ก๊ทธ์ธ</center>|
|---|---|---|
|<img width="275px" height="500px" src=https://user-images.githubusercontent.com/63508955/211530261-b2d718c2-a69b-4224-b9b5-cebbdc8c128d.gif></img>|<img width="275px" height="500px" src=https://i.imgur.com/UqAQYqf.gif></img>|<img width="275px" height="500px" src=https://i.imgur.com/vE7LvrW.gif></img>
| <center>ํํ๋ฉด</center> | <center>๊ณ์ ๊ฒ์</center> | <center>์ ์ ํ๋กํ</center> |
| --- | --- | --- |
|<img width="275px" height="500px" src=https://i.imgur.com/H1hpMGk.gif></img>|<img width="275px" height="500px" src=""></img>|<img width="275px" height="500px" src="
"></img>|
| <center>๋ด ํ๋กํ</center> | <center>๋ด ํ๋กํ ์์ </center> | <center>ํ๋ก์ฐ, ํ๋ก์</center> |
| --- | --- | --- |
|<img width="275px" height="500px" src="
"></img>|<img width="275px" height="500px" src="
"></img>|<img width="275px" height="500px" src="
"></img>
| <center>์ฌ๋ฅ ํ๋งค ๋ฑ๋ก</center> | <center>์ฌ๋ฅ ํ๋งค ์์ </center> | <center>์ฌ๋ฅ ํ๋งค ๋งํฌ ์ด๋</center> |
| --- | --- | --- |
|<img width="275px" height="500px" src="
"></img>|<img width="275px" height="500px" src="
"></img>|<img width="275px" height="500px" src="
"></img>
| <center>์ฌ๋ฅ ํ๋งค ๋ชฉ๋ก ์ญ์ </center> | <center>404 ํ์ด์ง</center> | <center>๊ฒ์๊ธ ๋ฑ๋ก</center> |
| --- | --- | --- |
|<img width="275px" height="500px" src="
"></img>|<img width="275px" height="500px" src="
"></img>|<img width="275px" height="500px" src="
"></img>
| <center>๊ฒ์๊ธ ์์ธ ํ์ด์ง</center> | <center>๊ฒ์๊ธ ์์ </center> | <center>๊ฒ์๊ธ ์ญ์ </center> |
| --- | --- | --- |
|<img width="275px" height="500px" src="
"></img>|<img width="275px" height="500px" src="
"></img>|<img width="275px" height="500px" src="
"></img>
|<center>๊ฒ์๊ธ ๋๊ธ ๋ฑ๋ก</center> | <center>๊ฒ์๊ธ ๋๊ธ ์ญ์ </center> | <center>๊ฒ์๊ธ ์ข์์</center>
| --- | --- | --- |
|<img width="275px" height="500px" src="
"></img>|<img width="275px" height="500px" src="
"></img>|<img width="275px" height="500px" src="
"></img>
| <center>๋ชจ๋ฌ ๊ธฐ๋ฅ</center> | <center>์ ๊ณ </center> | <center>๋ก๊ทธ์์</center> |
| --- | --- | --- |
|<img width="275px" height="500px" src="
"></img>|<img width="275px" height="500px" src="
"></img>|<img width="275px" height="500px" src="
"></img>
<p align="right"><a href="#top">Top</a></p>
## ํ๋ก์ ํธ ๊ตฌ์กฐ
Top</a></p>
## ํ๋ก์ ํธ ๊ตฌ์กฐmarkdown ๐ฆrainbowmarket โฃ ๐.git โฃ ๐public โ โฃ ๐favicon.ico โ โ ๐index.html โฃ ๐src โ โฃ ๐assets โ โ โฃ ๐images โ โฃ ๐components โ โ โฃ ๐ChatRoom โ โ โฃ ๐Join โ โ โฃ ๐Login โ โ โฃ ๐Member โ โ โฃ ๐Navbar โ โ โฃ ๐Posts โ โ โ โฃ ๐Comment โ โ โ โฃ ๐PostBtn โ โ โฃ ๐ProductInput โ โ โฃ ๐Profile โ โ โ โฃ ๐ProfileFeedSection โ โ โ โฃ ๐ProfileItemSection โ โ โ โ ๐ProfileSection โ โ โฃ ๐Splash โ โ โฃ ๐TopBar โ โ โ ๐common โ โ โ โฃ ๐Loading โ โ โ โฃ ๐Login โ โ โ โฃ ๐Modal โ โ โ โฃ ๐PostContent โ โ โ โฃ ๐SetProfile โ โ โ โ ๐UserList โ โฃ ๐context โ โฃ ๐hooks โ โฃ ๐pages โ โ โฃ ๐Chat โ โ โฃ ๐Follow โ โ โฃ ๐Home โ โ โฃ ๐Join โ โ โฃ ๐NotFound โ โ โฃ ๐Post โ โ โฃ ๐Product โ โ โฃ ๐Profile โ โ โ ๐Search โ โฃ ๐App.js โ โฃ ๐GlobalStyle.js โ โ ๐index.js โฃ ๐.gitignore โฃ ๐README.md โฃ ๐package-lock.json โ ๐package.json
Plain Text
๋ณต์ฌ
<p align="right"><a href="#top">Top</a></p>
## ํธ๋ฌ๋ธ ์ํ
1. API ๋ฐ์ดํฐ ๋ฌดํ ์์ฒญ
* ๋ฌธ์ : ๊ฒ์๊ธ ๋ชฉ๋ก์ ๋ถ๋ฌ์ฌ ๋ API ์์ฒญ์ด ๊ณ์ํด์ ์ผ์ด๋จ.
* ์์ธ : useState Hook์ ์ฌ์ฉํด ๊ฒ์๊ธ ๋ชฉ๋ก์ ์ํ๋ฅผ ๊ด๋ฆฌํ๋๋ฐ, ์ํ๊ฐ ๋ณ๊ฒฝ๋ ๋๋ง๋ค ๋ค์ ๋ ๋๋ง ํ๊ธฐ ์ํด ํด๋น ์ปดํฌ๋ํธ "ํจ์"๋ฅผ ๋ถ๋ฌ์ค๊ฒ ๋๋ค. ๋ฐ๋ผ์ ๊ทธ ์์ ์์ฑ๋ API ์์ฒญ ๊ตฌ๋ฌธ์ด ๋ค์ ์คํ๋๊ณ ์ํ๋ฅผ ๋ ๋ณ๊ฒฝํ๊ฒ ๋๋ค. ์ด ์ผ์ด ๋ฐ๋ณต๋๋ฉด์ ๋ฌดํ๋ฃจํ ๋ฐ์.
* ํด๊ฒฐ : useEffect Hook์ ์ฌ์ฉํ์ฌ, ํน์ ๊ฐ์ํ๋ ์ํ์ ๋ณํ์๋ง API ์์ฒญ์ ํ๋๋ก ํจ.
2. ๋ฌดํ ์คํฌ๋กค ํ์ด์ง ์ ๋ง์ง๋ง ํ์ด์ง ๋ฌดํ ์์ฒญ
* ๋ฌธ์ : ๋งจ ๋ง์ง๋ง ํ์ด์ง์ ๋๋ฌ ์ ํด๋น ๋ง์ง๋ง ํ์ด์ง๊ฐ ๊ณ์ํด์ ์ถ๊ฐ๋จ.
* ์์ธ : Intersection Observer API๋ฅผ ์ด์ฉํ์ฌ ํ์ฌ ํ๋ฉด์ ๋ง์ง๋ง ์์ ๋๋ฌ ์ ๋ค์ ํ์ด์ง๋ฅผ ์์ฒญํ๋๋ก ์ค๊ณํ๋๋ฐ, ํ์ด์ง์ ๋์ ๋๋ฌํ๋๋ผ๋ ํ๋ฉด์ ๋ง์ง๋ง ์์์๋ง ๋๋ฌํ๋ฉด ์๋ก์ด ์์ฒญ์ ๊ณ์ํด์ ๋ณด๋.
* ํด๊ฒฐ : ํ์ด์ง๋ฅผ ๋ถ๋ฌ์ฌ ๋๋ง๋ค ์ด์ ๋ฐฐ์ด๊ณผ ๋น๊ตํ์ฌ ๋ณํ๊ฐ ์๋ ๊ฒฝ์ฐ ๋์ด์ ์์ฒญ์ ๋ณด๋ด์ง ์์.
3. ์ด๋ฏธ์ง์
๋ก๋๋ฒํผ์ด ์ํ๋ ์์น์ ๊ณ ์ ๋์ง ์๋ ํ์
* ๋ฌธ์ : ๊ฒ์๊ธ ์์ฑ ํ๋ฉด์์ ์ด๋ฏธ์ง ์
๋ก๋ ๋ฒํผ์ด ์ํ๋ ์์น์ ๊ณ ์ ๋์ง ์์.
* ์์ธ : ํด๋น ๋ฒํผ์ ์คํ์ผ ์์ ์ค position์ fixed๋ก ํ๊ณ , right์ bottom ๊ฐ์ผ๋ก ์์น๋ฅผ ์กฐ์ ํ๋๋ฐ fixed position์ผ ๋ ๋ถ๋ชจ ์์๋ฅผ ์ธ์ํ์ง ๋ชปํด ํ๋ฉด ๊ธฐ์ค์ผ๋ก ์ด๋ํ๊ฒ ๋จ.
* ํด๊ฒฐ : position: fixed๊ฐ ์๋ position: sticky ์คํ์ผ์ ์ด์ฉํ์ฌ ๋ถ๋ชจ ์์๋ฅผ ์ธ์ํจ๊ณผ ๋์์ ์์น๋ฅผ ๊ณ ์ ํ ์ ์๋๋ก ํจ.
4. ๊ฒ์๊ธ ๋ฐ์ดํฐ ๋ฐ์์ฌ ์์ ๊ฐํ๋ฌธ์๋ฅผ ์ธ์ํ์ง ๋ชปํจ
* ๋ฌธ์ : ๊ฒ์๊ธ ๋ฐ์ดํฐ๋ฅผ ๋ฐ์์ ๋ด์ฉ์ ํ๋ฉด์ ์ถ๋ ฅํ ๋, ๊ฐํ๋ฌธ์๋ ๋ฌด์๋์ด ํ๋ฉด์ ๊ฐํ ์์ด ๋ด์ฉ์ด ํ์๋จ.
* ์์ธ : ๋ฆฌ์กํธ์์๋ XSS(Cross Site Scripting) ๊ณต๊ฒฉ์ ๋ฐฉ์งํ๊ธฐ ์ํด ๋ ๋๋ง ์ ์ HTML ๋ณธ์ฐ์ ํ๊ทธ๋ ์คํฌ๋ฆฝํธ ๊ธฐ๋ฅ๋ค์ ์ ๊ฑฐํ๊ธฐ ๋๋ฌธ์, ์ด์ค์ผ์ดํ ๋ฌธ์(\n)๋ก ๋ด๊ฒจ์ค๋ ๊ฐํ๋ฌธ์๋ฅผ ๋ ๋๋ง ํด์ฃผ์ง ์์.
* ํด๊ฒฐ : ํด๋น ๋ฌธ์ ๊ฐ ๋ฐ์ํ๋ ๊ฒ์๊ธ ์คํ์ผ ์์์ { word-break: break-all, white-space: pre-wrap }๋ฅผ ์ถ๊ฐํ์ฌ ํด๊ฒฐ.
5. ๋ฐฐํฌ ํ, ํ๋ฉด ์๋ก๊ณ ์นจ ์ 404 ์๋ฌ ๋ฐ์
* ๋ฌธ์ : ์ฑ์ ๋น๋ํ์ฌ netlify๋ฅผ ์ด์ฉํด ๋ฐฐํฌํ๋๋ฐ, ๋ชจ๋ฐ์ผ์์ ์๋ก๊ณ ์นจ ์ netlify์ 404์ค๋ฅ๊ฐ ๋ฐ์
* ์์ธ : ๋ฆฌ์กํธ์์ ๋ฃจํธ ๊ฒฝ๋ก๋ "/"์ด๊ณ ์ด ๊ฒฝ๋ก์์๋ index.html์ ์ฝ๋๋ค. ๋ฆฌ์กํธ๋ก ๋ผ์ฐํ
๋ ๊ฒฝ๋ก์์๋ ์๋ก๊ณ ์นจ ์ ํด๋น ์์ค๋ฅผ ๋ฐ์์ฌ ์ ์์ผ๋ฏ๋ก, netlify์์ 404 ์๋ฌ๋ฅผ ๋ด๋ฑ๋๋ค.
Top</a></p>
## ํธ๋ฌ๋ธ ์ํ
1. API ๋ฐ์ดํฐ ๋ฌดํ ์์ฒญ
* ๋ฌธ์ : ๊ฒ์๊ธ ๋ชฉ๋ก์ ๋ถ๋ฌ์ฌ ๋ API ์์ฒญ์ด ๊ณ์ํด์ ์ผ์ด๋จ.
* ์์ธ : useState Hook์ ์ฌ์ฉํด ๊ฒ์๊ธ ๋ชฉ๋ก์ ์ํ๋ฅผ ๊ด๋ฆฌํ๋๋ฐ, ์ํ๊ฐ ๋ณ๊ฒฝ๋ ๋๋ง๋ค ๋ค์ ๋ ๋๋ง ํ๊ธฐ ์ํด ํด๋น ์ปดํฌ๋ํธ "ํจ์"๋ฅผ ๋ถ๋ฌ์ค๊ฒ ๋๋ค. ๋ฐ๋ผ์ ๊ทธ ์์ ์์ฑ๋ API ์์ฒญ ๊ตฌ๋ฌธ์ด ๋ค์ ์คํ๋๊ณ ์ํ๋ฅผ ๋ ๋ณ๊ฒฝํ๊ฒ ๋๋ค. ์ด ์ผ์ด ๋ฐ๋ณต๋๋ฉด์ ๋ฌดํ๋ฃจํ ๋ฐ์.
* ํด๊ฒฐ : useEffect Hook์ ์ฌ์ฉํ์ฌ, ํน์ ๊ฐ์ํ๋ ์ํ์ ๋ณํ์๋ง API ์์ฒญ์ ํ๋๋ก ํจ.
2. ๋ฌดํ ์คํฌ๋กค ํ์ด์ง ์ ๋ง์ง๋ง ํ์ด์ง ๋ฌดํ ์์ฒญ
* ๋ฌธ์ : ๋งจ ๋ง์ง๋ง ํ์ด์ง์ ๋๋ฌ ์ ํด๋น ๋ง์ง๋ง ํ์ด์ง๊ฐ ๊ณ์ํด์ ์ถ๊ฐ๋จ.
* ์์ธ : Intersection Observer API๋ฅผ ์ด์ฉํ์ฌ ํ์ฌ ํ๋ฉด์ ๋ง์ง๋ง ์์ ๋๋ฌ ์ ๋ค์ ํ์ด์ง๋ฅผ ์์ฒญํ๋๋ก ์ค๊ณํ๋๋ฐ, ํ์ด์ง์ ๋์ ๋๋ฌํ๋๋ผ๋ ํ๋ฉด์ ๋ง์ง๋ง ์์์๋ง ๋๋ฌํ๋ฉด ์๋ก์ด ์์ฒญ์ ๊ณ์ํด์ ๋ณด๋.
* ํด๊ฒฐ : ํ์ด์ง๋ฅผ ๋ถ๋ฌ์ฌ ๋๋ง๋ค ์ด์ ๋ฐฐ์ด๊ณผ ๋น๊ตํ์ฌ ๋ณํ๊ฐ ์๋ ๊ฒฝ์ฐ ๋์ด์ ์์ฒญ์ ๋ณด๋ด์ง ์์.
3. ์ด๋ฏธ์ง์
๋ก๋๋ฒํผ์ด ์ํ๋ ์์น์ ๊ณ ์ ๋์ง ์๋ ํ์
* ๋ฌธ์ : ๊ฒ์๊ธ ์์ฑ ํ๋ฉด์์ ์ด๋ฏธ์ง ์
๋ก๋ ๋ฒํผ์ด ์ํ๋ ์์น์ ๊ณ ์ ๋์ง ์์.
* ์์ธ : ํด๋น ๋ฒํผ์ ์คํ์ผ ์์ ์ค position์ fixed๋ก ํ๊ณ , right์ bottom ๊ฐ์ผ๋ก ์์น๋ฅผ ์กฐ์ ํ๋๋ฐ fixed position์ผ ๋ ๋ถ๋ชจ ์์๋ฅผ ์ธ์ํ์ง ๋ชปํด ํ๋ฉด ๊ธฐ์ค์ผ๋ก ์ด๋ํ๊ฒ ๋จ.
* ํด๊ฒฐ : position: fixed๊ฐ ์๋ position: sticky ์คํ์ผ์ ์ด์ฉํ์ฌ ๋ถ๋ชจ ์์๋ฅผ ์ธ์ํจ๊ณผ ๋์์ ์์น๋ฅผ ๊ณ ์ ํ ์ ์๋๋ก ํจ.
4. ๊ฒ์๊ธ ๋ฐ์ดํฐ ๋ฐ์์ฌ ์์ ๊ฐํ๋ฌธ์๋ฅผ ์ธ์ํ์ง ๋ชปํจ
* ๋ฌธ์ : ๊ฒ์๊ธ ๋ฐ์ดํฐ๋ฅผ ๋ฐ์์ ๋ด์ฉ์ ํ๋ฉด์ ์ถ๋ ฅํ ๋, ๊ฐํ๋ฌธ์๋ ๋ฌด์๋์ด ํ๋ฉด์ ๊ฐํ ์์ด ๋ด์ฉ์ด ํ์๋จ.
* ์์ธ : ๋ฆฌ์กํธ์์๋ XSS(Cross Site Scripting) ๊ณต๊ฒฉ์ ๋ฐฉ์งํ๊ธฐ ์ํด ๋ ๋๋ง ์ ์ HTML ๋ณธ์ฐ์ ํ๊ทธ๋ ์คํฌ๋ฆฝํธ ๊ธฐ๋ฅ๋ค์ ์ ๊ฑฐํ๊ธฐ ๋๋ฌธ์, ์ด์ค์ผ์ดํ ๋ฌธ์(\n)๋ก ๋ด๊ฒจ์ค๋ ๊ฐํ๋ฌธ์๋ฅผ ๋ ๋๋ง ํด์ฃผ์ง ์์.
* ํด๊ฒฐ : ํด๋น ๋ฌธ์ ๊ฐ ๋ฐ์ํ๋ ๊ฒ์๊ธ ์คํ์ผ ์์์ { word-break: break-all, white-space: pre-wrap }๋ฅผ ์ถ๊ฐํ์ฌ ํด๊ฒฐ.
5. ๋ฐฐํฌ ํ, ํ๋ฉด ์๋ก๊ณ ์นจ ์ 404 ์๋ฌ ๋ฐ์
* ๋ฌธ์ : ์ฑ์ ๋น๋ํ์ฌ netlify๋ฅผ ์ด์ฉํด ๋ฐฐํฌํ๋๋ฐ, ๋ชจ๋ฐ์ผ์์ ์๋ก๊ณ ์นจ ์ netlify์ 404์ค๋ฅ๊ฐ ๋ฐ์
* ์์ธ : ๋ฆฌ์กํธ์์ ๋ฃจํธ ๊ฒฝ๋ก๋ "/"์ด๊ณ ์ด ๊ฒฝ๋ก์์๋ index.html์ ์ฝ๋๋ค. ๋ฆฌ์กํธ๋ก ๋ผ์ฐํ
๋ ๊ฒฝ๋ก์์๋ ์๋ก๊ณ ์นจ ์ ํด๋น ์์ค๋ฅผ ๋ฐ์์ฌ ์ ์์ผ๋ฏ๋ก, netlify์์ 404 ์๋ฌ๋ฅผ ๋ด๋ฑ๋๋ค. /* /index.html 200
Plain Text
๋ณต์ฌ
* ํด๊ฒฐ : public ํด๋ ์์ redirets ํ์ผ์ ์์ฑํ๊ณ ์์ ์์ ๊ฐ์ ๋ด์ฉ์ ์ถ๊ฐํ๋ค. ์ด๋ ์ด๋ ํ ๊ฒฝ๋ก(/\*)๋ก ๋ค์ด์๋ ๋ฃจํธ์ index.html์ ๋ถ๋ฌ์ฌ ์ ์๋๋ก ํด์ค๋ค.
6.
7.
userContext, ํฌ์คํธ........., ๊ฒ์๊ธ, ๋ชจ๋ฐ์ผ์์ ํ๋ฉด ํ๋, ์ฃผ์์ฐฝ์ ๊ฐ๋ ค์ง๋,
- ๋ด ํ๋กํ ํ๋ก์ฐ
- ์ด๋ฏธ์ง ์ฌ๋ผ์ด๋?
- ๋ชจ๋ฐ์ผ ํ๋ฉด ์ธ๋ก ์ฌ์ด์ฆ ๊ณ์ฐ (
)
- z-index ์ฌํ๋ฆฌ ์ค๋ฅ (
) (webkit-transform: translate3d (0, 0, 0);)
<p align="right"><a href="#top">Top</a></p>
## ํ๋ก์ ํธ ๋ฐฐํฌ ํ ๋๋ ์
| ์ด๋ฆ | ๋๋ ์ |
| ------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ๊น๋ค์ | ๊ธฐ๊ฐ ๋ด์ ๋๋ด๊ธฐ๋ง ํ๋ ๊ฒ์ด ๋ชฉํ์๋๋ฐ ์๊ฐ๋ณด๋ค ์ฌ์ ๋กญ๊ฒ ๋ณ ํ ์์ด ํด๋ด์ ๋งค์ฐ ๊ธฐ์ฉ๋๋ค. ๊ธฐ๋ณธ ๊ธฐ๋ฅ ์ด์์ ํด๋ธ ๋ถ๋ถ๋ค๋ ์์ด ๋งค์ฐ ๊ธฐ๋ปค์ผ๋ฉฐ, ์ฝ๋๋ฅผ ์ฐ๋ค ๋งํ๋ฉด ๋ชจ๋๊ฐ ๋์์ ๋ฌธ์ ํด๊ฒฐ์ ๋์์ฃผ์๋๋ฐ ์ ๋ง ์ด์์ ์ธ ํ ํ๋ก์ ํธ๋ฅผ ๊ฒฝํํด ๋ดค๋ค๊ณ ์๊ฐํฉ๋๋ค. |
| ๊ถ์งํ | ์ฝ๋๋ฅผ ์์ฑํ๋ ๊ฒ๋งํผ ์ํํธ ์คํฌ, ๋ํ ์คํฌ๋ ์ค์ํ๋ค๋ ์ฌ์ค์ ๊นจ๋ฌ์์ต๋๋ค. ๊ทธ๋ฆฌ๊ณ ํผ์ ํ์ ๋ ์ด๋ ค์ ๋ ๋ฌธ์ ๊ฐ ์๊ฐ๋ณด๋ค ๊ฐ๋จํ๊ฒ ํด๊ฒฐ๋๋ ๊ฒ์ ๋ณด๋ฉด์ ์๋ํ๋ฉด์๋ ํํธ์ผ๋ก๋ ์ฌ์ ์ผ๋ก ํ๋ค์์ต๋๋ค. ๋ค๋ฅธ ํ์๋ค์ ๋นํด ์๋์ ์ผ๋ก ๋ง์ ์๊ฐ์ด ๊ฑธ๋ฆฌ์ง๋ง, ์ ์ด๋ ์ฝ๋ ํ๋ฆ์ ์ฝ๊ธฐ ์์ํ๋ค๋ ์ ์ด ์ ์๊ฒ ํฐ ๋ฐ์ ์ด๋ผ๊ณ ์๊ฐํฉ๋๋ค. |
| ์ด์์ฐ | ์์ํ ๋๋ ์ํํธ ์คํฌ, ๊ทธ๋ฆฌ๊ณ ๋ฆฌ๋์ญ์ ๋ฐ์ ์ ๊ธฐ๋ํ์ง๋ง ๋ฌด๋ํ๊ฒ ์ ๋ฐ๋ผ์ ์ค ํ์๋ค ๋๋ถ์ ํฐ ์ฐ์ฌ๊ณก์ ์์ด ์ฌ๊ธฐ๊น์ง ์๋ค๊ณ ์๊ฐํฉ๋๋ค. ์ฌ๊ธฐ๊น์ง ์ค๋ ๋ฐ ๊ณ ๋ฏผํ ์๊ฐ๋ค ๋ํ ์ ์๊ฒ ์์ด ํฐ ๋ฐ์ ์ด๋ผ๊ณ ์๊ฐํฉ๋๋ค. ๊ทธ๋ฆฌ๊ณ ํ์
ํ ๋ ํ์ํ ๊ธฐ์ ๋ค์ ๋ํด ๋ง์ด ์ ์ ์์ด์ ์ข์์ต๋๋ค. |
| ์ด์ ์ง | ํ์
ํ๋ฉด์ ๊ฐ์ฅ ์ค์ํ๋ค๊ณ ์๊ฐํ๋ ๋ํ ๋ถ๋ถ์ ์ฌ๋ฌ ํ์
๋๊ตฌ๋ฅผ ํตํด ์ ์ด๋ฃจ์ด์ก๋ค๊ณ ์๊ฐํฉ๋๋ค. ๋ํ ์๋ก ์์ฑํ ์ฝ๋๋ค์ ์ฌ์ฉํ๋ค๋ณด๋ ์ด๋ค ์์ผ๋ก ์ฝ๋๋ฅผ ์งฐ๋์ง ์ ์ ์ดํดํ๋ ๋์ ๋ชจ์ต์ ๋ณด๋ฉด์ ์ฒ์ ์ฌ๊ธฐ์ ๋ค์ด์์ ๋๋ณด๋ค ๋ง์ด ์ฑ์ฅํ๋ค๋ ๋๋์ ๋ฐ์์ต๋๋ค. ๊ทธ๋ฆฌ๊ณ ๋งํ๋ ๋ถ๋ถ์ด ์๋ค๋ฉด ๋ค ๊ฐ์ด ๋ชจ์ฌ์ ํด๊ฒฐํ๋ ์ํฉ์ด ๋๋ฌด ์ธ์๊น์์ต๋๋ค. |
<p align="right"><a href="#top">Top</a></p>
Top</a></p>
## ํ๋ก์ ํธ ๋ฐฐํฌ ํ ๋๋ ์
| ์ด๋ฆ | ๋๋ ์ |
| ------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ๊น๋ค์ | ๊ธฐ๊ฐ ๋ด์ ๋๋ด๊ธฐ๋ง ํ๋ ๊ฒ์ด ๋ชฉํ์๋๋ฐ ์๊ฐ๋ณด๋ค ์ฌ์ ๋กญ๊ฒ ๋ณ ํ ์์ด ํด๋ด์ ๋งค์ฐ ๊ธฐ์ฉ๋๋ค. ๊ธฐ๋ณธ ๊ธฐ๋ฅ ์ด์์ ํด๋ธ ๋ถ๋ถ๋ค๋ ์์ด ๋งค์ฐ ๊ธฐ๋ปค์ผ๋ฉฐ, ์ฝ๋๋ฅผ ์ฐ๋ค ๋งํ๋ฉด ๋ชจ๋๊ฐ ๋์์ ๋ฌธ์ ํด๊ฒฐ์ ๋์์ฃผ์๋๋ฐ ์ ๋ง ์ด์์ ์ธ ํ ํ๋ก์ ํธ๋ฅผ ๊ฒฝํํด ๋ดค๋ค๊ณ ์๊ฐํฉ๋๋ค. |
| ๊ถ์งํ | ์ฝ๋๋ฅผ ์์ฑํ๋ ๊ฒ๋งํผ ์ํํธ ์คํฌ, ๋ํ ์คํฌ๋ ์ค์ํ๋ค๋ ์ฌ์ค์ ๊นจ๋ฌ์์ต๋๋ค. ๊ทธ๋ฆฌ๊ณ ํผ์ ํ์ ๋ ์ด๋ ค์ ๋ ๋ฌธ์ ๊ฐ ์๊ฐ๋ณด๋ค ๊ฐ๋จํ๊ฒ ํด๊ฒฐ๋๋ ๊ฒ์ ๋ณด๋ฉด์ ์๋ํ๋ฉด์๋ ํํธ์ผ๋ก๋ ์ฌ์ ์ผ๋ก ํ๋ค์์ต๋๋ค. ๋ค๋ฅธ ํ์๋ค์ ๋นํด ์๋์ ์ผ๋ก ๋ง์ ์๊ฐ์ด ๊ฑธ๋ฆฌ์ง๋ง, ์ ์ด๋ ์ฝ๋ ํ๋ฆ์ ์ฝ๊ธฐ ์์ํ๋ค๋ ์ ์ด ์ ์๊ฒ ํฐ ๋ฐ์ ์ด๋ผ๊ณ ์๊ฐํฉ๋๋ค. |
| ์ด์์ฐ | ์์ํ ๋๋ ์ํํธ ์คํฌ, ๊ทธ๋ฆฌ๊ณ ๋ฆฌ๋์ญ์ ๋ฐ์ ์ ๊ธฐ๋ํ์ง๋ง ๋ฌด๋ํ๊ฒ ์ ๋ฐ๋ผ์ ์ค ํ์๋ค ๋๋ถ์ ํฐ ์ฐ์ฌ๊ณก์ ์์ด ์ฌ๊ธฐ๊น์ง ์๋ค๊ณ ์๊ฐํฉ๋๋ค. ์ฌ๊ธฐ๊น์ง ์ค๋ ๋ฐ ๊ณ ๋ฏผํ ์๊ฐ๋ค ๋ํ ์ ์๊ฒ ์์ด ํฐ ๋ฐ์ ์ด๋ผ๊ณ ์๊ฐํฉ๋๋ค. ๊ทธ๋ฆฌ๊ณ ํ์
ํ ๋ ํ์ํ ๊ธฐ์ ๋ค์ ๋ํด ๋ง์ด ์ ์ ์์ด์ ์ข์์ต๋๋ค. |
| ์ด์ ์ง | ํ์
ํ๋ฉด์ ๊ฐ์ฅ ์ค์ํ๋ค๊ณ ์๊ฐํ๋ ๋ํ ๋ถ๋ถ์ ์ฌ๋ฌ ํ์
๋๊ตฌ๋ฅผ ํตํด ์ ์ด๋ฃจ์ด์ก๋ค๊ณ ์๊ฐํฉ๋๋ค. ๋ํ ์๋ก ์์ฑํ ์ฝ๋๋ค์ ์ฌ์ฉํ๋ค๋ณด๋ ์ด๋ค ์์ผ๋ก ์ฝ๋๋ฅผ ์งฐ๋์ง ์ ์ ์ดํดํ๋ ๋์ ๋ชจ์ต์ ๋ณด๋ฉด์ ์ฒ์ ์ฌ๊ธฐ์ ๋ค์ด์์ ๋๋ณด๋ค ๋ง์ด ์ฑ์ฅํ๋ค๋ ๋๋์ ๋ฐ์์ต๋๋ค. ๊ทธ๋ฆฌ๊ณ ๋งํ๋ ๋ถ๋ถ์ด ์๋ค๋ฉด ๋ค ๊ฐ์ด ๋ชจ์ฌ์ ํด๊ฒฐํ๋ ์ํฉ์ด ๋๋ฌด ์ธ์๊น์์ต๋๋ค. |
<p align="right"><a href="#top">Top</a></p>