상황을 설명하자면,

ec2 인스턴스(ubuntu 16.04 LTS) 위에서 돌리고 있는 서버에서 git push한 저장소를 

windows 환경에서 git pull로 가져와서 수정하려다가 난 에러이다.

pip install -r requirements.txt  명령어를 이용하여 가상환경에 필요한 dependency들을 설치하려고 했는데, 

No matching distribution found for pkg-resources==0.0.0

이러한 에러 메세지가 뜨면서 설치가 되지 않는 것이었다.

문제는 ubutu 16.04 LTS과 windows과의 호환성 문제에 있는 것이었다.

해결책은 단순히 requirements.txt 를 켜서 해당 line을 삭제하고

다시 pip install -r requirements.txt 명령어를 터미널에 치면 된다.

캡틴 판교(장기효) 님의  [Vue로 구현하는 PWA] 강의를 듣고 중요 내용을 요약하여 정리합니다.

아래 깃헙블로그에서 가독성 좋게 보실 수 있습니다.

https://nuatmochoi.github.io/notesite/06.html#vue-router

Router, PWA

Vue Router

npm install vue-router

페이지 전체 정보가 routes 라는 곳에 들어가게 된다.

// src/router/index.js
{
    path: '/home',
    component: HomePage 
},

이 정도로 path마다 뿌려지는 component 구현으로 충분하지만, tag를 정의하기 위해서 router view를 정의한다.
는 뷰 라이브러리를 썼을 때 제공하는 router 태그이다.

• router-link

a href와의 차이 : to, replace 등의 vue-router에서 제공해주는 기능 제공 여부

url을 바꿨는데도 서버로 가지 않고 js파일로 조작이 어떻게 가능한가? -> window history

• router 구성방법

1. 기본 방식 : 요구사항이 많이 바뀌는 경우에 사용 (단순하게 구성)
2. nested router
3. named view

• SPA(Single Page Application)

예전에는 화면에 바뀌는 것을 수정하기 위해서 전체 파일을 받아오기 위해 서버까지 접근했는데,
요즘에는 바뀌는 부분만 서버에 가서 요청함. 해당 역할을 vue router가 수행

PWA

Workbox가 가장 최신의 라이브러리이다.

• 모바일 앱과 같은 경험을 주는 최신 웹 앱
• 앱 icon, 앱 설치 banner, 모바일 push(notification), offline 경험 제공
• html, css, js로 모바일과 같은 웹앱 구현
• 높은 사용자 경험을 제공하기 위한 웹앱 (페이징 속도를 올리는 등)

https://vuejsdevelopers.com, https://dev.to 와 같은 사이트들이 PWA로 개발이 되었다. 웹 어플리케이션으로 설치가 가능한 것을 확인할 수 있다.

PWA 특징

• App-like
• Discoverable
• Engagable (push 알람이 왔을 때 다시 앱으로 유입)
• Connectivity (오프라인 웹앱 - 인터넷이 끊겨도 웹사이트가 잘 동작함)
• https 위에서만 동작한다.
• 포보스나 익스페디아 등 많은 기업에서 사용한다.
• 일반 웹사이트와 동작이 다르다. PWA는 앱으로 설치하고 실행했을 때, launching image가 있어 모바일 앱 같아 보이고, 위에 url bar가 존재하지 않는 것을 확인할 수 있다.

PWA를 구성하는 기술

1. Web App Manifest (manifest.json)
2. Service Workers (client-side javascript proxy) - 웹앱과 webserver 사이에 존재 (caching)

PWA 지원 브라우저

• 파이어폭스, 오페라, 크롬, 삼성 인터넷, 엣지, 사파리(push 지원X) 등
• 삼성 인터넷과 크롬은 대부분의 기능을 제공한다.

PWA는 실제 앱 마켓에 배포가능하다?

• OS레벨까지 내려왔음
• application 관리 tab으로 존재함
• 플레이스토어에 배포하기 위해서는 mapping 하는 작업이 추가로 필요할 뿐이다.

Web App Manifest

PWA의 설치와 앱 구성정보를 담고 있는 파일 (앱 아이콘, 런쳐 방식, 배경, 시작페이지 등)

<link rel="manifest" href="manifest.json">

아래 것들이 설정될 수 있음.

• start url
• launch image
• display type : 웹앱이 모바일 앱의 느낌을 가질 수 있도록 결정짓는 속성 (전체 모양)
  • Standalone
  • Browser
  • Fullscreen
  • Minimal-ui
• display orientation
• App icon
• 배경 색 : background color와 비슷하게 하는 것이 좋다.

Web App Install Banner

PWA가 모바일적인 특징을 가지는 큰 부분

• 기존 앱 개발주기 : 구현 -> SDK 빌드 -> 스토어 배포 -> 검색 -> 앱 다운로드 -> 설치 -> 사용
• PWA 앱 개발주기 : 구현 -> 사이트 배포 -> 검색 -> 사용 (자동설치, 항상 최신상태 유지)

install banner 동작조건

• short name
• name
• icons (including a 192px and a 512px version)
• https

사용자가 30초만 사이트에 머무르면, install banner가 뜬다. (타이밍은 조절 가능)

Service Worker

약자로 sw.js와 같이 많이 쓰임

chrome://inspect/#service-workers
-> 현재 브라우저에서 돌아가고 있는 service worker를 전부 볼 수 있는 개발자도구

주요특징

• Caching
• Offline
• Native features (push 등)

Service worker는 브라우저와 서버 사이의 별도의 js가 돌아가는 것 (미들웨어)

• 실제적으로는 브라우저 뒤에 별도의 쓰레드 (멀티 쓰레드 개념)가 돌아가고 있다. (scope도 다르다)
• 같은 동작을 했음에도 기존 js와 결과가 다르게 나온다.

이전에도 Service worker와 비슷한 개념은 존재했다.

1. AppCache

• 오프라인경험을 제공하기 위한 캐시 제공, HTML 표준
• 페이지가 여러 개 일때 오동작, 파일 변화할 때 문제

2. Shared Workers

• js와 별도의 쓰레드
• 페이지에 비종속적 (페이지가 새로고침되더라도, js파일은 새로고침되지 않음)

이런 것들을 보완하기 위해서 등장한 것이 service worker이다.

참고

// #1 - 서비스 워커 설치(캐싱 파일 생성)
self.addEventListener('install', function(event){ // self : app.js에서의 window와 동일 - 바로 window 객체에 접근할 수 없기 때문에 사용
    console.log('서비스 워커 설치 완료')
    event.waitUntil(
        caches.open(cacheName)
        .then(function(cache){
            console.log('캐시 생성 완료');
            cache.addAll(cacheFilelist);
        })
        .catch(function(error){
            console.log(error);
        })
    );
})

오프라인에서도 돌아가게끔 캐시 작업을 한 것이다.

// #2 - 서비스 워커의 네트워크 요청 가로채기 코드 작성
self.addEventListener('fetch', function(event){
    // localhost:5000/teemo.png 요청
    event.respondWith(
        caches.match(event.request)
        .then(function(response){
            if (response){
                return response;
            }
            return fetch(event.request);
        })
        .catch(function(){
            console.log(error);
        })
    )
})

PWA 적용하는 방법

1. Vue create로 만들 때 PWA Support 옵션으로 생성
2. 이미 만들어진 app에 적용하려면,
   1. public 폴더 밑의 index.html에 link tag로 manifest 연결
   2. manifest.json 생성
   3. main.js에 service worker 등록

python으로 requests와 bs4 모듈을 이용하여 웹크롤링할 때에

requests.exceptions.ConnectionError: ('Connection aborted.', BadStatusLine('ICY 401 Service Unavailable\r\n'))

라는 에러메세지가 뜰 때가 있었다.

대략 찾아보기로는 프록시 서버에 접속 요청을 보낼 때 생기는 것 같은데 해결책은 간단하다.

pip install fake-useragent

로 fake-useragent 모듈을 설치하고,

from fake_useragent import UserAgent


ua = UserAgent()
url = "주소"
headers = {'User-Agent' : ua.random}

r = requests.get(url, headers=headers)

이러한 식으로 headers에 random한 user-agent 값을 넣어서 보내면 정상적으로 실행된다.

오픽 IH 취득한 지는 좀 됐는데 그냥 자랑하고 싶어서 글 쓰는 거다 ㅎㅎ..

어플로 공부한 건 학기 중에 시간날 때 진짜 널널하게 놀면서 했고, 제대로 준비한 건 하루 정도라고 봐도 무방하다.

그동안 원체 영어에 자신이 없었기도 했고, 2020년 목표로 영어 공부를 포함시켜 놔서, 하나씩 목표를 성취해가고 있다는 느낌이 든다. 

공부 방법은 크게 3가지 정도로 준비를 했었다. 시험장에서 난이도는 4-4로 설정했다.

1. Opicup

오픽업이라는 어플이 있다. 결제하면 더 많은 도움을 받을 수 있지만, 기간을 넓게 잡고 조금 널널하게 공부하는 거면 과금하지 않아도 충분하다. 나도 그러기도 했고.

오픽 특성상 주제별로 어떤 형식으로 문제가 출제되는지 파악하는 것이 중요한데, 그걸 자연스럽게 체험하는 데에 이 어플만한 것이 없는 것 같다.

주제별로 답변하기 좋은 문장들을 발음 체크하면서 연습할 수 있다. 발음 연습 같은 경우는 전부 무료!

실전 문제는 하루에 3개 정도씩 무료로 제공되는데, 발화량, 말하는 속도, 발음 정확도 등 오픽에서 중요하게 평가되는 부분에 대해서 평가해 준다. 개인적으로 많은 도움이 되었다.

추가적으로 실제 시험에서 오픽 난이도를 4-4, 4-5 정도로 잡으면 돌발 질문이 몇 개씩 들어오는데, 이 어플은 돌발 질문 대비하기도 상당히 좋다. 

2. 오픽노잼

https://www.youtube.com/channel/UCw4izi2fsJzFltt3EbmokWA

영어 자신감이 부족했던 나에게 자신감을 만땅으로 채워준 '그 채널'.

내가 생각하기에는 오픽은 자신감이 90%인 것 같다. 

쉬운 단어를 사용해서 발화량이 많게 보여라, 필터 사용을 꺼리지 마라, 스크립트 준비해가지 마라, 만능 답변 준비 등 다양한 꿀팁을 얻기 좋다. 필터와 만능 답변 준비하는 데에 크게 도움이 되었다.

솔직히 영어 좀만 하는 사람들이면 이 채널 하루만 보고도 오픽 고득점 가능할 것 같다. 

3. 암기고래 

단어 공부하는 데 매우 좋은 어플이다.

오픽 특성상 발화량이 많아야되고 끊김 없이 쭉 말을 이어나가야 한다. 그러기 위해서는 단어를 많이 아는 것이 매우 필수적이라 생각했고, 단어 공부를 좀 하긴 했다.

이 어플로 말하자면 개인 단어장을 만들 수 있고, 단어들에 대해 위 그림처럼 말로 설명도 해준다. 발음도 같이 말해줘서 정확한 발음으로 배울 수 있는 장점도 있다. 무엇보다도 그냥 보면서 단어를 외우는 것보다, 귀로도 들리고 눈으로도 보니까 단기간에 훨씬 더 많은 단어를 외울 수 있는 것 같다. 

나는 오픽 취득 후에 현재 토익도 공부하고 있는데, 토익 단어 공부에도 좋다. 토익 공부에는 산타보카도 괜찮은 어플이지만, 이 어플도 많이 쓰고 있다! 암튼 강추강추.

AWS EC2 시작

1.

https://aws.amazon.com/ko/에서 AWS에 가입한다.

12개월 동안 프리티어(지정된 한도 내에서 무료)로 AWS 서비스를 사용 가능하기 때문에 안심하고 가입해도 된다.

2.

로그인 후에 상단 <서비스> 탭에서 EC2를 클릭하여 EC2 대쉬보드로 들어간다.

그리고 왼쪽 네비게이션 바에서 [네트워크 및 보안] - [키 페어]를 누르고, 키 페어를 생성한다. 

키 페어가 생성되면 꼭 [키 페어 다운로드] 를 눌러 컴퓨터에 저장해놓자. 인스턴스 접속 단계에서 필요하다.

3.

<인스턴스 시작> 버튼을 눌러서 새로운 인스턴스를 시작한다. 

프리티어로 Ubuntu 18.04과 16.04 버전이 있는데, 낮은 버전으로 사용해보니까 가상환경 설정 등에서 귀찮은 부분이 생기긴 하더라.

그러한 이유로 18.04 버전을 추천하지만, 최근에 실습해본 것은 16.04 버전이므로 이것으로 설명을 진행하겠다.

추후 18.04 버전으로 실습을 진행하고, 해당 내용에 대해서 추가하도록 하겠다.

4. 

[검토 및 시작] 버튼을 눌러 [단계 7: 인스턴스 시작 검토] 로 넘어간다.

<시작> 버튼을 눌러 키페어를 선택하고, <인스턴스 시작 버튼> 클릭

여기까지 진행하면 인스턴스가 생성되었을 것이다.

인스턴스 접속

윈도우 기준으로 설명하겠다. Linux나 Mac 같은 경우는 ssh를 사용해서 접속하더라.

윈도우는 putty를 이용해서 접속하는 것이 편하다.

1.

https://www.chiark.greenend.org.uk/~sgtatham/putty/latest.html

위 링크에서 putty를 다운로드 받을 수 있을 것이다. 

2.

다운 받고 나서, puttygen.exe를 먼저 실행해준다.

Load를 클릭하고, 위 단계에서 다운로드 했던 키페어 파일을 선택한다.

[Save private key]를 클릭하고 [Yes] 클릭하고 .ppk 파일을 저장해준다.

3. 

putty.exe 를 실행하고, EC2 사이트에서 Public DNS 를 복사하여 Host Name에 붙여넣기 한다.

Host Name 앞에 ubuntu@ 를 적어준다.

왼쪽 tab에서 Connection - SHH - Auth 클릭 후 , [Browse] 클릭하고, 아까 저장했던 .ppk 파일을 등록한다.

Session 탭으로 다시 돌아가서 추후에도 접근이 쉽도록 Saved Session에 이름 작성하고 Save 버튼 눌러서 session 저장해놓자. 

[Open] 버튼 눌르면 경고창이 뜨는데 [Yes] 클릭

login as: 라는 화면이 뜰 것이다.

ubuntu 라고 입력하면 AWS EC2에 접속이 완료될 것이다.

여기까지 EC2 인스턴스 생성 및 접속이 완료되었다!!

django로 만든 웹크롤링 사이트를 iframe 태그로 다른 html에 뿌려줘야하는 상황이 있었다.

그냥 iframe 태그로 뿌리니까 해당 사이트에서 연결이 거부되는 문제가 있었다.

아래 방법으로 해결하였다. 적용은 AWS EC2 등 다른 서버에서도 동일하다.

해결책은

from django.http import HttpResponse
from django.views.decorators.clickjacking import xframe_options_exempt

@xframe_options_exempt
def ok_to_load_in_a_frame(request):
    return HttpResponse("This page is safe to load in a frame on any site.")

이처럼 decorator를 사용하면 가장 간단히 해결할 수 있다.

다른 방법도 있는데 middleware를 사용하는 것이다.

setting.py에 아래 코드를 추가해주면 된다.

MIDDLEWARE = [
    ...
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
    ...
]

X_FRAME_OPTIONS = 'DENY'

참고문서 : https://docs.djangoproject.com/en/1.10/ref/clickjacking/#how-to-use-it