Etc
-
CDN(Content Delievery Network)란Etc/WEB 2021. 10. 16. 10:29
CDN - 지리,물리적으로 떨어져 있는 사용자에게 컨텐츠를 더 빠르게 제공할 수 있는 기술 - 느린 응답속도 / 다운로딩 타임 을 극복하기 위한 기술 - 사용 예) ex1) 온라인 게임은 OBT(Open Beta Test)나 정식 서비스 시작시점에 클라이언트(Client) 다운로드(Download) 수요가 급격하게 증가한다. 많은 분들이 이때문에 PC방에서 대기했던 경험이 있지 않을까 싶다. 이때 콘텐츠 병목 현상이 일어나거나, 심한 경우 서버다운도 발생하기 때문에 CDN이 필수적으로 사용된다. 이뿐만 아니라 대규모 업데이트(Update)를 위한 패치(Patch)가 있을 경우에도 콘텐츠 병목 현상이 발생하는 경우가 있어 CDN을 사용하게 된다. ex2) 예를들어 내 홈페이지가 한국에 있고 내가 사용하던 ..
-
서버사이드 렌더링(SSR) vs 클라이언트사이드 렌더링(CSR)Etc/WEB 2021. 9. 19. 11:39
서버사이드 렌더링 => 서버에서 렌더링에 필요한 html 구성을 모두 완료한 뒤, 그 html을 내려주는 것이다. 클라이언트사이드 렌더링 => 클라이언트 측은 빈 html 파일을 내려받고, 이 후 js코드를 실행하며 page를 렌더링한다. 차이점 1. 초기 view 로딩 속도 => 서버측에서 렌더링이 바로 가능한, 완성된 html 파일을 내려주기 위한 처리를 진행하므로(코드를 실행하면서 html을 만들고, data를 pre-fetching하는 등의 작업), html이 내려지는 속도는 SSR이 더 느리지만(TTFB이 더 느림), 내려받은 즉시 렌더링이 가능하므로 사용자에게 보여지는 초기 view는 CSR보다 더 빠르다. 또한 CSR의 경우 만약 클라이언트측에서 네트워크 속도가 좋지 않다면 빈 화면을 보는 ..
-
Base64 인코딩이란Etc/WEB 2021. 9. 11. 12:01
인코딩이란? - 인코딩(encoding)은 특정 형식의 데이터를 표준화, 보안, 처리 속도 향상, 저장 공간 절약 등을 위해서 다른 형태나 형식으로 변환하는 작업을 말한다. Base64 인코딩 - Base64란 Binary Data를 text로 바꾸는 Encoding(binary-to-text encoding schemes)의 하나이다. - Base64를 글자 그대로 직역하면 64진법이라는 뜻이다. 64진법은 컴퓨터한테 특별한데 그 이유는 64가 2의 제곱수 64=2^6이며 2의 제곱수에 기반한 진법 중 화면에 표시되는 ASCII 문자들로 표시할 수 있는 가장 큰 진법이기 때문이다. (ASCII에는 제어문자가 다수 포함되어 있기 때문에 화면에 표시되는 ASCII 문자는 128개가 되지 않는다.) - 변경..
-
window객체와 document 객체, BOM, DOMEtc/WEB 2021. 9. 2. 18:16
window - 웹 API에서 제공되는 객체로, 현재 브라우저의 모든 기능들이나 속성들에 대한 정보를 담고 있다. - javascript 코드 상의 window 객체는 현재 스크립트가 실행중인 브라우저 창을 의미한다. - window는 전역객체이므로 스크립트에서 변수를 선언하는 경우, window 객체의 프로퍼티가 된다.(메서드도 마찬가지) - Window.console 속성은 브라우저 콘솔에 로그를 남길 수 있는 메서드를 가진 Console 객체의 참조를 반환한다. 콘솔 메서드는 디버깅 용도로만 사용해야 하며, 엔드유저에게 정보를 제공할 의도를 가져션 안 됨 document - 브라우저가 불러온 웹 페이지(문서, html로 생각해도 된다.)에 관한 기능, 속성 등의 정보를 가진 객체이다. - windo..
-
CI/CD란Etc/WEB 2021. 8. 31. 20:53
- 시장과 고객의 요구에 빠르게 반응하여 제품을 출시, 업데이트 하는 것이 중요 세계적으로 많은 기업들이 ci/cd를 개발 프로세스로 활용하고있다. - CI/CD란 어플리케이션 개발부터 배포까지 모든 단계들을 자동화하여 사용자에게 빈번히 배포할 수 있도록 만드는 것이다. CI: continuous integration CD: continuous delivery (혹은 deployment) CI는 버그 fix나 새로 추가한 기능들이 main repository에 주기적으로 merge되고, 빌드, 테스트되는 프로세스를 의미한다. CI가 중점적으로 둔 사항은 1. 개발자들은 코드 변경사항을 주기적으로, 빈번하게 merge해야 한다. => 동일한 소스파일을 서로 다른 개발자들이 너무 오랜기간동안 변경을 할 경우..
-
웹 기초 용어 정리Etc/WEB 2021. 8. 27. 15:42
브라우저 브라우저란? - 브라우저는 서버에 자원을 요청(request)하고 그걸 응답(response)해 윈도우에 표시하는 역할을 한다. - HTML 파일이나 CSS 파일, 이미지 등이 서버에서 넘어오면 파싱(Parsing)이란 작업을 거쳐 화면에 그려낸다. - 이 과정에서 '어떻게 해석할까?'의 방식은 브라우저마다 조금씩 다르다. 브라우저의 구조 사용자 인터페이스 - 웹 URL을 보여주는 주소 표시 줄, 앞/뒤로 가기, 새로고침, 북마크 표시 줄 등을 뜻합니다. 브라우저 엔진 - 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어합니다. 주어진 URL을 읽어들이며, 앞/뒤 페이지로 가거나 새로 고침을 하는 등의 기초적인 액션을 담당합니다. 렌더링 엔진 - HTML, CSS 등을 해석해주는 엔진입니다. ..
-
directives 기능 사용하여 http 요청 https로 일괄 변환하기Etc/WEB 2021. 8. 22. 14:09
directive - directive 기능은 schema와 operation에 추가적인 configuration을 적용하는 기능이다. - Apollo server와 client는 graphql document에 적힌 directive들을 읽고 적절하게 해당 기능을 수행 해준다. - directive는 자체적인 arguments를 가질 수 있다. 자신이 configure하고자 하는 것의 뒤에 작성이 된다.(field, arguments, query, mutation 등) directive 적용하기 - 먼저, 적용 할 로직을 작성한다. - 해당 로직(새로 만들어진 익명 함수)은 서버가 시작될 때 해당 directives가 명시된 필드마다 한 번씩 실행이 된다. 자세한 과정을 보면 해당 필드의 resolve..
-
프로젝트 환경분석3(ApolloServer, ApolloClient)Etc/WEB 2021. 7. 20. 19:17
server/graphql/aplloServer.ts 이 모듈은 ApolloServer 객체를 생성을 하는데, 인자로 schema, context, dataSources, plugins를 전달한다. schema 스키마는 데이터 타입의 집합으로, 일종의 API 문서의 역할도 한다. 어떠한 데이터 객체를 반환할지, 특정 요청을 어떻게 처리할 지 등이 작성되어 있다. 같은 폴더의 schema.ts는 정의된 type과 resolver를 묶어서 반환한다. context 일종의 전역변수 개념으로, context 필드에는 객체 혹은 객체를 반환하는 function이 들어간다. 해당 config 설정 시 resolver에서 해당 context의 객체를 인자로 받아서 사용이 가능하다. req.clientHeader 프로..