Don’t worry about failures

사이드 프로젝트 리펙토링 과정에서 마이그레이션 작업이 하나가 추가 됐다. styled-component에서 vanilla-extract처음에는 styled-component가 개발경험에 있어 개인적으로 좋다고 생각했다. 컴포넌트로 표현되는 것과 javascript과 함께 컨트롤를 할 수 있다는게 좋다고 생각했기 때문에 사용했었다. 하지만 다른 측면으로도 생각을 해보았다. styled-component의 경우 동작하는 방식이 runtime 때 동적으로 스타일이 적용이 된다. 이는 csr과 어울리는 방식이다. 하지만 지금 사용하고자 하는 Next.js라는 프레임워크는 ssr, rsc와 같이 서버 사이드에서 렌더링을 진행하고자한다. 이를 보았을 때 동작하는 방식이 차이가 있다고 생각했다. styled-comp..

해당 글은 다른 아티클을 보면서, 편향된 개인적인 생각일 수 있다. 이전 사이드프로젝트를 리팩토링하는 새로운 나만의 프로젝트를 하면서 고민되는 사항이 생겼다. 내가 평소 즐겨쓰던 Styled-component를 현재의 프런트엔드 개발 흐름과 잘어울리까? 에대한 고민이다. 일단, 내가 왜 Styled-component를 즐겨썼을까? 개발자 경험이 가장 크다고 생각했다. 위의 코드를 봤을 때 개인적으로는 div로 표현하기보다는 Container으로 표현하는게 내 눈에는 더 파악하가기가 쉽다고 생각했다. 이 외에도 다른 장점들을 살펴보면, 1. 지역 스코프 스타일드 컴포넌트의 동작 방식을 보면, styled.div에 대한 고유 ID와 style을 적용한 css를 기반으로 해시를 생성하고 생성된 값은 clas..

Mockoon이란 프런트를 개발하다보면, Mocking을 모르면 서버에서 아직 개발이 되지않은 api를 마냥 기다려야하나? 그 전까지 목 데이터를 하드 코딩으로 관리를 해야하나? 기본 고민을 해왔을 것이다. 이러한 고민을 해결해 주는 몇몇 가지가 있다. 앞서 MSW에 이어 이번엔 Mockoon에 대해 알아보고자 한다. Mockoon을 간단하게 사용해보면,, 너무 편하고 좋다. 라는 생각을 많이 가지게 된다. 일단 MSW와 다르게 내부 라이브러리를 사용하지않고, 별다른 코드 작업을 하지않아도 된다. 또한, GUI가 제공되면, CLI를 통해도 사용이 가능하다. Mockoon은 OS에 application으로써 설치하여 사용할 수 있다. 각 OS별로 install package를 제공한다. ( install..

개념 이진 데이터를 문자열로 인코딩하는 방법 중 하나. 이진 데이터를 테스트 형식으로 변환하거나 전송하거나 저장할 때 사용. 64개의 ASCII 문자로 이루어진 문자 집합을 사용. A-Z, a-z, + / 로 이루어진 문자. 변환 방식 binary data를 6 bit씩 자른 뒤 값을 아래의 해당되는 문자로 치환. 예) Man의 문자를 ascii 코드로 변경하고 그 코드를 binary로 변경하면 위와 같다. 이를 6bit로 묶으면? 010011 / 010110 / 000101 / 101110 => 19 / 21 / 5 / 46 => 이를 위의 표대로 다시 치환하면 => T / W / F / u 가된다. 결과를 보면 Man => TWFu가 된다. 특징 위에서 살펴보았듯이 Base64로 인코딩한다는 것은 기..

리액트 팀은 사용자의 경험을 증진시키기 위해 많은 연구를 한다. 이전 글에서 살펴보았던 동시성 모드, 서버 컴포넌트 등을 볼 수 있다. 해당 글에서는 리액트 서버 컴포넌트에 대해 알아볼 예정이다.  리액트 서버 컴포넌트를 살펴보기에 앞서 간단하게 렌더링에 대한 간단한 히스토리를 살펴보자.흐름에 따라 가다보면 리액트 서버 컴포넌트가 나오게 된 배경을 알게되고 이해하는 데에 도움이 되어 먼저 살펴보려한 것이다. 1세대 웹1세대 웹에서는 정말 정적인 웹페이지만 구현이 되었었다. 자바스크립트 없이 서버에서 HTML을 응답하여 브라우저는 그대로 뿌려주기만 한 시대였다. 이 때문에 사용자간의 상호작용이 별도로 존재하지 않았다.  진정한 서버사이드 렌더링이다.  2세대 웹자바스크립트가 등장하면서 웹은 더욱 발전했다...