개발 일지/Web16 [ 스파르타 / Web ] 웹개발 종합반 5주차_#1 AWS에 EC2 설정하기 먼저 아래의 링크를 통해 AWS에 회원가입 및 로그인을 해준다. https://ap-northeast-2.console.aws.amazon.com/ec2/v2/home?region=ap-northeast-2 ap-northeast-2.console.aws.amazon.com 1. 로그인 후 왼쪽에 인스턴스 클릭! 2. 인스턴스 시작 클릭 3. ubuntu 석택, Ubuntu Server 22.04 선택, 64비트(x86) 선택, 마지막에 인스턴스 시작 클릭 키 페어 생성 기본으로 설정되어있는 거 그대로 키 패어 생성을 누른다. 인스턴스를 만들고 조금 기다리면 인스턴스 상태가 아래와 같이 실행 중으로 변한다. 이때 인스턴스 중지는 컴퓨터를 끈 것이다. 인스턴스 종료는 컴퓨터를 반납.. 2023. 1. 3. [ 스파르타 / Web ] 웹개발 종합반 4주차_#1 과제 mongoDB를 사용해서 펜명록 만들기 입력받은 데이터 DB에 저장 - html 파일 nickname과 comment에 입력되는 데이터를 가져왔다. function save_comment() { let nickname = $('#name').val(); let comment = $('#comment').val(); $.ajax({ type: 'POST', url: '/homework', data: {'nickname_give': nickname,'comment_give':comment}, success: function (response) { alert(response['msg']) window.location.reload() } }) } 입력받은 데이터 DB에 저장 - py 파일 DB와 연결시켜주.. 2023. 1. 2. [ 스파르타 / Web ] 웹개발 종합반 3주차_#4 주제 파이썬으로 DB에 접속하기 mongoDB 링크 Cloud: MongoDB Cloud account.mongodb.com mondDB에서 Organization 만들어주기 mongoDB는 mongoDB Atlas 컴퓨터를 우리에게 빌려주는 방식으로 하나 배정받고 그 컴퓨터에 접속할 수 있는 아이디 패스워드를 만들어준다. 1. Organization을 새로 만들어준다. 2. Organization 이름을 입력한뒤 Next를 클릭한다. 3. Create Organization을 누른다. mondDB에서 Project 만들어주기 1. New project를 클릭한다. 2. 원하는 이름을 적고 Next를 누른뒤, 한 번 더 create project를 눌러주면 프로젝트가 생성된다. 3.Build a Data.. 2022. 12. 31. [ 스파르타 / Web ] 웹개발 종합반 3주차_#3 웹 사이트 크롤링 심화버전 네이버영화 사이트의 현재 영화 순위를 아래와 같이 출력하기 크롤링할 웹 사이트 링크 랭킹 : 네이버 영화 영화, 영화인, 예매, 박스오피스 랭킹 정보 제공 movie.naver.com 크롤릴해올 사이트 이미지 풀이 선생님과함께 영화 제목을 뽑아보고 스스로 영화 순위와 평점을 뽑아 보았다. 태크안에 alt를 어떻게 뽑아올지 막막했지만 앞에 배운 내용들로 적용을 해보니 바로 원하는 데이터들이 출력되서 뿌듯했다. import requests from bs4 import BeautifulSoup headers = {'User-Agent' : 'Mozilla/5.0 (Windows NT 10.0; Win64; x64)AppleWebKit/537.36 (KHTML, like Gecko) .. 2022. 12. 31. [ 스파르타 / Web ] 웹개발 종합반 3주차_#2 주제 requests와 beautifulsoup를 활용해서 네이버 영화 페이지에 있는 영화 제목들 크롤링해오기 크롤링할 웹사이트 링크 랭킹 : 네이버 영화 영화, 영화인, 예매, 박스오피스 랭킹 정보 제공 movie.naver.com 크롤링 크롤링을 하기 위해서는 2가지를 해야 한다. 1. requests로 링크에 요청을 해서 html을 가져와야 한다. requests는 일종의 Ajax 역학을 한다. 일단 requests를 사용하기 위해서는 설치를 해주어야 한다. 2. beautifulsoup을 사용하여 가져온 데이터 안에서 영화 제목들을 가져온다. 제목을 쉽게 찾게 해주는 라이브러리 requests 설치 1. Pycharm을 눌러 설정을 들어간다. 2. 프로젝트에 Python 인터프리터를 누른다. 3... 2022. 12. 31. [ 스파르타 / Web ] 웹 퍼블리싱 정복 2주차 HTML 태그 서로 관련이 있는 것들을 묶을 때 사용된다. 관련된 사항들이 어떤 것이지 나타낸다. 보통 메인 제목들은 , , 등을 사용하지만 정석적으로는 form안에 fieldset을 만들고 filedset의 타이틀은 legend로 한다. filedset과 legend 사용해보기 개인정보 이름 : 나이 : 기타정보 취미 : 특기 : label을 사용하지 않을 경우 아래와 같이 체크 박스를 클릭해야 박스에 체크가 된다. 아이디 패스워드 저장 반면 label로 input과 text를 감싸줄 경우 box와 text를 클릭해도 체크박스에 체크가 된다. 아이디 패스워드 저장 태그 (Definition List) 목록을 나타내는 태그이다. 태그 (Definition Term) 정의되는 용어에 대한 제목을 나타낸다... 2022. 11. 14. [ 스파르타 / Web ] 웹 퍼블리싱 정복 1주차 jQuery 자바스크립트에서 버튼 클릭 이벤트 예제 document.getEelementById('btn').addEventListener('click', function() { alert('버튼 클릭'); }); jQuery로 훨씬 간단하게 만들 수 있다. HTML 파일에 아래의 코드를 추가해준 뒤, JS파일에서 jQuery를 사용할 수 있게 된다. $('#btn').on('click',function() { alert('버튼 클릭'); }); // document = $ // getElementById('btn') = ('#btn') // .addEventListener() = .on transition 아래와 같이 버튼에 적용된 css가 있을 때, .btn { padding: 5px 20px; fo.. 2022. 11. 14. [ 스파르타 / Web ] 웹개발 종합반 3주차_#1 업데이트 버튼을 누를 때마다 주어진 API로 여러 캐릭터가 나오고 또 그에 따른 이름을 변하게 만들어야 한다. 결과 전체 코드 JQuery+Ajax의 조합을 연습하자! 3. 르탄이 API를 이용하기! 아래를 르탄이 사진으로 바꿔주세요 업데이트 버튼을 누를 때마다 지웠다 새로 씌여져야 합니다. 르탄이 나와 나는 ㅇㅇㅇ하는 르탄이! 2022. 11. 5. [ 스파르타 / Web ] 웹개발 종합반 2주차_#3 (API) GET 데이터를 조회(Read)를 요청할 때 사용한다. POST 데이터를 생성(Create), 변경(Update), 삭제(Delete)요청 할 때 사용한다. 문제 아래의 사진에서와 같이 업데이트 버튼을 누를 시 미세먼지의 수치가 40 이상은 위험으로 나타내기 위해 빨간색으로 표시되게끔 만들어야 한다. 미세먼지 Open API http://spartacodingclub.shop/sparta_api/seoulair 위의 미세먼지 Open API 링크로 들어가면 아래와 같은 데이터가 보인다. 하지만 아래의 데이터는 보기가 힘들다. JSONView API 데이터 파일을 더 이쁘게 보기 위해서 JSONView를 깔아 주었다. (크롬에서 설치 가능) JSONView 브라우저에서 JSON 문서를 보세요. chrome.. 2022. 11. 3. 이전 1 2 다음 728x90
