어제의 나보다 성장한 오늘의 나

Next.js를 사용하여 프로젝트를 진행하기로 하였다. 현재 상황과 Next.js의 호환성을 고려하여 css Framework를 선정하고 있다. 1. 현재 상황 디자이너가 없다. 능력 있는 디자이너와 함께 협업을 했더라면 tailwind css 하나만 사용해도 괜찮았을 것 같다. 하지만 모달, 사이드 바 등등 컴포넌트들을 직접 만들어야 하는 상황이 있어서 컴포넌트를 제공해주는 무언가가 필요하다. 2. Next.js 의 호환성 이번 프로젝트에서는 UI가 큰 비중을 차지 하지는 않아서 최대한 Next.js의 장점을 살려서 서버 사이드를 최대한 활용 하려고 한다. 일단 클라이언트 사이드에서 많이들 사용하는 CSS-In-JS..! 예쁜 UI 컴포넌트들을 많이 제공해주지만... Next.js의 서버 컴포넌트는 C..

리액트에서 클래스를 설계하고 컴포넌트 내에서 클래스 인스턴스를 활용하는 코드를 작성하였는데, 더 효율적으로 관리하는 방법을 배우게 되어 공유하고 싶은 마음에 글을 작성하게 되었습니다. 두 가지에 초점을 맞췄습니다 1) 인스턴스의 불필요한 재렌더링 방지 2) 인스턴스의 전역적인 접근 막기 ( 사이드 이펙트 방지 차원 ) 1. 처음 작성했던 클래스 방식 ( 예시 코드 ) calculator.js export class Calculator { add(a, b) { return a + b; } multiply(a, b) { return a * b; } } page.jsx export default function Page(){ const [first , setFirst] = useState(1); const [..

Next.js로 프로젝트를 하면서 드는 의문이 있다. 왜 MUI 같은 라이브러리들은 자꾸 호환이 안된다고 하는 걸까?? tailwind는 왜 되는걸까?? 공식 문서를 보면 다음과 같이 나와 있다. Next.js와 호환이 잘되는 것들 1. CSS Modules 2. tailwind CSS 3. Sass Next.js와 호환이 잘 안되는 것 CSS-in-JS chakra-ui kuma-ui @mui/material @mui/joy pandacss styled-jsx styled-components stylex tamagui tss-react vanilla-extract 근데 또 emotion은 이제 지원한다고 한다. CSS-in-JS가 지원이 안되는 이유는?? 이유는 다음과 같이 나타나 있다. Warning..

리액트 공식 문서에 따르면 useSyncExternalStore는 '외부 스토어를 구독할 수 있는 React 훅' 이라고 나와있습니다. 외부 스토어가 뭘까요?? 반대로 외부 스토어가 아닌 경우에 대해서 먼저 생각해보면 이해하기가 수월합니다. 보통 우리는 구독할 데이터를 useState나 useContext 등의 리액트 훅을 이용하여 state에 저장 하고 사용합니다. setState로 값을 수정하면 자동으로 리렌더링이 일어나죠. 하지만 이것들은 리액트 내부에서 사용될 때만 가능합니다. 리액트 훅이니까요. 반대로 리액트 내부에서 이용하지 않는 경우는 뭐가 있을 까요?? class를 사용하거나 function 으로 만들어 외부 저장소를 만드는 경우를 들 수 있습니다. counter.js 클래스 형태 cla..

사내에서 파이썬 AI 모델을 다룰 일이 있어서 파이썬 가상 환경 설정 방법을 공부하면서 커맨드를 정리하였다. 내가 사용하기 위해 정리 한 것이라 다소 정리가 되어 있지 않을 수 있다....😅 글로벌 파이썬 버전 확인 python --version Pyenv 사용 내 컴퓨터에 설치된 모든 파이썬 버전 확인 pyenv versions 원하는 Python 버전을 pyenv를 통해 설치합니다 pyenv install 3.8.6 글로벌 파이썬 버전 변경 pyenv global [파이썬 버전] 설치한 Python 버전으로 가상 환경을 생성합니다. pyenv virtualenv 3.8.6 my-virtual-env-3.8.6 생성한 가상 환경을 활성화합니다 pyenv activate my-virtual-env-3.8..

HTTP를 공부하다가 Resource, URI , URL , URN 의 개념에 대해 공부하게 되었습니다. 겹치는 부분이 많다 보니 제대로 공부하지 않으면 굉장히 헷갈리는 개념입니다. 그래서 오늘 이것들에 대해 정리를 해보기로 했습니다. 1. Resource 인터넷 상의 Resource 란 URI(Uniform Resource Identifier)를 통해 유일하게 식별되고 접근할 수 있는 모든 형태의 디지털 자산 또는 서비스를 의미합니다. 이는 웹 페이지, 이미지 파일, 비디오, API 엔드포인트, 문서, 소프트웨어 컴포넌트 등 인터넷을 통해 제공되고 사용될 수 있는 데이터나 기능을 포함합니다. 물론 html, css 파일도 이곳에 포함됩니다. 이것들을 식별할 수 있도록 도와주는 것에는 URI, URL ,..

JS로 벡엔드를 개발할 때 DI를 어떻게 설계 해야할 지 고민이 될 것이다. 이 때 tsyringe는 좋은 선택이다. JS 의존성 주입 라이브러리로 tsyringe는 코드 관리에 아주 좋다. 왜냐하면 다른 라이브러리에 비해 코드의 양이 매우 짧다. 그 이유는 이 라이브러리는 의존성을 데코레이터 기반으로 Container에 등록 해주는 방식인데 클래스에 데코레이터가 붙어있으면 자동 으로 container에 등록해주기 때문에 코드의 양이 줄어든다. ( 마치 스프링 같다. ) 그럼 사용하는 방법에 대해 코드로 알아보자 1) 설치 방법 // npm npm install --save tsyringe // pnpm pnpm add tsyringe // yarn yarn add tsyringe 2) tsconfig...

개발팀 내에서 빠른 생산성을 위해 fastify를 사용하기로 하였고 개발 도중 의존성 주입에 필요성을 느끼게 되어 awilix를 도입하고자 하였다. 이에 따라 오늘은 fastify에서 awilix를 어떻게 사용하는 지에 대해서 알아보자. 자바스크립트로 의존성 주입을 설계 하다보면 해당 클래스나 함수에 필요한 의존성들을 미리 등록해 두어야 한다. 이를 Awilix에서는 container로 관리한다. 필요한 의존성들은 미리 container에 등록(register) 해두고 필요한 곳에서 꺼내서(resolve) 사용한다. 1) 설치 npm i @fastify/awilix awilix 2) 플러그인 연결 fastify와 awilix를 연결해 주는 작업을 진행한다. const { fastifyAwilixPlugi..