์์ํ ๊ณ๊ธฐ ๋จธ๋ฆฌ๋ฅผ ์ํ ๊ฒธ(?) ์ํฐ๋์์ ์ฑ์ฉ ๊ณต๊ณ ๋ฅผ ๋ณด๋ค๊ฐ, 2๊ธฐ ๋ ์๋ฃ ํ๋ ์ํฐ๋ ํ๋ฆฌ์จ ๋ณด๋ฉ ๊ณต๊ณ ๊ฐ ๋ ์์ด ๋ค์ด๊ฐ ๋ดค๋ค.์ด๋ฒ์๋ ์ด๋ค ์ ๋ณ ๊ณผ์ ๊ฐ ์๋์ง ํ์ธํ๋ค๊ฐ ์ฒซ ๋ฒ์งธ ๊ตฌํ ๋ฌธ์ ๊ฐ ๋์ ๋์๋ค. ํด๋น ๋ฌธ์ ๋ Toggle Switch ๋ฅผ ๊ตฌํํ๋ ๊ฒ์ธ๋ฐ, ์ด์ ์ Toggle Switch์๋ ๋ค๋ฅด๊ฒ Slider ์์ญ์ ๋ ๊ฐ์ ๊ธ์๊ฐ ๊ฐ ์ฌ์ด๋์ ์์นํ์๊ณ Toggle์ด ํด๋น ๊ธ์ ๋ถ๋ถ์ผ๋ก ์ด๋ํ๊ฒ ๋๋ฉด ๋์ ์ผ๋ก ์คํ์ผ๋ง์ด ๋ณํ๋ ํฅ๋ฏธ๋ก์ด ๋ฌธ์ ์๋ค. ํ์ฐํ ๋ฐค, ์ค๋๋ง์ ๋ฐ๋๋ผ JS ๐ ๋ฅผ ์ฌ์ฉํ๊ณ ์ถ์ด ํด๋น ๋ฌธ์ ๋ฅผ ๋ค์๊ณผ ๊ฐ์ด ๊ฐ๋จํ ์ฝ๋ฉํด๋ณด์๋ค. Code See the Pen Untitled by ์ต๋ณํ (@leulsiqf) on CodePen.
๋ฌธ์ ํ์ ์คํฌ๋ฆฝํธ๋ฅผ ์ฌ์ฉํ ํ๋ก์ ํธ ๋ด์์ svg ํ์ผ์ ์ปดํฌ๋ํธ๋ก์ ์ฌ์ฉํ๊ธฐ ์ํด ๋ค์๊ณผ ๊ฐ์ด ์ฝ๋๋ฅผ ์์ฑํ์๋ค. import { ReactComponent as ProfileIcon } from '/images/icon-profile.svg'; ํ์ง๋ง ํด๋น ์ฝ๋์์ ๋ค์๊ณผ ๊ฐ์ ์๋ฌ๊ฐ ๋ฐ์ํ์๋ค. "*.svg"' ๋ชจ๋์ ๋ด๋ณด๋ธ ๋ฉค๋ฒ 'ReactComponent'์ด(๊ฐ) ์์ต๋๋ค. ๋ฌธ์ ํด๊ฒฐ ์คํ์ค๋ฒํ๋ก์ฐ์์ ๋์ ๊ฐ์ ๋ฌธ์ ๋ฅผ ๋ฐ๊ฒฌํ์๊ณ ํด๋น ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ ์ ์์๋ค.https://stackoverflow.com/questions/54121536/typescript-module-svg-has-no-exported-member-reactcomponent TypeScript - Module '"*.svg"..
Issue ํ๋ก์ ํธ ์ค, ๋ก์ปฌ PC์์ ๊ฐ์ ธ ์จ ์ด๋ฏธ์ง๋ฅผ preview๋ก ๋ณด์ฌ์ฃผ๋ฉฐ ์ ์ฅํ๋ ๊ธฐ๋ฅ ๊ตฌํ์ด ํ์ํ๋ค. ์ฒ์์๋ ๊ฐ๋จํ ๊ธฐ๋ฅ ๊ตฌํ์ผ ์ค ์์์ง๋ง ์๊ฐ๋ณด๋ค ๋ง์ ์ํ์ฐฉ์ค๋ฅผ ๊ฒช์๊ธฐ์ ํด๋น ๋ด์ฉ์ ํฌ์คํ ํ๊ณ ์ ํ๋ค. Code 1) Input ์คํ์ผ ์ปค์คํฐ๋ง์ด์ง ์ฐ์ , Input ํ๊ทธ ๋ด์ 'type=file' ์์ฑ์ ์ง์ ํด์ฃผ๋ฉด ๋ก์ปฌ PC์์ ์ด๋ฏธ์ง ์์ค๋ฅผ ๊ฐ์ ธ์ฌ ์ ์์ง๋ง ๊ธฐ๋ณธ ์ง์ ์คํ์ผ์ด ์ํ๋ ๋ฐฉํฅ์ด ์๋๊ธฐ์ ๋ค์๊ณผ ๊ฐ์ด JSX๋ฅผ ์์ฑํ์๋ค. ๋ด PC์์ ๋ถ๋ฌ์ค๊ธฐ ์ค์ ๋ก์ปฌ PC์์ ์ด๋ฏธ์ง๋ฅผ ๊ฐ์ ธ์ค๋ ๊ธฐ๋ฅ์ FetchLocalPC ์ปดํฌ๋ํธ์ด์ง๋ง ์คํ์ผ์ ์ปค์คํฐ๋ง์ด์งํ๊ธฐ ์ํด์ FileLabel ์ปดํฌ๋ํธ๋ฅผ ๋ฐ๋ก ๋ง๋ค์ด ๋ ์ปดํฌ๋ํธ์ ๋ค์๊ณผ ๊ฐ์ด ์คํ์ผ์ ์ง์ ํด์ฃผ์๋ค. export const Fi..
Issue ํ๋ก์ ํธ ๋์ค typescript ๊ธฐ๋ฐ์ react-redux ์ ์ญ ์ํ๋ฅผ ์ธํ ํด์ผ ๋๋ ์ํฉ์ด ์์๋ค. redux ๋ด action, ์ก์ ์์ฑ ํจ์, ๋ฆฌ๋์์ ๋ํ ์ ์ ํ ํ์ ์ ์ง์ ํด์ฃผ๊ธฐ ๊น๋ค๋ก์ด ์ํฉ ์์์ typesafe-actions ๋ผ๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์๊ฒ ๋์๋ค. https://github.com/piotrwitek/typesafe-actions GitHub - piotrwitek/typesafe-actions: Typesafe utilities for "action-creators" in Redux / Flux Architecture Typesafe utilities for "action-creators" in Redux / Flux Architecture - GitHub - pi..
๋ฌธ์ https://github.com/choi2601/LeetCode-ProblemSolving/tree/main/797-all-paths-from-source-to-target GitHub - choi2601/LeetCode-ProblemSolving: ๐จ๐ผ๐ป LeetCode ์๊ณ ๋ฆฌ์ฆ ๋ฌธ์ ํ์ด ์ฝ๋ ์ ์ฅ์ ๐จ๐ผ๐ป LeetCode ์๊ณ ๋ฆฌ์ฆ ๋ฌธ์ ํ์ด ์ฝ๋ ์ ์ฅ์. Contribute to choi2601/LeetCode-ProblemSolving development by creating an account on GitHub. github.com ๋ฆฟ์ฝ๋์์ ์ธ์ ํ๋ ฌ ๊ทธ๋ํ ๋ฌธ์ ๋ฅผ ํ๋ค๊ฐ ์ด์ด ์๋ ์ค์๋ก ์ธํด ์ค๋ ์๊ฐ ๊ณ ๋ฏผ์ ํ๋ค. ๋ค์๋ ๊ฐ์ ์ค์๋ฅผ ํ์ง ์๊ธฐ ์ํด ํด๋น ๋ถ๋ถ์ ์งง๊ฒ ํฌ์คํ ํ๊ณ ์..
Issue Next.js ํ๋ก์ ํธ ๋์ค ์ํ ์์ธ ํ์ด์ง๋ฅผ ์ ์ ์์ฑ(Static Generation)์ ํ๊ธฐ ์ํด์ getStaticProps์ getStaticPaths๋ฅผ ์ฌ์ฉํด ๋ณด๊ธฐ๋ก ํ์๋ค.ํด๋น ๊ธฐ๋ฅ์ ๊ตฌํํ๊ธฐ ์ด์ ์ ์ ์ ์์ฑ, getStaticProps, getStaticPaths๊ฐ ์ด๋ค ์๋ฏธ๋ฅผ ์ง๋๊ณ ์๋์ง ๊ฐ๋ตํ๊ฒ ๋ฉ๋ชจํด ๋๊ณ ์ ํ๋ค. ์ ์ ์์ฑ(Static Generation)์ ๋น๋ ์์ ์ ์จ์ ํ ํ์ด์ง์ HTML์ด ์์ฑ๋์ด ์๋ฒ์์ ๋ฌผ๋ฆฌ์ ์ผ๋ก HTML ํ์ผ์ ๋ชจ๋ ๊ฐ๊ณ ์๋ ์ํ์ด๋ค. ํ ๋ฒ ์๋ตํ ํ์๋ CDN(content delivery network)์ด ํ์ผ์ ๊ธฐ์ต(์บ์ฌ, cache)ํ์ฌ ์๋ตํ๊ธฐ ๋๋ฌธ์ ๋๋๋ง ์๋๊ฐ ๋น ๋ฅด๊ณ ๋ถํ์ํ ์๋ฒ ์์ฒญ์ ์ค์ผ ์ ์๋ค. getStaticPr..
๋ฌธ์ ํ๋ฉด์ ๋๋๋ง ๋ ๊ฐ ๋ฆฌ์คํธ๋ฅผ ๋๋ฅด๋ฉด ํด๋น ๋ฆฌ์คํธ์ ์์ธ ํ์ด์ง๋ก ์ด๋ํ๋ ๊ธฐ๋ฅ์ ๊ตฌํํ๊ธฐ ์ํด ๋ค์๊ณผ ๊ฐ์ด ๊ฐ ๋ฆฌ์คํธ์ ๊ณ ์ ์์ด๋ ๊ฐ์ dataset์ ํ ๋นํด์ฃผ์๊ณ ํด๋น id๊ฐ์ path query parameter์ ํ ๋นํด์ฃผ์๋ค. const LinkPage: FC = ({ itemInfoList }: LinkPageProps) => { const navigate = useNavigate(); const moveToDetailPage = ( e: React.MouseEvent ) => { const id = (e.target as HTMLParagraphElement).dataset.id; navigate(`/detail?id=${id}`); }; ( ... ) return ( {itemInfo..
๋ฌธ์ async/await ๋น๋๊ธฐ ์ฒ๋ฆฌ ํจ์ ๋ด์์ ํน์ ์ ๋ณด๋ค์ด ๋ด๊ธด ์์ดํ ๋ฆฌ์คํธ๋ฅผ ์๋ฒ๋ก๋ถํฐ ์ ๋ฌ ๋ฐ์ ๋ฐํํ๋๋ก ๋ค์๊ณผ ๊ฐ์ด ์ฝ๋๋ฅผ ์์ฑํ์๋ค. export interface ItemType { created_at: number; key: string; expires_at: number; download_count: number; count: number; size: number; summary: string; thumbnailUrl: string; files: File[]; sent?: Sent; } export const getItemData = async (): ItemType[] => { const { data } = await axios.get('https://romantic-hopper..