# styledComponent

15개의 포스트
post-thumbnail

Styled component의 theme 활용 팁

styled component의 theme provider 기능을 활용하면 특정 variable에 css값을 할당해놓고 추후에 변경사항이 있으면 프로젝트 내부에서 일괄적으로 변경 가능하다. 위의 예에서 일반적으로 리터럴로 styled component를 활용해서 작

2022년 4월 3일
·
0개의 댓글
post-thumbnail

1.3 - twinter cloneCoding 6

어제 공부했던 Typescript를 이용해서 이전에 클론코딩했던 winter를 JS => TS로 변환해보았다.그리고 생각보다.... 많은 시간과 노력이 필요했다...아직 타입이 익숙지 않아 구글링하는데 많은시간이 걸렸다ㅜㅜ 꾸준히 써가면서 익히고 TS 문서를 정독해봐야

2022년 1월 3일
·
0개의 댓글
post-thumbnail

1.2 React masterClass

이번에는 typescipt에 대해서 공부했다. typescript를 간단하게 설명하자면 javasciprt + type인 언어로 JS의 superset이다. js의 장점이자 단점은 type의 정의가 필요없다는 점이다. js에서 알아서 변환하기 때문에 디버깅시에는 알 수

2022년 1월 2일
·
0개의 댓글
post-thumbnail

React | 밀리의 서재 클론 프로젝트 회고록 ✨

밀리의 서재 클론 프로젝트

2021년 10월 3일
·
0개의 댓글
post-thumbnail

MongoDB & React 복습

0929이전에 했던 내용이지만 DB를 MySQL에서 MongoDB로 바꾸어서 배포 진행1) AWS 에서 EC2 인스턴스 만들고 탄력적 IP주소 발급 받기2) putty를 이용하여 Ubuntu 터미널 실행3) 패키지 설치하기4) Filezila 를 이용하여 VScode에

2021년 9월 29일
·
0개의 댓글

[React]Styled Component

styled component 를 import 해준다사용하고 싶은 컴포넌트를 만든다const 뒤에 사용하고 싶은 컴포넌트명을 넣어준다(첫글자는 대문자로 사용) styled. 뒤에 원하는 element 태그명 작성 백틱사용해서 그 안에 원하는 style 작성원하는 곳에

2021년 9월 26일
·
1개의 댓글
post-thumbnail

TIL 042 | Styled-Component

리액트를 사용하면서 SASS 를 사용하게 됐다. 기존의 CSS 만을 사용하는 경우에 비해서 nesting으로 인한 편리함이 마음에 들었다. 또, class 명 역시 비교적 길어지지 않게 작성할 수 있어서 편리했다. 하지만, 여전히 class 명에 대한 고민은 존재했고

2021년 9월 19일
·
0개의 댓글
post-thumbnail

Project - 2 - Clone - KREAM

부트캠프 2차 팀프로젝트로 팀원 6명이 한 팀으로 구성되어 신발 경매 사이트인 KREAM를 클론 코딩 하였다. 이번 2차 프로젝트는 팀원들이 각자 구현해보고 싶은 기능이 명확하여 이에 중점을 두고 진행을 하였다. KREAM 웹페이지 클론 프로젝트 회고 이번 2차 프로

2021년 8월 1일
·
1개의 댓글
post-thumbnail

Styled Component

오늘은 Styled Component에 대해 배워보았습니다 다소 헷갈리는게 있지만 정리해보겠습니다 .Styled Component 란 무엇인가 styles 지정과 React component를 생성을 동시에 할 수 있는 유용한 녀석이다 어떻게 사용하는가 해당 레포 프

2021년 7월 5일
·
0개의 댓글
post-thumbnail

React와 StyledComponent로 드롭다운 구현하기

React와 StyledComponent로 드롭다운 구현하기

2021년 6월 26일
·
2개의 댓글
post-thumbnail

TIL 50 | Styled Component Helper - css

Styled Component Helper 중 css에 대해 간단히 알아보는 글

2021년 5월 25일
·
0개의 댓글
post-thumbnail

TIL 49 | Styled Component 초기세팅 - Theme.js & basics

영어 문서 읽기 싫어서 한글 자료 찾아다니다가 종택님이 이상한거 보지 말고 공식문서 보라고 해서 내가 기억하려고 쓰는 TIL

2021년 5월 24일
·
0개의 댓글

[Gatsby JS - Typescript] StyledComponent 로 Dark Theme 구현하기.

Gatsby JS를 간단히 말하자면 정적페이지이다.그래서 동적으로 Javascript 코드로 CSS를 바꾸는 방법은 정적페이지인 Gatsby JS에는 CRA로 만드는 웹페이지와 다르게 해줘야한다.작성중Styled Component에서 제공하는 Theme(직접 커스텀)

2021년 3월 12일
·
1개의 댓글
post-thumbnail

[Styled Component] Using Link

여지것 useHistory ReactRouterDom 사용해서 페이지 간 이동을했다. 하지만 내 사이트 안에서 페이지 이동은 Link가 더 맞다고하여 styled component link를 사용하여 refactoring을 했다. https://reactrou

2020년 11월 1일
·
0개의 댓글
post-thumbnail

PWA App글꼴 바꾸기

현재 Toy project로 Progressive-Web-App 제작중인데(React로), 스타일을 StyledComponent 사용중이다. 스타일 컴포넌트 사용하면서 전체 글꼴 바꾸는 법!보통 프로젝트의 index.js에 createGlobalStyle 모듈을 im

2020년 5월 3일
·
0개의 댓글