최근 지인으로부터 css in js 에 대한 불만 아닌 불만을 들을 기회가 있었다. css, js, html이 각자 가지고 있는 역할이 분명히 다른데, (컴포넌트 위주의 웹 개발 환경이 득세하다보니) css in js등의 등장으로 그 역할이 모호해지고 있다는 것이다. 그 말에도 일리가 있다고 생각했다. 사실 구현의 측면에서는 그 역할이 사라지거나 불분명해지진 않았다. 하지만 컴포넌트 위주의 웹 개발에서는 html태그의 계층구조, 스크립트와 dom의 연결, bem등을 사용한 css클래스 네이밍 등의 작업에 많은 시간을 투자하지 않고 결과물을 낼 수 있게 된 것은 사실인 것 같다. css in js가 가지고 있는 성능상의 이슈도 있고, 기술에는 정답이 없다고 생각하는 만큼 이러한 추세가 앞으로 또 어떻게 변..

오랜만에 올리는 취미 개발이다. 사실 그 사이에 만든 다른 게 있긴 한데.... 그 포스팅은 좀 나중에 올리기로 하고 가장 최근에 일렉트론으로 만든 녹취록 작성기 얘기를 해보려고 한다. 처음 일렉트론 이야기를 듣게된 계기는 지인 개발자분의 언급이었다. 얼마 전, 한창 리액트를 공부하며 재미를 느끼고 나름 나름 스터디도 진행하던 도중이었다. "나중에 관심있으면 리액트로 윈도우 프로그램도 만들어보세요." "네?? 그런것도 가능해요?" "일렉트론이라고 node.js로 만들어진 프레임워크 있어요" "오오....!" 최근 크롬 확장프로그램을 리액트로 만들어 보면서 리액트 생태계의 확장성에 감탄을 마지않던 차였기 때문에 '조만간 일렉트론으로 뭐라도 한 번 만들어보고 만다'라고 단단히 벼르고 있었다. 그러던 중, 사..

CRA 프로젝트를 진행하면서는 스크롤 상태 유지(scroll restoration)를 하기 용이했다. 근데 next로 넘어오면서 자체 라우팅 시스템을 사용함에 따라 react-router-dom을 사용한 기존 방식 (router에서 넘어온 history객체 내에 action을 감지해서 pop 식별 후 처리)을 사용할 수 없게 되었다. Next 내부에서 기본적으로 스크롤 복원 기능을 제공하기는 한다. 그러나 내가 작업 중인 페이지에는 목록 내부 요소 크기가 스크립트를 통해 정해지기 때문에, 목록 -> 아이템 -> 뒤로 가기(목록) 작동을 했을 경우 정확한 스크롤 위치로 돌아오지 않는 이슈가 있었다. 이러나저러나 페이지 스크롤 복원 방법은 여기저기 널려있고, 그중에 괜찮은 것들을 짬뽕해서 구현했다. 목표는 ..

CSR에서는, 페이지가 로드되고 난 다음 ajax요청을 통해 값을 가져오고 그 데이터를 뿌려준다. [클라이언트] 페이지 접근 [서버] html, js 전송 [클라이언트] 빈 html, 필요한 js파일 받음 [클라이언트] js 로드 [클라이언트] 필요한 데이터 요청(ajax) [클라이언트] 결과물 반환 [클라이언트] 렌더링 그러나 SSR에서는 SEO등의 목적으로 인해 클라이언트에 페이지를 전송하기 전에 데이터 요청을 해야 할 상황이 생긴다. [클라이언트] 페이지 접근 [서버] 페이지 렌더링에 필요한 데이터 ajax 요청* [서버] 결과물 반환 [서버] 렌더링 [서버] html로 변환 [서버] html 전송 [클라이언트] 받음 그렇다면 다음과 같은 상황은 어떨까? 예를 들어 제품 상세 페이지가 있다고 해보자..

현재 프로젝트에 Next.js를 도입하고 환경세팅을 하던 중, IE 11 에서 SCRIPT:#### : Unable to get property 에러와 syntax error를 만났다. polyfill을 꼼꼼하게 했음에도 불구하고 문제가 생긴 이유가 뭔지 찾아보니, transpile되지 않은 종속성 노드 모듈에서 문제가 생겼다는걸 알았다.(서드파티 문제라는 말) How to make IE 11 compatible with Next.js ? · Discussion #13922 · vercel/next.js github.com martpie/next-transpile-modules Next.js plugin to transpile code from node_modules - martpie/next-trans..

작년 12월 21일. React 팀에서 새로 공개한 따끈따끈한 신기술! React Server Component에 대해 알아보자. React Server Component 줄여서 RSC는 단어 뜻만 보면 서버에서 뭔가 하는 것처럼 보인다. 그럼 이게 기존 서버사이드 렌더링과 뭐가 다른 것일까? 대체 뭐길래 따끈따끈하게 공개한 걸까? 지금부터 알아보자. 리액트 생태계에서 Server Side Rendering(SSR) 은 이미 원활하게 지원되고 있다. 특히나 Next.js를 통해 잡다하고 귀찮은 설정 등이 편해지면서 React를 통한 SSR은 충분히 대중화된 상황이다. [react] What is The Difference Point Between Next.js & Create-React-App? (Rea..