์ธ๋„ค์ผ ๐ŸŒ— 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 ๋งŽ์ด ์‚ฌ์šฉํ• ๋งŒํ•œ ์ปดํฌ๋„ŒํŠธ๋“ค์€ ์Šคํƒ€์ผ ์ปดํฌ๋„ŒํŠธ๋กœ ์ง€์ •ํ•˜๊ณ , ๊ทธ ์•ˆ์˜ ์ž์ž˜ํ•œ ํ…์ŠคํŠธ๋‚˜ ๋ฒ„..
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 butt..
์ธ๋„ค์ผ styled-component ๋กœ ์ฝ”๋“œ ๋ฆฌํŒฉํ† ๋งํ•˜๊ธฐ 0. ์™œ ๊ณต๋ถ€ํ•˜๋‚˜ํ•ด์ปคํ†ค ์›น์‚ฌ์ดํŠธ๋ฅผ ๋งŒ๋“ค๋ฉฐ ํŒ€์›์˜ ์ฝ”๋“œ ๊ฐ„์— css ๊ฐ„์„ญ์ด ์ผ์–ด๋‚˜ ๋ช‡๋ฒˆ์˜ ์ˆ˜์ •์„ ๊ฑฐ์ณค๋‹ค. ๋ฆฌ์•กํŠธ์— css๋ฅผ ์ฃผ๋Š” ๋ฐฉ๋ฒ•์ด ๋‹ค์–‘ํ•˜์ง€๋งŒ, styled-component๋Š” ์•Œ๊ณ ๋งŒ ์žˆ์—ˆ์ง€ ์‚ฌ์šฉํ•ด๋ณธ ์ ์€ ํ•œ๋ฒˆ๋ฐ–์— ์—†๋Š” ๊ธฐ์ˆ ์ด๋‹ค.์‹œํ–‰์ฐฉ์˜ค์˜ ํ•ด๊ฒฐ์ฑ…์œผ๋กœ styled-component๋กœ ๋ฐฉ์‹์„ ๋ฐ”๊พธ๊ธฐ๋กœ ํ•˜์˜€๊ณ , ์ƒ์ฝ” ๊ต์ˆ˜๋‹˜ ๊ฐ•์˜๋ฅผ ๋“ค์–ด๋ณด๋ ค ํ•œ๋‹ค. ๊ฐ•์˜ ์‹œ๊ฐ„์ด 14๋ถ„๋ฐ–์— ์•ˆ๋˜๋‹ˆ๊นŒ ์ •๋ฆฌ๊ฒธ ํ•œ์‹œ๊ฐ„์•ˆ์— ๋๋‚ด๋Š” ๊ฑธ ๋ชฉํ‘œ๋กœ ํ•˜๋ฉฐ ๋ธ”๋กœ๊ทธ๋ฅผ ์ผฐ๋‹ค. 1. ๊ธฐ์กด์˜ ์ธ๋ผ์ธ css ์„ ์–ธ๊ณผ styled-component์˜ ๋น„๊ต - ์™ผ์ชฝ์€ ํ•จ์ˆ˜๋ฅผ ์ •์˜ํ•˜๊ณ  ๋ฆฌํ„ด๊ฐ’์œผ๋กœ ๋ฒ„ํŠผํƒœ๊ทธ๋ฅผ ๋‘์–ด ๋ฒ„ํŠผ ํƒœ๊ทธ๋ฅผ ์ตœ์ƒ์œ„ ํƒœ๊ทธ๋กœ ํ•˜๋Š” ์ปดํฌ๋„ŒํŠธ๋ฅผ ์ƒ์„ฑํ•œ๋‹ค. - ์˜ค๋ฅธ์ชฝ์—์„œ styled-component๋ฅผ ์‚ดํŽด๋ณด๋ฉด, styled-components๋ฅผ ..
์ธ๋„ค์ผ [REACT] ReactJS๋กœ ์˜ํ™” ์›น ์„œ๋น„์Šค ๋งŒ๋“ค๊ธฐ (((((((((((๊ธฐ์ด์ด์ธ ๊ธ€ ์ฃผ์˜. ํ•œ ๊ฐ•์˜๋ฅผ ํ•œ ํฌ์ŠคํŠธ์— ์ •๋ฆฌํ•จ))))))))))) ๋‹น์žฅ ๊ธˆ์š”์ผ๋ถ€ํ„ฐ ๋ฆฌ์•กํŠธ๋ฅผ ์จ์•ผํ•œ๋‹ค. ์ง„์งœ .. ํฐ์ผ๋‚ฌ๋‹ค. ์ด ๊ธ€์€ ๊ฐ•์˜์˜ ๋ชฉ์ฐจ๋ฅผ ๊ทธ๋Œ€๋กœ ๊ฐ€์ ธ์™€์„œ ๊ทธ ์ˆœ์„œ๋Œ€๋กœ ์ •๋ฆฌํ•  ์˜ˆ์ •์ด๋‹ค. ๋ชฉ์ฐจ๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™๋‹ค. ๋Ÿฌ๋‹์ปค๋ธŒ๊ฐ€ ๋†’์€ react์ด๊ธฐ ๋•Œ๋ฌธ์— ์˜คํžˆ๋ ค ๊ธฐ์ดˆ๋ฅผ ํ™•์‹คํžˆ ์ •๋ฆฌํ•ด๋‘์–ด์•ผ ํ•  ๊ฒƒ ๊ฐ™๋‹ค. ๊ทธ๊ฒŒ ๋ฐ”๋กœ ์˜ค๋Š˜์ด ๋˜๊ธธ ๋ฐ”๋ผ๋ฉด์„œ ์‹œ์ž‘ํ•ด๋ณธ๋‹ค. ๋”๋ณด๊ธฐ 1 [2021 UPDATE] INTRODUCTION #1.1 โค๏ธ ๋ฌด๋ฃŒ ๊ฐ•์˜ โค๏ธ #1.2 Why React #1.3 Requirements 2 [2021 UPDATE] THE BASICS OF REACT #2.0 Introduction #2.1 Before React #2.2 Our First React Element #2.3 Eve..