# styledComponent
StyledComponent를 사용하며 길어진 import..
StyledComponent를 사용하면서 한 파일에서 스타일을 관리하고자 하니 한 파일의 코드가 불필요하게 길어지는 것 같아서 Styled 파일을 따로 분리하여 사용하고 있습니다.위와 같이 SignupStyle.jsx에 스타일 코드를 한 번에 모아서 관리하고 있는데 S
StyledComponent에서 중복되는 코드를 없애고싶다면?
요즘 React를 활용하여 쇼핑몰을 만들고 있습니다. StyledComponent를 사용해서 css스타일을 입히고 있는데 위의 두 코드를 작성하는 과정에서 중복되는 코드가 매우 많았습니다. 보시면 border-left 랑 border-right 빼고는 전부 중복되는 코
React StyledComponents 2
animation을 적용하는 방법 Selector aaaaa는 styled component 안에 있지 않다. Box안의 span을 선택하려면 Box 컴포넌트 안에서 span을 써주면 된다.
Next js styled-component background-image import 에러
기존 리액트에서 next js 로 이전하는 과정에서 import 한 img를 styled component로 사용하려고 했는데 화면에 불러지지 않는 오류가 있었다.
리액트 Styled Components
오늘은 리액트에서 CSS를 적용할 때 가장 많이 사용되는 Styled Components의 간단한 사용법을 정리 해보겠습니다. > ### 스타일드 컴포넌트 만들기 원하는 HTML 태그 중 div 를 선택하고 CSS를 적용하여 Box 변수에 저장한다. 이렇게 컴포넌트
[스터디] #1 Styled Component
javascript 에서 css를 사용할 수 있게 도와주는 라이브러리\-> css를 따로 페이지에 모아두는게 아니라 한 컴포넌트에 기능과 css를 같이 넣는 것이다.import기본 문법 : styled.원하는 HTML 태그→ 클래스명 자동 생성 style 속성이 중복될
빌드 시 antd & styled component 우선 순위 문제
flex가 무시된다. display: flexcol에 display를 override해서 사용하였는데 로컬에서는 문제가 없다가 빌드하면 css가 깨져보였습니다.stackoverflow를 참고해보면 하단과 같은 의견이 있었습니다.And it appears that the
2차 프로젝트 중간 회고
2차 프로젝트를 08/01에 시작해서 벌써 일주일이지나 08/08이 되었습니다.1차때는 실수했던것들을 보완해서 생각보다 더많이 구현사항을 구현할수있게 되었습니다!카카오 API로 지도를 불러오는것도 구현해보고 1.여행자/숙소2.국내전체(모달생성)3.체크인&체크아웃(달력을
리액트에서 스타일컴포넌트를 잘 써보자!(+다크모드 ) - 기본셋팅편
리액트에서 스타일 컴포넌트를 사용할 때 잘 활용하기 위한 시리즈 1탄 스타일 컴포넌트를 사용하기 전에 기본셋팅을 해두자
체크박스 기능 구현해보기(1)
웹 페이지를 만들다 보면 체크박스 기능을 구현하는 경우가 생기게 됩니다.나 또한 프로젝트를 진행하면서 체크박스 때문에 애먹었었는데 당시 구현했던 방식을예를 들에 보겠습니다.일단 여러가지 방식이 많겠지만, React와 StyledComponent를 활용하여 진행하였습니다
useContext + ContextAPI를 공부해보자..
리액트는 여러개의 컴포넌트로 이루어져있다. 최상위의 App컴포넌트에서 트리를 형성하는데, 리액트의 데이터 흐름은 위에서 아래로 즉, 부모컴포넌트에서 자식컴포넌트로 props를 통해 전달이 된다.Props를 사용 할 때는, 부모컴포넌트가 자식컴포넌트 태그에 일일히 pro
css-in-js와 in-css 중에서 어떤 방식이 더 적합할까?
css in css와 Js 중에서 어떤게 더 좋은 방법인지 알아보았습니다.
6/22일 <React>모달창에 대한 이해(1)
모달창을 쓸 일이 많이 없을 거라 생각했는데, 생각보다.. 모달창의 사용빈도가 많아지고 있어나도 .. 복붙!을 이해하고 내 글로 스타일 컴포넌트를 쓰는 리액터분들에게 하나의 템플릿을 제공할 수 있기를..🙆♀️🙆♂️내가원하는 건 버튼을 눌렀을 때 모달창이 나오고
Styled component의 theme 활용 팁
styled component의 theme provider 기능을 활용하면 특정 variable에 css값을 할당해놓고 추후에 변경사항이 있으면 프로젝트 내부에서 일괄적으로 변경 가능하다. 위의 예에서 일반적으로 리터럴로 styled component를 활용해서 작
1.3 - twinter cloneCoding 6
어제 공부했던 Typescript를 이용해서 이전에 클론코딩했던 winter를 JS => TS로 변환해보았다.그리고 생각보다.... 많은 시간과 노력이 필요했다...아직 타입이 익숙지 않아 구글링하는데 많은시간이 걸렸다ㅜㅜ 꾸준히 써가면서 익히고 TS 문서를 정독해봐야
1.2 React masterClass
이번에는 typescipt에 대해서 공부했다. typescript를 간단하게 설명하자면 javasciprt + type인 언어로 JS의 superset이다. js의 장점이자 단점은 type의 정의가 필요없다는 점이다. js에서 알아서 변환하기 때문에 디버깅시에는 알 수
MongoDB & React 복습
0929이전에 했던 내용이지만 DB를 MySQL에서 MongoDB로 바꾸어서 배포 진행1) AWS 에서 EC2 인스턴스 만들고 탄력적 IP주소 발급 받기2) putty를 이용하여 Ubuntu 터미널 실행3) 패키지 설치하기4) Filezila 를 이용하여 VScode에