user-img
ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ 42
thumbnail
JSX์— ๋Œ€ํ•œ ๊ฐ„๋‹จํ•œ ์‹ค์Šต
1. ๊ฐœ์š” ์ง€๊ธˆ๊นŒ์ง€ JSX์— ๋Œ€ํ•œ ์ด๋ก ์„ ๊ฐ„๋‹จํ•˜๊ฒŒ ์ •๋ฆฌํ•˜์˜€๋‹ค. ์ด์ œ JSX ๋ฌธ๋ฒ•์„ ์ด์šฉํ•œ ๊ฐ„๋‹จํ•œ ์‹ค์Šต์„ ํ•˜๊ณ ์ž ํ•œ๋‹ค. create-react-app ์„ ์ด์šฉํ•˜์—ฌ, react์— ๋Œ€ํ•œ ๊ธฐ๋ณธ์ ์ธ ์Šค์ผˆ๋ ˆํ†ค ์ฝ”๋“œ๋ฅผ ๋ฐ›๊ณ  ๊ทธ src ํด๋” ๋ฐ‘์— Chapter_03์ด๋ผ๋Š” ํด๋”๋ฅผ ํ•˜๋‚˜ ๋งŒ๋“ ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ์œ„์™€ ๊ฐ™์ด Book.jsx ์™€ Library.jsx ํŒŒ์ผ์„ ํ•˜๋‚˜์”ฉ ๋งŒ๋“ค๊ฒ ๋‹ค. 2. Book.jsx import React from "react"; function Book (props) { return ( {`์ด ์ฑ…์˜ ์ด๋ฆ„์€ ${props.name} ์ž…๋‹ˆ๋‹ค.`} {`์ด ์ฑ…์€ ์ด ${props.numOfPage}ํŽ˜์ด์ง€๋กœ ์ด๋ค„์ ธ ์žˆ์Šต๋‹ˆ๋‹ค.`} ); } export default Book; ์ฝ”๋“œ์— ๋Œ€ํ•œ ์„ค๋ช…์„ ํ•˜๊ฒ ๋‹ค. Book์ด..
2024.01.13
ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ/React - ์ด๋ก 
JSX์˜ ์žฅ์  ๋ฐ ์‚ฌ์šฉ๋ฒ•
1. JSX์˜ ์žฅ์  โ“ ๊ฐ„๊ฒฐํ•ด์ง„ ์ฝ”๋“œ > ๋†’์€ ๊ฐ€๋…์„ฑ > ์˜ค๋ฅ˜ ์žก๊ธฐ ์‰ฌ์›€ ์ €๋ฒˆ ํฌ์ŠคํŒ…์—์„œ ๋งํ–ˆ๋“ฏ์ด, JSX๋ฅผ ์“ฐ๋ฉด ํ•˜๋‚˜์˜ JSX ์ฝ”๋“œ ๋‚ด์—์„œ JS์™€ HTML ์ฝ”๋“œ๋ฅผ ํ˜ผ์šฉํ•ด์„œ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์—ˆ๋‹ค. ์ด๋Š”, JS ๋กœ์ง๊ณผ ๊ทธ๊ฒƒ์„ ์—ฐ๊ฒฐํ•˜๋ ค๊ณ  ํ•˜๋Š” HTML ์š”์†Œ๋ฅผ ํŠน์ •ํ•˜๋Š” ๋กœ์ง์„ ํ•œ๋ฒˆ ๋” ์ž‘์„ฑํ•  ํ•„์š”๊ฐ€ ์—†๊ธฐ ๋•Œ๋ฌธ์— ์ฝ”๋“œ๊ฐ€ ์งง์•„์ง€๊ณ , ๊ฐ„๊ฒฐํ•ด์ง„๋‹ค. ์ด๋Š” ์—„์ฒญ๋‚œ ์žฅ์ ์ด๋‹ค. โ“‘ Injection attack ํ•ดํ‚น ๋ฐฉ์–ด์— ์šฉ์ด ์ด๊ฑด ๊ทธ๋ ‡๊ฒŒ ์™€๋‹ฟ๋Š” ๋‚ด์šฉ์ด ์•„๋‹ˆ๋ผ์„œ ๊นŠ๊ฒŒ ๋“ฃ์ง€๋Š” ์•Š์•˜๋‹ค. JSX๋ฅผ ์“ฐ๋ฉด ํ•ด๋‹น ์ฃผ์ž…์„ฑ ๊ณต๊ฒฉ์„ ๋ฐฉ์–ดํ•˜๊ธฐ ๋” ์šฉ์ดํ•˜๋‹ค๊ณ  ํ•œ๋‹ค. 2. JSX ์‚ฌ์šฉ๋ฒ• โ“ HTML ์š”์†Œ๋ฅผ ํ•˜๋‚˜์˜ JS ๋ณ€์ˆ˜๋กœ ์‚ฌ์šฉํ•œ๋‹ค. const element1 = Hello World!! ์š”๋ ‡๊ฒŒ ํ•˜๋‚˜์˜ ์š”์†Œ๋ฅผ ๋ณ€์ˆ˜๋กœ ํŠน์ •์ด ๊ฐ€๋Šฅํ•˜๋‹ค. ๋‹น์—ฐํžˆ ํ•ด..
2024.01.13
ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ/React - ์ด๋ก 
JSX์˜ ์ •์˜์™€ ์›๋ฆฌ์— ๋Œ€ํ•˜์—ฌ
1. JSX์˜ ์ •์˜ ์›๋ž˜ ํ”„๋ก ํŠธ ์ฝ”๋“œ๋Š” ํ™”๋ฉด์„ ๋„์šฐ๋Š” HTML, ๊ทธ HTML์„ ๊พธ๋ฏธ๋Š” CSS, ํ”„๋ฆฌ์  ํ…Œ์ด์…˜ ๋กœ์ง์„ ๋‹ด๋‹นํ•˜๋Š” JS ์ด 3๊ฐ€์ง€๋กœ ๋‚˜๋‰œ๋‹ค. ์ด๋ ‡๊ฒŒ ์˜์—ญ์„ ๊ตฌ๋ถ„ํ•˜์—ฌ ์ž‘์„ฑํ•˜๋Š” ๊ฒƒ์€ ๋•Œ๋•Œ๋กœ, ํ”ผ๋กœ๊ฐ์„ ์œ ๋ฐœํ•œ๋‹ค. ์™œ๋ƒํ•˜๋ฉด, JS๋กœ ๋งŒ๋“  ๋ชจ๋“ˆ(ํŠน์ • ๊ธฐ๋Šฅ์„ ํ•˜๋Š” ์ฝ”๋“œ)์„ ์—ฐ๊ฒฐํ•  ํŠน์ • HTML ์š”์†Œ(elements)์™€ ์—ฐ๊ฒฐํ•˜๋Š” ์ž‘์—…์„ ํ•ญ์ƒ ํ•ด์ค˜์•ผํ•˜๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค. ํ•ด๋‹น ์ž‘์—…์„ ์œ„ํ•ด ๋”ฐ๋กœ ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•ด์•ผ ํ•˜๊ธฐ์— ๊ฐ€๋…์„ฑ์ด ๋”์šฑ ์•ˆ ์ข‹์•„์ง„๋‹ค. JSX๋Š” JavaScript & XML/HTML์˜ ์•ฝ์ž๋กœ, ์œ„์—์„œ ๋ณด์—ฌ์ง„ ํ”„๋ก ํŠธ ์—”๋“œ ์ „๋ฐ˜์˜ ์•ฝ์ ์„ ๋ณด์™„ํ•˜๊ธฐ ์œ„ํ•ด ๋งŒ๋“ค์–ด์ง„ ๊ฐœ๋…์ด๋‹ค. JSX์—์„œ๋Š” Javascript ์ฝ”๋“œ ์•ˆ์—์„œ HTML ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•˜๋Š” ๊ฒƒ์ด ๊ฐ€๋Šฅํ•˜๋‹ค. ๋”ฐ๋ผ์„œ ๋ฐ‘๊ณผ ๊ฐ™์€ ์ฝ”๋“œ ์ž‘์„ฑ์ด ๊ฐ€๋Šฅํ•ด์ง„๋‹ค. const e..
2024.01.13
ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ/React - ์ด๋ก 
thumbnail
[HTML ์‹ฌํ™”] div ํƒœ๊ทธ์˜ ์šฉ๋„์— ๋”ฐ๋ฅธ ์ด๋ฆ„.
์€ ๋ชจ๋‘ div ํƒœ๊ทธ์™€ ๊ธฐ๋Šฅ์ด ๋™์ผํ•˜๊ณ  ์ด๋ฆ„๋งŒ ๋‹ค๋ฅผ ๋ฟ์ด๋‹ค. ์•„๋ฌด ๊ธฐ๋Šฅ๋„ ์—†๋Š” ํ•ด๋‹น ํƒœ๊ทธ๋“ค์„ div ๋Œ€์‹  ์“ฐ๋Š” ์ด์œ ๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™๋‹ค. 1. div๋ฅผ ๋‚จ๋ฐœํ•  ์‹œ, ๊ฐ€๋…์„ฑ์ด ๋–จ์–ด์ ธ ์œ ์ง€๋ณด์ˆ˜๊ฐ€ ์–ด๋ ต๋‹ค. 2. ํ•ด๋‹น ํƒœ๊ทธ๋“ค์„ ์“ฐ๋ฉด ๊ฒ€์ƒ‰์—”์ง„์ด ์ •๋ณด์˜ ์ข…๋ฅ˜๋ฅผ ํŒŒ์•…ํ•  ๋•Œ ๋„์›€์ด ๋œ๋‹ค. 3. ์Šคํฌ๋ฆฐ ๋ฆฌ๋”๋กœ ์ฝ๋Š” ๋ถ„๋“ค์ด ์ฝ๊ธฐ ํ›จ์”ฌ ์ˆ˜์›”ํ•ด ์ง„๋‹ค. ๊ทธ๋Ÿผ ๊ฐ ํƒœ๊ทธ๋“ค์ด ์–ด๋–จ ๋•Œ ์“ฐ์ด๋Š” ์ง€ ์•Œ์•„๋ณด์ž. ํŽ˜์ด์ง€ ์ „์ฒด๋‚˜ ํŠน์ • ๊ตฌํš์˜ ์ œ๋ชฉ ์—ญํ• ์„ ํ•˜๋Š” ์š”์†Œ๋“ค์„ ๋‘๋Š”๋ฐ ์‚ฌ์šฉ๋œ๋‹ค. ex- ๋กœ๊ณ , ์ œ๋ชฉ, ๊ฒ€์ƒ‰์ฐฝ ๋งํฌ๊ฐ€ ๋“ค์–ด๊ฐ€๋Š” ์š”์†Œ๊ฐ€ ๋“ค์–ด๊ฐ€๋Š” ํƒœ๊ทธ ex- ์ƒ‰์ธ, ํŽ˜์ด์ง€ ๋ฉ”๋‰ด๋“ค ํŽ˜์ด์ง€ ์ „์ฒด์—์„œ ํ˜น์€ ํŠน์ • ๊ตฌํš์˜ ์ตœํ•˜๋‹จ์— ๋ญ ์ ์„ ๋•Œ ํ•ด๋‹น ํƒœ๊ทธ๋ฅผ ์ด์šฉํ•จ ex- ํŽ˜์ด์ง€์˜ ์ฃผ์š” ๋‚ด์šฉ์ด ๋“ค์–ด๊ฐ€๋Š” ๊ณณ์œผ๋กœ ํŽ˜์ด์ง€๋งˆ๋‹ค ๊ผญ ํ•˜๋‚˜์—ฌ์•ผ๋งŒ ํ•œ๋‹ค. ์‚ฌ์ด๋“œ ๋ฐ” ๊ฐ™์€ ๊ฑฐ..
2023.03.11
ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ/HTML, CSS - ์ด๋ก 
thumbnail
[HTML ์‹ฌํ™”] ๋ชจ๋‘๊ฐ€ ์ด์šฉํ•  ์ˆ˜ ์žˆ๋Š” ์›น์‚ฌ์ดํŠธ
๋ชจ๋‘๊ฐ€ ์ด์šฉํ•  ์ˆ˜ ์žˆ๋Š” ์›น์‚ฌ์ดํŠธ๋ฅผ ๋งŒ๋“ค์–ด์•ผ ํ•œ๋‹ค. ๋ชจ๋‘๊ฐ€ ์ด์šฉํ•  ์ˆ˜ ์žˆ๋‹ค๋Š” ์†Œ๋ฆฌ๋Š” ์ €์‹œ๋ ฅ ์‹œ๊ฐ ์žฅ์• ์ธ, ์ง€์ฒด ์žฅ์• ์ธ ๋ถ„๋“ค๋„ ์ด์šฉํ•˜๊ธฐ๊ฐ€ ์ˆ˜์›”ํ•ด์•ผํ•œ๋‹ค๋Š” ๊ฒƒ์ด๋‹ค. ์‹œ๊ฐ ์žฅ์• ์ธ ๋ถ„๋“ค์€ ์Šคํฌ๋ฆฐ์˜ ๋‚ด์šฉ์„ ์ฝ์„๋•Œ ์Šคํฌ๋ฆฐ ๋ฆฌ๋”๊ธฐ๋ฅผ ์‚ฌ์šฉํ•œ๋‹ค. 1. ์ด๋ฏธ์ง€์— ๋Œ€ํ•œ ์ฃผ์„์„ alt๋กœ ๋‹ฌ์•„๋†“์ž. (1) ์ฃผ์„์ด ์งง์„ ๋•Œ ์Šคํฌ๋ฆฐ ๋ฆฌ๋”๊ธฐ๋กœ ์ฝํž ๋‚ด์šฉ์€ ํ•ด๋‹น ํƒœ๊ทธ์— ์†์„ฑ alt๋ฅผ ๋ง๋ถ™์—ฌ์„œ ๊ฐœ๋ฐœ์ž๊ฐ€ ์„ค์ •ํ•  ์ˆ˜ ์žˆ๋‹ค. ๊ทธ๋ƒฅ ์˜๋ฏธ ์—†๊ฑฐ๋‚˜, ์ฝ์„ ํ•„์š”๊ฐ€ ์—†๋Š” ์ด๋ฏธ์ง€์—๋„ alt๋ฅผ ์จ์ค˜์•ผ ํ•œ๋‹ค. ์™œ๋ƒํ•˜๋ฉด alt๊ฐ€ ์—†๋‹ค๋ฉด ์Šคํฌ๋ฆฐ ๋ฆฌ๋”๊ฐ€ ์ด๋ฏธ์ง€ ์†Œ์Šค ์ด๋ฆ„์„ ๊ทธ๋Œ€๋กœ ์ฝ์–ด๋ฒ„๋ฆฌ๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค. ์ด๋•Œ๋Š” ์•„๋ฌด ์˜๋ฏธ ์—†๋Š” ๋‚ด์šฉ์ด๋ฏ€๋กœ alt์— ๊ณต๋ฐฑ์„ ์“ด๋‹ค. ๊ทธ๋Ÿฌ๋ฉด ์Šคํฌ๋ฆฐ ๋ฆฌ๋”๋„ ์•ˆ ์ฝ๊ณ  ์ง€๋‚˜๊ฐ„๋‹ค. (2) ์ฃผ์„์ด ๊ธธ๋•Œ ์ด๋ฏธ์ง€์— ๋Œ€ํ•œ ์ฃผ์„์ด ๊ธธ ๋•Œ๋Š” ์ฃผ์„ ๋‚ด์šฉ์„ ์ผ๋ฐ˜..
2023.03.09
ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ/HTML, CSS - ์ด๋ก 
thumbnail
[HTML ์‹ฌํ™”] ์ƒ๋‹จ์˜ ํƒœ๊ทธ๋“ค ๋œฏ์–ด๋ณด๊ธฐ
์šฐ๋ฆฌ๊ฐ€ vs code ์—์„œ html ์„ ์ž‘์„ฑํ•  ๋•Œ, ์ฒ˜์Œ์— !์น˜๊ณ  tab ๋ˆ„๋ฅด๋ฉด ๋œจ๋Š” ๋‚ด์šฉ๋“ค์ด ์žˆ๋‹ค. ์šฐ๋ฆฌ๋Š” ํ•ญ์ƒ body ๋‚ด๋ถ€๋ฅผ ์ฑ„์šฐ๋Š”๋ฐ ์ง‘์ค‘ํ–ˆ์—ˆ๋Š”๋ฐ, ์ด๋ฒˆ์—๋Š” ์œ„์— ๋œจ๋Š” ๋ฉ”ํƒ€ ๋ฐ์ดํ„ฐ๋“ค์ด ๋ฌด์Šจ ๋œป์„ ํ•˜๋Š”์ง€ ์•Œ์•„๋ณด๊ฒ ๋‹ค. 1. ๊ธฐ๋ณธ ๋ฉ”ํƒ€๋ฐ์ดํ„ฐ (1) ํ•ด๋‹น html ๋ฌธ์„œ๊ฐ€ ์ตœ์‹  ๋ฒ„์ „์˜ html์ธ HTML5๋ฅผ ์“ฐ๊ณ  ์žˆ์Œ์„ ๋‚˜ํƒ€๋ƒ„. (2) Head ํƒœ๊ทธ๋“ค (1) charset="UTF-8"์€ ํ•ด๋‹น html์„ ์–ด๋–ค ํ•ด๋…๊ธฐ๋กœ ๋ฒˆ์—ญํ•ด์•ผ ํ•˜๋Š”์ง€ ๋ธŒ๋ผ์šฐ์ €์—๊ฒŒ ์•Œ๋ ค์ฃผ๋Š” ๊ฒƒ์ด๋‹ค. utf-8๋กœ ์ธ์ฝ”๋”ฉ ๋œ ๋ฌธ์„œ๋ฅผ ๋‹ค๋ฅธ ํ•ด๋…๊ธฐ๋กœ ๋ฒˆ์—ญํ•˜๋ฉด ๋ฌธ์ž๊ฐ€ ๋‹ค ๊นจ์ ธ์„œ ๋‚˜์˜จ๋‹ค. (2) ๋‘๋ฒˆ์งธ ์ค„ ๋‚ด์šฉ์€ ํ˜น์‹œ ์œˆ๋„์šฐ ์ต์Šคํ”Œ๋กœ๋Ÿฌ๋กœ ์—ด๋žŒ์‹œ ์–ด๋–ค ๋ชจ๋“œ๋กœ ์‹คํ–‰ํ•  ๊ฒƒ์ธ์ง€์— ๋Œ€ํ•œ ๋‚ด์šฉ์ด๋‹ค. (3) 3๋ฒˆ์งธ ์ค„์€ viewport ๊ด€๋ จ ๋‚ด์šฉ์ด๋‹ค. viewpor..
2023.03.09
ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ/HTML, CSS - ์ด๋ก 
thumbnail
[CSS] Flex layout
1. ๋ถ€๋ชจ์š”์†Œ์—์„œ ์„ค์ •ํ•ด์ค˜์•ผ ํ•  ๊ฒƒ display: flex; /* ๋ถ€๋ชจ์š”์†Œ์— flex๋กœ ์„ค์ •ํ•˜๋ฉด, ์ž์‹ ์š”์†Œ๋“ค์˜ ํฌ๊ธฐ ์œ„์น˜๋ฅผ ์ž์œ ์ž์žฌ๋กœ ๋ฐ”๊ฟ€ ์ˆ˜ ์žˆ๊ฒŒ ๋œ๋‹ค. ์ž์‹ ์š”์†Œ ์‚ฌ์šฉ์— ๋Œ€ํ•œ ์œ ์—ฐ์„ฑ์ด ์ฃผ์–ด์ง„๋‹ค. */ flex-direction: row /*column, row-reverse,column-reverse*/ /* ์ž์‹ ์š”์†Œ๋“ค์ด ๋ฐฐ์—ด๋  ๊ธฐ์ค€์„ ์ •ํ•œ๋‹ค. row๋กœ ํ•˜๋ฉด, ์™ผ์œ„์—์„œ ์˜ค๋ฅธ์ชฝ์œผ๋กœ(๊ฐ€๋กœ์ถ•) ์ญ‰ ๋‚˜์—ด, column์œผ๋กœ ํ•˜๋ฉด ์œ„์—์„œ ์•„๋ž˜๋กœ(์„ธ๋กœ์ถ•) ์ญ‰ ๋‚˜์—ด reverse๋Š” ๊ฐ๊ฐ ์˜ค๋ฅธ์ชฝ์—์„œ ์™ผ์ชฝ, ์•„๋ž˜์—์„œ ์œ„๋กœ ์—ฌ๊ธฐ์„œ main ์ถ•์€ ํ•ด๋‹น ์š”์†Œ๊ฐ€ ์ •ํ•œ ๊ธฐ์ค€์ด๊ณ , ์ˆ˜์ง ์ถ•์€ ๊ทธ์— ๋ฐ˜๋Œ€๋˜๋Š” ์ถ•์ด๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด row์ด๋ฉด main ์ถ•์€ ๊ฐ€๋กœ์ด๊ณ  ์ˆ˜์ง ์ถ•์€ column์ด๋‹ค.*/ flex-wrap: wrap or..
2023.03.02
ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ/HTML, CSS - ์ด๋ก 
[CSS] ์š”์†Œ ๊ฐ์ถ”๋Š” ๋ฐฉ๋ฒ•
1. ์ปค์„œ cursor: auto; /* auto: ์ƒํ™ฉ์— ๋งž๊ฒŒ ์ž๋™ ๋ณ€ํ™” ๊ทผ๋ฐ ์ด๊ฒŒ ๋‚ด๊ฐ€ ์›ํ•˜์ง€ ์•Š๋Š” ๊ฒƒ์ผ ์ˆ˜ ์žˆ์Œ ์ฃผ์˜ default: ๊ทธ๋ƒฅ ๋ฌด์กฐ๊ฑด ํ™”์‚ดํ‘œ none: ์ปค์„œ ์•ˆ ๋ณด์ž„ zoom-in: ๋‹๋ณด๊ธฐ pointer: ์†๊ฐ€๋ฝ์œผ๋กœ ๋ฐ”๋€œ. not-allowed: ๊ธˆ์ง€ ํ‘œ์‹œ ๋‚˜์˜ด. ๊ทธ ์™ธ more... mdn ๋ฌธ์„œ ํ™•์ธ ๋ฐ”๋žŒ */ 2. ์š”์†Œ ๊ฐ์ถ”๋Š” ๋ฒ• opacity: 1; visibility: hidden; display: none; /* opacity: ๋ถˆํˆฌ๋ช…๋„ 1 == ์ž˜ ๋ณด์ž„ (100%), 0 == ์•ˆ ๋ณด์ž„ (0%) opacity: 0; ์ด ๋˜๋ฉด ๋ชจ์Šต๋งŒ ๊ฐ์ถ”๋Š” ๊ฒƒ์ด๊ธฐ ๋•Œ๋ฌธ์— ํ•ด๋‹น ํƒœ๊ทธ์— ์ปค์Šคํ„ฐ๋งˆ์ด์ง• ํ–ˆ๋˜ ์ปค์„œ ๋ชจ์–‘ ๋ฐ”๋€œ, ํด๋ฆญ, ํฌ์ปค์Šค(input ์š”์†Œ๊ฐ€ ์„ ํƒ๋œ ๊ฒƒ) ์ „๋ถ€ ๋‹ค ๋จ. visibility..
2023.02.28
ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ/HTML, CSS - ์ด๋ก