개발새발

https://www.zerocho.com/category/React/post/579b5ec26958781500ed9955 (React) React의 생명 주기(Life Cycle) - 라이프사이클 안녕하세요. 이번 시간에는 React의 생명 주기에 대해서 알아보겠습니다. 갑자기 웬 생명 주기냐고요? React 컴포넌트는 생명 주기가 있습니다. 생애 주기 또는 라이프사이클(Life cycle)이라고도 많 www.zerocho.com 오늘 내용은 제로초님의 블로그에서 인용합니다. 더 원활한 이해를 위해 블로그에 있는 mount, update, unmount에 대해 한눈에 볼 수 있는 도표를 참고하시길 바랍니다. 1. Mounting 컴포넌트가 처음 실행되어 화면상에 나타나는 것을 Mount라고 표현합니다...

나중에 component를 사용할 때 name = ""로 property를 넣기 위해 사용 클래스 컴포넌트는 this.props.name 함수 컴포넌트는 props.name

1. React 설치 - node.js 설치 - 터미널에 아래 두 명령어 입력 - $npm install -g create-react-app : 처음에 react를 설치하는 방법 - $ create-react-app . : 다른 파일에서 react를 시작할 때는 $ 없이(내 터미널 환경 설정이 달라서 그런 걸수도 있다) create-react-app 폴더 안에 만들 react파일 이름 을 적어주면 된다 - $ npm start : 설치된 react를 브라우저와 연결하기 위해 사용한다 - src에 있는 html, js, css를 수정해서 사용하면 된다 cf. 2. app.js 수정하기 - class App extends Component{ render() { return ( 안에 내용만 수정하면 화면을 원..

CSS 문법 1. 선택자 2. 속성 3. 값 div{ font-sized: 20px; color: red; } 선택자{ 속성: 값; 속성: 값; } 선택자가 가리키는 태그의 내용의 해당 속성을 해당 값으로 바꿔준다는 의미 1. 선택자의 역할 선택자(selector)는 html에 스타일(css)을 적용하기 위해 html의 특정 요소를 선택하는 사인이다. 태그의 이름을 쓸 수 있다 ex. css h1{ color(속성) : red (값); } p{ color: blue; } 2. 속성(property)과 값(value) html의 속성은 attribute라고 한다 속성 = 값 div{ color: red; font-size: 글자 크기 width: 가로 너비 margin: 바깥 여백 padding: 안쪽 여..

1. 내용 => 이 전체를 요소 element라고 한다 -태그는 각자의 의미를 가지고 있다. -태그의 범위가 한쌍 -태그와 요소는 다르지만 거의 같은 거다 : 제목 : 문단 2. 속성과 값 태그(요소)의 기능을 확장하기 위해 속성을 사용할 수 있다 태그의 의미에 속성을 넣어서 사용할 수 있다 ex. 어떤 이미지를 사용할지, 어디에 쓸지 등을 속성으로 넣는다 img는 닫히는 태그 없는 빈태그다 ex. 내용 div는 의미를 가지지 않는 태그. 분할을 위한 태그 그때 사용되는 내용의 이름, 의미를 넣기 위해 class = ""이라는 속성과 값을 준다 3. 부모와 자식 요소 태그 A가 태그B의 콘텐츠로 사용되면 태그 B: 태그 A의 부모 요소, 태그 A: 태그 B의 자식 요소 => 물론 이런 이름의 태그가 있는..

1. 비트맵과 벡터 이미지 : 이미지 (그래픽)은 크게 비트맵과 벡터로 구분된다 1)비트맵 : 픽셀이 모여 만들어진 정보의 집합, 레스터 이미지라고도 부른다 픽셀 단위로 화면에 렌더링합니다 (렌더링: 컴퓨터가 화면에 그림을 그려서 우리가 볼 수 있게 한다) 우리가 일반적으로 사용하는 대부분의 이미지가 비트맵 ex. jpg, png, gif => 작게 만든 화면을 크게 확대하면 픽셀의 형태로 떨어진다 (계단현상, 품질 저하) => 대신 용량 관리가 용이하다 2)벡터 : 수학적 정보의 형태들이 만들어내는 결고마ㅜㄹ 이미지가 가지고 있는 점, 선, 면의 위치(좌표) 색상 등의 정보를 온전히 가지고 있으며 그를 화면에 렌더한다 => 확대, 축소해소 해상도가 달라지지 않음 => 이에 따른 용량 변화도 없다, 정교..