본문 바로가기

개발(Develop)/웹(Web) _프로젝트project24

웹 / 영화를 기록하는 나만의 메모장 웹 만들기/ 메타(meta)태그 크롤링하기/ 네이버 영화 크롤링해서 웹에 메모하기 이번 글에서는 나만의 영화를 기록하는 메모장을 만들어보자. 어떤 식으로 구현하냐면, 클라이언트가 인상깊었던 영화를 네이버에서 url을 가져오고 해당 영화에 어떤 부분이 재밌었는지 코멘트를 달게 되면 기록이 되는 방식의 메모장이다. 프로젝트 개발환경 세팅하기 myonlymovie라는 새프로젝트를 만들어준다. static 폴더에는 CSS나 이미지 파일들을 담아둘 때 사용할 것이다. 그리고 templates 폴더에는 HTML 파일들을 담아둘 때 사용할 것이다. 그리고 서버로 활용할 app.py 파일을 생성해준다. 그리고 미리 templates 폴더에 index.html 파일을 생성해준다. 그리고 라이브러리를 설치해줘야 하는데 우리가 이번 글에서 사용할 것은 데이터베이스, 크롤링, 서버를 사용할 것이다. 서버를.. 2021. 6. 7.
웹 / 책 리뷰 작성하고 저장하는 웹 만들기/ 책 리뷰 데이터베이스(DB)에 저장하고 가져와 사용하기/ Ajax, jQuery, HTML, 파이썬 Flask 프레임워크 이번 글에서는 책 리뷰를 작성하고 저장할 수 있는 웹 사이트를 만들어보겠다. 파이참(Pycharm) 새 프로젝트 생성 후 개발환경 세팅하기 새 프로젝트를 생성해준다. 미리 바탕화면에서 project 폴더를 만들고, 그 안에 bookreview라는 폴더를 만든 뒤에 새 프로젝트를 만들 때 경로를 bookreview 폴더로 해주자. 그리고 아래에 새로운 환경에 venv가 입력 되어 있는 지 확인을 해주자. 그리고 이전 글에서 했던 것처럼 세팅을 해줄 것이다. 이전 글 ▼ 웹 / Flask 프레임워크를 활용한 서버 만들기 심화/ 로컬호스트로 서버 만들기 폴더를 2개 만드는데 이름은 static 폴더, templates 폴더이다. static 폴더에는 CSS나 이미지 파일들을 담아둘 때 사용할 것이다. 그리고 .. 2021. 6. 6.
웹 / 서버에 API 직접 만들어보기/ Ajax를 통해 직접 만든 서버에서 API 가져와보기/ 서버 API GET, POST 요청해보기/ API란 무엇인가 오늘은 이전에 만들었던 서버 파일에 다른데서 가져와 활용만 했던 API를 직접 만들어볼 것이다. 그럼 그 전에 API가 무엇인지부터 이해를 하고 넘어가자. API (Application Programming Interface)란? 네이버 [컴퓨터인터넷 IT 용어대사전] 검색 결과ㅣ 위시켓이란 곳에서는 우리가 레스토랑에 있다고 가정하고 API 예시를 들었다. 점원이 가져다준 메뉴판을 보고 점원에게 주문을 한다. 그러면 점원은 요리사에게 요청을 하고, 다 된 요리를 점원이 우리에게 가져다 준다. 그러면 여기서 점원의 역할을 보면 손님에게 메뉴를 알려주고, 주방에 주문받은 요리를 요청하는 역할을 한다. 그것이 바로 API의 역할이다. 간결하게 말하면 API는 프로그램들이 서로 상호작용하는 것을 도와주는 '매개.. 2021. 6. 5.
웹 / Flask 프레임워크를 활용한 서버 만들기 심화/ 로컬호스트로 서버 만들기 이번 글에서는 이전에 다뤘던 Flask 프레임워크로 내 컴퓨터를 서버로 만들어 보았던 것에서 좀 더 심화된 내용을 다루려고 한다. 그렇기 때문에 이전 글을 참고해 Flask 프레임워크 기본 틀을 활용해 내 컴퓨터를 서버로 만드는 과정까지 완료해줘야 한다. 웹 / 내 컴퓨터를 서버로 만들고 접속하기/ 웹서버 Flask 프레임워크로 구동하기/ 파이썬으로 웹 서버 만들기 웹 / 내 컴퓨터를 서버로 만들고 접속하기/ 웹서버 Flask 프레임워크로 구동하기/ 파이썬으로 웹 이번 글에서는 웹 서버를 만들어볼 것이다. 이전에 라이브러리를 활용했던 것들과 차별을 두기 위해 새 프로젝트에서 코드를 작성해줄 것이다. 새 프로젝트를 만들어보자. 연습이란 이름으로 pr parkjh7764.tistory.com prac 프로젝.. 2021. 6. 5.
웹 / 내 컴퓨터를 서버로 만들고 접속하기/ 웹서버 Flask 프레임워크로 구동하기/ 파이썬으로 웹 서버 만들기 이번 글에서는 웹 서버를 만들어볼 것이다. 이전에 라이브러리를 활용했던 것들과 차별을 두기 위해 새 프로젝트에서 코드를 작성해줄 것이다. 새 프로젝트를 만들어보자. 연습이란 이름으로 prac이란 이름의 폴더로 프로젝트를 만들었다. 그리고 파이썬 파일을 만드는데 이름은 app.py라고 하였다. 서버를 만드는 파일 이름을 통상 app.py라고 많이들 짓는다고 한다. 그래서 서버를 만들 때마다 app.py라고 이름을 통일할 것이다. 프로젝트를 새로 만들 때마다 사용할 패키지들을 다시 다운로드 받아줘야 한다. 웹 애플리케이션 개발을 위한 파이썬 프레임워크인 'Flask 프레임워크'를 설치해야 한다. 파이썬 라이브러리, 즉 패키지를 다운로드 받는 방법은 이전에 작성한 글에도 나와있지만 한번 더 설명하고 넘어가겠다.. 2021. 6. 4.
웹 / 나만의 영화저장 웹 만들기 / 영화 OpenAPI / Ajax와 jQuery를 활용한 예제/ 영화 API 활용한 웹 개발 웹 / 제이쿼리(jQuery)란 무엇인가/유용한공부사이트/함께해보는예제/쉬운설명/ w3schools 웹 / 제이쿼리(jQuery)란 무엇인가/유용한공부사이트/함께해보는예제/쉬운설명/ w3schools 다음은 자바스크립트보다 더욱 간결하게 웹 기능을 사용할 수 있는 '제이쿼리(jQuery)'에 대해 알아볼 것이다. jQuery 란 무엇인가? 제이쿼리는 '경량의 JavaScript 라이브러리'라고도 한다. 기존과 다 parkjh7764.tistory.com 이번에는 이전 글에서 잠깐 포스팅했던 골격을 활용할 것이다. 이전에는 '포스팅박스 닫기' 버튼을 누르면 아래의 URL 과 기사 내용을 입력하는 부분이 사라지는 것을 연습했다면 이번에는 그 아래, 포스트들을 이전부터 다뤘던 jQuery와 Ajax를 통해 다.. 2021. 5. 26.
웹 / 쇼핑몰 기능 추가하기 / Ajax와 jQuery로 쇼핑몰에 환율추가 해보기/ 환율 API 활용한 쇼핑몰 이전에 HTML, CSS, JavaScript에 요소들로만 제작하였던 웹 쇼핑몰(?) 비스무리한 것을 다시 한번 더 활용해보고자 한다. HTML, CSS, JavaScript와 함께 이전 글에서 쭉 다뤄왔던 Ajax와 jQuery를 사용해서 쇼핑몰에 기능을 추가하고자 한다. 이전에 간단하게 제작하였던 웹 쇼핑몰 주문 부분에 대한 코드 전부를 맨 아래에 첨부해놓겠다. 아직 미숙한 부분이 많아 불필요한 코드 부분이 있을 가능성이 있으니 복사해서 사용하시는 분은 효율적으로 고쳐서 써보면 좋을 것 같다. 혹시나 못 본 분들을 위해 이전 글에 어떤 방식으로 제작을 해보았는지 참고하면 좋을 것 같다. 웹 / 처음 제작해보는 나만의 웹 쇼핑몰 사이트 - HTML CSS JS / 자세한 설명 웹 / 처음 제작해보는 나.. 2021. 5. 22.
웹 / jQuery와 Ajax 예제 연습/ 고양이 사진 API 랜덤으로 바뀌는/ 강아지 사진 API/ OpenAPI/ 쉬운 예제와 설명 이번에 활용할 API에서는 고양이 사진을 데이터로 주는 API를 활용하는 것이다. 여기서 특이한 점은 해당 API에서 고양이 사진을 랜덤으로 준다. 이를 활용해볼 것이다. 아래의 구조는 API URL을 타고 들어가면 볼 수 있는 구조인데 이전에 다뤘던 API와 다른 점은 여러 개의 딕셔너리가 아니라 리스트 형태로 넘어온다. 그렇기 때문에 사진 주소를 활용하기 위해서는 API 주소는 아래에 첨부해 놓았다. 취향에 따라 고양이, 강아지를 선택하여 활용해보면 좋을 듯하다. 고양이 사진을 랜덤으로 주는 API API URL : https://api.thecatapi.com/v1/images/search 강아지 사진을 랜덤으로 주는 API https://api.thedogapi.com/v1/images/searc.. 2021. 5. 22.
웹 / jQuery와 Ajax 예제 연습/ 따릉이 API 활용해보기/ 서울시 OpenAPI/ 쉬운 예제와 설명 이전 글들에서 다뤘던 jQuery와 Ajax를 사용해보자. 이번에는 서울시에서 사용되고 있는 공유 자전거 '따릉이' API를 활용해 연습을 해볼 것이다. url : 서울시 열린 데이터 광장 / 공공자전거 실시간 정보 http://data.seoul.go.kr/dataList/OA-15493/A/1/datasetView.do 서울특별시 공공자전거 실시간 대여정보 서울특별시 공공자전거 실시간 대여정보입니다. 대여소별 실시간 자전거 대여가능 건수, 거치율, 대여소 위치정보를 제공합니다. 호출시 시스템 부하로 한번에 최대 1,000건를 초과할수 data.seoul.go.kr 위의 주소로 들어가게 되면 '서울 열린 데이터 광장' 사이트가 열린다. 서울특별시 공공자전거인 '따릉이'의 OpenAPI를 가져올 수 있다.. 2021. 5. 22.

티스토리툴바