Ming's develop story

Ctrl + Shift + x를 눌러 확장 패키지 검색창을 띄우고 밑의 확장패키지를 검색후 다운로드 받으면 원래는 주황색으로 보였던 css코드들이 이렇게 이쁘게 잘 바뀌는것을 확인할 수 있다. 덩달아 자동완성 기능도 추가되기 때문에 필수적인 요소인것 같다.

BucketList.js 코드 import React from 'react'; import styled from "styled-components"; const BucketList = ({ list }) => { const my_lists = list return ( { my_lists.map((list, index) => { return ( {list} ); }) } ); } const Itemstyle = styled.div` padding: 16px; margin: 8px; background-color: aliceblue; `; export default BucketList; App.js 코드 import React from 'react'; import BucketList from './Bucke..

styled-components 패키지 다운로드 무조건 프로젝트가 있는 파일 경로 안에 설치해주어야 한다. styled-components 란? CSS-in-JS 라이브러리 중 하나이다! 컴포넌트에 스타일을 직접 입히는 방식이라고 편하게 생각해도 된다. - class 이름 짓기에서 해방된다 - 컴포넌트에 스타일을 적기 때문에, 간단하고 직관적입니다! 위 두가지 이유 때문에 컴포넌트 스타일링 기법중 괜찮은 방식이다. 사용법? App.js 상단에 import를 해준다. 이후 하단 export 위에 스타일을 작성해준다. 컴포넌트처럼 사용하고 있는데 이 친구도 컴포넌트이기 때문에 데이터를 가지고 있을 수 있기 때문에 props를 줄 수도 있다. 이렇게 사용 가능한데 중괄호 안에 백틱(``)을 써주면 삼항연산자도..

height: 100vh; /*vh는 화면을 기준으로 높이를 얼마나 줄지 정할 수 있다 vw는 넓이!!! */ 이렇게 화면 대비 100%를 줬는데도 밑의 사진과 같이 공백이 남는 현상이 있는데 여백상쇄, 마진 병합 상쇄현상 이라고 부른다. 이는 h1의 자체 스타일(기울어져 있음) display 가 block이어서 발생하는데 밑의 사진과 같이 부모요소의 display를 변경해주거나 직접 그 요소에 직접 바꿔주면 된다. 내 코드 style.css .App { background-color: #eee; height: 100vh; /*vh는 화면을 기준으로 높이를 얼마나 줄지 정할 수 있다. */ width: 100vw; display: flex; /*높이를 센터로 밀어넣어 주기위해 사용 */ } .contai..

BucketList.js // 리액트 패키지를 불러옵니다. import React from 'react'; // 함수형 컴포넌트는 이렇게 쓸 수도 있고 // function Bucketlist(props){ // return ( // 버킷 리스트 // ); // } // 이렇게 쓸 수도 있어요. =>가 들어간 함수를 화살표 함수라고 불러요. // 저희는 앞으로 화살표 함수를 사용할거예요. // 앗 () 안에 props! 부모 컴포넌트에게 받아온 데이터입니다. // js 함수가 값을 받아오는 것과 똑같이 받아오네요. const BucketList = ({list}/*또는 {list} 대신 props*/) => { // Quiz 1: my_list에 ['a', 'b', 'c'] 대신 부모 컴포넌트가 넘겨준 ..