개발이야기

Jinja2 템플릿 언어 이용하기 응용편 Jinja를 본격적으로 쓰기에 앞서, 원래 ajax 요청을 보내 html을 완성할 때는 어떻게 했었는지 살펴봅시다. 서울시 Open API에서 정보를 받아와 현재 미세먼지 수치가 50 이상인 구만 페이지에 나타내볼까요? ajax 요청준비 " target="_blank" rel="noopener">https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> 미세먼지 정보가 들어갈 ul 태그 만들기 각 구에 대해서 구 이름과 미세먼지 수치를 변수에 저장하기 for (let i=0;i= 50) { let html_temp = `${gu_name}: ${gu_mise}` $("#gu-list").append(ht..

페이지 간 이동하기 메인 페이지에서 링크를 클릭하면 상세 페이지로 가고, 상세 페이지에서 다시 메인으로 갈 수 있게 하려면 어떻게 해야할까요? 페이지 연결하기 상세 페이지로 가는 하이퍼링크는 이렇게 만듭니다. 상세 페이지로 가기 메인 페이지로 돌아가는 버튼은 이렇게 만들 수 있겠죠! // script 태그 안에 정의하기 function to_main() { window.location.href = "/" } 메인으로 돌아가기 짧은 코드는 onclick에 바로 넣을 수 있습니다. 메인으로 돌아가기 ※작은따음표와 큰 따음표 구분 Jinja2 템플릿 언어 이용하기 서버에서 name이라는 이름으로 값을 보내줍니다. @app.route('/') def main(): myname = "sparta" return r..

Flask의 더 많은 기능을 배운다. API에 보안 키를 전달할 수 있다. 멀티페이지 사이트를 만들 수 있다! 정적 웹페이지(static web page)는 서버에 저장되어있는 HTML+CSS 파일 그대로 보여주는 것! 반면 동적 웹페이지(dynamic web page)는 상황에 따라 서버에 저장되어있는 HTML에 데이터 추가/가공을 해서 보여주는 방법입니다 🙂 정적 웹페이지는 추가적인 통신&계산이 필요 없기 때문에 속도가 빠르고 서버에 부담이 적은 반면, 추가/수정/삭제 등 내용 변경이 필요할 때 HTML 자체를 수정해야 하기 때문에 번거롭다는 단점이 있습니다. 동적 웹페이지는 한 페이지에서 상황/시간/사용자요청에 따라 다른 모습을 보여줄 수 있다는 장점이 있지만 상대적으로 보안에 취약하고 모습이 계속..

시간넣는방법 @app.route('/diary', methods=['POST']) def save_diary(): title_receive = request.form['title_give'] content_receive = request.form['content_give'] file = request.files["file_give"] today = datetime.now() mytime = today.strftime('%Y-%m-%d-%H-%M-%S') filename = f'file-{mytime}' save_to = f'static/{filename}.jpg' file.save(save_to) doc = { 'title':title_receive, 'content':content_receive } d..

name = '홍길동' age='30' hello = f'제 이름은 {name}입니다. 나이는 {age}입니다.' print(hello) from datetime import datetime today = datetime.now() print(today) today = datetime.now() mytime = today.strftime('%Y-%m-%d-%H-%M-%S') filename = f'file-{mytime}' ※대소문자 꼭 지켜주기

서버 쪽 받기 코드 file = request.files["file_give"] save_to = 'static/mypicture.jpg' file.save(save_to) 클라이언트 쪽 보내기 코드 function posting() { let title = $('#title').val() let content = $("#content").val() let file = $('#file')[0].files[0] let form_data = new FormData() form_data.append("file_give", file) form_data.append("title_give", title) form_data.append("content_give", content) $.ajax({ type: "POST..

get 요청 ajax코드 $.ajax({ type: "GET", url: "/diary?sample_give=샘플데이터", data: {}, success: function(response){ alert(response['msg']) } }) post요청 ajax코드 $.ajax({ type: "POST", url: "/diary", data: { sample_give:'샘플데이터' }, success: function(response){ alert(response['msg']) } }) get요청 api코드 @app.route('/diary', methods=['GET']) def show_diary(): sample_receive = request.args.get('sample_give') print..

이걸로 시작해보죠!

클라이언트는 요청하는 쪽! 서버는 요청을 받아서 무언가를 돌려주는 쪽! [복습을 위한 주요 질문들] 서버는 특수한 컴퓨터다? No! 🙅 서버는 컴퓨터의 '역할' 이라고 했어요. 사람도 투 잡을 할 수 있는 것처럼, 컴퓨터도 여러 역할을 맡을 수 있죠. DB도 돌리고, 서버도 돌리고, 게임도 하고! 서버는 요청을 받으면 HTML+CSS+JavaScript 파일을 주기도 하고, JSON 형식으로 데이터를 주기도 하지요! JSON 형식으로 생긴 데이터 예시 💡 이거, 기억나세요? 서울시 미세먼지 데이터! 타고→타고 들어가서 값 가져오기! API란? 서버가 요청을 받게 위해 뚫어놓은 '창구'라고 했습니다. 요청에는 POST(주로 데이터를 수정할 때), GET(주로 데이터를 가져올 때) 요청 등 여러가지 타입이 ..

단축키 모음 새로고침 F5 저장 Windows: Ctrl + S macOS: command + S 전체선택 Windows: Ctrl + A macOS: command + A 잘라내기 Windows: Ctrl + X macOS: command + X 콘솔창 줄바꿈 shift + enter 코드정렬 Windows: Ctrl + Alt + L macOS: option + command + L 들여쓰기 Tab 들여쓰기 취소 : Shift + Tab 주석 Windows: Ctrl + / macOS: command + / 모든 토글을 열고 닫는 단축키 Windows : Ctrl + alt + t Mac : ⌘ + ⌥ + t