์ธ๋„ค์ผ ๐ŸŒ— 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์„..