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

์ „์ฒด ๊ธ€

(49)
AWS - ๊ณต๋™ ์ฑ…์ž„ ๋ชจ๋ธ ๊ณต๋™ ์ฑ…์ž„ ๋ชจ๋ธ ๋ณด์•ˆ๊ณผ ๊ทœ์ • ์ค€์ˆ˜๋Š” AWS์™€ ๊ณ ๊ฐ์˜ ๊ณต๋™์ฑ…์ž„ AWS ์ฑ…์ž„ = ํด๋ผ์šฐ๋“œ์˜ ๋ณด์•ˆ AWS ํด๋ผ์šฐ๋“œ์—์„œ ์ œ๊ณต๋˜๋Š” ๋ชจ๋“  ์„œ๋น„์Šค๋ฅผ ์‹คํ–‰ํ•˜๋Š” ์ธํ”„๋ผ๋ฅผ ๋ณดํ˜ธํ•  ์ฑ…์ž„ AWS ํด๋ผ์šฐ๋“œ ์„œ๋น„์Šค๋ฅผ ์‹คํ–‰ํ•˜๋Š” ํ•˜๋“œ์›จ์–ด, ์†Œํ”„ํŠธ์›จ์–ด, ๋„คํŠธ์›Œํ‚น ๋ฐ ์‹œ์„ค๋กœ ๊ตฌ์„ฑ ๊ณ ๊ฐ ์ฑ…์ž„ = ํด๋ผ์šฐ๋“œ์—์„œ์˜ ๋ณด์•ˆ ๊ณ ๊ฐ์ด ์„ ํƒํ•˜๋Š” AWSํด๋ผ์šฐ๋“œ ์„œ๋น„์Šค์— ๋”ฐ๋ผ ๋‹ฌ๋ผ์ง ex) EC2 ์„œ๋น„์Šค๋Š” Iaas๋กœ ๋ถ„๋ฅ˜๋˜๋ฉฐ ๊ณ ๊ฐ์ด ํ•„์š”ํ•œ ๋ชจ๋“  ๋ณด์•ˆ ๊ตฌ์„ฑ ๋ฐ ๊ด€๋ฆฌ ์ž‘์—…์„ ์ˆ˜ํ–‰ํ•˜๋„๋ก ์š”๊ตฌ EC2 ์ธ์Šคํ„ด์Šค๋ฅผ ๋ฐฐํฌํ•˜๋Š” ๊ณ ๊ฐ์€ ๊ฒŒ์ŠคํŠธ ์šด์˜์ฒด์ œ์˜ ๊ด€๋ฆฌ(์—…๋ฐ์ดํŠธ, ๋ณด์•ˆ ํŒจ์น˜), ๊ณ ๊ฐ์ด ์ธ์Šคํ„ด์Šค์— ์„ค์น˜ํ•œ ๋ชจ๋“  ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ์†Œํ”„ํŠธ์›จ์–ด ๋˜๋Š” ์œ ํ‹ธ๋ฆฌํ‹ฐ์˜ ๊ด€๋ฆฌ, ์ธ์Šคํ„ด์Šค๋ณ„๋กœ AWS์—์„œ ์ œ๊ณตํ•œ ๋ฐฉํ™”๋ฒฝ์˜ ๊ตฌ์„ฑ๊ด€๋ฆฌ์— ๋Œ€ํ•œ ์ฑ…์ž„์ด ์žˆ์Œ ์ถœ์ฒ˜ https://aws.amazon.com..
AWS - ํด๋ผ์šฐ๋“œ ์ปดํ“จํŒ… ํด๋ผ์šฐ๋“œ ์ปดํ“จํŒ… : IT ๋ฆฌ์†Œ์Šค๋ฅผ ์ธํ„ฐ๋„ท์„ ํ†ตํ•ด ์˜จ๋””๋งจ๋“œ๋กœ ์ œ๊ณตํ•˜๊ณ  ์‚ฌ์šฉํ•œ ๋งŒํผ๋งŒ ๋น„์šฉ์„ ์ง€๋ถˆํ•˜๋Š” ๊ฒƒ ํด๋ผ์šฐ๋“œ ๊ณต๊ธ‰์ž๋กœ๋ถ€ํ„ฐ ํ•„์š”์— ๋”ฐ๋ผ ์ปดํ“จํŒ… ํŒŒ์›Œ, ์Šคํ† ๋ฆฌ์ง€, ๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค์™€ ๊ฐ™์€ ๊ธฐ์ˆ  ์„œ๋น„์Šค์— ์•ก์„ธ์Šค ๊ฐ€๋Šฅ ** ์˜จ๋””๋งจ๋“œ(On-Demand) : ๋‚ด๊ฐ€ ์›ํ•˜๋Š” ์‹œ๊ฐ„์— ์›ํ•˜๋Š” ๊ฒƒ์„ ์–ป์„ ์ˆ˜ ์žˆ๋„๋ก ํ•œ ํ”Œ๋žซํผ ์„œ๋น„์Šค On-Premise vs Cloud ๊ตฌ๋ถ„ On-Premise Cloud ๋„์ž…๋น„์šฉ ๊ตฌ๋งค ์‹œ ๋งŽ์€ ์˜ˆ์‚ฐ์ด ์†Œ์š”๋˜๋ฉฐ, ์žฅ๋น„ ๊ต์ฒด ์‹œ ๋น„์šฉ ๋ฐœ์ƒ ์šด์˜์ด ์žฅ๊ธฐํ™”๋˜๋ฉด ์œ ์ง€๋ณด์ˆ˜ ๋น„์šฉ ์™ธ์˜ ์ถ”๊ฐ€๋น„์šฉ์ด ์ ์Œ ์›”์ •์•ก ๊ธฐ๋ฐ˜์œผ๋กœ ์‚ฌ์šฉํ•œ๋งŒํผ ์š”๊ธˆ์„ ์ง€๋ถˆ(์˜ˆ์ธก๊ฐ€๋Šฅ) ์„œ๋น„์Šค์ฆ์„ค๋กœ ์ธํ•œ ์ถ”๊ฐ€์ ์ธ ๋น„์šฉ ์ƒ์Šน ๊ฐ€๋Šฅ์„ฑ ์ธ๋ ฅ ์‹œ์Šคํ…œ ์šด์˜ ์ธ๋ ฅ ํ•„์š” ์‹œ์Šคํ…œ ์šด์˜ ์ธ๋ ฅ ๊ฐ์› ๊ตฌ์ถ•๊ธฐ๊ฐ„ ์‹œ์Šคํ…œ ์„ค๊ณ„ ํ›„ ํ•˜๋“œ์›จ์–ด์™€ ์†Œํ”„ํŠธ์›จ์–ด๋ฅผ ์กฐ๋‹ฌํ•˜๊ณ  ๋ฐฐ์น˜ํ•˜..
10์›” ์ผ์ƒ - Reverse 28์ผ ๋‚˜๋ฆ„ 2๊ฐœ์›”๋™์•ˆ 6์‹œ์— ์ผ์–ด๋‚˜์„œ ์œ ํŠœ๋ธŒ ๋ณด๊ณ  ๋”ฐ๋ผํ•œ๋‹ค๊ณ  ์—ด์‹ฌํžˆ ํ–ˆ๋Š”๋ฐ ๊ทผ์œก๋Ÿ‰ ์˜ค๋ฅด๊ณ  ์ฒด์ง€๋ฐฉ๋ฅ  ๋‚ฎ์•„์ ธ์„œ ๋ฟŒ๋“ฏํ–ˆ๋„ค ๋” ์—ด์‹ฌํžˆํ•ด์•ผ์ง€ ์ฒ˜์Œ์—๋Š” ์›จ์ดํŠธ๊ธฐ๊ตฌ 4๊ฐœ๋กœ ๋Œ๋ ธ๋Š”๋ฐ ์ง€๊ธˆ์€ ๋ฐฉ๋ฒ•์ตํžˆ๋ฉด์„œ 8๊ฐœ์ •๋„๋Š” ํ• ์ค„ ์•„๋Š”๊ฒƒ๊ฐ™๋‹ค!! ๋‹นํ™ฉํ•ด์„œ ์‚ฌ์ง„ ๋ชป์ฐ์—ˆ๋Š”๋ฐ 23์‹œ๊นŒ์ง€ ํ•™์›์—์„œ ๊ณต๋ถ€ํ•˜๋‹ค๊ฐ€ ๋‚˜์™”๋Š”๋ฐ ๋ฌธ์— ์ฒ ์ฐฝ? ๋‚ด๋ ค์ ธ์žˆ์–ด์„œ ๊ด€๋ฆฌ์•„์ €์”จ ์ฐพ์œผ๋กœ ์ „์ธต ์ˆœํšŒํ•˜๋‹ค๊ฐ€ ๊ฒฐ๊ตญ ํ˜ผ์ž ๋ฒ„ํŠผ๋ˆŒ๋Ÿฌ์„œ ์˜ฌ๋ฆฌ๊ณ  ๋‚˜์™”๋‹ค^^ ํ•™์›์—์„œ ์ž์•ผ๋˜๋Š”์ค„ ์•Œ์•˜๋„ค...ใ…Ž 27์ผ ์š”์ฆ˜ ์ ์‹ฌ๋„์‹œ๋ฝ ์ฑ™๊ฒจ์„œ ๋‹ค๋‹ˆ๋Š”๋ฐ ๋ฐ–์—์„œ ์‚ฌ๋จน์„๋•Œ๋ณด๋‹ค ์ ์ •๋Ÿ‰ ๋จน์„์ˆ˜์žˆ์–ด์„œ ์†์ด ํŽธํ•˜๋‹ค ์ฃผ๋ง์˜ ํ•™์› ํ‚ค๋Š” ์ œ ๋‹ด๋‹น์ž…๋‹ˆ๋‹ค๋งŒ ๋๋‚˜๊ณ  ์น˜๋งฅ...ใ…Ž ์‚ฌ์‹ค 3์‹œ๊ฐ„ 17๋ถ„ ์žค๋Š”๋ฐ ์กธ๋ฆฝ์ง€๋„ ์•Š๊ณ  ํ”ผ๊ณคํ•˜์ง€๋„ ์•Š์•˜๋Š”๋ฐ ์ง‘ ์˜ค์ž๋งˆ์ž ๊ทธ๋ƒฅ ๊ธฐ์ ˆ 26์ผ ์œ ์‚ฐ์†Œ ์—ด์‹ฌํžˆ ํ• ๋ผ๊ณ  ๋Ÿฌ๋‹๋ง๊ณ  ์ฒœ๊ตญ์˜ ๊ณ„๋‹จ์œผ๋กœ ๋ฐ”๊ฟจ๋Š”๋ฐ์š”? ..
API - ๊ฒŒ์‹œํŒ ๋ชฉ๋ก ์กฐํšŒ, ์ƒ์„ธ ์กฐํšŒ, ๋“ฑ๋ก, ์‚ญ์ œ _ postman API( Application Programing Interface) : ์–ด๋– ํ•œ ์‘์šฉํ”„๋กœ๊ทธ๋žจ์—์„œ ๋ฐ์ดํ„ฐ๋ฅผ ์ฃผ๊ณ  ๋ฐ›๊ธฐ ์œ„ํ•œ ๋ฐฉ๋ฒ• flask.py from flask import Flask, request import pymysql import json, datetime app = Flask(__name__) # ๋ฐ์ดํ„ฐ ๋ฒ ์ด์Šค ์—ฐ๊ฒฐ def getCon(): return pymysql.connect(host="localhost", user="root", password="1234", db="testConnection", charset="utf8", cursorclass=pymysql.cursors.DictCursor) def json_default(value): if isinstance(value, datet..
React - Flask - Mysql ์—ฐ๋™ 1. ํ”„๋กœ์ ํŠธ ์ƒ์„ฑ react C:\react>npx create-react-app data-app C:\react>npm start Flask C:\react>mkdir server C:\react>pip install Flask DB workbench ์‚ฌ์šฉํ•˜์—ฌ database๋ฅผ ๋งŒ๋“  ํ›„ table์„ ์ƒ์„ฑํ–ˆ์Šต๋‹ˆ๋‹ค. create database testConnection; use testConnection; CREATE TABLE `testTable` ( `id` int unsigned AUTO_INCREMENT NOT NULL , `name` int unsigned NOT NULL , `age` varchar(30) NOT NULL , PRIMARY KEY ( `id` ) ); ๋ฐ์ดํ„ฐ ์‚ฝ์ž… INSERT..
SSG I&C project_2 1. ๋ฐ์ดํ„ฐ ๋ฐ˜์˜ ์˜ค๋ฅ˜ : flask ์—์„œ db ๋ฐ์ดํ„ฐ๋ฅผ react๋กœ ๋ณด๋‚ด์ฃผ๋Š” ๊ณผ์ • ์ค‘ flask ์„œ๋ฒ„๋ฅผ ์ƒˆ๋กœ ์‹คํ–‰ํ•ด์ค˜์•ผ sql์— ๋„ฃ๋Š” ๋ฐ์ดํ„ฐ๊ฐ€ ์กฐํšŒ๋จ App.js import React, {useState, useEffect} from "react"; import axios, { Axios } from 'axios'; function App() { const [ data, setData ] = useState([{}]); useEffect(() => { axios.post('/boardDetail', {id : boardId}, { headers: { 'Content-Type': 'application/json' } }) .then(response => { setBoardData(response.dat..
React - Hooks _ useState / useEffect /useRef Hooks : ํ•จ์ˆ˜ํ˜• ์ปดํฌ๋„ŒํŠธ์—์„œ ํด๋ž˜์Šคํ˜• ์ปดํฌ๋„ŒํŠธ์—์„œ ์ œ๊ณตํ•˜๋Š” ๊ธฐ๋Šฅ(state,ref, life cycle function ๋“ฑ)์„ ์ง€์›ํ•˜๊ธฐ ์œ„ํ•ด์„œ ๋„์ž…๋œ ํ•จ์ˆ˜ 1) useState : ํ•จ์ˆ˜ํ˜• ์ปดํฌ๋„ŒํŠธ์—์„œ ์ƒํƒœ(state)๋ฅผ ๊ด€๋ฆฌํ•˜๊ธฐ ์œ„ํ•ด์„œ ์‚ฌ์šฉ [์ƒํƒœ๋ณ€์ˆ˜ ์ดˆ๊ธฐ๊ฐ’, ์ƒํƒœ๋ณ€์ˆ˜๋ฅผ ๋ณ€๊ฒฝํ•˜๋Š” ํ•จ์ˆ˜ ] ๋ฐฐ์—ด์„ ๋ฐ˜ํ™˜ํ•˜๋Š” ํ•จ์ˆ˜ const [name,setName] = useState(''); App.js import Info from './Info'; function App() { return ( ); } export default App; Info.js => ์‚ฌ์šฉ์ž์ด๋ฆ„๊ณผ ๋ณ„๋ช…์„ ๊ด€๋ฆฌํ•˜๋Š” ์ปดํฌ๋„ŒํŠธ๋ฅผ ๊ตฌํ˜„ import { useState } from "react"; function Info() { const [name..
React - Ref Ref : DOM ์š”์†Œ๋‚˜ React ์ปดํฌ๋„ŒํŠธ์— ๋Œ€ํ•œ ์ฐธ์กฐ๋ฅผ ์ƒ์„ฑํ•˜๊ณ  ๊ด€๋ฆฌํ•˜๋Š”๋ฐ ์‚ฌ์šฉ๋˜๋Š” ํŠน๋ณ„ํ•œ ์†์„ฑ render ๋ฉ”์†Œ๋“œ์—์„œ ์ƒ์„ฑ๋œ DOM ๋…ธ๋“œ๋‚˜ React ์—˜๋ฆฌ๋จผํŠธ์— ์ ‘๊ทผํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ์ œ๊ณต 1. ์‚ฌ์šฉ๋ฐฉ๋ฒ• 1) ์ฝœ๋ฐฑ ref useRef ๋ฅผ ์ด์šฉ class MyComponent extends Component { const handler = () => { this.myref.focus(); } render() { return this.myinput = x } />; } } 2) React.createRef() API๋ฅผ์ด์šฉ => current ์‚ฌ์šฉํ•˜๋Š”๊ฑฐ ์žŠ์ง€ ๋ง๊ธฐ class MyComponent extends React.Component { constructor() { super(); this.myref = R..