공부 기록일지📚

문제상황classnames 라이브러리를 활용하여 동적인 클래스 명을 부여해서 컴포넌트 마다 다른 폰트 컬러를 적용하려고 하니 css먹지 않았다. 이유를 알 수 없어서 오타가 난건지 확인을 여러번 했고 디버깅도 했는데 원인을 찾을 수가 없었다.(당연하다 CSS는 디버깅이 어렵다.) 컴파일 순서때문인지 혹은 값을 내려주는 컴포넌트에서 변수명을 틀린 것인지 전부 다 확인해봤으나 문제를 찾을 수가 없었다. 🤯원인지금은 해결해서 알게된 사실이지만 개발자 도구에서 내가 classNames함수(classnames 라이브러리 제공 함수)를 통해 부여한 동적인 클래스 값이 해싱되지 않았다면 지금 해당 컴포넌트의 모듈 scss가 아니라 단순 css 클래스명이 부여된 것이라 CSS가 인식이 안된 것 같다. 문제였던 코드//..

개인적으로 mui, bootstrap 등의 UI프레임워크를 써보면서 불편함을 느꼈습니다. Mui를 사용했을 때, api를 읽고 제가 원하는 기능을 추가적으로 커스텀해야하는 상황이 생겼었는데 이 과정에서 많은 고통을 겪게 됐습니다. 많은 개발자들이 UI 프레임워크를 갖다쓰는 이유로 완성도 높은 디자인과 빠른 아웃풋을 낼 수 있는 점(생산성)을 들 것이라 생각합니다. 어떤 기능을 따로 추가적으로 붙이거나 디자인을 변동시키지 않는다면 UI 프레임워크는 좋은 선택이 될 수 있습니다. 저는 길게 봤을 때 좋은 선택이 아니라고 느꼈습니다. MUI에서 제공하는 컴포넌트를 갖다 썼을 때, 내가 원하는 대로 작동하지 않으며 그 이유를 찾기 어렵고 이 과정에서 시간이 많이 소요됐기 때문입니다. api를 뒤적이며 속성을 하..

이전에 프로젝트는 CRA로 생성하여 webpack기반이었고 이 외에도 next로 프로젝트를 했을 때에도 기본적으로 CNA(create next app)도 webpack기반이라 webpack bundle analyzer 를 사용하면 됐습니다. 하지만, Vite의 경우는 개발모드에서 esbuild를 사용하고 프로덕션용 최종 배포 시에는 rollup을 활용합니다. 즉, rollup의 플러그인을 활용하여 번들 사이즈를 체크해야한다는 소리입니다. 물론 vite에서도 webpack의 플러그인을 활용할 수는 있다고 합니다.(저는 그냥 호환성을 고려하여 roollup의 플러그인을 활용했습니다) 비주얼라이저 (혹은 애널라이저)는 어떤 것을 갖다 쓰면 좋을 지하고 확인하던 차에 npm trends 로 어느 패키지가 가장 ..

리액트 프로젝트를 하다보면 index.css 와 App.css가 따로 존재하는 것을 볼 수 있습니다. vite + react 프로젝트를 만들면서 전역 css를 어디에 배치해야할까 하다가 기존 템플릿에서 제공하는 root가 다른 것을 확인할 수 있었습니다. src>index.css 에는 :root src>App.css 에는 #root 둘 다 전역 CSS같은데 왜 같은 root를 다르게 표현할까 라는 생각이 들었습니다. 저는 리액트가 같은 :root 를 컴포넌트에 쓸 때는 다르게 표현한 것은 아닐까 라고 생각하고(모듈을 번들링할 때, 다르게 트랜스파일되는 줄..) App.css에 있는 #root를 전역 css로 생각하고 있었는데요. 당연히 틀렸습니다. 자주 보지 않으니 가장 근본적인 App.jsx가 어느 d..

!! 연산자는 자바스크립트에서 boolean이 아닌 값을 boolean으로 변환시킬 때 사용한다. 이를 통해서 변수가 존재하는지 혹은 유효한 값을 갖는지 확인할 수 있다. 데이터를 자동으로 불리언으로 바꿔준다. 만약 데이터가 falsy값 (0, "",'',null, NaN, undefined)들 중 하나라면 false를 반환할 것이다. 이 외의 경우는 true를 반환한다. 이를 통해서 falsy값을 논리연산 boolean값만 반환하게 만들 수 있다. 이중 부정 연산자 예시 아래와 같이 2가지 방법으로 사용할 수 있다. const isAnd = (a,b) => !!(a&&b) isAnd('hello','world') //true !!('hello'&&'world') // true 나의 경우, 단일 연결 리..

단일 연결 리스트와 JS의 배열의 가장 큰 차이는 index유무이다. 연결 리스트는 단순히 포인터로 연결된 노드의 집합이며 index를 가지고 있지 않아 특정 값에 접근하는데 적합하지 않다. 배열의 경우 index를 가지고 있어 특정 값을 읽어오는 것에 능하다. 메모리 상에 연속적으로 저장되어있는 특정을 갖기 때문이다. 데이터 탐색에는 배열이 용이하고 추가와 삭제의 경우는 연결리스트가 용이하다. 배열(Array) 입력된 데이터들이 메모리 공간에서 연속적으로 저장되어있는 자료구조 메모리 상에 연속적으로 저장되어있는 특징 index를 통한 접근 용이(임의 접근 가능) 배열의 크기는 처음 생성할 때 정하며 이후에는 변경 불가-> 배열은 정적(static)인 자료구조 연결 리스트(linked list) 동적인 ..

Next.js에서의 환경 변수 raect.js 로 개발했을 때 환경 변수를 추가하기 위해서 .env 로 시작하는 파일을 만들어 선언하고 그 파일 안에 특정 네이밍 규칙(prefix)을 통해 환경 변수를 선언해서 사용했다. Next도 비슷하게 동작한다. 하지만 Next.js는 서버 사이드에서 동작하는 특징을 가지기 때문에 이를 고려하지 않고 아무런 네이밍을 통해 환경 변수를 선언하면 반응하지 않는다. Next.js에서 환경 변수를 설정하고 배포할 때에는 다음과 같은 주의사항이 있다. 환경 변수의 이름 환경 변수의 이름은 `NEXT_PUBLIC_` 접두어(prefix)를 붙여야 클라이언트 측에서 접근할 수 있다. 이 접두어가 붙은 환경 변수는 자동으로 노출이되며, 다른 변수들은 서버 측에서만 접근이 가능하다..

vercel에 넥스트 프로젝트를 배포하면서 환경 변수를 따로 넣어주지 않아 배포실패로 골머리를 썪다가 제대로 정리해야겠다는 생각이 들었습니다. 우선 우리가 통상적으로 react로 프로젝트를 만들 때에도 .env에 환경변수를 넣어서 관리했던 것을 기억할 것이다. 환경 변수란? environment variable 일반적으로 우리는 코드 베이스는 하나만 관리하고, 개발, 테스트 운영등 여러 환경에 어플리케이션을 배포한다. 어느 환경에 배포하느냐에 따라서 다르게 설정되어야 하는 값들은 보통 운영 체제 수준에서 환경 변수를 통해 관리하게 된다. 대표적으로 DB 설정을 들 수 있는데, 운영 환경에서는 데이터 센터나 클라우드 인프라 상의 상용DB를 사용하고, 개발 환경에서는 개발자의 PC상 로컬 DB를 사용하는 경..