html

클릭마다 화면에 반영하는 기능 추가 (순서: 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..

1. 로컬 개발환경 : 한 컴퓨터에 서버와 클라이언트 동시에 2. Flask: 서버를 구동시켜주는 프레임워크(이미 만들어진 코드 모음) flask 개발자가 정해놓은 규칙에 맞게 내 코드를 작성해야함 통상적으로 서버 구동 파일은 app.py from flask import Flask app = Flask(__name__) @app.route('/') def home(): return 'This is Home!' if __name__ == '__main__': app.run('0.0.0.0',port=5000,debug=True) flask 시작 코드 서버 정상 작동 확인: http://localhost:5000/ 에서 서버 종료: ctrl + c URL 나누기 from flask import Flask a..

지니 뮤직 사이트 1~50위 곡 스크래핑 import requests from bs4 import BeautifulSoup 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://www.genie.co.kr/chart/top200?ditc=D&ymd=20200403&hh=23&rtm=N&pg=1',headers=headers) soup = BeautifulSoup(data.text, 'html.parser') songs = soup.select('#body..

1. 서울시 실시간 따릉이 API jQuery + Ajax의 조합을 연습하자! 2. 서울시 OpenAPI(실시간 따릉이 현황)를 이용하기 모든 위치의 따릉이 현황을 보여주세요 업데이트 버튼을 누를 때마다 지웠다 새로 씌여져야 합니다. 업데이트 거치대 위치 거치대 수 현재 거치된 따릉이 수 102. 망원역 1번출구 앞 22 0 103. 망원역 2번출구 앞 16 0 104. 합정역 1번출구 앞 16 0 2. 랜덤 고양이 사진 보기 API JQuery+Ajax의 조합을 연습하자! 3. 랜덤 고양이 사진 API를 이용하기 예쁜 고양이 사진을 보여주세요 업데이트 버튼을 누를 때마다 지웠다 새로 씌여져야 합니다. 고양이를 보자 강의에서 img 태그에 접근해서 src 값을 따로 바꾸는 방법을 소개했는데, 이전 연습처..

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'..

나만의 쇼핑몰 메인페이지 만들기 수제버거 price: $5 세상에서 제일 맛있는 수제버거 팝니다. 주문자 이름 수량 수량 선택 One Two Three 주소 전화번호 주문하기

1. 웹의 동작 개념 html을 받는 경우 우리가 보는 웹페이지는 브라우저가 서버에 요청한 html 파일을 받아 그려주는 것 서버가 만든 API라는 창구에 미리 정해진 약속대로 요청을 보냄 예) https://naver.com/ 은 "naver.com"이라는 서버에 "/" 창구에 요청을 보낸 것 데이터만 받는 경우 html 말고 데이터만 전송받기도 한다 데이터만 내려받은 경우, JSON 형식으로 2. html 기초 개념 1) html: 크게 head와 body, 태그로 이루어짐 head는 페이지 속성정보, body는 페이지 내용 나는 구역을 나누죠 나는 문단이에요 bullet point!1 bullet point!2 h1은 제목을 나타내는 태그입니다. 페이지마다 하나씩 꼭 써주는 게 좋아요. 그래야 구글..