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

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..