- CRUD ์ดํ๋ฆฌ์ผ์ด์ ์ ๋ง๋ค์ด๋ณด๊ธฐ.
- ์์ฑ๋ ํ์ผ์ ๋ฐฐํฌ ํํ์ด์ง๋ฅผ ์ ๊ณตํ์ฌ ํ์ธํ ์ ์๊ฒ ํฉ๋๋ค.
- Feed
- ํผ๋ ์ถ๊ฐ ๊ธฐ๋ฅ
- ํผ๋ ์ด๋ฏธ์ง ์์ ๊ธฐ๋ฅ
- ํผ๋ ์ญ์ ๊ธฐ๋ฅ
- Comment
- ๋๊ธ ์ถ๊ฐ ๊ธฐ๋ฅ
- ๋๊ธ ์์ ๊ธฐ๋ฅ
- ๋๊ธ ์ญ์ ๊ธฐ๋ฅ
- Like
- ํผ๋ ์ข์์ ๊ธฐ๋ฅ
- ๋ฌธ์ : ์ด๋ฏธ์ง ํ์ผ์ด ํ๊ฐ์ฉ ๋ฐ๋ ค์ ๋ค์ด๊ฐ๋ ๋ฌธ์ ๊ฐ ๋ฐ์
// NavBar Component
const handleOnChange = ({ target }) => {
const result = [...feedData];
const file = target.files[0];
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => {
const item = {
id: "YHJ96",
imgURL: reader.result,
avatarURL: avatar,
likeAvatarURL: codestateAvatar,
likeId: "codestates",
likeLength: 1,
};
result.push(item);
};
setFeedData(result);
};
- ํด๊ฒฐ : FileReader์ onload ๋ฉ์๋๋ ๋น๋๊ธฐ์ ์ผ๋ก ์๋
// NavBar Component
const handleOnChange = ({ target }) => {
const result = [...feedData];
const file = target.files[0];
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => {
const item = {
id: "YHJ96",
imgURL: reader.result,
avatarURL: avatar,
likeAvatarURL: codestateAvatar,
likeId: "codestates",
likeLength: 1,
};
result.push(item);
setFeedData(result);
};
};
-
๋ฌธ์ : ํ์ผ ์ ํ์ ์จ๊ธฐ๊ณ ํด๋น ์ด๋ฒคํธ๋ฅผ ์ปค์คํ ๋ฒํผ์ผ๋ก ํด๊ฒฐํ๊ธฐ ์ํ ๋ฌธ์ ๋ฐ์
-
ํด๊ฒฐ: ํ์ผ ์ ํ input์ ref๋ฅผ ์ฐ๊ฒฐํ๊ณ
{ display: none }
์ ์ฌ์ฉํ์ฌ ์จ๊ฒจ์ค ๋ค์์ ์ปค์คํ ๋ฒํผ์ ์ง์ ref๋ฅผ ์ด์ฉํด์ ์ด๋ฒคํธ ์ฐ๊ฒฐ
const inputRef = useRef(null);
// ref๋ฅผ ์ด์ฉํด์ ์ด๋ฒคํธ ๋ฐ์ ํจ์ ์์ฑ
const handleOnClickAddItem = () => inputRef.current.click();
// ์ปค์คํ
๋ฒํผ
<NavIcon src={plus} onClick={handleOnClickAddItem} />
// ํ์ผ ์ ํ input
<input
ref={inputRef}
type={"file"}
accept="image/*"
onChange={handleOnChange}
style={{ display: "none" }}
/>
-
๋ฌธ์ : Feed์ Comment์ props๋ฅผ ์์ ํ๋ฉด ๋ถ๋ชจ์ state๊ฐ ๋ณ๊ฒฝ๋์ด ํด๋น ํ์ด์ง์ state๋ฅผ ๊ณต์ ํ๋ ์ฌ๋ฌ๊ฐ์ Comment ์ปดํฌ๋ํธ์ Recommend ์ปดํฌ๋ํธ๊ฐ ๋๋๋ง ๋ฌธ์ ๋ฐ์
-
ํด๊ฒฐ : React.memo()๋ฅผ ์ฌ์ฉํด์ props ์ํ๋ฅผ ๋ฉ๋ชจ์ด์ ์ด์
// Recommend Component
export default React.memo(Recommend);
// Comment Component
export default React.memo(Comment);
-
๋ฌธ์ : Feed์ input์ ๊ฐ์ ๋ฐ๋ผ ๊ฒ์ ๋ฒํผ์ disabled ํ์ฑํ ๊ธฐ๋ฅ์์ ๋ฌธ์๋ฅผ ์ ๋ ฅํ ๋ ๋ง๋ค render ํธ์ถ๋ก ์ฑ๋ฅ ์ด์
-
ํด๊ฒฐ : ๋๋ฐ์ด์ค ํจ์์ ์์ฑํด์ 0.2์ด ๊ฐ๊ฒฉ์ผ๋ก ์ด๋ฒคํธ ๋ฐ์์ผ๋ก ์ต์ ํ
// utils/debounce.js
export const debounce = (callback, delay) => {
let timer;
return (...args) => {
clearTimeout(timer);
timer = setTimeout(() => callback(...args), delay);
}
};
// Feed Component
const handleOnChangeCommentInput = (e) => setInputValue(e.target.value);
const debounceOnChange = debounce(handleOnChangeCommentInput, 200);
ํ๊ทธ์ด๋ฆ | ์ค๋ช |
---|---|
feat | ์๋ก์ด ๊ธฐ๋ฅ ์ถ๊ฐ |
fix | ๋ฒ๊ทธ ์์ |
design | CSS ๋ฑ ์ฌ์ฉ์ UI ์์ |
style | ์ฝ๋ ํฌ๋งท ๋ณ๊ฒฝ, ์ธ๋ฏธ ์ฝ๋ก ๋๋ฝ, ์ฝ๋ ์์ ์ด ์๋ ๊ฒฝ์ฐ |
refactor | ์ฝ๋ ๋ฆฌํฉํ ๋ง |
comment | ์ฃผ์ ์ถ๊ฐ ๋ฐ ๋ณ๊ฒฝ |
docs | ๋ฌธ์ ์์ (MD ํ์ผ) |
chore | ๋น๋ ํ ์คํธ, ํจํค์ง ๋งค๋์ ์ค์ |
rename | ํ์ผ ํน์ ํด๋๋ช ์์ ํ๊ฑฐ๋ ์ฎ๊ธฐ๋ ์์ |
remove | ํ์ผ์ ์ญ์ ํ๋ ์์ ๋ง ํ๋ ๊ฒฝ์ฐ |
change | ๋ฌธ์๋ง ๋ณ๊ฒฝํ ๊ฒฝ์ฐ |