๐ Styled Components๋ก ๋ผ์ดํธ/๋คํฌ ๋ชจ๋ ์ ํํ๊ธฐ ์ค์ ํ๋ก์ ํธ์์๋ ์ฌ์ฉ์์๊ฒ ๋คํฌ ๋ชจ๋์ ๋ผ์ดํธ ๋ชจ๋๋ฅผ ์ ๊ณตํ๋ ๊ฒ์ด ์ค์ํ UX ์์ ์ค ํ๋์ด๋ค.styled-components์ ThemeProvider๋ฅผ ํ์ฉํ๋ฉด ์ ์ญ ํ ๋ง ์ ํ์ ๋งค์ฐ ๊ฐ๋จํ๊ฒ ๊ตฌํํ ์ ์๋ค.โ 1. ํ ๋ง ๊ฐ์ฒด ์ ์ํ๊ธฐ// themes.jsexport const lightTheme = { textColor: "#111", backgroundColor: "whitesmoke",};export const darkTheme = { textColor: "whitesmoke", backgroundColor: "#111",};โ 2. App์์ ํ ๋ง ์ํ ๊ด๋ฆฌ์ฌ๋ฌ๊ฐ์ property๋ฅผ ๊ฐ์ง ๊ฐ์ฒด๋ฅผ ๋๊ฐ (๋คํฌ/๋ผ์ดํธ) ์ค์ ํจ์ผ๋ก์จ ๊ฐํธํ๊ฒ theme์ ๋ฐ๊ฟ ์ ์๋ค. // Ap.. Styled Components - ์ ๋๋ฉ์ด์ , ์ปดํฌ๋ํธ ์ ํ์, ์ค์ฒฉ ์คํ์ผ๋ง ์ด๋ฒ์ ๋๋ฌ์ด๋ณผ ๊ธฐ์ต์ .. keyframes ๋ const ๋ก ๋ฐ๋ก ๋นผ์ ๊ด๋ฆฌํ๋ ๊ฑฐ + styled component ์กฐ๊ฑด๋ฌธ์ฒ๋ผ ์ฐ๊ธฐ !! โ ํ์ ์ ๋๋ฉ์ด์ ๋ง๋ค๊ธฐ๋จผ์ keyframes๋ฅผ ์ฌ์ฉํด ํ์ ํ๋ ์ ๋๋ฉ์ด์ ์ ์ ์ํ๋ค.import styled, { keyframes } from "styled-components"; const rotationAnimation = keyframes` 0% { transform: rotate(0deg); border-radius: 0px; } 50% { border-radius: 100px; } 100% { transform: rotate(360deg); border-radiu.. Styled Component์์ ์ปดํฌ๋ํธ ํ์ฅํ๊ธฐ ์๋ ์ ๋ฆฌ์กํธ ์ฒ์ ์ตํ๋ ๋ค ๊ณต๋ถํ๋ ๊ฒ ๊ฐ์๋ฐ, ํ๋ก์ ํธ๋ค์ ํ๋ค๋ณด๋ ๋น์ทํ ์ปดํฌ๋ํธ๋ฅผ ์์ฑํ๋ ๊ฒฝ์ฐ๊ฐ ๋ง์๋ฐ ๋ฌด์ํ๊ณ ๊ณ์ ํ๋ค๊ฐ .. '์ ์๋ ์ ์ด๊ฑฐ ๊ณต๋ถํ์๋๋ฐ .. ' ์ถ์ด์ ์ ๋ฆฌํ๊ฒ๋๋ค. ์ผ๋จ ๊ทธ ์ ์ styled component ๋ฅผ ์ฐ๋ ์ด์ ๋ ๊ธฐ์กด์ div๋ฅผ ๋ง๋ค๊ณ className ์ด๋ style์ ๋ถ์ฌํ๋ ์์ด์์ง๋ง,๋์ styled๋ฅผ ์ํฌํธ ํด์ ์ฐ๋ฆฌ๊ฐ ์ฌ์ฉํ html ์์ ์ฌ์ฉํ๊ณ ์ถ์ ํ๊ทธ๋ฅผ ์ง์ ํ๊ณ , ๋ฐฑํฑ ์์ css์ฝ๋๋ฅผ ์ ์ด์ค๋ค. -> ์ปดํฌ๋ํธ ์ด๋ ๊ฒ ํ๊ฒ ๋๋ฉด ์คํ์ผ๋ง ๋ ์ปดํฌ๋ํธ๋ฅผ ์ฌ์ฉํจ์ผ๋ก์จ, ์ปดํฌ๋ํธ ํจ์ ์์ ์คํ์ผ์ ์ ์ ํ์๊ฐ ์๊ณ , ๊ฐ๋ ์ฑ์ด ์ข์์ง๋ค. ๋๋ ํผ์งํ or ๋ง์ด ์ฌ์ฉํ ๋งํ ์ปดํฌ๋ํธ๋ค์ ์คํ์ผ ์ปดํฌ๋ํธ๋ก ์ง์ ํ๊ณ , ๊ทธ ์์ ์์ํ ํ ์คํธ๋ ๋ฒ.. ๋ฆฌ์กํธ ํด๋๊ตฌ์กฐ์ ์ ์์ด ์์๊น ์ฐ๋ฆฌ๊ฐ ์ฝ๋ฉํ src ํด๋ ์ฌ์ค ๋ ธ๋ง๋์ฝ๋๋ฅผ ๋ฐ๋ผํ๊ธฐ ๋๋ฌธ์.. ๊ทธ๋ฆฌ๊ณ ์ด๋ฒ ํ๋ก์ ํธ๋ ๊ทธ ์์์ ์ถฉ๋ถํ ์ปค๋ฒ๊ฐ ๊ฐ๋ฅํ๊ธฐ ๋๋ฌธ์ ํด๋๊ตฌ์กฐ์ ๋ํ ๊ณ ๋ฏผ์ ํ ํ์๊ฐ ์์์ง๋ง ๊ทธ๋๋ ํด๋ ์คํธ๋ญ์ณ์ ๊ด์ฌ์ด ๋ง์ ๋๋ ์ฐพ์๋ณด์๋ค! ํ๋ฌํฐ์ ๋ค๋ฅด๊ฒ, ๋๋ถ๋ถ ๊ฑฐ์ ํต์ผ๋ ํด๋ ์คํธ๋ญ์ณ๋ฅผ ๊ฐ์ถ์ด ์์ ์ ํ๋ ๋ชจ์ต์ ๋ณผ ์ ์์๋ค. ๊ทธ๋์ ์์ผ๋ก ๋ด๊ฐ ๋ณด๊ณ ๊ณ์ํด์ ์ฐธ๊ณ ํ ๋งํ ๋ด์ฉ์ ๊ฐ์ ธ์๋ดค๋ค ..! CRA์ ์ด๊ธฐ ํด๋๊ตฌ์กฐ my-app โโโ node_modules โโโ public โโโ src โโโ .gitignore โโโ package.json โโโ README.md node_modules ํ์ฌ ํ๋ก์ ํธ์ ํฌํจ๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ค์ด ์ค์น๋์ด ์๋ ํด๋๋ก ๋ณดํต ๊น๊ณผ ๊ฐ์ ์ ์ฅ์์ ์ฌ๋ฆด ๋๋ ์ด ํด๋๋ฅผ ํจ๊ป ์ฌ๋ฆฌ.. ๊ฐ๋ฐ์๋๊ตฌ ์ผ๋ฌด์ฅ๊ฒ ์ฐ๊ธฐ โจ ๊ฐ๋ฐ์๋๊ตฌ ์คํํ๊ธฐ F12 Ctrl + Shift + i Elements : html/CSS ์ํ ํ์ธ Console : ์ฝ์ (๋ณ์ ์ ๋ณด๋ฅผ ํ์ธํ๊ณ ์ค๋ฅ ๋ฉ์์ง ํ์) Sources : ์คํฌ๋ฆฝํธ ๋๋ฒ๊น (break point ์ง์ ๋ฐ ๋ณ์ ๋ชจ๋ํฐ๋ง ๋ฑ) Network : ๋ธ๋ผ์ฐ์ ์์ ๋ฐ์ํ๋ ํต์ ์ํ Performance(์์ Timelineํจ๋) : ์ฑ๋ฅ ์ธก์ Memory(์์ Profiles ํจ๋) : ๋ฉ๋ชจ๋ฆฌ ์ฌ์ฉ ํํ๋ฅผ ์์ฑํ๊ณ ๋์ ํ์. Application(์์ Resources ํจ๋) : ์ฟ ํค ๋ฐ ์คํ ๋ฆฌ์ง ๋ฑ์ ๋ด์ฉ ์์ง Audits : ํ์ด์ง๋ฅผ ๋ถ์ํ๊ณ ์ต์ ํ๋ฅผ ์ํ ํ ๋์ด Security : Mixed content ์ด์, ์ธ์ฆ์ ๋ฌธ์ ๋ฑ์ ๋๋ฒ๊น ๐ ํฌ๋กฌ ๊ฐ๋ฐ์ ๋๊ตฌ ๋จ์ถํค ๋ชจ.. ๋ฐ์ํ ์น์์์ ์ปจํ ์ด๋ ํฌ๊ธฐ ๋ฐ์ํ ์น์ด๋ ๋ธ๋ผ์ฐ์ ๋์ด์ ๋ฐ๋ผ ์ต์ ํ๋ ์ฌ์ดํธ๋ฅผ ๋งํฉ๋๋ค. ์ถ๋ ฅ๋ฌผ๊ณผ๋ ๋ฌ๋ฆฌ ์น ํผ๋ธ๋ฆฌ์ฑ ์์ ์ด ๋ค์ด๊ฐ๋ฉฐ, ์ฝ๋๋ก ๊ตฌํ๋๊ธฐ ๋๋ฌธ์ ๊ณ ์ ๊ฐ์ธ ๋์์ธ์ ์ก์์ค ๋ PC / Tablet / Mobile ์ด๋ฐ ์์ผ๋ก ์ต์ ํ๋ ์์์ผ๋ก ์ก์์ค์ผ ๋ฉ๋๋ค. PC const ProjectComponent=styled.div` .contentsbox{ width: 1140px; height: 100%; margin: 0px auto; display: flex; flex-direction: column; } ... ` ์ฐ์ ์ ํฌ๊ฐ ์ฌ์ฉํ ๋ฐฉ๋ฒ!! (์ค์ ์ฝ๋ ๊ฐ์ ธ์์ต๋๋ค) ์ ํฌ๋ ์ปจํ ์ด๋๋ฅผ 1140px๋ก ์ก์๊ณ , ์์ชฝ์ margin์ auto๋ก ์ฃผ์ด ์ผํฐ์ ๋์์ต๋๋ค! ๊ทธ๋ฆฌ๊ณ ์ ์ฒด width๋ฅผ 1280px ์ด์์ด๋ผ๊ณ .. React validation ๋ฆฌ์กํธ ์ ํจ์ฑ ๊ฒ์ฌ Formik VS REACT Hook form https://nyeongnyeong.tistory.com/299 [React] Form Validation (Formik VS React Hook Form) Validation ์ด๋? ์๋ฒ์ ๋ฐ์ดํฐ๋ฅผ ์ ์ถํ๊ธฐ ์ ์ ์์์ด ์ฌ๋ฐ๋ฅธ์ง ํ์ธํ๋ ๊ณผ์ ์ฌ์ฉ์๊ฐ ๋ฐ์ดํฐ๋ฅผ ๋ชฉ์ ์ง๋ก ๋ณด๋ด๊ธฐ ์ ์, ์ฌ๋ฐ๋ฅผ ๋ฐ์ดํฐ๋ฅผ ์ ๋ ฅํ๋์ง ์ ํจ์ฑ์ ์ฒดํฌํด์ฃผ๋ ๊ฒ. Client Validation rea nyeongnyeong.tistory.com react iframe์ ์ํด ํด๋ฆญ ์๋๋ ๋ฌธ์ ํด๊ฒฐ https://www.inflearn.com/questions/404668/react-%EC%A0%80%EC%9E%A5-%EC%8B%9C-iframe-%EA%B0%95%EC%A0%9C-%EC%9E%AC%EC%83%9D%EC%84%B1-%EB%AC%B8%EC%A0%9C react ์ ์ฅ ์ iframe ๊ฐ์ ์ฌ์์ฑ ๋ฌธ์ - ์ธํ๋ฐ | ์ง๋ฌธ & ๋ต๋ณ create react app์ ํตํด ํ๋ก์ ํธ๋ฅผ ์งํ ์ค์ ๋๋ค. ์๋ ์ปดํจํฐ์์๋ ํ๋ก์ ํธ๊ฐ ์ ์์ ์ผ๋ก ์๋ ๋์๋๋ฐ, ๋ค๋ฅธ ์ปดํจํฐ์์ git clone์ ๋ฐ์ npm install ํ npm start ์งํํ๋, 1. Cannot read pro... www.inflearn.com ๋ฆฌ์กํธ ํ์ ์ฐฝ/๋ชจ๋ฌ/๋ค์ด์ผ๋ก๊ทธ ๊ตฌํํ๊ธฐ, ์ญ์ ๋ฒํผ ๊ตฌํ, ๊ตฌ์กฐ๋ถํดํ ๋น https://jaeseokim.dev/React/React-Portal_Render%EC%9D%98_%EC%B0%A8%EC%9D%B4%EC%A0%90_%ED%99%9C%EC%9A%A9%EB%B0%A9%EC%95%88_%EC%95%8C%EC%95%84%EB%B3%B4%EA%B8%B0/ [React] Portal, Render์ ์ฐจ์ด์ , ํ์ฉ๋ฐฉ์ ์์๋ณด๊ธฐ! ์ต๊ทผ Kakao Map Api๋ฅผ React Component ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ก ๊ฐ๋ฐ์ ์งํํ๋ฉฐ ์์ฃผ ์ฌ์ฉํ๊ฒ ๋ ReactDom์ Portal ๊ธฐ๋ฅ์ ๋ํด์ ๊ณต๋ถ๋ฅผ ํ๋ฉด์ Render์ ์ด๋ ํ ์ฐจ์ด์ ์ด ์๋์ง ๊ทธ๋ฆฌ๊ณ ํ์ฉ๋ฐฉ์์ ๋ํด์ ์ ๋ฆฌ ํด jaeseokim.dev Portalcreate๋ฅผ ์ด์ฉํ์ฌ ๊ตฌํ ๋๋ navbar ์์ ์๋ login button์.. ์ด์ 1 2 ๋ค์