전체 글 (65) 썸네일형 리스트형 Hydration 이해하기 들어가기 React v18이 릴리즈 된지도 시간이 꽤나 지났고, Next.js 13버전(App Router)에서는 React 18버전을 정식으로 채택하여 RSC를 사용하고 있다. 우리의 PO 프로젝트로 Next.js로 마이그레이션 하기로 결정 되었는데 Next.js에서 중요한 개념 중 하나인 Hydration에 대해 정리하는 시간을 갖고자 한다. Hydration - 수화 한국어로 "수분 공급"이란 뜻을 가지고 있는 이 Hydration이라는 의미는 무엇일까? CSR - Client-Side-Rendering 먼저 create-react-app과 같은 React 프로젝트를 생성하면 모든 렌더링이 브라우저에서 발생하게 된다. 이는 빌드된 react 프로젝트의 index.html을 확인해보면 되는데, HTM.. 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. 개인 프락시와 공유 프락시 공용 프락시 대부분의 프락시는 공용이며 공유된 프락시다. 중앙 집중형 프락시를 관리하는 게 더 비용 효율이 높고 쉽다. 캐시 프락시 서버와 같은 몇몇 프락시 애플리케이션은 프락시를 이용하는 사용자가 많을수록 유리 여러 사용자들의 .. 이전 1 2 3 4 5 6 ··· 9 다음 목록 더보기
