Ming's develop story

만약에, 내가 어떤 인풋박스에서 텍스트를 가져오고 싶으면 어떻게 접근해야할까? → 답은, 리액트 요소에서 가져온다! Ref를 하나의 이름표라 생각하면 이해하기 쉽다. 방법 1 - 클래스형 컴포넌트 중간에 value를 확인하는 방법중 하나는 밑에와 같다. 방법 2 - 함수형 컴포넌트 함수형 컴포넌트에서는 이처럼 Ref를 사용할 수 있는데 중간에 확인하는 방법으로는 setTimeout()을 활용하는 방법이다. window.setTimeout(() => { console.log(my_wrap); }, 1000); 여기서 두번째 인자(1000)의 시간이 흐른 후에 첫번째 인자에 있는 함수를 실행하도록 하는 코드이다. 밀리세컨드 기준이라 1000 = 1초

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..