Computation suite

직렬화/비직렬화 웹 애플리케이션 서버 프레임워크 웹 애플리케이션 서버 프로그램이 어떤 프로그래밍 언어의 소스 코드로부터 컴파일 됐든 인터넷을 통한 통신을 수행하려면 웹 생태계의 규칙을 따라야한다. 웹 애플리케이션 서버 프로그램은 일반적으로 각 언어들의 웹 애플리케이션 서버 프레임워크로부터 만들어지는데 이 프레임워크에서 직렬화/비직렬화 개념이 나온다. 송신자 & 수신자, 직렬화 & 비직렬화 직렬화 송신자가 객체를 문자열로 변환하여 데이터를 전송하는 작업. 비직렬화 수신자가 수신한 문자열을 다시 객체로 변환하여 활용하는 작업. 여기서 송신자, 수신자는 모두 웹 애플리케이션 서버이다. 웹 애플리케이션 서버에 로직을 작성하는 프로그래머는 그 언어와 프레임워크와 종속된 소스코드를 사용하는데 앞단의 웹 서버와 같은 소프트웨어나 더 멀리 있는 이기종의 장치는 이를 이해하지 못한다. 때문에 컨버팅 작업이 필요한데 이 컨버팅 작업을 직렬화/비직렬화라고 한다. Python web application framework를 예로 들자면, 파이썬으로 로직 처리가 끝난 데이터를 response 객체에 담아 반환하여 줄 때가 직렬화, 클라이언트의 요청이 request 객체로 추상화될 때가 비직렬화라고 할 수 있겠다. 끝

CSR : Client Side Rendering 렌더링 주체가 클라이언트.   첫 수신 페이지가 빈 html이고  JS가 프레임워크 코드를 해석하여 렌더링 후 Painting하기 때문에 JS 활성화가 필수 옵션임. 단점 페이지 로딩 시간이 상대적으로 길다. ( TTV, FCP가 길다. ) 첫 페이지가 빈 html이기 때문에 웹 크롤러 봇에 의한 SEO최적화가 어렵다. 장점 React와 같이 잘 활성화된 프레임워크를 사용하는 경우 리액트 라이브러리 소스와 리액트 Syntax로 만든 컴포넌트 소스 코드를  서버에서 클라이언트로 전달한다.   컴포넌트 단위로 소스를 관리하기 때문에 유지 보수성이 뛰어남. 첫 로딩만 상대적으로 길다 뿐이지 로딩 이후에는 반응성이 뛰어남. SSG : Static Site Generation 렌더링 주체가 서버. 서빙할 HTML파일들을 빌드 타임에 제작하며  HTML파일이 서버에 위치한다. 장점 첫 html페이지에 컨텐츠가 담겨있기 때문에 SEO 최적화에 좋음 문서만 받는 형태이기 때문에 (HTML만 주고받을 수 있음) CDN에 캐시가 가능하고 JS가 불필요하기 때문에 상대적으로 보안이 뛰어남. 위의 이유로 페이지 로딩 시간 빠름. 단점 정적인 데이터를 서빙하기 때문에 사용자 개개인의 정보 제공이 어렵다. (할 수는 있으나 html을 빌드하는 과정에서 해야 함.) 정적인 데이터 제공 방식에 적합함. ISR Incremental Static ReGeneration 렌더링 주체가 서버 한 번 컨텐츠를 생성하고 마는 것이 아니라 주기적으로 렌더링한다. SSG에 주기적으로 내용을 업데이트하는 특징이  장점 첫 html페이지에 컨텐츠가 담겨있기 때문에 SEO 최적화에 좋음 문서만 받는 형태이기 때문에 (HTML만 주고받을 수 있음) CDN에 캐시가 가능하고 JS가 불필요하기 때문에 상대적으로 보안이 뛰어남. 위의 이유로 페이지 로딩 시간 빠름 데이터가 주기적으로 업데이트 됨 단점 주기적이기 ...

Engine V8 chrome browser는 응용 프로그램이며 js 소스코드는 구글이 독자개발한 Javascript engine v8 상에서 수행된다. Tab 별로 process를 할당한다. TurboFan을 사용하여 기계어로 변환한다. JavaScript Code → AST (parsed) AST → Bytecode (Ignition interpreter) Hot Code → Optimized Machine Code (TurboFan JIT) Memory Cleanup (Orinoco GC) 성능 측정 chrome experiments에서 js engine에 과부하를 발생시키는 데모가 존재한다. https://experiments.withgoogle.com/collection/chrome 개발자 도구 > 설정 > experiments 크롬 확장 page action 조건을 만족하는 페이지만을 대상으로 주소 바 아이콘에서 알림 생성 contents script 페이지 내용 조작 xmlhttprequest 임의의 도메인으로부터 웹 페이지 내용 가져오기 tab 탭 생성, 삭제, 배치 변경, css 삽입, script 실행 등 NPAPI local file read가 가능한 plugin 이지만 chrome 보안을 무력화한다. 개발 시 샌드박스를 통해 보안을 강화해야한다. 웹 앱에서 허용되지 않는 기능이 있는데, - 백그라운드 처리와 - 호출하는 domain과 호출받는 domain이 다른 cross-domain 통신이다. 확장 도구를 사용하면 이 제약사항을 넘어서 애플리케이션을 개발할 수 있다. 크롬 확장 개발 - html / css / js webstandards 사용 - xml 파일    자동 update를 위한 업데이트 정보 기록 - manifest.json 파일   크롬 확장 권한을 정의함으로서 보안에 관여한다.   1. cross-domain 통신   2. 탭 조작   3. 북마크 조작...

산업현장에 설치된 IP 카메라로 산업현장의 영상과 위험을 모니터링 하는 프로젝트를 수행했었다. 프로젝트 수행시 '동영상 재생' 기능을 어떻게 구현했는지 복습과 정리를 위해  글을 작성했다.

Proxy = 대신/대리 네트워크에서 proxy는 client나 server를 대신하여/대리하여 요청을 전달한다. 물리적인 위치는 사용자의 컴퓨터일 수도 있고 사용자의 컴퓨터 - 목적지 중간의 한 지점일 수 있다. 왜 대신하는가? 캐싱 자주 요청되는 리소스 or 자주 변하지 않는 리소스의 경우 proxy 서버에 리소스를 저장할 수 있다. - (본 목적지까지 전달했던) network hop을 줄일 수 있다. - 리소스가 캐싱된 스토리지에 따라 더 빠른 응답 시간를 얻을 수 있다. 보안 내부망과 인터넷이 소통하는 지점인 게이트웨이로서 작동. 로그 물리적인 서버, 또는 로컬 컴퓨터에 쌓인 기록을 바탕으로 보안 정책을 구성할 수 있음. 우회 보안과 공통적인 면이 있다. 자신의 실제 IP가 아닌 프록시가 대신 요청을 수행하고 응답을 대신 받아서 본인에게로 전송해준다. 목적 리소스가 있는 컴퓨터에서는 프록시가 요청을 수행한 것으로 인식하고 프록시에게 응답을 돌려준다. Forward proxy 대 Reverse proxy Forward proxy(= gateway, proxy) 1. 클라이언트, 클라이언트 풀에서 나가는 요청 에 대한 제어 수행. 클라이언트는 요청의 출발지 주소를 프록시 주소로 대신 사용함으로서 클라이언트의 원 정보를 숨길 수 있으며 우회 기능을 사용할 수 있음. ex) Tor의 여러 프록시 서버 노드를 경유하는 proxy chaining 요청에 대한 들어오는 응답 에 대한 제어 또한 수행하며 클라이언트 풀의 각각의 클라이언트에게 응답을 돌려준다. 2. HTTP 터널링을 통한 암호화 프록시 서버가 클라이언트 대신 인터넷을 연결한다. TLS를 지원하는 웹 서버에 proxy 서버를 사용하여 연결한다. (http1.1부터 connect method로 TLS tunnel을 사용할 수 있음) connect method가 평문 형태의 http proxy를  ssl 암호화된 요청을 tcp/ip 터널로 전환한다. - client가 http proxy 서버에게 t...

Form 통신 특성에 초점을 맞추어 작성하였습니다. Form 통신 HTML Form 데이터를 가공하여 웹 서버에 전달한다. MIME-type UUEncode에서 개선된, 인코딩 방식을 명시하는 값. MIME은 문서, 파일 또는 바이트 집합의 성격과 형식을 나타낸다. <RFC 6838> 다양한 미디어 타입에 대해서는 다음을 참고한다. https://developer.mozilla.org/ko/docs/Web/HTTP/MIME_types 별도의 헤더로 존재하는 것이 아니라 content-type에 포함된다. Content-Type HTTP 메시지에서 Content-Type헤더는 HTTP 통신에서 미디어 데이터의 오리지널 타입(MIME type)을 알려주는 값이다. html form에서는 enctype에 있다. 예는 아래와 같다. Content-Type: text/html; charset=utf-8 Content-Type: multipart/form-data; boundary=ExampleBoundaryString 텍스트 파일을 텍스트 파일로 읽는 데에는 문제가 없으나 문자 파일 뿐 아니라 다양한 확장자를 가진 바이너리 파일은 종단간에 ASCII 코드 텍스트를 해석하던 방식만으로는 읽을 수 없다. 바이너리 파일 -> 텍스트 파일로 인코딩 텍스트 파일 -> 바이너리 파일로 디코딩 을 위해 이 필드의 명시가 필요하다. 클라이언트에서 content-type 헤더를 명시한다면 서버로 보낼 컨텐츠의 타입을 지정하게 되고 서버로부터 돌아오는 response의 content-type 헤더에는 사용자가 받을 컨텐츠의 타입이 지정된다. type 제한이 엄격하다면 415 에러가 리턴된다. multipart/form-data 특히 서로 다른 content-type을 가진 html form에서(text + image) 하나의 http request body로 전송할 때 사용하며, 파일 업로드에 사용. application/x-www-form-urlencoded fo...

파이썬 프로젝트에 좋은 문서화 툴 pip install sphinx sphinx-build . _build 이 글은 https://cpusuite.blogspot.com/2022/08/essentials-pycharm-ide-git.html 의 Pycharm setting essential이라는 글과 '나의 파이썬 프로젝트 초기 세팅법'이라는 제목으로 통합될 예정입니다. GItlab pages를 통해 hosting을 하려면 특별한 룰을 따라야한다. 1번 룰 : 정적 컨텐츠는 반드시 public/  에 위치한다. 2번 룰 :  artifacts 경로를 정의할 것. artifacts with a path to the public/ directory must be defined * artifacts란? Job artifacts란 명세한 Job이 성공했는지, 실패했는지에 대한 파일과 경로의 리스트이다. Job이 수행되면 Job이 어떤 형태로 완료되었는지 정보를 담은 파일을 경로에 저장한다. pages:   stage: deploy   script:     - mv docs/build/html/ public/   artifacts:     paths:     - public   only:   - master For further reference, an example sphinx project for GitLab Pages was pushed around the time you originally posted this question. numpydoc_show_class_members = False gitlab 호스팅을 위한 공식 가이드. image: python:3.7-alpine test: stage: test script: - pip install -U sphinx - sphinx-build -b html ....