# styledComponent

22개의 포스트
post-thumbnail

2차 프로젝트 중간 회고

2차 프로젝트를 08/01에 시작해서 벌써 일주일이지나 08/08이 되었습니다.1차때는 실수했던것들을 보완해서 생각보다 더많이 구현사항을 구현할수있게 되었습니다!카카오 API로 지도를 불러오는것도 구현해보고 1.여행자/숙소2.국내전체(모달생성)3.체크인&체크아웃(달력을

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

리액트에서 스타일컴포넌트를 잘 써보자!(+다크모드 ) - 기본셋팅편

리액트에서 스타일 컴포넌트를 사용할 때 잘 활용하기 위한 시리즈 1탄 스타일 컴포넌트를 사용하기 전에 기본셋팅을 해두자

2022년 7월 31일
·
0개의 댓글
·

체크박스 기능 구현하기(2)

앞서 진행했던 체크박스기능 구현에서, 컴포넌트를 재활용하여 코드를 좀 더 보기좋게 만들어 보도록 하겠습니다.

2022년 7월 26일
·
0개의 댓글
·

체크박스 기능 구현해보기(1)

웹 페이지를 만들다 보면 체크박스 기능을 구현하는 경우가 생기게 됩니다.나 또한 프로젝트를 진행하면서 체크박스 때문에 애먹었었는데 당시 구현했던 방식을예를 들에 보겠습니다.일단 여러가지 방식이 많겠지만, React와 StyledComponent를 활용하여 진행하였습니다

2022년 7월 25일
·
0개의 댓글
·
post-thumbnail

useContext + ContextAPI를 공부해보자..

리액트는 여러개의 컴포넌트로 이루어져있다. 최상위의 App컴포넌트에서 트리를 형성하는데, 리액트의 데이터 흐름은 위에서 아래로 즉, 부모컴포넌트에서 자식컴포넌트로 props를 통해 전달이 된다.Props를 사용 할 때는, 부모컴포넌트가 자식컴포넌트 태그에 일일히 pro

2022년 6월 29일
·
1개의 댓글
·
post-thumbnail

css-in-js와 in-css 중에서 어떤 방식이 더 적합할까?

css in css와 Js 중에서 어떤게 더 좋은 방법인지 알아보았습니다.

2022년 6월 26일
·
0개의 댓글
·
post-thumbnail

6/22일 <React>모달창에 대한 이해(1)

모달창을 쓸 일이 많이 없을 거라 생각했는데, 생각보다.. 모달창의 사용빈도가 많아지고 있어나도 .. 복붙!을 이해하고 내 글로 스타일 컴포넌트를 쓰는 리액터분들에게 하나의 템플릿을 제공할 수 있기를..🙆‍♀️🙆‍♂️내가원하는 건 버튼을 눌렀을 때 모달창이 나오고

2022년 6월 21일
·
0개의 댓글
·
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일
·
3개의 댓글
·
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개의 댓글
·