reactjs는 state가 바뀔 때마다 해당 component 전체가 다시 렌더링 됨 import { useState } from "react"; function App() { const [counter, setValue] = useState(0); const onClick = () => setValue((prev) => prev + 1); console.log("call an api"); return ( {counter} click me ); } console.log("call an api")는 한번만 실행하고 싶어도 state 변화할 때마다 다시 실행 component 내의 특정 부분(코드)을 state 변화할 때마다 렌더링되지 않게하기 -> useEffect 함수 사용 import { useSta..
JS
이전 연습에서는 react를 import하고 일일히 다 설정해주었지만, npx로 create-react-app 하면 훨씬 개발하기 편함 터미널에 npx create-react-app movie-app(생성할 디렉토리 이름) 이미 존재하는 폴더 명과 같게 짓지 않도록 유의 npm(node package manager): nodeJS의 모듈들을 패키지화하여 저장하고, 패키지 설치 및 관리 도구 npx(node package runner): 일회성으로 원하는 패키지를 npm registry에 접근하여 실행하고 설치하는 도구 패키지 업데이트 시, npm은 기존 패키지 제거하고 새로 설치해야함 movie-app 디렉토리 터미널에서 npm start하면 노드 서버 실행 (ctrl + c 로 종료) react-app..
클릭마다 화면에 반영하는 기능 추가 (순서: render() -> Container() -> 클릭버튼 누르면 countUp() -> render()) JSX 환경에서 {}안에 JS코드 삽입 가능 react는 모든 것을 다시 render하는 것임에도 오직 바뀐 부분만 업데이트 -> interactive 하게 만들 수 있음 더 간단한 방법 const onClick = () => { // setCounter가 counter 데이터를 업데이트하고 렌더링까지 해줌 (component rerender) // setCounter(counter + 1); counter 값이 코드의 다른 부분에서 바뀌어 버그 발생 가능 // 확실하게 현재 값을 바탕으로 modify하는 코드 setCounter((current) => c..
react는 우리의 서비스를 interactive 하게 만들어주기 위해 만들어졌다 reactjs는 거의 js로 이루어져 있으며, vanillajs 의 문제점을 많이 해결해준다 따라서 vanilla로 불편함을 알고 react를 쓰는 것과 그냥 react부터 달려드는 것은 다르다 vanillajs 로 버튼 클릭 수 화면에 띄우기 Total clicks: 0 click me react로 같은 기능 만들기 react에서는 script 안에서 element를 만들어 interactive하게 함 어려운 방법, 쉬운 방법이 있는데 어려운 것부터 배워서 react의 본질을 깨우친다 지금까지는 html에서 만든 것을 js에서 가져와서 업데이트 했다면, react에서는 js에서 만들고 업데이트 가능 property에 ad..
DB 세팅 # init_db.py import requests from bs4 import BeautifulSoup from pymongo import MongoClient client = MongoClient('localhost', 27017) db = client.dbsparta # DB에 저장할 영화인들의 출처 url을 가져옵니다. def get_urls(): headers = { 'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64)AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 Safari/537.36'} data = requests.get('https://movie.naver.com/movi..
나홀로 쇼핑몰 2주차에 만든 페이지에 flask 서버 연결하고 주문하기, 주문 목록 보기 api 만들어서 ajax로 통신 from flask import Flask, render_template, jsonify, request app = Flask(__name__) from pymongo import MongoClient client = MongoClient('localhost', 27017) db = client.dbsparta ## HTML 화면 보여주기 @app.route('/') def homework(): return render_template('index.html') # 주문하기(POST) API @app.route('/order', methods=['POST']) def save_order..
js 복습 포스팅박스 열기 클릭 수에 따라 다른 alert 창 띄우기 cnt를 함수 밖에 설정해야 축적이 됨 jQuery는 길고 복잡한 js 코드를 간단하게 쓸 수 있도록 미리 만들어진 라이브러리 (따라서 import 필수!) bootstrap에 이미 jQuery import 되어있음 bootstrap 사용하지 않을 때는 jQuery CDN을 html head에 복사 // id 값이 article-url인 곳을 가리키고, val()로 입력값을 가져온다 - input box의 경우 $('#article-url').val(); // id 값이 article-url인 곳을 가리키고, 입력값을 'something'으로 한다 - input box의 경우 $('#article-url').val('something'..
//함수 // 만들기 function 함수이름(필요한 변수들) { 내릴 명령들을 순차적으로 작성 } // 사용하기 함수이름(필요한 변수들); // 두 숫자를 입력받으면 더한 결과를 돌려주는 함수 function sum(num1, num2) { console.log('num1: ', num1, ', num2: ', num2); return num1 + num2; } sum(3, 5); // 8 sum(4, -1); // 3 콘솔에서 shift+enter하면 줄바꾸기 //조건문 function is_adult(age){ if(age > 20){ alert('성인이에요') } else if (age > 10) { alert('청소년이에요') } else { alert('10살 이하!') } } is_adult..
브라우저가 이해하는 프로그래밍 언어 작업 중인 웹페이지의 콘솔 창에서 코딩 맛보기 기사저장 버튼 클릭시 js의 hey() 함수 작동하여 alert 창 생성 //변수, 기본연산 //let으로 변수 선언, 한번 선언하면 다시 안함 let num = 20 num = 'Bob' //사칙연산, 문자열 더하기 let a = 1 let b = 2 a+b // 3 a/b // 0.5 let first = 'Bob' let last = 'Lee' first+last // 'BobLee' first+' '+last // 'Bob Lee' first+a // Bob1 -> 문자+숫자를 하면, 숫자를 문자로 바꾼 뒤 수행 //리스트 let a_list = [] // 리스트를 선언. 변수 이름은 역시 아무렇게나 가능! // 또..
