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세대 웹자바스크립트가 등장하면서 웹은 더욱 발전했다...

MSW(Mock Service Working)은 API Mocking 작업을 하기 위한 라이브러리 중 하나이다. 서비스 워커를 통해 호출을 가로채 대신 응답을 하는 방식으로 API Mocking을 도와준다. MSW에서 중요한 개념인 서비스 워커부터 간략하게 알아보자. Service Worker 서비스 워커는 이벤트 기반 워커로써 웹 애플리케이션의 메인 쓰레드와 분리된 별도의 백그라운드 스레드에서 실행 시킬 수 있는 기술 중 하나이다. 서비스 워커 덕분에 애플리케이션의 UI Block 없이 연산을 처리할 수 있게 됐다. 이를 기반으로 하여 다양한 사용이 있다. mock API, push 알림, 백그라운드 동기화 등으로 활용할 수 있다. 아래의 이미지는 서비스 워커가 네트워크와 브라우저 사이에 존재하여 ap..

전역 상태관리를 위해 많은 도구들이 사용된다. recoil, redux, mobx, context 등.. 전역 상태관리에 대해 간단히 알아보고 도구들에 대해 알아보자. 리액트의 경우 컴포넌트를 대부분 작은 단위로 나누어 구조를 구성한다. 부모의 자식, 자식의 자식... 과 같은 구조를 가지게 되고, 상태값은 단방향으로 부모에서 자식에게만 값을 전달이 가능하다. 여기서 자식은 상태를 받기 위해 props를 통해 전달받게 된다. 간단한 구조에 있어 props를 통해 전달받는 것은 문제가 되지 않을 것이다. 반면, 복잡하고 자식의 깊이가 깊다라고하면 props를 자식의 자식의 자식의 자식까지 계속 전달해줘야한다. 이러한 것을 props drilling라고 한다. props를 통해 받는 상태의 단점은 뭘까? 가..

개발자 초기 사이드프로젝트로 진행했던 URURL 프로젝트가 있다. 이 프로젝트는 완전 주니어 시절 react를 배우고자 접했던 프로젝트이다. 1년이 조금 넘는 기간동안 이어지다가 결국 종료가 되어버린 프로젝트이다. 시작 날짜 2024.03.22(금) 갑자기 프로젝트를 꺼낸 이유? 리팩토링, 버전 업데이트, 테스트와 같은 작업을 하기에 매우 좋은 상태라고 생각한다. 처음에는 새로운 사이드프로젝트를 진행할까 고민하다. 그것보다는 과거에 내가 했었던 코드를 보면 되돌아보고, 개선해나아가는게 큰 도움이 될 것이라고 생각했다. 단순이 만드는 것에 초점을 맞추는 것이 아니라, 개선하고, 업그레이드에 초점에 맞춰 진행하고자 했다. 기간은 얼마나 잡나? 완전 뜯어 고치며, 내가 해보지 못했던 것들을 공부하고 적용해 나..