본문 바로가기

분류 전체보기

 (64)
ClipBoard API 제대로 사용하기 타 팀과 업무를 수행할 때 iframe으로 연동되어 있는 부분에 대한 시스템 내용을 클립보드로 복사해야 하는 업무가 생겼다. 브릿징 작업을 통해 listener 메시지로 내용에 대한 값을 받아 왔는데 포맷이 일반 텍스트와 HTML 텍스트 두 가지로 내려주신 것이었다. 기존 구현되어져 있는 부분은 text로도 삽입이 가능하지만 가끔 텍스트에 같이 들어오는 "\n", "\w"와 같은 이스케이프 문자열들이 그대로 삽입이 되기 때문에 html로 직접 애플리케이션에 삽입하는 것이 편했다. 그러나 "복사한 값을 우리의 애플리케이션에서 사용하지 않고 다른 곳에서 쓴다면?" 이라는 의문점이 들기 시작했고, 이 부분 말고도 놓치는 부분이 있을까 싶어서 연동해 주신 담당자분께 문의를 드렸다. ........??...??...
[모던자바스크립트 Deep Dive] 24. 클로저 "A closure is the combination of a function and the lexical environment whithin which that function was declared." 클로저는 함수와 그 함수가 선언된 렉시컬 환경과의 조합이다. const x = 1; function outerFunc() { const x = 10; function innerFunc() { console.log(x); // 10 } innerFunc(); } outerFunc(); outerFunc 함수 내부에서 중첩 함수 innerFunc가 정의되고 호출되었다. innerFunc의 상위스코프는 외부함수 outerFunc의 스코프이므로 innerFunc 내부에서 outerFunc의 x 변수에 접근할 ..
React VS jQuery Why React 사내에 새로운 프로젝트를 시작하게 되면서 어떻게 jQuery로 되어 있던 코드들을 버리고 React를 도입하게 된 배경을 React의 메인 컨셉과 jQuery의 비교를 통해 설명하고자 한다. jQuery jQuery는 작고, 빠르며, 기능이 풍부한 자바스크립트 라이브러리입니다. 2006년에 jQuery가 처음 나왔을 당시 자바스크립트는 현재처럼 발전되어 있지 않았기 때문에 널리 사용되지 않았으며(현재는 Node.js를 통해 여러 분야에서 사용되고 있다.) 브라우저에 종속되어 있었다. 그렇기에 간편한 API들로 DOM 조작을 한다는 것으로 jQuery는 자바스크립트 영역에서 큰 혁명을 불러일으켰다. //javascript document.getElementById('root') //jQu..
리액트 라우터 기본적으로 우리 팀이 관리하는 프로젝트는 MPA(Multi-Page-Application) 구조를 가지고 있다. MPA란, 각각의 Page URL을 통해 그에 맞는 HTML을 불러와서 보여주는 형식을 말한다. React를 도입하게 되면서 React는 기본적으로 SPA(Single-Page-Application)을 취하고 있기 때문에 그에 맞는 라우팅을 설정해주어야 한다. 즉, SPA는 CSR(Client-Side-Routing)을 취하고 있기 때문에 하나의 HTML 파일에서 모든 라우팅을 다 처리한다는 의미이다. History and Locations React Router가 어떠한 라우팅 작업이든 할 수 있으려면 브라우저의 History Stack의 변경 사항을 구독할 수 있어야 한다. 브라우저는 사용..
9. 웹 로봇 웹 로봇 사람과의 상호작용 없이 연속된 웹 트랜잭션들을 자동으로 수행하는 소프트웨어 프로그램 1. 크롤러와 크롤링 웹 크롤러 : 웹페이지를 한 개 가져오고, 그 다음 그 페이지가 가리키는 모든 웹페이지를 가져오고, 다시 그 페이지들이 가리키는 모든 웹페이지들을 가져오는 일을 재귀적으로 반복하는 방식으로 웹을 순회하는 로봇 1. 어디에서 시작하는가: '루트 집합' 크롤러가 방문을 시작하는 URL들의 초기 집합을 루트 집합(root set) 이라고 부른다. 일반적으로 좋은 루트 집합은 크고 인기 있는 웹 사이트, 새로 생성된 페이지들의 목록, 그리고 자주 링크되지 않는 잘 알려져 있지 않은 페이지들의 목록으로구성되어 있다. 이 루트 집합은 시간이 지남에 따 라 성장하며 새로운 크롤링을 위한 시드 목록이 된다..
7. 캐시 웹 캐시 : 자주 쓰이는 문서의 사본을 자동으로 보관하는 HTTP 장치 1. 불필요한 데이터 전송 복수의 클라이언트가 자주 쓰이는 원 서버 페이지에 접근할 때, 서버는 같은 문서를 클라이언트들에게 각각 한 번씩 전송하게 된다. 불필요한 데이터 전송은 값비싼 네트워크 대역폭을 잡아먹고, 전송을 느리게 만들며, 웹 서버에 부하를 준다. 캐시를 이용하면, 첫 번째 서버 응답은 캐시에 보관된다. 캐시 된 사본이 뒤이은 요청들에 대한 응답으로 사용될 수 있기 때문에, 원서버가 중복해서 트래픽을 주고받는 낭비가 줄어들게 된다. 2. 대역폭 병목 캐시는 네트워크 병목을 줄여준다. 많은 네트워크가 원격 서버보다 로컬 네트워크 클라이언트에 더 넓은 대역폭을 제공한다. 클라이언트들이 서버에 접근할 때의 속도는, 그 경로에..
6. 프락시 웹 프락시 서버는 중개자다. 클라이언트와 서버 사이에 위치하여 그들 사이의 HTTP 메시지를 정리하는 중개인처럼 동작 1. 웹 중개자 웹 프락시 서버는 클라이언트 입장에서 트랜잭션을 수행하는 중개인 프락시를 이용하면 프락시 서버가 제공하는 좋은 서비스를 이용할 수 있다. HTTP 프락시 서버는 웹 서버이기도 하고 웹 클라이언트이기도 하다. HTTP 프락시를 만든다면, HTTP 클라이언트와 HTTP 서버의 양쪽 규칙 모두를 주의 깊게 따라야 한다. 1. 개인 프락시와 공유 프락시 공용 프락시 대부분의 프락시는 공용이며 공유된 프락시다. 중앙 집중형 프락시를 관리하는 게 더 비용 효율이 높고 쉽다. 캐시 프락시 서버와 같은 몇몇 프락시 애플리케이션은 프락시를 이용하는 사용자가 많을수록 유리 여러 사용자들의 ..
5. 웹서버 1. 다채로운 웹 서버 `웹 서버`라는 용어는 웹서버 소프트웨어와 웹페이지 제공에 특화된 장비 양쪽 모두를 가리킨다. 웹 서버는 기능, 크기 형태가 다양하다. 10줄 짜리 조그마한 펄 스크립트 웹서버 50Mb짜리 안전한 상용 엔진 작은 기판 위의 서버 크기와 기능은 달라도, 모든 웹 서버는 리소스에 대한 HTTP 요청을 받아서 콘텐츠를 클라이언트에게 돌려준다. 1. 웹 서버 구현 웹 서버는 HTTP 및 그와 관련된 TCP 처리를 구현한 것이다. 리소스를 관리하고 웹 서버를 설정, 통제, 확장하기 위한 관리 기능을 제공 TCP 커넥션 관리에 대한 책임을 운영체제와 나눠 갖는다. 운영체제 : 컴퓨터 시스템의 하드웨어를 관리, TCP/IP 네트워크 지원, 파일 시스템, 연산 활동을 제어하기 위한 프로세스 관리..

티스토리툴바