개발(Develop)/웹(Web) _프로젝트project24 웹 / 메타태그(meta tag) 수정하기/ 내 쇼핑몰 카카오톡에 공유했을 때 나타나는 썸네일 수정하기 /og:title, og:image, og:description 이번 글에서는 내 쇼핑몰을 카카오톡에 공유했을 때 나타나는 '메타태그(meta tag)'를 바꿔보도록 하겠다. 메타태그는 이전 글에서도 다룬 적이 있는데, 한번 더 다뤄보도록 하겠다. 이전 글이 궁금하다면 아래를 클릭하도록 하자 ▼ 메타태그란 무엇인가?/ 메타(meta)태그 크롤링하기/ 네이버 영화 크롤링해서 웹에 메모하기 메타태그란? '메타(meta) 태그는 HTML을 통해 만든 웹 페이지를 브라우저가 개괄적으로 판단할 수 있도록 도움을 주기 위해서 사용하는 태그'이다. 그리고 메타 태그는 부분에 들어가서 사이트의 속성을 설명해준다. 예시로, 우리가 카카오톡으로 URL을 보냈을 때의 생김새를 보면 된다. 아래 예시는 내 티스토리 블로그를 카톡으로 전송했을 때의 사진이다. 카카오톡은 썸네일과 디스크립션을.. 2021. 6. 26. 웹서버 / 서버 컴퓨터에 도메인 주소 적용하기/ 가비아(gabia) 도메인 구매 후 도메인(domain) 적용하는 방법/ 도매인 구매대행 서비스 서버를 돌려 내가 만든 쇼핑몰을 13.124.8.152:5000이라는 IP 주소를 입력해 들어가보았다. 여기까지 오지 못 했다면 이전 글을 참고해서 따라오도록 하자 ▼ AWS서버 컴퓨터 DB에 접속하기/ mongoDB 서버 데이터베이스에 접속/ 컴퓨터 꺼둔 채로 서버 돌리는 방법 웹서버 / AWS서버 컴퓨터 DB에 접속하기/ mongoDB 서버 데이터베이스에 접속/ 컴퓨터 꺼둔 채로 서버 자. 아마존웹서비스(AWS) 사이트에서 구입한 서버 컴퓨터의 포트까지 열여주었다. 포트를 열어주어야 5000포트, 80포트로 서버에 들어갈 수가 있다. 거기까지 안 되어 있다면 아래를 참고해 포트를 parkjh7764.tistory.com 그런데 ! 만약에 내가 만든 웹 사이트라고 친구한테 '13.124.8.152:50.. 2021. 6. 22. 웹서버 / AWS서버 컴퓨터 DB에 접속하기/ mongoDB 서버 데이터베이스에 접속/ 컴퓨터 꺼둔 채로 서버 돌리는 방법/ nohup 설정, kill -9, 포트포워딩 자. 아마존웹서비스(AWS) 사이트에서 구입한 서버 컴퓨터의 포트까지 열여주었다. 포트를 열어주어야 5000포트, 80포트로 서버에 들어갈 수가 있다. 거기까지 안 되어 있다면 아래를 참고해 포트를 열어주자 ▼ AWS 포트 개방/ 리눅스 환경 Flask 프레임워크, pymongo 설치/ AWS에서 구입한 인스턴스 포트포워딩 서버 컴퓨터 IP의 포트까지 열어주었다면, 이번에 할 것은 다른 사람들이 내가 만든 웹 사이트를 볼 수 있도록 내가 만든 프로젝트를 서버 컴퓨터에 올려 띄우는 작업을 해보겠다. 우선, 내가 아닌 다른 사람들에게 보여줄 웹페이지가 있어야 한다. 나는 이전에 만들어두었던 '나만의 쇼핑몰'을 가져올 것이다. 필요하다면 아래에 있는 이전 글을 참고해 코드를 가져와 사용하도록 하자. ▼ 쇼핑몰.. 2021. 6. 20. 웹서버 / AWS 포트 개방/ 리눅스 환경 Flask 프레임워크, pymongo 설치/ AWS에서 구입한 인스턴스 포트포워딩 이 글을 보기 전에 웹 서버 컴퓨터의 개발환경을 세팅해주어야 한다. 이유는, 그래야 이번 글에서 몽고DB 데이터베이스를 다루고 pip나 python 명령어가 이전에 세팅해준 것으로 다룰 것이기 때문이다. 세팅은 이전 글에서 하고 오자 ▼ 리눅스 환경의 서버 컴퓨터 개발환경 세팅하기/ 서버 환경 명령어 통일하기/ pip, mongoDB, 시간 동기화, python3 웹서버 / 리눅스 환경의 서버 컴퓨터 개발환경 세팅하기/ 서버 환경 명령어 통일하기/ 환경설정 우선 파일질라(FileZilla) 프로그램을 켜서, 서버 컴퓨터에 접속을 한다. 접속하는 부분은 이전 글을 참고해서, 거기까지 완료하고 이 글을 보도록 하자 아래 참고 ▼ 파일질라(Filezilla)로 서버 접속 parkjh7764.tistory.co.. 2021. 6. 19. 웹서버 / 리눅스 환경의 서버 컴퓨터 개발환경 세팅하기/ 서버 환경 명령어 통일하기/ 환경설정 쉘 명령어/ pip, mongoDB, 시간 동기화, python3 우선 파일질라(FileZilla) 프로그램을 켜서, 서버 컴퓨터에 접속을 한다. 접속하는 부분은 이전 글을 참고해서, 거기까지 완료하고 이 글을 보도록 하자 아래 참고 ▼ 파일질라(Filezilla)로 서버 접속하기/ 서버에 파일 전송해 서버 컴퓨터로 파일 실행시켜보기 웹 / 파일질라(Filezilla)로 서버 접속하기/ 서버에 파일 전송해 서버 컴퓨터로 파일 실행시켜보기 파일질라(FileZilla)라는 FTP 프로그램을 통해 가상 컴퓨터, 즉 만들어둔 서버(server) 컴퓨터에 파일을 전송하고, 서버 컴퓨터에서 파일을 실행하는 과정을 해보자. FileZilla가 내 컴퓨터에 설치가 안 parkjh7764.tistory.com 이번 글에서 할 것은 서버 컴퓨터의 개발 환경을 세팅할 것이다! 이유는 우리.. 2021. 6. 15. 웹서버 / 서버 컴퓨터에 파일질라(Filezilla)로 접속하기/ 서버 컴퓨터에 파일 전송해 서버에서 실행시켜보기/ FTP 프로그램 파일질라(FileZilla)라는 FTP 프로그램을 통해 가상 컴퓨터, 즉 만들어둔 서버(server) 컴퓨터에 파일을 전송하고, 서버 컴퓨터에서 파일을 실행하는 과정을 해보자. FileZilla가 내 컴퓨터에 설치가 안 되어 있다면 아래를 클릭해 다운 받자 ▼ 파일질라(FileZilla) 설치하기/ FTP 프로그램 추천/ FTP란 무엇인가?/ 파일질라 설치 방법 파일질라(FileZilla) 설치하기/ FTP 프로그램 추천/ FTP란 무엇인가?/ 파일질라 설치 방법 파일질라(FileZilla)를 다운로드 받기 전에, 파일질라가 무엇인지부터 알아보자. 파일질라(FileZilla)란? 파일 질라는 쉽게 말해 'FTP 프로그램'이다. 개인 컴퓨터와 웹 사이트(웹 서버)간에 파일 전송 parkjh7764.tist.. 2021. 6. 12. 웹 / 페이스북 좋아요 기능 웹 사이트 만들기(2) - DB에 있는 데이터를 활용해 클라이언트에게 시각화하기 내용이 길 것 같아, 게시글을 나누어 프로젝트를 진행해보겠다. 개발환경 설정 및 데이터베이스(DB) 준비는 아래 참고 ▼ 페이스북 좋아요 기능 웹 사이트 만들기(1) - 개발환경 설정 및 크롤링을 통한 데이터베이스(DB) 준비 기본 틀 웹페이지의 모습이다. 디자인 부분에 있어서 조금 허접(?)한 느낌이 있지만 좋아요나 없애기 등, 필요한 기능에 대해서는 충실한 편이다. 웹 페이지 HTML 기본 틀 index.html 파일 / My favorite actor . HTML 기본 틀 코드 My Favorite Actor🙈 내가 좋아하는 배우 순위♥ 문채원 (좋아요: 1004) 오늘의 연애(영화제목) 좋아요 없애기 해당 프로젝트에서는 app.py 파일에서 서버와 API를 제공하고, 데이터베이스(DB)를 활용할 .. 2021. 6. 10. 웹 / 페이스북 좋아요 기능 웹 사이트 만들기(1) - 개발환경 설정 및 크롤링을 통한 데이터베이스(DB) 준비 오늘 할 프로젝트 이번에 할 프로젝트는 영화 유명 배우들의 프로필을 만들고 우리가 좋아요를 누르거나 싫어요, 삭제를 누르는 등의 평가를 할 수 있는 예를 들면 페이스북 좋아요 기능(?) 비슷한 것을 구현해보고자 한다. 새 프로젝트를 만들어준다. 매일 색칠을 해서 가리는 부분은... 개인정보라 이해해주길 바란다. 새 프로젝트가 생성되었다면 아래와 같이 static 폴더, templates 폴더, index.html 파일, app.py 파일을 만들어준다. static 폴더에는 CSS나 이미지 파일들을 담아둘 때 사용할 것이다. 그리고 templates 폴더에는 HTML 파일들을 담아둘 때 사용할 것이다. 그리고 서버로 활용할 app.py 파일 templates 폴더에 index.html 파일 그리고 라이브러.. 2021. 6. 8. 웹 / 쇼핑몰 서버와 데이터베이스(DB) 관리하기/ 쇼핑몰 주문자 정보 관리하기/ 웹 쇼핑몰 만들어보기 이번 글에서는 쇼핑몰에서 클라이언트가 주문한 내용을 데이터베이스에 저장하고, 다시 클라이언트에게 보여주는 것을 해볼 것이다. 그 전에 쇼핑몰에 대한 기본 틀이 있어야 한다. 직접 만들어도 좋지만 예전에 만들어둔 것이 있다. 쇼핑몰 기본 틀 가져오기/ 아래 클릭▼ 웹 / 쇼핑몰 기능 추가하기 / Ajax와 jQuery로 쇼핑몰에 환율추가 해보기/ 환율 API 활용한 쇼핑몰 웹 / 쇼핑몰 기능 추가하기 / Ajax와 jQuery로 쇼핑몰에 환율추가 해보기/ 환율 API 활용한 쇼핑몰 이전에 HTML, CSS, JavaScript에 요소들로만 제작하였던 웹 쇼핑몰(?) 비스무리한 것을 다시 한번 더 활용해보고자 한다. HTML, CSS, JavaScript와 함께 이전 글에서 쭉 다뤄왔던 Ajax와 jQuer.. 2021. 6. 7. 이전 1 2 3 다음
