๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ

์ „์ฒด ๊ธ€92

๋ฆฌ์•กํŠธ ๊ฐœ๋ฐœ ์‹œ ์‚ฌ์šฉํ•˜๋ฉด ํŽธ๋ฆฌํ•œ ๋„๊ตฌ Prettier : ์ž๋™์œผ๋กœ ์ฝ”๋“œ์˜ ์Šคํƒ€์ผ์„ ๊ด€๋ฆฌํ•ด์ฃผ๋Š” ๋„๊ตฌ → ๋ฌธ์ž์—ด์„ ์‚ฌ์šฉํ•  ๋•Œ, ‘์™€ “ ์ค‘ ๋ฌด์—‡์„ ์‚ฌ์šฉํ• ์ง€, ์„ธ๋ฏธ์ฝœ๋ก (;)์„ ์ฝ”๋“œ ๋’ค์— ๋ถ™์ผ์ง€ ๋ง์ง€, ๋“ค์—ฌ์“ฐ๊ธฐ ์ •๋„ ๋“ฑ์„ ๊ด€๋ฆฌ ์ฝ”๋“œ ์Šคํƒ€์ผ์„ ๋งˆ์Œ๋Œ€๋กœ ์‰ฝ๊ฒŒ ์ปค์Šคํ„ฐ๋งˆ์ด์ง• ๊ฐ€๋Šฅ [์‚ฌ์šฉ๋ฒ•] { "trailingComma": "es5", "tabWidth": 4, "semi": false, "singleQuote": true } trailingComma: “none”, “es5”, “all”์œผ๋กœ ์„ค์ • ๊ฐ€๋Šฅ, ๊ฐ์ฒด ๋˜๋Š” ๋ฐฐ์—ด์ด ์—ฌ๋Ÿฌ ์ค„๋กœ ๊ตฌ์„ฑ๋˜์–ด ์žˆ์œผ๋ฉด ๋งจ ๋งˆ์ง€๋ง‰ ์ค„์— ์‰ผํ‘œ ๋ถ™์—ฌ์คŒ “none”: ์‰ผํ‘œ ๋ถ™์ด์ง€ ์•Š์Œ “es5”: ๊ฐ์ฒด, ๋ฐฐ์—ด ์‚ฌ์šฉํ•˜๊ฒŒ ๋  ๋•Œ ์‰ผํ‘œ ๋ถ™์ž„ “all”: ํ•จ์ˆ˜ ์‚ฌ์šฉํ•  ๋•Œ, ์ธ์ž๋ฅผ ์ „๋‹ฌ ํ•  ๋•Œ ์‰ผํ‘œ ๋ถ™์ž„ tabWidth: ๋“ค์—ฌ์“ฐ๊ธฐ ํฌ๊ธฐ ์ •.. 2022. 12. 2.
LifeCycle Method ์ƒ๋ช…์ฃผ๊ธฐ ๋ฉ”์„œ๋“œ ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๋ธŒ๋ผ์šฐ์ € ์ƒ์— ๋‚˜ํƒ€๋‚˜๊ณ , ์—…๋ฐ์ดํŠธ๋˜๊ณ , ์‚ฌ๋ผ์ง€๊ฒŒ ๋  ๋•Œ ํ˜ธ์ถœ๋˜๋Š” ๋ฉ”์„œ๋“œ๋“ค (+ ์—๋Ÿฌ๋ฐœ์ƒ ์‹œ ํ˜ธ์ถœ๋˜๋Š” ๋ฉ”์„œ๋“œ๋„ ์กด์žฌ) ํด๋ž˜์Šคํ˜• ์ปดํฌ๋„ŒํŠธ์—์„œ๋งŒ ์‚ฌ์šฉ ๊ฐ€๋Šฅ React Lifecycle Methods diagram React Lifecycle Methods diagram Fully interactive and accessible React Lifecycle Methods diagram. projects.wojtekmaj.pl ๋งˆ์šดํŠธ๋  ๋•Œ ๋ฐœ์ƒํ•˜๋Š” ์ƒ๋ช…์ฃผ๊ธฐ ๋ฉ”์„œ๋“œ 1. constructor ์ปดํฌ๋„ŒํŠธ์˜ ์ƒ์„ฑ์ž ๋ฉ”์„œ๋“œ ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๋งŒ๋“ค์–ด์ง€๋ฉด ๊ฐ€์žฅ ๋จผ์ € ์‹คํ–‰๋˜๋Š” ๋ฉ”์„œ๋“œ constructor(props){ super(props); console.log("constructor"); } 2. get.. 2022. 12. 2.
ํด๋ž˜์Šคํ˜• ์ปดํฌ๋„ŒํŠธ → ํ˜„์žฌ๋Š” ํ•จ์ˆ˜ํ˜• ์ปดํฌ๋„ŒํŠธ๋ฅผ ์‚ฌ์šฉํ•˜์ง€๋งŒ, ๋‚˜์ค‘์— ์ปดํฌ๋„ŒํŠธ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ํ”„๋กœ์ ํŠธ๋ฅผ ์œ ์ง€๋ณด์ˆ˜ํ•˜๊ฑฐ๋‚˜, ํ•จ์ˆ˜ํ˜• ์ปดํฌ๋„ŒํŠธ+Hooks๋กœ ๋ชปํ•˜๋Š” ์ž‘์—…์˜ ๊ฒฝ์šฐ ๋“ฑ ํด๋ž˜์Šคํ˜• ์ปดํฌ๋„ŒํŠธ๋ฅผ ์จ์•ผํ•˜๋Š” ์ƒํ™ฉ ์กด์žฌ import React, {Component} from 'react'; class App extends Component{//classํ‚ค์›Œ๋“œ ํ•„์š”, Component๋กœ ์ƒ์† ๋ฐ›์•„์•ผํ•จ state={//constructor์—†์ด ๋ฐ”๋กœ state์ดˆ๊ธฐ๊ฐ’ ์„ค์ • ๊ฐ€๋Šฅ, ๊ฐ์ฒด ํ˜•์‹monsters:[], userInput:"", }; onClick={()=>{//this.setState ํ•จ์ˆ˜๋กœ state ๊ฐ’ ๋ณ€๊ฒฝ ๊ฐ€๋Šฅthis.setState({number:number+1}); }} render(){//render()๋ฉ”์†Œ๋“œ ํ•„์š”const .. 2022. 12. 2.
HTTP ๋ฉ”์„œ๋“œ ํ™œ์šฉ ํด๋ผ์ด์–ธํŠธ์—์„œ ์„œ๋ฒ„๋กœ ๋ฐ์ดํ„ฐ ์ „์†ก ๋ฐ์ดํ„ฐ ์ „๋‹ฌ ๋ฐฉ์‹ 1. ์ฟผ๋ฆฌ ํŒŒ๋ผ๋ฏธํ„ฐ๋ฅผ ํ†ตํ•œ ๋ฐ์ดํ„ฐ ์ „์†ก GET ์ฃผ๋กœ ์ •๋ ฌ ํ•„ํ„ฐ(๊ฒ€์ƒ‰์–ด) 2. ๋ฉ”์‹œ์ง€ ๋ฐ”๋””๋ฅผ ํ†ตํ•œ ๋ฐ์ดํ„ฐ ์ „์†ก POST, PUT, PATCH ํšŒ์› ๊ฐ€์ž…, ์ƒํ’ˆ ์ฃผ๋ฌธ, ๋ฆฌ์†Œ์Šค ๋“ฑ๋ก, ๋ฆฌ์†Œ์Šค ๋ณ€๊ฒฝ 4๊ฐ€์ง€ ์ƒํ™ฉ 1. ์ •์  ๋ฐ์ดํ„ฐ ์กฐํšŒ ์ด๋ฏธ์ง€, ์ •์  ํ…์ŠคํŠธ ๋ฌธ์„œ ์กฐํšŒ๋Š” GET ์‚ฌ์šฉ ์ •์  ๋ฐ์ดํ„ฐ๋Š” ์ผ๋ฐ˜์ ์œผ๋กœ ์ฟผ๋ฆฌ ํŒŒ๋ผ๋ฏธํ„ฐ ์—†์ด ๋ฆฌ์†Œ์Šค ๊ฒฝ๋กœ๋กœ ๋‹จ์ˆœํ•˜๊ฒŒ ์กฐํšŒ ๊ฐ€๋Šฅ 2. ๋™์  ๋ฐ์ดํ„ฐ ์กฐํšŒ ์ฃผ๋กœ ๊ฒ€์ƒ‰, ๊ฒŒ์‹œํŒ ๋ชฉ๋ก์—์„œ ์ •๋ ฌ ํ•„ํ„ฐ(๊ฒ€์ƒ‰์–ด) ์กฐํšŒ ์กฐ๊ฑด์„ ์ค„์—ฌ์ฃผ๋Š” ํ•„ํ„ฐ, ์กฐํšŒ ๊ฒฐ๊ณผ๋ฅผ ์ •๋ ฌํ•˜๋Š” ์ •๋ ฌ ์กฐ๊ฑด์— ์ฃผ๋กœ ์‚ฌ์šฉ ์กฐํšŒ๋Š” GET ์‚ฌ์šฉ GET์€ ์ฟผ๋ฆฌ ํŒŒ๋ผ๋ฏธํ„ฐ ์‚ฌ์šฉํ•ด์„œ ๋ฐ์ดํ„ฐ ์ „๋‹ฌ GET๋„ ๋ฉ”์‹œ์ง€ ๋ฐ”๋””์— ๋ฐ์ดํ„ฐ ๋„ฃ์–ด์„œ ์ „์†กํ•  ์ˆ˜ ์žˆ์ง€๋งŒ ์‹ค๋ฌด์—์„œ๋Š” ๊ถŒ์žฅ ์•ˆํ•จ 3. HTML Form.. 2022. 12. 1.