# styled component

cmk0905

Styled Component폴더에서 export 해서 하는 상황 아래 코드는 현재 쓰고 싶은 ref 요소들 그런데 여기서 useRef 사용시 current에 넣어야 하는데... 저번 개인프로젝트 때 current 에 넣지 않고 다른 key값을 형성해 넣어 사용 했던 기억이 떠올랐다. 그리하여 이 식으로 하니까 ref 의 key && val...

blackpaint

안녕하세요! 여러분 잘 지내셨나요? 벌써 목요일이네요... 정말 시간이 어떻게 지나가는지 모르겠습니다 ㅜ 요즘 계속 바쁜 하루하루를 보내는 것 같습니다...ㅎ 모두 힘내자구요..! 네! 오늘도 React에 대한 포스팅을 남겨보려고 합니다! 바로 가보실까요?

cmk0905

데이터를 받아와서 map으로 컴포넌트를 만들고 나의 칭구친구 콘솔을 확인하였는데 error 징짜... 딱 봐도 예전에 useRef 공부하면서 forwadRef를 배웠고, 개인 프로젝트 할 때 써야 할 상황이 있었는데, 마음이 급급해서 다른 방법으로 우회 했는데, 결국 맞닥드렸다.. > 교훈 맞닥드렸다가 회피하면 결국 다시 맞닥드린다. . . 물...

alswnsgur119

오늘은 Header와 footer 그리고 메인페이지의 UI를 만들었다.메인페이지의 컴포넌트는 상단에 Main컨텐츠 아래에 content4개 총 두개로 나누었고상단의 내용은 fakedata의 데이터와 math.floor와 random을 사용해 새로고침 될때마다 랜덤으로

gaoridang

https://stackoverflow.com/questions/70309561/unable-to-import-svg-with-vite-as-reactcomponent위 글에서 보다시피 처음에는 vite-plugin-svgr 이라는 플러그인을 사용해서 컴포넌트

alswnsgur119

프로젝트 취지와 설명 > 프로젝트 이름 : 내.베.프(my best project) 간단 소개 : 내일배움캠프 3기 수강생들의 프로젝트를 한번에 모아볼 수 있는 사이트. 평소 다른 팀들의 프로젝트는 서로 물어보지 않으면 알 수 없었기에 앞으로 캠프기간동안 내부적으로

qmflf556

custom storybook control 설정 https://thoughtbot.com/blog/creating-a-custom-color-control-in-storybook warning className did not match 오류 https://jha-m

lgs03042

styled-components는 CSS-in-JS 라이브러리로, 런타임에 JavaScript를 사용하여 스타일을 적용한다. 이는 추가적인 JavaScript 계산이 필요함을 의미하며, 성능에 영향을 줄 수 있다. Tailwind CSS는 정적 CSS 클래스를 사용하며

cmk0905

attr - ㅡㅡ 2시간 걸림 징짜... > styled.img.attrs ( props => ( {객체를 반환해야 하는 조건이 있음} ) 2023-11-23 추가 반드시 attrs의 속성에 value 값 넣을 때 `` 백틱 꼭 넣어주자!!! ThemeProvider로 전역 props 전달 하는데 img를 attrs로 뿌려주는 거 2시간 걸림 징짜.....

cmk0905

ThemeProvider 안에 있는 styled-component들이라면 props 전달 안해줘도 쓸 수 있다. ThemeProvider에는 속성 값에 theme이라는 것이 있고 그 theme 안에는 '객체' 형태로 넣어줘야 한다. 우리가 일반적으로 부모 요소에서 자식요소에게 props 전달 할 때 를 써주는 것이 맞지만 ThemeProvider ...

cmk0905

Erro > StyleSheetManager shouldForwardProp={...}>(connect an API like @emotion/is-prop-valid) or consider using transient props ($ prefix for automatic filtering.) 그러나 console 창에서 노란색 문구로 shouldF...

hyerin0930

항상 퍼블리싱 작업을 하다 보면 색상이나 폰트 크기 관리에 대해 고민하곤 한다. 기존엔 palette.ts와 typography.ts로 파일을 따로 관리해서 import 하는 방식으로 사용했다.그 방식도 모든 styles 파일에 import를 해야하는 불편함(?)이 있

hw1635

👉 styled-components는 우리가 리액트에서 CSS-in-JS 방식으로 컴포넌트를 꾸밀수 있게 도와주는 패키지!(1) VSCode Extension 설치이 익스텐션을 설치하면 styled-components안에서 스타일 코드를 편하게 작성할 수 있다!(2)

boyfromthewell

백만년만에 블로그를 쓰는거 같다. 운좋게 1년전부터 프론트엔드 개발자로 일하게 되어 열심히 직장생활을 하구있다...네이버를 사용하다보면 이런 광고 스타일(?)이 많이 보였는데 (전문용어로 뭔지는 모르겠다 쩝)멋있어보여서 만들어보았다.

hediar

theme.tsmain.tsx에 theme를 두었는데 안됐다가 GlobalStyle과 같은 구간에 두니 색상 적용이 잘된다.

dhwnatjr678

오늘도 어김없이 회사 홈페이지 제작 작업중에 콘솔에 빨간색이 눈에 들어왔다.엥 이게뭐지 분명히 혹시나 작동이 안되는게 있나 매일 확인하던 나에겐 좀 충격이엿다.분명히 작동 안되는게 없는거 확인 했는데 콘솔에 떡하니 에러가 떠있엇다.우선 바로 복사한뒤에 구글링 여행을 떠

dhwnatjr678

https://marketplace.visualstudio.com/items?itemName=styled-components.vscode-styled-componentsvscode에서 이걸 다운받자자동완성 플러그인

taehyung

styled-component 를 배우기전에 ES6의 템플릿 리터럴 문법을 알고넘어가려 합니다. 템플릿 리터럴 위와같이 사용이 가능한데, 객체나 함수를 출력하면 어떻게될까요? 위 문법을 이해하셨다면 이제 리액트 스타일링의 꽃인 Css-in-Js에 관해 포스팅하려고

syon013

Styled-components 1. Styled-components 사용 이유 장점 화면에 컴포넌트가 렌더링 되었는지 추적하여 컴포넌트에 대한 스타일을 자동으로 삽입하여 줍니다. 코드를 적절히 분배해 놓으면 최소한의 코드만으로 화면이 띄워질 수 있습니다. 스타일

sky-pey

~79일차~Css-in-JS라고 하는 JavaScript 파일 안에서 CSS를 처리할 수 있게 해주는 대표적인 라이브러리https://styled-components.com/docs/basics@latest 없이도 설치가 가능하지만 간혹,npm ERR! Can