[Study] 개발 공부41 [styled-components/React] styled-components: it looks like an unknown prop "X" is being sent through to the DOM... 경고 메시지 해결하기 어떤 에러일까?styled.div, styled.header 등으로 만든 컴포넌트에React DOM 요소(HTML)에 원래 없는 prop (나의 경우, isLoaded) 이 전달됐다는 뜻이다.React는 HTML 태그에 정의되지 않은 속성(prop)을 넘기면 콘솔에 해당 경고를 띄운다(불필요한 속성 전달 = 성능/표준상 문제) 아래 경고 메시지랑 같은 의미이고, 해결하는 방법도 똑같다.다만, 이 메시지는 styled-components에서, 아래 메시지는 react에서 보내는 차이가 있다.이번에는 좀 더 쉬운 해결방법을 작성해본다.React does not recognize the X prop on a DOM element 경고 메시지 해결하기 [styled-components/React] React d.. 2025. 3. 27. [Study] '--save-dev' 왜, 언제 쓰는지 아시나요? 패키지 설치 때 아무 생각 없이 설치하던 이번에 타입스크립트 rtk를 설치하면서 --save-dev를 왜 쓰는지 궁금해졌다.--save-dev는 개발 의존성(development dependency) 으로 설치하겠다는 의미다. 사용하는 기준npm install some-package → 실행에 필요한 의존성앱이 동작할 때 꼭 필요한 패키지들 (예: react, redux, @reduxjs/toolkit 등)npm install --save-dev some-package → 개발할 때만 필요한 의존성빌드, 타입 검사, 테스트 등에만 필요한 것 (예: @types/react-redux, eslint, typescript 등)앱이 실행되기 위해 꼭 필요한 패키지react, react-dom, react-rou.. 2025. 3. 25. [Study] 서버 사이드 렌더링 vs 클라이언트 사이드 렌더링 SSR (Server-Side Rendering)서버에서 페이지를 그려 클라이언트(브라우저)로 보낸 후 화면에 표시하는 기법을 의미합니다. 장점: 서버에서 미리 그려서 브라우저로 보내주기 때문에 초기 렌더링 속도가 빠릅니다. 단점: 이후 매 요청마다 서버에서 새로운 화면을 만들어 제공해주기 때문에 부하가 큽니다.CSR (Client-Side Rendering)서버에서 받은 데이터를 클라이언트인 브라우저에서 렌더링을 해주는 방식입니다. 장점: 사용자 행동에 따라 필요 부분만 다시 읽어들이기 때문에, 빠른 인터렉션을 기대할 수 있습니다. 단점: 초기 구동 속도가 느립니다. 2025. 3. 24. [Interview] 질문 모음(업데이트 중) 브라우저의 렌더링 과정CORS크로스 브라우징크로스 브라우징은 웹 표준에 따라 서로 다른 OS 나 플랫폼에 대응하는 것을 말합니다.브라우저별 렌더링 엔진이 다른 상황에서도 문제없이 동작하게하는 것을 목표로 합니다.서버 사이드 렌더링 vs 클라이언트 사이드 렌더링SSR (Server-Side Rendering)서버에서 페이지를 그려 클라이언트(브라우저)로 보낸 후 화면에 표시하는 기법을 의미합니다. 장점: 서버에서 미리 그려서 브라우저로 보내주기 때문에 초기 렌더링 속도가 빠릅니다. 단점: 이후 매 요청마다 서버에서 새로운 화면을 만들어 제공해주기 때문에 부하가 큽니다.CSR (Client-Side Rendering)서버에서 받은 데이터를 클라이언트인 브라우저에서 렌더링을 해주는 방식입니다. 장점: 사.. 2025. 3. 24. 이전 1 2 3 4 ··· 11 다음
