observe_db

컴포넌트 만들기 좀 반복되는 부분이 있거나, 부분이 길어지면, 사용자 정의 태그(컴포넌트)로 줄이는 것을 생각하게 된다. 컴포넌트를 만들때는 함수(function)로 정의하고, 그 안의 리턴값으로 줄이려는 코드를 넣으면 된다. 이때 첫글자는 무조건 대문자로 사용한다. function Nav(){ return html css js } 이런 식이다. 컴포넌트의 PROP 나 라거나 등등 태그들에는 안쪽의 속성값을 정의하는 경우가 있다. 컴포넌트도 이것이 가능할까? 함수형태에서 파라미터로 prop을 받고, 속성인듯 argument로 적용된 이름을 붙여주면 보낸 값을 얻을 수 있다. 그리고 이것을 중괄호{} 안에 넣어서 문자열이 아니라 표현식으로 적용되게 하면, 속성값으로 적용할 수 있다. function Nav..

1단계: 설치 을 입력하여 react를 해당 디렉토리에 설정한다. +만일 다른 디렉토리에 설정하려면 뒤의 .(점) 부분을 그 경로로 바꾸면 된다. 2단계: 수정 위에서 제대로 설치를 했다면 이러한 파일들을 볼 수 있다. 이중 src/index.js가 메인 구동 파일이다. 여기에서 10번줄의 이 구동되는 부분인데, 이 은 4번줄에서 import 시킨대로 ./App에서 가져온다.(기본적으로 js파일이라고 생각하자.) 여기서 의문점. 우리가 언제부터, js파일만으로 웹페이지를 만들었는가. 분명히 html로 작성된 파일이 필요하다. 그 답은 7번줄을 보면 된다. document.getElementById('root')를 가리키고 있고, 이 root라는 id를 지닌 부분은 public/index.html에 존재한..

4/18, 20 DOM(Document Object Model) - HTML 문서를 트리처럼 계층구조로 만든거. - Document: 웹 브라우저에 로딩될 때, document 객체가 된다. html 객체는 또한 html 문서의 root이다. - Property: 얻거나 바꿀 수 있는 값 - Method: HTML 요소로 할수 있는 action 변경-HTML 컨텐츠, 요소, 속성, CSS 스타일 추가-새로운 HTML 요소와 속성, HTML 이벤트 삭제-존재하는 HTML 요소와 속성 *HTMLCollection 객체 -getElementsBy~~ 들이 반환한다. -배열 비슷한 리스트이다. -인덱싱, length은 가능하지만, valueof(), pop(), push(), join()은 안된다. *NodeL..

4/4 부트스트랩(bootstrap)이란? 무료 프론트앤드 프레임워크 반응형 디자인(responsive design)들을 쉽게 만들게 해준다. 이미 정의된 class들을 제공하여 많은 요소들을 만들 수 있게 해준다. *반응형 디자인이란? 웹, 태블릿, 모바일 등에서 알아서 잘 보여지는 기능. 반응형 웹이라고도 함 태그로 나누고, container를 적용하는게 일반적. container는 fluid를 달면 너비를 꽉 채우게 된다.(일반적이면 크기를 조정할 수 있다.) 부트스트랩을 쓰려면 라이브러리들을 미리 가져와주어야한다. 실전적인 기술이라 여기까지.