본문 바로가기

Web29

React : JSX란 무엇인가? JSX (Javascript+ Xml) Javascript의 확장으로 element로 하는 것은 보기가 너무 불편하다. 따라서 babel을 사용해서 보기 쉽게 바꿔준다. *babel: 최신 문법을 사용하게 해주는 것으로 이걸 사용하여 content안에서 {} 안에 넣으면 javascript로 사용이 가능하다. => {this.state.liked...} JSX(JS+XML) 처럼 닫는 /가 필요하다. (문법이 엄격하다) button을 여러개 생성해 주고 싶을때는 어떻게 하는가?? 로 묶어주면 component로 여러개를 쉽게 사용할 수 있다. *주로 안에서 대문자로 시작되는 것은 컴포넌트이고 소문자로 시작되는것은 html 태그이다. 2020. 7. 27.
React 기본 : 사용하는 이유, 컴포넌트, HTML 속성과 State 추가 React React는 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리(프레임워크)이다. 페이스북에서 주로 관리한다. React를 사용하는 이유에는 여러가지 이유가 있다. 크게 3가지로 나누자면, 싱글페이지 application으로 화면 깜박임 없이 자연스럽게 넘어가서 app과 비슷한 느낌을 낸다. (사용자 interface, 사용자 경험) 데이터 처리를 쉽게 도와준다. 재사용이 쉽게 component화 한다. (유지보수 좋음) head부분에 react와 dom을 추가해주면 된다. 개발할 당시에는 development를 사용하고 개발이 완료되면 product로 고치면 된다. 처음에 react, react-dom을 불러온다. render() { return e("button", null, ".. 2020. 7. 27.
CSS: Position 정리 (Static, relative, absolute, sticky, fixed) CSS: Position 정리 (Static, relative, absolute, sticky, fixed) 1. Static (position 기본값) -top bottom left right 값을 지정해줘도 영향을 받지 않는다. -HTML에서 표기된 순서대로, 들어있는 순서대로에 맞게 포지션이 결정 2. relative -원래있던 공간(예를들면, 자신이 속해있는 parent box안) 유지하면서 위치 이동. -기존의 자리에서 top bottom left right의 값에 영향을 받는다. 3. absolute -원래있던 자리(속해있는 박스 안에서 위치 이동하지 않고) static이 아닌 parent를 찾아 거기서 이동한다. (예를들면, body로 부터 이동됨) *부모의 사이즈에 따라 사이즈가 변동된다... 2020. 7. 17.
HTML CSS JS tip 정리 메타데이터:요소 - 메타데이터는 데이터를 설명하는 데이터이다. 그리고 HTML에서 문서에 공식적으로 메타데이터를 적용하는 방법이 있습니다. 다음과 같이 Head안에서 html을 설명해주는 역할을 합니다. name 은 메타 요소가 어떤 정보의 형태를 갖고 있는지 알려줍니다. content는 실제 메타데이터의 컨텐츠입니다. meta 자세한 설명 : https://developer.mozilla.org/ko/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML head 태그에는 무엇이 있을까? HTML의 메타데이터 HTML의 head는 페이지를 열 때 웹 브라우저에 표시되지 않습니다. head는 title 같은 페이지나, CSS의 링크(HTML 컨텐츠.. 2020. 7. 15.

티스토리툴바