코딩하는라민

[React] React Portal 사용하기  Portal 이란?리액트의 `Portal` 은 리액트 애플리케이션에서 DOM 트리의 다른 위치로 자식 요소를 렌더링하는 기능을 제공한다. 리액트는 body 태그 아래에 root 라는 id 를 가진 진입점에 가상 DOM 을 형성하고 실제로 모든 컴포넌트를 렌더링을 한다. Portal 은 새로운 진입점을 만들어서 부모 요소의 DOM 트리 구조와 별개의 위치에 컴포넌트를 렌더링하는 기능이다. 공식문서Portal은 부모 컴포넌트의 DOM 계층 구조 바깥에 있는 DOM 노드로 자식을 렌더링하는 최고의 방법을 제공합니다. Portal 을 사용해서 독립적인 위치에 컴포넌트를 렌더링하면 코드가 간결해져 유지보수성이 증가한다.부모의 스타일에 영향받지 않아 스타일링 충돌을 ..

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: ${({ today }) => (today..

[React+TS] Styled-components theme 적용하기  이전 프로젝트들은 GlobalStyle 에 `:root` 를 이용해 테마 색상을 정의해서 사용했다. styled-components 에도 이러한 기능이 내장되어 있어 사용해보고자 한다. styled-components 는 `The..

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