์ธ๋„ค์ผ Firebase ๋ณด์•ˆ๊ทœ์น™ ์ˆ˜์ • : ํŒŒ์ด์–ด๋ฒ ์ด์Šค์— ์•ˆ์ „ํ•˜์ง€ ์•Š์€ ๊ทœ์น™์ด ์žˆ์Šต๋‹ˆ๋‹ค ๋ฉ”์ผ ์˜ฌ ๊ฒฝ์šฐ ํ•ด๊ฒฐ ๋ฐฉ๋ฒ• ํŒŒ๋ฒ  ๋ณด์•ˆ๊ทœ์น™ ๋ณด์•ˆ ๊ทœ์น™ ์‹œ์ž‘ํ•˜๊ธฐ | Firestore | Google Cloud ๋ณด์•ˆ ๊ทœ์น™ ์‹œ์ž‘ํ•˜๊ธฐ | Firestore | Google Cloud ์˜๊ฒฌ ๋ณด๋‚ด๊ธฐ ์ปฌ๋ ‰์…˜์„ ์‚ฌ์šฉํ•ด ์ •๋ฆฌํ•˜๊ธฐ ๋‚ด ํ™˜๊ฒฝ์„ค์ •์„ ๊ธฐ์ค€์œผ๋กœ ์ฝ˜ํ…์ธ ๋ฅผ ์ €์žฅํ•˜๊ณ  ๋ถ„๋ฅ˜ํ•˜์„ธ์š”. ๋ณด์•ˆ ๊ทœ์น™ ์‹œ์ž‘ํ•˜๊ธฐ Firestore ๋ณด์•ˆ ๊ทœ์น™์„ ์‚ฌ์šฉํ•˜๋ฉด ์ธํ”„๋ผ๋ฅผ ๊ด€๋ฆฌํ•˜๊ฑฐ๋‚˜ ์„œ๋ฒ„ ์ธก ์ธ์ฆ ๋ฐ ์Šน์ธ cloud.google.com ์ •๋ง ์ง•๊ธ€์ง•๊ธ€ํ•˜๊ฒŒ ์ด๋ฉ”์ผ์„ ๋ณด๋‚ด ๊ดด๋กญํžˆ๋˜ firebase ๋ณด์•ˆ๊ทœ์น™์„ ์ˆ˜์ •ํ–ˆ์Šต๋‹ˆ๋‹ค (๊ณ„์† ๊ฒฝ๊ณ ํ•˜๋‹ˆ๊นŒ ๋ถˆ์•ˆํ–ˆ์Šด ๐Ÿฅฒ ๊ฒฝ๊ณ  ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค ๊ตฌ๊ธ€์”จ) 1. ๋ณด์•ˆ๊ทœ์น™ ๋ฒ„์ „ ์ž‘์„ฑ rules_version = '2'; ๊ธฐ์กด์˜ rules_version = '1' ์€ ์™€์ผ๋“œ ์นด๋“œ๋ฅผ ์‚ฌ์šฉํ•  ๋•Œ ํ•œ ๊ฐœ ํ˜น์€ ๋‘ ๊ฐœ ์ด์ƒ์˜ path๋ฅผ ํฌํ•จํ•˜๊ณ  ์žˆ์–ด์•ผํ•˜๊ธฐ ๋•Œ๋ฌธ์— ์ž์œ ..
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์„..
์ธ๋„ค์ผ styled-component ๋กœ ์ฝ”๋“œ ๋ฆฌํŒฉํ† ๋งํ•˜๊ธฐ 0. ์™œ ๊ณต๋ถ€ํ•˜๋‚˜ ํ•ด์ปคํ†ค ์›น์‚ฌ์ดํŠธ๋ฅผ ๋งŒ๋“ค๋ฉฐ ํŒ€์›์˜ ์ฝ”๋“œ ๊ฐ„์— css ๊ฐ„์„ญ์ด ์ผ์–ด๋‚˜ ๋ช‡๋ฒˆ์˜ ์ˆ˜์ •์„ ๊ฑฐ์ณค๋‹ค. ๋ฆฌ์•กํŠธ์— css๋ฅผ ์ฃผ๋Š” ๋ฐฉ๋ฒ•์ด ๋‹ค์–‘ํ•˜์ง€๋งŒ, styled-component๋Š” ์•Œ๊ณ ๋งŒ ์žˆ์—ˆ์ง€ ์‚ฌ์šฉํ•ด๋ณธ ์ ์€ ํ•œ๋ฒˆ๋ฐ–์— ์—†๋Š” ๊ธฐ์ˆ ์ด๋‹ค. (๋‚˜๋Š” ๋ฆฌ์•กํŠธ ๋ฒ ์ด๋น„๋‹ˆ๊น) ์‹œํ–‰์ฐฉ์˜ค์˜ ํ•ด๊ฒฐ์ฑ…์œผ๋กœ styled-component๋กœ ๋ฐฉ์‹์„ ๋ฐ”๊พธ๊ธฐ๋กœ ํ•˜์˜€๊ณ , ์ƒ์ฝ” ๊ต์ˆ˜๋‹˜ ๊ฐ•์˜๋ฅผ ๋“ค์–ด๋ณด๋ ค ํ•œ๋‹ค. ๊ฐ•์˜ ์‹œ๊ฐ„์ด 14๋ถ„๋ฐ–์— ์•ˆ๋˜๋‹ˆ๊นŒ ์ •๋ฆฌ๊ฒธ ํ•œ์‹œ๊ฐ„์•ˆ์— ๋๋‚ด๋Š” ๊ฑธ ๋ชฉํ‘œ๋กœ ํ•˜๋ฉฐ ๋ธ”๋กœ๊ทธ๋ฅผ ์ผฐ๋‹ค. 1. ๊ธฐ์กด์˜ ์ธ๋ผ์ธ css ์„ ์–ธ๊ณผ styled-component์˜ ๋น„๊ต ์—ญ์‹œ ์šฐ๋ฆฌ์˜ ์ƒ์ฝ” ๊ต์ˆ˜๋‹˜์€ ํŠน์ • ๊ธฐ์ˆ ์„ ์‚ฌ์šฉํ•˜๊ธฐ ์ „์— ๊ผญ ๋น„๊ต๋กœ ์‹œ์ž‘ํ•˜์‹ ๋‹ค. ๋‚œ ์ด ๊ณผ์ •์ด ์ฐธ ์ข‹๋‹ค - โœจ - ์™ผ์ชฝ์€ ํ•จ์ˆ˜๋ฅผ ์ •์˜ํ•˜๊ณ  ๋ฆฌํ„ด๊ฐ’์œผ๋กœ ๋ฒ„ํŠผํƒœ๊ทธ๋ฅผ ๋‘์–ด ๋ฒ„ํŠผ ํƒœ๊ทธ๋ฅผ ์ตœ..
์ธ๋„ค์ผ Three.js ๋กœ ์›€์ง์ด๋Š” ์ง€๊ตฌ๋ณธ ๋งŒ๋“ค๊ธฐ https://velog.io/@whdnjsdyd111/Three.js-%EA%B8%B0%EB%B3%B8-%EA%B5%AC%EC%A1%B0 [Three.js] ๊ธฐ๋ณธ ๊ตฌ์กฐ ์›์‹œ ๋ชจ๋ธ Three.js ์˜ ์›์‹œ ๋ชจ๋ธ์ด๋ž€, ๋Ÿฐํƒ€์ž„์— ๋‹ค์–‘ํ•œ ์ธ์ž๋“ค๋กœ ์ •์˜ํ•œ 3D ๋ชจ์–‘์„ ์˜๋ฏธํ•œ๋‹ค. ์ฃผ๋กœ ๊ณต, ์œก๋ฉด์ฒด ๋“ฑ์œผ๋กœ 3D ๊ทธ๋ž˜ํ”„๋ฅผ ๋งŒ๋“œ๋Š”๋ฐ ์‚ฌ์šฉํ•œ๋‹ค. BoxGeomtry ์œก๋ฉด์ฒด CircleGeometry ์› ![](https://images.v velog.io ์›์— ์ด๋ฏธ์ง€ ์”Œ์šฐ๊ณ  ๋ชจ์…˜ ์ฃผ๊ธฐ .. ์žฌ๋ฐŒ๋‹ค ์˜ˆ์ „์— ์‚ฌ๋‘” three.js ๊ฐ•์˜ ์ฒœ์ฒœํžˆ ๋“ค์–ด๋ด์•ผ๊ฒ ๋‹ค ใ…Žใ…Ž
์ธ๋„ค์ผ [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..
์ธ๋„ค์ผ [js library] AOS ์Šคํฌ๋กค ์• ๋‹ˆ๋ฉ”์ด์…˜ ๊ตฌํ˜„ํ•˜๊ธฐ ์ฐธ๊ณ  [AOS] ๐Ÿ“š ์Šคํฌ๋กค ์• ๋‹ˆ๋ฉ”์ด์…˜ ์‚ฌ์šฉ๋ฒ• - Animate On Scroll AOS.js (Animate On Scroll) ๊ธฐ๋ณธ์ ์œผ๋กœ ์Šคํฌ๋กค ์›€์ง์ž„์— ๋”ฐ๋ผ ๊ฐœ์ฒด์— ์›€์ง์ž„์„ ์ฃผ๋Š” ์• ๋‹ˆ๋ฉ”์ด์…˜์˜ ๊ฒฝ์šฐ, AOS ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ์‰ฝ๊ฒŒ ์• ๋‹ˆ๋ฉ”์ด์…˜์„ ์ค„ ์ˆ˜ ์žˆ๋‹ค. AOS ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ๊นŠ inpa.tistory.com ์ด๋ฒˆ์— ๋งŒ๋“ค๊ณ  ์žˆ๋Š” ์™ธ์ฃผ ์‚ฌ์ดํŠธ์—์„œ ๋งŽ์ด ์“ฐ์ด๋Š” ์• ๋‹ˆ๋ฉ”์ด์…˜ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ด๋‹ค. ์ด ํšจ๊ณผ ํ•˜๋‚˜๋งŒ์œผ๋กœ๋„ ์›น์ด ํ•œ์ธต ๋” ๋‹ค์ด๋‚˜๋ฏนํ•ด๋ณด์—ฌ์„œ ์•ž์œผ๋กœ๋„ ์ž์ฃผ ์“ธ ๊ฒƒ ๊ฐ™๋‹ค. ์‚ฌ์ง„์ด ๊ฐ€์šด๋ฐ์„œ๋ถ€ํ„ฐ ์ปค์ง€๋Š” ํšจ๊ณผ ์•„๋ž˜์—์„œ ํ•˜๋‚˜์”ฉ ์˜ฌ๋ผ์˜ค๊ฒŒ
์ธ๋„ค์ผ default.css ์„ธํŒ…ํ•˜๊ธฐ ๋ธŒ๋ผ์šฐ์ € ๋งˆ๋‹ค ๋””ํดํŠธ๋กœ ์„ค์ •๋˜์–ด ์žˆ๋Š” css ๊ฐ’๋“ค์ด ์žˆ๋‹ค. margin, padding ๊ฐ™์€ css ์†์„ฑ(property)์˜ ๊ฐ’๋“ค์ด 0์ด ์•„๋‹ˆ๋ผ ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ์ •ํ•œ ์ž„์˜์˜ ๊ฐ’์œผ๋กœ ์„ค์ •๋˜์–ด ์žˆ๋‹ค. ์ด๋Ÿฐ ๊ฐ’๋“ค์„ ์ดˆ๊ธฐํ™”ํ•˜๊ณ  ์ž‘์—…์„ ํ•ด์•ผ ๋‚ด๊ฐ€ ์˜๋„ํ•œ ๊ฐ’์œผ๋กœ ํ™”๋ฉด์— ์ถœ๋ ฅ๋  ์ˆ˜ ์žˆ๋‹ค! ์˜ˆ๋ฅผ ๋“ค์–ด, ์›น๋ธŒ๋ผ์šฐ์ € css ์ดˆ๊ธฐํ™” ์ „์— header ํด๋ž˜์Šค div์— margin๊ณผ padding์„ ์ฃผ์ง€ ์•Š์•„๋„ positioning์ด ์›ํ•˜๋Š” ๋Œ€๋กœ ๋˜์ง€ ์•Š๋Š” ๊ฒƒ์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ๋‹ค. ๊ทธ ์™ธ์—๋„ ๋ธŒ๋ผ์šฐ์ €๋งˆ๋‹ค ๋‹ค๋ฅธ ๊ธฐ๋ณธ ์„ค์ •๊ฐ’๋“ค์„ ์ดˆ๊ธฐํ™”ํ•˜๊ธฐ ์œ„ํ•˜์—ฌ default.css๋ฅผ ์ž‘์„ฑํ•ด์•ผํ•œ๋‹ค. ๋‹ค์Œ์€ ๋‚ด๊ฐ€ ์‚ฌ์šฉํ•˜๋Š” default.css ํŒŒ์ผ์ด๋‹ค. ์ฃผ์˜ํ•  ์ ์€, ๋‚ด๊ฐ€ ๋งŒ๋“  style.css ํŒŒ์ผ๋ณด๋‹ค ์•ž์— ์„ ์–ธํ•ด์ฃผ์–ด์•ผ ํ•œ๋‹ค. ๊ทธ๋ž˜์•ผ ๋‚ด๊ฐ€ ์„ ์–ธํ•œ ์Šคํƒ€์ผ..