์ผ | ์ | ํ | ์ | ๋ชฉ | ๊ธ | ํ |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 |
- Python
- K๋ฐฐํฐ๋ฆฌ
- ๊ฐ๋ฐ
- ์ํ
- html
- css
- JavaScript
- ์ฅํธ์์ค
- ์ปดํจํฐ๊ณผํ
- ๋ผํ๋ผ์ค์๋ง๋
- ์ค๋ผํด
- ์ฝ๋ฉ
- ์๋ฐ์คํฌ๋ฆฝํธ
- ์นํ์ด์ง๋ง๋ค๊ธฐ
- ๋ฐ์ํ
- ์นํผ๋ธ๋ฆฌ์ฑ
- ๋ฐ์ดํฐ๋ฒ ์ด์ค
- ๊น๋ฏธ๊ฒฝ์๋งํ์์
- ๋ ์
- ComputerScience
- ํ์ด์ฌ
- K๋ฐฐํฐ๋ฆฌ๋ ๋ณผ๋ฃจ์
- ๊น๋ฏธ๊ฒฝ
- ์ฑ
- ๊นํ๋จ
- ํ๋ก๊ทธ๋๋ฐ
- Java
- ์๋ฐ
- database
- ๋ง์ผ๋ด๊ฐ์ธ์์๋ค์์ฐ๋ค๋ฉด
- Today
- Total
๋ชฉ๋กfull stack/React (13)
JiYoung Dev ๐ฅ
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/eaHHhq/btsjeXSfDgJ/YXbP9Wn2AOaKnIYWpj3k00/img.png)
Spring Boot์ ์ฐ๋ํ์ฌ shop ๋ง๋ค๊ธฐ [Spring Boot] Spring Boot ์ฌ์ฉํ๊ธฐ (2023.06.07) Spring Boot ๊ฐ๋ฐ ํ๊ฒฝ ์ค๋น ๐ ํ๋ก๊ทธ๋จ ์ค์น (Spring & MySQL) spring tool suite 4 Spring | Tools spring.io C๋๋ผ์ด๋ธ ๋ฐ๋ก ์๋์ ์ค์น (ํ์๋ ์๋!) jarํ์ผ๋ ์์ถํ์ผ์ด๋ผ ์์ถํ๊ธฐํ๋ฉด ๋จ ๊ทธ๋ฐ๋ฐ ์๋๋ ๊ฒฝ danyoujeong.tistory.com CORS ์ค๋ฅ (Cross Origin Resource Sysytem) ๊ต์ฐจ ์ถ์ฒ ๋ฆฌ์์ค ๊ณต์ proxy ์๋ฒ(๋ฏธ๋ค์จ์ด)๋ก ํด๊ฒฐ์ ํ์ setupProxy.js ๊ฒ์ ํ๋ก์ ์๋ฒ๋ ํด๋ผ์ด์ธํธ์ ์๋ฒ ์ฌ์ด์์ ๋ฐ์ดํฐ ์์ฒญ๊ณผ ์๋ต์ ๋์ ๋ฐ์์ฃผ๋ ์ญํ ์ ํด์ค ๋ณด์์์ ๋ฌธ์ ๋ก..
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/rs7L5/btsjilFQAFj/S2XYcGS8Bx8Qd5flJ7dddk/img.png)
react ํ ํ๋ฆฟ ์ฌ์ฉํ๋ ๋ฒ git Clone ํ node ์ค์น๊น์ง ํด์ค์ผํจ! Boot Strap ์ react BootStrap ์ฌ์ฉ https://react-bootstrap.netlify.app/ React Bootstrap | React Bootstrap The most popular front-end framework, rebuilt for React react-bootstrap.netlify.app react UI ํด https://mui.com/store/ React themes & templates - MUI Store A collection of the best React templates, React dashboard, and React themes. It includes templa..
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/biqvJg/btsiuBJlTd4/2Eza10wDVIuppaDrLQhKa0/img.png)
React์์ ์นด์นด์ค์ง๋ API ์ฌ์ฉํ๊ธฐ ๐ OPEN API ์ฌ์ฉํ๋ ๋ฐฉ๋ฒ ๐ key ๋ฐ๊ธ๋ฐ๊ธฐ 1. ๋ก๊ทธ์ธ ํ ์ ํ๋ฆฌ์ผ์ด์ ์ถ๊ฐ React๋ JavaScript ๊ธฐ๋ฐ์ด๋ฏ๋ก JavaScript ์ฝ๋ ์ฌ์ฉํ ์์ 2. web ํ๋ซํผ ๋ฑ๋กํ๊ธฐ ๋ง์ฝ jsp/servlet์์๋ ์ฌ์ฉํ ๊ฑฐ๋ผ๋ฉด ํด๋น ์ฃผ์๋ ์ถ๊ฐ(ex. 8080)ํด์ผ ์ฌ์ฉํ ์ ์๋ค! 3. react-kako-maps-sdk ๋ก ๋ฆฌ์กํธ์์ kakao map ์ฌ์ฉํ๊ธฐ typeScript ์๋ฃํ ์ง์ ํด์ฃผ๋ script >> ์ต๊ทผ ๋จ๋ ์ค 3.1. index.html headํ๊ทธ์ api ์ ๋ ฅ 3.2. react-kakao-maps-sdk ์ค์น 3.3. App.js ์์ฑ MapMarker, Map > import ํด์ค์ผ ํจ! import "./App.css..
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/dfSehA/btsiNcgx9yW/YGN62Rkh1enLKYk3WV5jEK/img.png)
Session/Local Storage์ ๋ฐ์ดํฐ ์ ์ฅํ๊ธฐ /** * Local Storage vs Session Storage * - ์ฃผ์์ฌํญ! ๋ ๋ค ๋ธ๋ผ์ฐ์ ์ ์ ์ฅ์ ํ๋ ๋ฐ์ดํฐ * - local Storage : ๋์ผํ PC + ๋์ผํ ๋ธ๋ผ์ฐ์ ์ผ ๊ฒฝ์ฐ, ์ ์ฅ๋ ๋ฐ์ดํฐ๋ฅผ ๋ถ๋ฌ ์ฌ ์ ์์ * ex. ์๋ ๋ก๊ทธ์ธ, ์ฅ๋ฐ๊ตฌ๋, ... * => ๋ธ๋ผ์ฐ์ ๋ฅผ ๋ซ๋๋ผ๋ ๋ฐ์ดํฐ๊ฐ ๊ณ์ํด์ ์ ์ฅ๋์ด์๋ค. * - session Storage : ๋ธ๋ผ์ฐ์ ์ฐฝ์ด ์ข ๋ฃ๋๋ฉด ์ธ์ ๋ ํจ๊ป ์ข ๋ฃ๋๋ฉด์ ๋ฐ์ดํฐ ์๋ฉธ๋จ * ex. ๋ก๊ทธ์ธ ๊ธฐ๋ก */ ๋ฐฑ์๋, ํ๋ก ํธ ์ด๋์ ๊ด๋ฆฌํ ๊ฒ์ธ์ง๋ ์์ ์์์ ์ฐจ์ด์ผ๋ฟ! 1. Local Storage ์๋ ๋ก๊ทธ์ธ, ์ฅ๋ฐ๊ตฌ๋์ ๊ฐ์ด ๋ณด์์ด ๋ฑํ ํ์ํ์ง ์์ ๋ ์ฌ์ฉ 1.1. ์ ์ฅํ๊ธฐ local..
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/9PWkN/btshTv9ljzn/MLrG1ilASpZ6SoKfxziZ70/img.png)
๐ ์ํ API ๋ถ๋ฌ์ค๊ธฐ - fetch, Axios ์ฌ์ฉ import React, { useEffect, useState } from "react"; import axios from "axios"; import "./App.css"; const Ex04 = () => { let movieUrl = "http://kobis.or.kr/kobisopenapi/webservice/rest/boxoffice/searchDailyBoxOfficeList.json?key=f5eef3421c602c6cb7ea224104795888&targetDt=20230501"; /** * ํ๋ฉด์ ์ํ ๋ญํน์ ๋์ด์ฃผ์! * * jQuery + Ajax >>>>> ๋ ผ์ธ! (์ฌ์ฉ์ถ์ฒX ์๋ ๋๋ฆผ) * Fecth API (New!) *..
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/dzL4Bq/btshPobAL9U/MStJ9EfcitV07iXdcMMZZK/img.png)
๐ ์ฐธ์ฐธ์ฐธ ๊ฒ์ ๋ง๋ค๊ธฐ ๐ ๊ฒ์๊ท์น 1. ๋๋ ๊ณต๊ฒฉ, ์ปดํจํฐ๋ ์๋น ๋ด๋น 2. ๋ด๊ฐ ๋ฒํผ์ ํด๋ฆญํ์ ๋ ๋์ ์ปดํจํฐ์ ์ ํ์ด ๊ฐ๋ค๋ฉด ๋(๊ณต๊ฒฉ)์ ์น๋ฆฌ 3. ๋์ ์ปดํจํฐ์ ์ ํ์ด ๋ค๋ฅด๋ค๋ฉด ์ปดํจํฐ(์๋น)์ ์น๋ฆฌ ๐ ์์ฑ์ฝ๋ import React, { useState, useEffect } from "react"; const Ex03 = () => { /** * ์ฐธ์ฐธ์ฐธ ๊ฒ์์ ๋ง๋ค์ด๋ณด์! * ๊ฒ์ ๊ท์น * 1. ๋๋ ๊ณต๊ฒฉ, ์ปดํจํฐ๋ ์๋น๋ฅผ ๋ด๋น * 2. ๋ด๊ฐ ๋ฒํผ์ ํด๋ฆญํ์ ๋ ๋์ ์ปดํจํฐ์ ์ ํ์ด ๊ฐ๋ค๋ฉด ๋(๊ณต๊ฒฉ)์ ์น๋ฆฌ * 3. ๋์ ์ปดํจํฐ์ ์ ํ์ด ๋ค๋ฅด๋ค๋ฉด ์ปดํจํฐ(์๋น)์ ์น๋ฆฌ * * ๋ฌธ์ ํ์ด * 1. ํ์ํ state๋ค์ ๊ด๋ฆฌ : ๋ด์ ํ, ์ปดํจํฐ์ ํ, ๊ฒ์๊ฒฐ๊ณผ * >> useState * 2. ๋ด ์ ..
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/dw6quq/btshjdgXp6i/87gQdUWtpLYiHMELaUiT11/img.png)
LifeCycle ํ์ฌ react๋ node.js ์๋ฒ ์์์ ๋์๊ฐ๊ณ ์์. node.js๋ ์ฑ๊ธ์ค๋ ๋๋ก ์์ ์ ์งํํ๋ ํ๋ก์ธ์ค๊ฐ ํ๋ ๋ฐ์ ์์. ๊ทธ๋ ๊ธฐ ๋๋ฌธ์ ์์์ ์๋๋ก ์ฝ๋๊ฐ ์์ฑ๋ ์์๋๋ก ์งํ๋๋ java์๋ ๋ฌ๋ฆฌ ์ฝ๋ ์ค๊ฐ์ ์กฐ๊ฑด๋ฌธ๊ณผ ๊ฐ์ ๋ฌด๊ฑฐ์ด ์์ ์ด ์์ผ๋ฉด ์์์ ์๋๋ก ์ฝ๋ ์์ฑ ์์๋๋ก ์์ ์ ์งํํ์ง ์๊ณ , ๊ฐ๋ฒผ์ด ์์ ๋ถํฐ ์งํ ํ ๋ฌด๊ฑฐ์ด ์์ ์ ์งํ์ํด. ๋ฐ๋ผ์ React์์๋ ์์์ ์๋๋ก ์์๋๋ก ์ฝ๋๋ฅผ ์์ฑํ๋ค๊ณ ํด์ ์ํ๋ ๋๋ก ์์ ์ด ์คํ๋์ง ์์. Reactsms ์ปดํฌ๋ํธ๊ฐ ์คํ๋๊ฑฐ๋, ์ ๋ฐ์ดํธ ๋๊ฑฐ๋, ์ญ์ ๋ ๋ ํน์ ์ด๋ฒคํธ๊ฐ ๋ฐ์ํจ. ์ด๋ฌํ React์ ํน์ฑ์ ์๋ช ์ฃผ๊ธฐ(LifeCycle)์ด๋ผ๊ณ ํ๋ฉฐ, React๋ฅผ ํตํด ์ฐ๋ฆฌ๊ฐ ์ํ๋ ๋๋ก ์นํ์ด์ง๊ฐ ์๋ํ๊ฒ ๋ง๋ค..
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/bLbADg/btshbudIEdh/dgZZBxiO2fTGnwujRdbaY0/img.png)
useRef ๐ useRef ์์ ์๊ฒ ๋ฒํผ์ ํด๋ฆญํ๋ฉด ์ฌ๊ฐํ์ ํฌ๊ธฐ๊ฐ ์๊ฒ, ์๋ณธ ๋ฒํผ์ ํด๋ฆญํ๋ฉด ์๋ณธ ํฌ๊ธฐ๋ก, ํฌ๊ฒ ๋ฒํผ์ ํด๋ฆญํ๋ฉด ์ฌ๊ฐํ์ ํฌ๊ธฐ๊ฐ ํฌ๊ฒ ๋ณํ๊ฒ ๋ง๋ค๊ธฐ ๐ ์๋ฐ์คํฌ๋ฆฝํธ ์๋ฐ์คํฌ๋ฆฝํธ์์๋ ์ด ๋ฌธ์ ๋ฅผ ํ๊ธฐ์ํด ์ฌ๊ฐํ ์์์ ์ ๊ทผํ๊ธฐ ์ํด์ document์ ์ ๊ทผํด์ผ ํ์ ์ฌ๊ฐํ ์์ : ์๋ฐ์คํฌ๋ฆฝํธ๋ก id๊ฐ box์ธ ์์์ ์ ๊ทผํ๊ธฐ : document.getElementById('box").style.width= 100px ๐ ๋ฆฌ์กํธ์์ ๋ณ๊ฒฝ์ํค๋ ค๋ฉด? DOM์ผ๋ก ๋ง์ฐฌ๊ฐ์ง๋ก ์ ๊ทผํด์ผํจ useRef ์ฌ์ฉ usdRef : ํน์ DOM ์์์ ์ ๊ทผํ๊ณ ์ถ์ ๋ ์ฌ์ฉ - ๋ฐ๋๋ผJS์์๋ getElementById, querySelector ๋ฑ์ ์ฌ์ฉํ์ฌ ํน์ DOM ์์์ ์ ๊ทผํ์์ - React..
๐ ๊ตฌ์ฑํ๊ธฐ ๐ ์ปดํฌ๋ํธ 1. TodoList 2. TodoItem 3. TodoInput ๐ ์ปจํ ์คํธ - TodoContext ์ ์ญ์ ์ผ๋ก ์ฌ์ฉํ ๊ฐ 1. todos : ๋ด์ฉ, ์๋ฃ์ฌ๋ถ (๊ฐ์ฒด๋ก ์ ์ฅ) 2. newTodo : ๋ด์ฉ ๐ ์ฝ๋ ์์ฑํ๊ธฐ (์์) 1) ํ๋ฉด์ ์ฒซ Todo ๋ณด์ด๊ฒ ํ๊ธฐ ์ปดํฌ๋ํธ ์ฐ๊ฒฐ ์ปจํ ์คํธ ์ฐ๊ฒฐ ์ปจํ ์คํธ๋ก ์ฌ์ฉํ ๊ฐ state๋ก ์ ์ฅ ํ ์ด๊น๊ฐ ์ง์ ํ์ฌ ์ถ๋ ฅ๋๋๋ก 2) ์ ๋ ฅ์ฐฝ์ ๊ธ์จ๋ฅผ ์ ๋ ฅํ๋ฉด newTodo์ ์ ์ฅ handleNewTodo() 3) Add ๋ฒํผํด๋ฆญ์ Todos์ newTodo ๊ฐ์ฒด ์ถ๊ฐ, input ํ ์คํธ ์ฐฝ ๊ณต๋ฐฑ์ผ๋ก addNewTodo() 4) add ๋ฒํผ ํด๋ฆญ์ ์ถ๊ฐ๋ ๊ฐ์ฒด ํ๋ฉด์ ๋์ฐ๊ธฐ addNewTodo() 5) delete ํด๋ฆญํ๋ฉด ํด๋น ๋ฆฌ์คํธ ์ญ์ d..
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/bDCo4d/btsgJ1C48cV/AiChgwvCbOxmX1a5elcKYk/img.png)
๐ context API ์ฐ๋ ์ด์ ๐ props์ ๋จ์ ๋จ๋ฐฉํฅ ๋ฐ์ดํฐ์ ํ๋ฆ ์์ ๊ฐ์ ๋ฐ์ดํธ ํ๋ฆ์ ๋จ๋ฐฉํฅ ๋ฐ์ดํฐ ํ๋ฆ (one-way reactive data flow)์ด๋ผํ๊ณ react๋ ์ด๋ฌํ ํ๋ฆ์ ๊ฐ์ง๊ณ ์์ ๋จ๋ฐฉํฅ ๋ฐ์ดํฐ ํ๋ฆ์ ์ฅ์ 1. ๊ด๋ฆฌ์ ์ฉ์ดํจ 2. DOM๊ณผ์ ๊ถํฉ - tree๊ตฌ์กฐ์ dom ๊ตฌ์กฐ์ ์ ๋ฆฌํจ ๋จ๋ฐฉํฅ ๋ฐ์ดํฐ ํ๋ฆ์ ๋จ์ ์์์์์์ ๋ถ๋ชจ์์๋ก ๋ฐ์ดํฐ๋ฅผ ๋ฐ๋ก ์ ๋ฌํ ์ ์์ โ๏ธ ๋ถ๋ชจ์์๊ฐ ์์์์์ ๊ฐ์ ๋ฐ์๋ณผ ์ ์๋๋ก ํ๋ ๋ฐฉ๋ฒ ๊ท์ฐฎ๋ค >> contextAPI๋ฅผ ์ฌ์ฉํจ ๐ context API ๐ context API ์ฌ์ฉํ๋ ์ด์ props๋ฅผ ์ฌ์ฉํ๋ฉด ์ฌ๋ฌ๋ฒ ์ฌ์ฉํด์ผ ํจ ๋ฐ์ดํฐ๋ฅผ ๋ฐ๋ก ๋ณด๊ดํ์ฌ ๋์ด๋ค ์ฐ๋ ๋ฒ >> Context API ์ฅ์ : ์ ์ญ์ ์ผ๋ก ์ฌ์ฉํ ์..