코딩하는라민

styled-components props 에러 (잘못된 prop 이 DOM 으로 전달)  문제상황문제 코드프로젝트에서 임의의 props 를 styled-components 로 전달하고, 스타일링을 하는 작업을 진행하고 있었다.스타일의 적용에는 문제가 없어 계속해서 작업을 하던 도중 우연히 콘솔창을 보게 되었고, 경고 문구와 에러 메시지를 마주하게 되었다.for (let date = 1; date ✅ {date} )}const TableItems = styled.td` background-color: ${({ today, theme }) => today ? theme.gray.gray_100 : 'none'}; font-weight: ${({ to..

[React+TS] Styled-components theme 적용하기 이전 프로젝트들은 GlobalStyle 에 `:root` 를 이용해 테마 색상을 정의해서 사용했다. styled-components 에도 이러한 기능이 내장되어 있어 사용해보고자 한다. styled-components 는 `ThemeProvide` 라는 컴포넌트를 제공한다. 이 컴포넌트는 theme 라는 props 에 theme 정보들을 넘겨받아 하위 컴포넌트들에 그 정보들을 사용할 수 있게 해준다. ThemeProvide 이 `Context API` 기반으로 만들어졌기 때문에 가능하다. 즉, Context API 를 통해 여러 하위 컴포넌트들이 Theme 정보에 접근할 수 있도록 해주는 원리이다. Theme 정보 생성하기 style..

[React] React-Router 컴포넌트 VS 컴포넌트 리액트 프로젝트에서 페이지의 이동을 하기 위해서 리액트 라우터를 이용한다. 리액트 라우터이서 Link 컴포넌트를 통해 페이지를 이동할 수 있었는데, v4 업데이트 이후에 등장한 Link 컴포넌트의 업그레이드 버전인 NavLink 컴포넌트가 등장했다. 기능이 추가되었지만 성능 상에는 큰 차이가 없기 때문에 다양한 측면에서 NavLink 를 사용하는 것이 효율적이다. 우선 Link 컴포넌트는 무엇이며 어떻게 사용하는지 간단히 알아보고, NavLink 의 추가적인 기능에 대해 알아보자. 컴포넌트 a 태그와 차이점 Link 컴포넌트는 a 태그와 기능이 유사하다. 하지만 다른점이 있는데 페이지 전환을 방지한다는 것이다. 브라우저의 주소를 바꿀 뿐이지 페..

[책 리뷰] 2024 최적합 빅데이터분석기사 필기 정보처리기사 자격증 취득 후 빅데이터 분석기사 자격증도 취득하고자 계획했습니다. 현지 밀리의 서재 구독중이고, `밀리의 서재 ebook` 으로 해당 도서를 읽었습니다. 빅데이터 분석기사가 정보처리기사와 비슷할 거라고 생각했으나 전혀 달랐습니다. 통계 지식이 포함되어 있어서 처음 접하는 비전공자에게는 상당히 난이도가 있었습니다. 처음에는 시스컴 출판사의 2024 빅데이터 분석기사 필기 핵심요약+적중문제 라는 책으로 필기 시험 공부를 시작했습니다. 책의 가격이 저렴하기도 했고 핵심 요약이라 공부하기 편할 거라고 생각했습니다. 그러나 단순 나열식 개념 때문에 봐도 이해가 되지 않았고, 기출 문제도 교재의 내용을 복붙하여 그대로 붙여놓은 수준이라 공부가 되지 않..

'React' must be in scope when using JSX 에러 새 프로젝트를 생성했는데 JSX 태그에 ESLint 에서 에러가 생겼다. `'React' must be in scope when using JSX` `React v17` 버전부터는 이전과는 달리 React 를 컴파일 시 자동으로 가져온다. 따라서 모든 파일에서 React 를 가져올 필요가 없어졌다. 컴파일 전 function App() { return Hi there!; } 컴파일 후 컴파일 후 자동으로 React 를 가져옵니다. function App() { return React.createElement('div', null, 'Hi there!'); } 오류를 해결하기 앞서 package.json 파일에 react 와 re..

[Supabase] Supabase 로 백엔드 없이 Database 구축하기(기본 사용법) 프론트는 토이프로젝트 시 공공 데이터를 이용하지 않는 이상 CRUD 를 경험해보기 쉽지 않다. `Firebase` 라는 좋은 서버리스 툴이 있지만, `noSQL` 이기 때문에 정말 간단한 CRUD 기능만 구현이 가능해 다양한 기능을 구현하는 것이 불가능해서 불편한 경험이 있다. `Supabase` 에서는 `Postgre SQL` 을 지원한다. 따라서 이 Supabase 를 이용하면 백엔드 개발자 없이도 쉽게 데이터베이스를 구축할 수 있는 것이다! Supabase 란? Supabase 는 Postgre SQL 데이터베이스 기반으로 하는 오픈 소스 백엔드 서비스이다. 이 서비스를 이용하면 백엔드 없이도 쉽고 빠르게 데..

[React, Vite] Vite 에서 .env 환경변수 사용하기 Vite 로 구성된 React 프로젝트를 다루다가 다음과 같은 에러를 마주쳤다. 환경변수 사용을 위해서 .env 파일에 외부로 노출되면 안 되는 key 값을 저장했고, 불러오는 과정에서 발생한 에러였다. 환경 변수란? 환경변수란 프로세스가 실행될 때 사용되는 동적인 값을 말한다. 데이터베이스 연결 정보, API Key, Port Number 등을 환경변수로 설정할 수 있다. 외부로 노출되면 안 되는 중요한 정보의 경우 소스코드에 직접 하드코딩하는 것이 아닌 환경 변수로 관리해야 보안성을 강화할 수 있다. Vite 에서 환경 변수 사용은 다르다. Node.js 환경에서는 `process.env` 를 사용하여 접근할 수 있다. Node.js ..

[React] Axios instance 와 interceptors 로 Axios 효율성 높이기 전역 Axios 기본값 설정하기 axios.defaults 속성을 사용하여 전역 Axios 기본값을 설정할 수 있다. 이를 통해 Axios 요청에 적용되는 기본값을 지정할 수 있다. 전역 Axios 기본값을 설정하면 코드를 간결하게 유지할 수 있고, 일관된 설정을 적용해 코드의 가독성과 유지보수성을 향상시킬 수 있다. axios.defaults.baseURL = 'https://devDiary.com/'; axios.defaults.timeout = 5000; axios.defaults.headers.common['Authorization'] = 'Bearer AccessToken'; axios.default..

[React] React 에서 Axios 사용하기 Axios 란? Axios는 Promise 기반의 HTTP 클라이언트 라이브러리로, 브라우저 및 Node.js 환경에서 모두 사용할 수 있다. 브라우저 환경에서는 XMLHttpRequests 를 생성하고, node.js 환경에서는 http 요청 생성한다. Axios는 백엔드와 통신하기 위해 AJAX 요청을 만들고 응답을 다루는 데에 사용된다. 다른 비동기 통신 api 보다 사용하기 쉬워 백엔드와 통신하기에 수월하다. Axios 를 사용하면 좋은점 Axios 는 XMLHttpRequest, Fetch API 등 다른 HTTP 클라이언트와 비교할 때 좋은 점이 있다. 간단해서 HTTP 요청을 보내고 응답하는 것이 쉽다. 서버에서 받은 응답을 자동으로 JSON..

[Next.js] 모바일 브라우저 환경에서 초기 렌더링 시 미디어쿼리 적용되지 않는 현상 문제 상황 프로젝트 진행 중 모바일 브라우저 환경에서 미디어쿼리가 적용되지 않는 현상을 확인했다. 사용중인 스펙은 `next.js`, `emotion/styled`, `react-responsive`, `vercel`. 데스크탑 브라우저에서 페이지를 오픈했을 때는 미디어쿼리 스타일이 정상적으로 작동했다. 물론 브라우저의 창을 줄여 모바일 뷰포트로 변경되었을 때에도 정상적으로 작동했다. 하지만 모바일 브라우저에서 페이지를 오픈했을 때 미디어쿼리 스타일이 적용되지 않았다. 모바일 환경에서는 왜 적용되지 않는걸까? 🫨 Next.js 에서는 기본적으로 `pre-rendering` 을 한다. pre-rendering 이란 서..