전체 글
[react] TypoComponent
Typo를 관리하는 컴포넌트. 테마에 지정해놓은 Typo의 값을 사용하는 것에만 집중했다. import React from "react"; import { WithChildrenAndStyle } from "../../../interfaces"; import { styled } from "../../../styles/Themes"; export interface Props extends WithChildrenAndStyle { ellipse?: boolean; type?: "body" | "head"; dp?: "block" | "inline" | "inline-block" | "flex"; ws?: "pre" | "no-wrap" | "pre-wrap"; s?: string; c?: string; } ..
[react] CSS-in-JS
최근 지인으로부터 css in js 에 대한 불만 아닌 불만을 들을 기회가 있었다. css, js, html이 각자 가지고 있는 역할이 분명히 다른데, (컴포넌트 위주의 웹 개발 환경이 득세하다보니) css in js등의 등장으로 그 역할이 모호해지고 있다는 것이다. 그 말에도 일리가 있다고 생각했다. 사실 구현의 측면에서는 그 역할이 사라지거나 불분명해지진 않았다. 하지만 컴포넌트 위주의 웹 개발에서는 html태그의 계층구조, 스크립트와 dom의 연결, bem등을 사용한 css클래스 네이밍 등의 작업에 많은 시간을 투자하지 않고 결과물을 낼 수 있게 된 것은 사실인 것 같다. css in js가 가지고 있는 성능상의 이슈도 있고, 기술에는 정답이 없다고 생각하는 만큼 이러한 추세가 앞으로 또 어떻게 변..
[Electron] 녹취록 작성기(STT).exe 개발기
오랜만에 올리는 취미 개발이다. 사실 그 사이에 만든 다른 게 있긴 한데.... 그 포스팅은 좀 나중에 올리기로 하고 가장 최근에 일렉트론으로 만든 녹취록 작성기 얘기를 해보려고 한다. 처음 일렉트론 이야기를 듣게된 계기는 지인 개발자분의 언급이었다. 얼마 전, 한창 리액트를 공부하며 재미를 느끼고 나름 나름 스터디도 진행하던 도중이었다. "나중에 관심있으면 리액트로 윈도우 프로그램도 만들어보세요." "네?? 그런것도 가능해요?" "일렉트론이라고 node.js로 만들어진 프레임워크 있어요" "오오....!" 최근 크롬 확장프로그램을 리액트로 만들어 보면서 리액트 생태계의 확장성에 감탄을 마지않던 차였기 때문에 '조만간 일렉트론으로 뭐라도 한 번 만들어보고 만다'라고 단단히 벼르고 있었다. 그러던 중, 사..
[Next.js] 페이지 스크롤 상태 유지하기
CRA 프로젝트를 진행하면서는 스크롤 상태 유지(scroll restoration)를 하기 용이했다. 근데 next로 넘어오면서 자체 라우팅 시스템을 사용함에 따라 react-router-dom을 사용한 기존 방식 (router에서 넘어온 history객체 내에 action을 감지해서 pop 식별 후 처리)을 사용할 수 없게 되었다. Next 내부에서 기본적으로 스크롤 복원 기능을 제공하기는 한다. 그러나 내가 작업 중인 페이지에는 목록 내부 요소 크기가 스크립트를 통해 정해지기 때문에, 목록 -> 아이템 -> 뒤로 가기(목록) 작동을 했을 경우 정확한 스크롤 위치로 돌아오지 않는 이슈가 있었다. 이러나저러나 페이지 스크롤 복원 방법은 여기저기 널려있고, 그중에 괜찮은 것들을 짬뽕해서 구현했다. 목표는 ..
[NextJS] getInitialProps에서 redux-saga 사용하기
CSR에서는, 페이지가 로드되고 난 다음 ajax요청을 통해 값을 가져오고 그 데이터를 뿌려준다. [클라이언트] 페이지 접근 [서버] html, js 전송 [클라이언트] 빈 html, 필요한 js파일 받음 [클라이언트] js 로드 [클라이언트] 필요한 데이터 요청(ajax) [클라이언트] 결과물 반환 [클라이언트] 렌더링 그러나 SSR에서는 SEO등의 목적으로 인해 클라이언트에 페이지를 전송하기 전에 데이터 요청을 해야 할 상황이 생긴다. [클라이언트] 페이지 접근 [서버] 페이지 렌더링에 필요한 데이터 ajax 요청* [서버] 결과물 반환 [서버] 렌더링 [서버] html로 변환 [서버] html 전송 [클라이언트] 받음 그렇다면 다음과 같은 상황은 어떨까? 예를 들어 제품 상세 페이지가 있다고 해보자..
[NextJS] IE script####, syntax error 이슈 해결
현재 프로젝트에 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..
[react] React Server Component(RSC) 소개
작년 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..
[Styled-components] 미디어 쿼리 쉽게 쓰기
반응형 웹 구현에 대한 방법은 여러 가지가 있다. 그 중에서도 무난하면서 비용이 적게 드는 방법은 바로 미디어 쿼리를 활용하는 방법이다. 미디어 쿼리 사용하기 - 웹 개발자 안내서 | MDN 미디어 쿼리 사용하기 Jump to sectionJump to section 미디어 쿼리는 단말기의 유형(출력물 vs. 화면)과, 어떤 특성이나 수치(화면 해상도, 뷰포트 너비 등)에 따라 웹 사이트나 앱의 스타일을 수정할 때 developer.mozilla.org 스타일 시트 내에서 선언되어 사용되기 때문에 별도의 js실행 없이도 구현이 가능하다는 장점이 있다. 특히나 서버사이드 렌더링으로 구현하는 페이지의 경우 이 장점이 더욱 빛난다. 노드 서버에서 window 객체를 얻을 수 없기 때문에 클라이언트의 창 크기를..