많은 기업들이 테크블로그를 운영하고있는데 찾아보고 공부해보면 해당 기업의 프로덕트 개발 과정과 노하우에 대해 배우기 좋다.
(당장 해당 기업을 가지는 못해도..) 꿈꿔보며^^ 가고 싶은 회사의 개발 문화를 확인해보는 기회가 될 수도 있고, 최신 개발 지식과 기술을 학습 할 기회가 될 수도 있다!!
많은 기업들의 테크블로그 링크를 모아둔 블로그는 많지만 나는 해당 링크를 통해 들어가봤다
https://zero-base.co.kr/event/media_insight_contents_FE_frontend_blog
그 중 토스의 프론트엔드 가 눈에 띄어 살펴보기로 하였다.
(별거없음 주의)
"환경 고민없이 개발하기"
토스에서 Next.js를 도입하면서 마주한 문제와 해결방법에 관련한 글이었는데 (다 부족하지만) Next.js의 렌더링 관련한 이해가 특히 부족한 것 같아서 선택하게 되었다.
SSR(Server Side Rendering)
서버 사이드 렌더링(SSR)은 렌더링 작업 일부를 서버에 위임하는 방식으로, 브라우저에게 완성된 HTML을 전달하는데 이를 통해 사용자는 빠르게 서비스를 이용할 수 있고, 해당 서비스는 검색 엔진 최적화(SEO)를 통해 더 많은 노출 기회를 얻을 수 있다고 설명해주었다.
하지만 매 요청마다 서버에서 페이지를 렌더링해야 하므로 서버 부하가 증가할 수 있기 때문에 SSR을 위해서는 별도의 서버 운영이 필요하다.
문제가 발생한 예시코드라고 기록되어 있다.
function App() {
// 쿼리 파라미터로 전달받은 유저의 이름을 얻어온다.
const name = new URL(location.href).searchParams.get(name);
// 유저의 이름을 화면에 출력한다.
return <div>{name}</div>
}ReferenceError: location is not defined
코드상으로 문제는 없어보이지만 SSR환경에서 에러가 발생하였다고 한다.
에러가 발생한 환경의 특징을 살펴보면 1. 브라우저 객체인 location이 존재하지 않는다 2. 페이지(HTML)생성이 가능하다
서버는 클라이언트에서 제공한 컴포넌트를 기반으로 HTML을 생성하는데 클라이언트 환경에만 존재하는 코드가 있었기 때문에 발생한 에러이다.
서버는 해당 코드의 작동 방식을 이해할 수 없기 때문!
따라서 서버 환경에서 location 에 접근할 수 없도록 수정한 코드는 아래와 같다고 한다.
function App() {
const name = (() => {
/* 서버 환경인 경우, 객체에 접근하지 못하도록 수정 .. */
if ( isServer() ) {
return null;
}
return new URL(location.href).searchParams.get(name);
})();
/* 유저의 이름을 화면에 출력한다 ..*/
return <div>{name}</div>
}이 문제 말고 Hydration Mismatch 에 관련된 내용도 기록되어 있었는데 어렵게 느껴져서 정리해보지 못했다.
사실 개발자가 되겠다고 시작했으면서 기업들의 테크블로그를 찾아볼 생각을 하지 않았다는 것이 좀... 음... 그랬다...
많은 내용을 찾아본 것은 아니지만 몇개 읽어본 결과 느낀내용은 '실무는 정말 내용이 광범위하고 딥하다!!!'는 것이었다 ㅠㅠ
알아야 할 내용도 많고 공부해야할 내용도 무한정이지만 아티클을 습관적으로 찾아보면서 눈으로라도 익히는 연습을 해야겠다.
