잡담
길고 긴 웹개발 기초 강의를 끝냈다. 하지만 너무 급하게 달려온 탓일까 머리속에 남아있는게 별로 없는 듯한 기분이였다. 그래서 오늘은 배운거를 최대한 활용하면서 A~Z까지 스스로 해보자는 생각으로 웹을 개발하기로 했다.
AWS 클라우드기반 서버 제작하기
오늘 강의에서 AWS를 통해 외부의 PC를 구입하고 도메인을 구매해서 내가 만든 웹페이지를 다른 사람도 접속할 수 있게 세팅을 했다.
- AWS 서버컴퓨터 세팅
-
AWS(아마존 웹 서비스)의 EC2(인스턴스)를 시작한다.
1) Ubuntu Server 18.04 선택
2) 프리 티어 선택
3) 키 페어 선택 및 생성(키페어는 구입한 pc에 접속하기 위해 필요) -
git bash를 실행하고 다음과 같이 입력하여 구입한 pc에 접속한다.
ssh -i (이곳에 키페어를 가져다 놓는다) ubuntu@(내가 구입한 pc IPv4 입력)
-
mkdir 명령어로 폴더를 생성하고 파일질라 프로그램을 이용해 만든 프로그램을 넣는다.
프로그램을 실행하기 전에 pip명령어를 라이브러리를 설치한다.
-
mongoDB도 설치 한다.
-
프로그램을 실행한다.
git bash를 종료하면 서버가 종료되는 문제!
nohup python 프로그램이름 으로 프로그램을 실행시키면 git bash를 종료해도 서버는 유지된다!
프로그램을 종료할 때는 ps -ef | grep '프로그램이름' 으로 실행중인 프로그램의 번호를 찾아서 kill -9 번호 를 입력해서 종료한다.
- ogimage
og는 카카오톡과 같이 메신저에 링크를 올렸을 때 미리보기로 보여주는 모습을 얘기한다.
ogimage는 다음과 같이 설정할 수 있다.
<meta property="og:title" content="내 사이트의 제목" />
<meta property="og:description" content="보고 있는 페이지의 내용 요약" />
<meta property="og:image" content="{{ url_for('static', filename='ogimage.png') }}" />웹 개발
요즘 popcat이라는 사이트가 유행하길래 만들기도 쉬워보이고 간단해보여서 연습삼아서 따라 만들어 봤다. 하지만 아직 나에게는 쉬워보이는 웹사이트도 너무 어려웠다. popcat 사진을 클릭할 때마다 DB에 저장된 클릭 카운트 숫자의 값을 버벅임 없이 증가시켜주는 거는 마지막 까지도 해결하지 못했다. 그래도, 웹과 아주 조금 더 친해진 듯한 기분이 들었다... :(
- 의문 : jquery 마우스 클릭 감지가 왜 안되는지 잘 모르겠다
<div id="cat-image">TEST</div>
//라고 할때,
$('#cat-image').mousedown(function (){
alert('성공!');
}
//위 처럼 작성하면 실행이 안된다.
$(function () {
$('#cat-image').mousedown(function (){
alert('성공!');
}
})
//이것 처럼 작성하면 실행이 됬다.이때 처음의 경우 콘솔창에 입력 할 경우 실행이 된다...! 어째서...?
조금 더 $(function(){})에 넣은 것과 안 넣은 것의 차이에 대해 더 고찰해봐야 할 것 같다.
언제 서버를 닫을지 모르겠지만 열심히 만든 popcat 웹페이지 주소를 남겨놓겠다 :)
@@@추가 : 스마트폰에서는 popcat이 안움직인다. 어째서?
- 2021.09.17(수정): 스마트폰 TOUCH의 경우 mouse매소드로는 동작하지 않는다는 것을 확인함. touchstart,touchend와 같은 매소드를 사용해야함 이때, 두가지 이벤트를 동시에 확인 하기 위해서 on()매소드를 이용해 on('mousedown, touchstart' function()) {} 이런식으로 작성해서 해결했다.
오늘의 To-do List
1. 웹개발 기초 5강 수강
2. 웹사이트 A~Z 개발해보기
