자바스크립트에 대한 설명과 스펙에대한 설명을 중심으로 공부한 내용을 작성했습니다. 기준으로 공부 하는 책은, "몰입! 자바스크립트 완전하게 내 것으로 만들기 ㅡ ITC 출판사" 입니다.
2015년에 출판된 책인 만큼, 최신이 아닌 부분도 많이 있고, 제가 잘못 생각하고 적은 부분도 있을 수 있습니다. 그런 부분이 있다면 지체없이 댓글로 피드백 바랍니다.
* 국민대학교 빅데이터 분석학회 D&A Session에서 진행한 자료입니다. 웹 크롤링에 대한 기본적인 개념과 파이썬과 관련된 소스 코드를 담았습니다.
* 아래는 PPT에 포함된 크롤링 예제 코드입니다. https://drive.google.com/file/d/1ty7JLz8ccicPTrpry4dpkqCGuTclA68M/view?usp=sharing
[Kor]
JSP 코딩시 기본사용 요소들을 정리한 파워포인트 입니다.
JSP 지시어, 스크립트 요소 들에 대해서 간략하게 정리했습니다.
[EN]
This PowerPoint is Summary of JSP
Summary of JSP Directive and JSP Scripting Elements
자바스크립트에 대한 설명과 스펙에대한 설명을 중심으로 공부한 내용을 작성했습니다. 기준으로 공부 하는 책은, "몰입! 자바스크립트 완전하게 내 것으로 만들기 ㅡ ITC 출판사" 입니다.
2015년에 출판된 책인 만큼, 최신이 아닌 부분도 많이 있고, 제가 잘못 생각하고 적은 부분도 있을 수 있습니다. 그런 부분이 있다면 지체없이 댓글로 피드백 바랍니다.
* 국민대학교 빅데이터 분석학회 D&A Session에서 진행한 자료입니다. 웹 크롤링에 대한 기본적인 개념과 파이썬과 관련된 소스 코드를 담았습니다.
* 아래는 PPT에 포함된 크롤링 예제 코드입니다. https://drive.google.com/file/d/1ty7JLz8ccicPTrpry4dpkqCGuTclA68M/view?usp=sharing
[Kor]
JSP 코딩시 기본사용 요소들을 정리한 파워포인트 입니다.
JSP 지시어, 스크립트 요소 들에 대해서 간략하게 정리했습니다.
[EN]
This PowerPoint is Summary of JSP
Summary of JSP Directive and JSP Scripting Elements
어느 해커쏜에 참여한 백엔드 개발자들을 위한 교육자료
쉽게 만든다고 했는데도, 많이 어려웠나봅니다.
제 욕심이 과했던 것 같아요. 담번엔 좀 더 쉽게 !
- 독자 : 백엔드 개발자를 희망하는 사람 (취준생, 이직 희망자), 5년차 이하
- 주요 내용 : 백엔드 개발을 할 때 일어나는 일들(개발팀의 일)
- 비상업적 목적으로 인용은 가능합니다. (출처 명기 필수)
빅데이터, 데이터마이닝, 공공데이터, 오픈데이터 - 그 어느때보다 데이터 분석 및 활용이 중요해진 이 시기에 웹 상의 수많은 공개된 자료를 직접 수집할 수 있는 웹 스크래핑/크롤링 기술은 데이터 수집 및 활용 능력에 큰 도움이 됩니다.
이 강의에서는 크롤링 프레임웍을 사용하지 않고 HTTP, DOM, concurrency를 담당하는 기본적인 라이브러리만을 사용해 직접 웹 스크래퍼를 처음부터(from scratch) 작성해 봄으로써, 언제든 자유도 높은 동시성 크롤러를 직접 구현할 수 있도록 작동 원리를 이해할 수 있도록 합니다.
시연에서 작성된 전체 소스코드는 아래 링크에서 보실 수 있습니다.
https://gist.github.com/cornchz/0ec0c3f5ca69bac2b625
Session 1 - 김득중 쇼핑검색 React 전환 경험 공유
2019년 9월 6일 네이버 쇼핑 개발자 meet up 행사인 'SHOWROOM' 에 발표된 자료입니다.
보다 자세한 내용은 http://nshop-developer.github.io 을 참고해주세요.
(2019년 9월 30일 오후 오픈 예정)
(GameTech2015) Live Operation by Adbrix의 Node.js와 MongoDB를 이용한 멀티테넌트 인프라 구축사례Jeongsang Baek
대부분의 중소 모바일 게임 업체는 앱을 잘 만들기에도 시간이 모자라 출시일을 잘 맞추기 급급한 상황이다. 그러다 보니 운영을 위한 툴은 소홀히 개발하는 경우가 대부분이고 운영 캠페인은 날림으로 개발하거나 그때 그때 개발자가 필요한 부분만 개발하기 일쑤다. 그러다보니 마케터는 결국 늘 개발자 눈치만 살피게 된다. 필자는 블루윈드에서 이러한 문제를 절감했고 '모바일 게임 개발사가 앱 개발에만 집중할 수 있게 해주고 싶다'는 IGAworks의 철학에 공감하여 라이브 오퍼레이션 프로젝트를 시작하게 되었다.
라이브 오퍼레이션의 개발 중점과제는 5가지였다. 첫번째, 다수의 개발사가 하나의 큰 클라우드 시스템을 사용하도록 multi-tenant 인프라를 구축해야 한다. 두번째, TCO(Total cost of ownership)를 최소화해야 한다. 세번째, 앱의 핵심유저를 실시간으로 그룹화하여 타게팅 캠페인을 할 수 있어야 한다. 네번째, 캠페인의 성과를 마케터에게 실시간으로 피드백해야 한다. 다섯째, 3개월 안에 정식 서비스가 되어야 한다는 점이었다. (왜 우리에게 주어지는 시간은 늘 3개월인가) 그리고 당연하지만 이 서비스를 혼자 개발해야 했다.
이 다섯가지 이슈를 해결하기 위하여 AWS 클라우드 상에 생산성과 성능이 검증된 node.js 와 mongodb를 이용하여 서비스 백엔드를 구성하였고, multi-tenant를 구성하기 위한 여러가지 고민과 그 해결책을 직접 구현하였다. 필자는 node.js와 mongodb를 사용해 본 경험이 충분하다 생각했지만 대규모 정식 서비스를 진행하며 많은 함정에 빠졌고 결국 해결했다.
이 발표를 통해 청강자는 node.js와 mongodb를 이용하여 multi-tenant 인프라를 구축해야 할 때 고려해야 할 설계 방식과 기술적인 고민, 그것에 대한 현실적인 해법을 얻을 수 있다.
[111015/아꿈사] HTML5를 여행하는 비(非) 웹 개발자를 위한 안내서 - 1부 웹소켓.sung ki choi
ajax 등장 이전부터, ajax, comet, 그리고 html5의 웹소켓까지 기술의 흐름을 간략하게 정리해 보았습니다.
웹 어플리케이션의 개발을 다뤄보지 않은 개발자들을 대상으로 처음부터 웹소켓을 다루기 전에,
1. 이전 세대의 통신 기법은 어떤 모양이었는지
2. 웹소켓이 왜 환영받을 만한 기술인지
... 등을 공감할 수 있기 위한 목적으로 PT를 작성 하였습니다.
어느 해커쏜에 참여한 백엔드 개발자들을 위한 교육자료
쉽게 만든다고 했는데도, 많이 어려웠나봅니다.
제 욕심이 과했던 것 같아요. 담번엔 좀 더 쉽게 !
- 독자 : 백엔드 개발자를 희망하는 사람 (취준생, 이직 희망자), 5년차 이하
- 주요 내용 : 백엔드 개발을 할 때 일어나는 일들(개발팀의 일)
- 비상업적 목적으로 인용은 가능합니다. (출처 명기 필수)
빅데이터, 데이터마이닝, 공공데이터, 오픈데이터 - 그 어느때보다 데이터 분석 및 활용이 중요해진 이 시기에 웹 상의 수많은 공개된 자료를 직접 수집할 수 있는 웹 스크래핑/크롤링 기술은 데이터 수집 및 활용 능력에 큰 도움이 됩니다.
이 강의에서는 크롤링 프레임웍을 사용하지 않고 HTTP, DOM, concurrency를 담당하는 기본적인 라이브러리만을 사용해 직접 웹 스크래퍼를 처음부터(from scratch) 작성해 봄으로써, 언제든 자유도 높은 동시성 크롤러를 직접 구현할 수 있도록 작동 원리를 이해할 수 있도록 합니다.
시연에서 작성된 전체 소스코드는 아래 링크에서 보실 수 있습니다.
https://gist.github.com/cornchz/0ec0c3f5ca69bac2b625
Session 1 - 김득중 쇼핑검색 React 전환 경험 공유
2019년 9월 6일 네이버 쇼핑 개발자 meet up 행사인 'SHOWROOM' 에 발표된 자료입니다.
보다 자세한 내용은 http://nshop-developer.github.io 을 참고해주세요.
(2019년 9월 30일 오후 오픈 예정)
(GameTech2015) Live Operation by Adbrix의 Node.js와 MongoDB를 이용한 멀티테넌트 인프라 구축사례Jeongsang Baek
대부분의 중소 모바일 게임 업체는 앱을 잘 만들기에도 시간이 모자라 출시일을 잘 맞추기 급급한 상황이다. 그러다 보니 운영을 위한 툴은 소홀히 개발하는 경우가 대부분이고 운영 캠페인은 날림으로 개발하거나 그때 그때 개발자가 필요한 부분만 개발하기 일쑤다. 그러다보니 마케터는 결국 늘 개발자 눈치만 살피게 된다. 필자는 블루윈드에서 이러한 문제를 절감했고 '모바일 게임 개발사가 앱 개발에만 집중할 수 있게 해주고 싶다'는 IGAworks의 철학에 공감하여 라이브 오퍼레이션 프로젝트를 시작하게 되었다.
라이브 오퍼레이션의 개발 중점과제는 5가지였다. 첫번째, 다수의 개발사가 하나의 큰 클라우드 시스템을 사용하도록 multi-tenant 인프라를 구축해야 한다. 두번째, TCO(Total cost of ownership)를 최소화해야 한다. 세번째, 앱의 핵심유저를 실시간으로 그룹화하여 타게팅 캠페인을 할 수 있어야 한다. 네번째, 캠페인의 성과를 마케터에게 실시간으로 피드백해야 한다. 다섯째, 3개월 안에 정식 서비스가 되어야 한다는 점이었다. (왜 우리에게 주어지는 시간은 늘 3개월인가) 그리고 당연하지만 이 서비스를 혼자 개발해야 했다.
이 다섯가지 이슈를 해결하기 위하여 AWS 클라우드 상에 생산성과 성능이 검증된 node.js 와 mongodb를 이용하여 서비스 백엔드를 구성하였고, multi-tenant를 구성하기 위한 여러가지 고민과 그 해결책을 직접 구현하였다. 필자는 node.js와 mongodb를 사용해 본 경험이 충분하다 생각했지만 대규모 정식 서비스를 진행하며 많은 함정에 빠졌고 결국 해결했다.
이 발표를 통해 청강자는 node.js와 mongodb를 이용하여 multi-tenant 인프라를 구축해야 할 때 고려해야 할 설계 방식과 기술적인 고민, 그것에 대한 현실적인 해법을 얻을 수 있다.
[111015/아꿈사] HTML5를 여행하는 비(非) 웹 개발자를 위한 안내서 - 1부 웹소켓.sung ki choi
ajax 등장 이전부터, ajax, comet, 그리고 html5의 웹소켓까지 기술의 흐름을 간략하게 정리해 보았습니다.
웹 어플리케이션의 개발을 다뤄보지 않은 개발자들을 대상으로 처음부터 웹소켓을 다루기 전에,
1. 이전 세대의 통신 기법은 어떤 모양이었는지
2. 웹소켓이 왜 환영받을 만한 기술인지
... 등을 공감할 수 있기 위한 목적으로 PT를 작성 하였습니다.
2. 목차
웹 페이지
웹과 AJAX
SPA 프레임워크
검색엔진과 SEO
검색엔진과 SPA
Headless-Browser
Prerender.io
Sencha
Sencha-SEO
시장성
MINT-SOFT2
3. 웹 페이지
3대 구성 요소
HTML
CSS
javascript
HTML
실제 웹 페이지의 내용
javascript
웹 페이지의 요소를 조작 및 처리
CSS
웹 페이지의 UI 및 스타일을 처리
MINT-SOFT3
4. 웹과 AJAX(1)-전통적인 방식
(1).페이지 요청
(3).생성된 html를 전송
2.요청된 페이지
를 파싱후 html
을 생성
(4).생성된 html
읽음
MINT-SOFT4
웹서버사용자
5. 웹과 AJAX(2)-AJAX 도입
(1).페이지 요청
(3).생성된 html를 전송
2.요청된 페이지
를 파싱 후 html
을 생성
(4).생성된 html
읽음
(5).ajax로 새로운 내용 요청
(6).요청에 맞는
컨텐츠를 생성(7).생성된 컨텐츠를 전송
(8).전송받은
컨텐츠를 html 요
소로 추가
MINT-SOFT5
사용자
웹서버
6. 웹과 AJAX(3)-AJAX의 극단적 사용
(1).페이지 요청
(3).생성된 html를 전송
2.비어있는 html
전송
(4).생성된 html
읽음
(5).ajax로 새로운 내용 요청
6.요청된 맞는 컨
텐츠 를 생성(7).생성된 컨텐츠 를 전송
(8).전송받은
컨텐츠를 html 요
소로 추가
MINT-SOFT6
사용자
웹서버
7. SPA 프레임워크(1)-용어정리
SPA(Single Page Application)
앞에 나온 AJAX를 극단적 사용을 기반으로 웹 구조
하나의 HTML 페이지로 부터 동작하는 웹 어플리케이션
hash-URL(#)
SPA에서 url을 표현하기 위해 #을 붙인 URL 구조
(ex) http://www.example.com/#list
hashbang(#!)
SPA에서 검색엔진이 읽을 수 있도록 hash-URL을 수정한 규칙
(ex) http://www.example.com/#!list
MINT-SOFT7
8. SPA 프레임워크(2)-SPA의 동작 방식
페이지로딩
• 서버로 부터 하나의 html을 전송 받음(비어있는 껍데기 페이지)
• javascript,css등도 전송 받음
javascript 실행
• html 로딩이 완료 후 hashbang url에 따라
javascript로 페이지 생성
• 페이지 생성 이후 서버로 데이터 요청
데이타 전송
• javascript가 요청한 데이터를 전송함.
• 전송 받은 데이터로 컨텐츠 생성해서 보여줌
javascript가 실행되어야만 하나의 페이지가 구성됨
MINT-SOFT8
12. 검색엔진과 SEO(3)-SEO 정의 및 방법
SEO
웹 페이지 검색엔진이 자료를 수집하고 순위를 매기는 방식에 맞게 웹 페이지
를 구성해서 검색 결과의 상위에 나올 수 있도록 하는 작업
메타태그활용
• html의 meta 태그
를 이용해서 현재
페이지를 검색 봇
에게 알림
사이트 맵
• 현재 사이트의 페
이지 목록을 검색
봇 에게 알림
url 구조개선
• 이해하기 쉬운 url
로 구조개선
검색엔진에게 페이지를 쉽게 가져가도록 하기 위한 방법
MINT-SOFT12
14. 검색엔진과 SPA 프레임워크(1)-필수요소
"웹을 크롤링 하기 위해선 javascript가
필요 없어.
오직 하나의 완성된 html이 필요해"
"하나의 페이지를 완성하기 위해선 반
드시 javascript가 실행되어야만 해
javascript가 실행되기 전까진 난 빈 껍
데기일 뿐이야."
검색 봇 SPA
MINT-SOFT14
15. 검색엔진과 SPA 프레임워크(2)-대화
웹사이트 크롤링하게 페이지 줘봐
검색봇 과의 대화
줄게. 단 반드시 javascript 실행해야되
난 javascript가 필요 없어.
결국 너의 페이지는 빈 껍데기네
아니야.제발 javascript를 실행해줘
검색봇님께서 퇴장하였습니다.
MINT-SOFT15
16. 검색엔진과 SPA 프레임워크(3)-검색봇 제안
"수많은 SPA들은 아래와 같이 처리해준다면 크롤링해서
검색엔진에 등록 시켜줄게."
• url에 페이지를 표시하는 부분 변경
• #(hash)대신에 #!(hashbang)을 사용
URL 구조변경
• 너희 서버는 #!를 읽지 못하니 다른 방법으로 서버에 요청
• 크롤링때 #!을 _escaped_fragment_로 바꿔서 서버에 재 요청
크롤링
• _escaped_fragment_로 서버에 요청 할 때 하나의 완성된 html 필요
• 전송 받은 완성된 html를 검색엔진에 등록
html
MINT-SOFT16
17. 검색엔진과 SPA 프레임워크(4)-필수 작업
SPA Server 개발
(php,java,asp...)
SPA Client 개발
(javascript)
검색 봇을 위한 html 개발
(php,java,asp...)
MINT-SOFT17
개발자
18. 검색엔진과 SPA 프레임워크(5)-HTML
검색봇을 위해 서버가
생성한 html
실제 웹 페이지
(SPA 프레임워크에서 동작
하는 HTML)
SPA 프레임워크가 만들어낸 html을 서버에서
똑같이 구현하기란 불가능.
MINT-SOFT18
SPA 개발자
19. Headless-Browser(1)-발생
"서버에서 직접 만든 html과 spa가 만든 html이 다르니
검색 품질도 떨어지고 일은 두배로 많아져서 힘이 든다.
다른 좋은 방법 없을까?"
"SPA HTML생성은 나를 이용해봐
난 브라우져 없이
코딩으로 브라우져와 같은 화면
을 만들어 낼 수 있어"
Headless-Browser
MINT-SOFT19
개발자
20. Headless-Browser(2)-동작 방식
(1).페이지 요청
(3).생성된 html를 전송
2.비어있는 html
전송
(4).생성된 html
읽음
javascript 실행
(5).ajax로 새로운 내용 요청
6.요청된 맞는
컨텐츠 를 생성
(7).생성된 컨텐츠 를 전송
(8).전송받은 컨
텐츠 를 html 요
소로 추가
Headless-
Browser
(9).SPA에서 생
성된 HTML
MINT-SOFT20
SPA