채용 공고에서 보게 된 Isomorphic React..
네이버에서 Isomorphic의 사전적 의미를 찾아보니 '같은 모양의, 동일 구조의' 라는 뜻이다.
조사하다가 해외 사이트에서 관련된 글을 발견하여 번역해보았다.
(1대 1 번역 후 작성하였으며 일부 내용을 요약한 부분이 있습니다)
정의
Isomorphic React App은 서버와 클라이언트 사이드 둘 다에서 동작하는 코드로 구성된 웹 앱이다.
서버로부터 가져오는 SEO의 유리함과, 복잡한 유저 상호작용을 처리할 수 있는 브라우저의 능력이 결합되었다.
3가지 특징
1. 초기 렌더링 요청
초기 웹 사이트 접속 시 보내는 요청(= 웹 사이트 속도)이 빠르다. 컨텐츠가 서버에서 브라우저로 보내지기 때문이다.
2. 초기 렌더링 이후의 요청
페이지가 첫 렌더링 된 후 유저가 여기저기 클릭을 하거나 페이지를 돌아다니는데, 이러한 유저 상호작용은 클라이언트 사이드에서 SPA 기법으로 처리한다. SPA를 사용하여 유저 상호작용을 최대한 부드럽게 만든다.
3. 서버에서의 상태 관리
페이지를 올바르게 보여주기 위해 웹앱의 상태를 서버에 저장해둔다. 이후 브라우저에 서버의 상태를 전달하면, 브라우저는 해당 상태를 활용하여 웹앱을 렌더링한다.
즉, 페이지는 준비된 상태로 브라우저에 나타나고 브라우저에서의 추가적인 리렌더링은 필요 없다.
Isomorphic 아키텍처는 처음에 방문했을 때는 코드를 모두 로딩하고, 이후 방문 시에는 캐싱해둔 코드를 사용한다.
이는 유저 경험을 증진시키고 사이트의 속도를 높인다.
Next.js를 사용하면 쉽게 Isomorphic 리액트 웹앱을 만들 수 있다.
Isomorphic 웹앱의 장단점
장점 (Pros)
1. 브라우저 및 기기 호환성
기기나 브라우저 간의 호환성이 높다.
따라서 엔드 유저가 여러 기기에서 유사한 경험으로 웹 사이트를 이용할 수 있고, 개발자는 기기별, 브라우저별로 여러 버전을 개발하지 않아도 된다.
2. SEO (검색 엔진 최적화)
Isomorphic 웹앱은 서버에서 제공되어 검색 엔진 크롤러가 적절하게 웹 페이지를 인덱싱해갈 수 있다.
3. 뛰어난 성능
첫 렌더링 때 필요한 것들을 서버에서 반환하기 때문에 첫 요청 속도가 빠르다.
이후의 요청은 AJAX 요청(필요한 것만 서버에 요청해서 갈아끼움)으로 SPA 기반으로 구동되어 심지어 더 빨라진다.
4. 일관된 코드 베이스 유지
클라이언트와 서버에서 코드 공유가 가능해서 한 명의 개발자가 양 사이드를 모두 개발할 수 있다. 즉, 코드의 일관성을 유지하기가 더 쉽다.
단점 (Cons)
1. Isomorphic 개념을 배우기 위한 러닝 커브
개념을 익힐 때 러닝 커브가 있다.
만약 클라이언트 사이드의 SPA 개발 방식에 익숙할 경우 브라우저가 제공하는 것 중 일부를 쓸 수 없게 된 것을 알아야 한다.
예를 들어,
window객체는 브라우저에서는 잘 동작하지만 서버 사이드 방식에서는 서버가 브라우저의window객체에 접근할 수 없다.
2. 이중 디버깅 필요
서버와 클라이언트를 모두 다루기 때문에 양쪽에 디버깅 툴 설정이 필요하다.
디버깅 시, 서버와 클라이언트 중 어느 쪽에서 발생했는지 인식하는 것이 중요하다.
3. 이중 보안 관리 필요
유저들에게 노출되어서는 안 되는 시크릿 키와 시크릿 토큰을 관리하기 위해 관련 키를 클라이언트와 서버 양쪽에 하나씩 만들어야 한다.
요약: Isomorphic한 리액트를 구현하여 유저 인터랙션과 SEO의 유리함을 모두 가질 수 있다.
번역 원본글
