본문 바로가기

전체 글225

HTML #2 문서의 구조와 메타데이터 HTML 문서의 구조 This is my page : 문서 형식을 나타냅니다. 요즘에는 아무도 신경쓰지 않으며, 그저 모든 것이 제대로 작동하기 위해 포함되어야 하는 역사적 유물일 뿐입니다. 은 유효한 문서 형식을 나타내는 짧은 문장이고, 이 것만 알고 있으면 됩니다. : 요소입니다. 이 요소는 전체 페이지의 콘텐츠를 포함하며, 기본 요소로도 알려져 있습니다. : 요소입니다. 이 요소는 홈페이지 이용자에게는 보이지 않지만 검색 결과에 노출 될 키워드, 홈페이지 설명, CSS 스타일, character setdeclaration 등 HTML 페이지의 모든 내용을 담고 있습니다. : 이 요소는 HTML 문서의 문자 인코딩 설정을 UTF-8로 지정하는 것이며 예시에서 지정한 UTF-8에는 전세계에서 사용되는 .. 2020. 8. 15.
HTML #1 기본 설명, element, 속성 설명 HTML이란? HTML (Hypertext Markup Language)는 프로그래밍 언어는 아니고, 우리가 보는 웹페이지가 어떻게 구조화되어 있는지 브라우저로 하여금 알 수 있도록 하는 마크업 언어입니다. HTML element 여는 태그(Opening tag): 이것은 요소의 이름과(이 경우 p), 열고 닫는 꺽쇠 괄호로 구성됩니다. 요소가 시작(이 경우 단락의 시작 부분)부터 효과가 적용되기 시작합니다. 닫는 태그(Closing tag): 이것은 요소의 이름 앞에 슬래시(/)가 있는것을 제외하면 여는 태그(opening tag)와 같습니다. 이것은 요소의 끝(이 경우 단락의 끝 부분)에 위치합니다. 닫는 태그를 적어주지 않는 것은 흔한 초심자의 오류이며, 이것은 이상한 결과를 낳게됩니다. 내용(Co.. 2020. 8. 15.
React | button에서 onClick 이벤트 핸들링 프로젝트에서 button을 클릭했을때 해당 url 주소로 넘어가기 위해 onClick 이벤트 핸들링을 했어야 했다. 처음에 사용했던 방식으로는 그냥 버튼을 클릭했을때 this.handleClick으로 해결하려 했으나 여러개의 버튼이 별개의 url로 이동하기 위해 state로 변경하였다. state, 즉 상태값을 따로 지정 해야 했는데 react에 익숙하지 않아 고생했다.. 먼저 constructor에 state 정보를 저장한다. constructor(props) { super(props); this.state = { Data: [ { id: 1, company: "Apple Store", url: "url주소", src: "./img/apple__logo.png", }, { id: 2, company: .. 2020. 8. 11.
React | number count 기능 구현하기 , onScroll 스크롤에 따라 animation 실행 먼저 react-spring을 사용해서 숫자 Count 애니메이션을 구현할 것이다. react-spring은 React에서 여러 애니메이션을 구현하기 위해 사용하는 애니메이션이며 이를 사용하기 위해서는 npm을 통해 설치해야 한다. https://www.react-spring.io/ react-spring Bring your components to life with simple spring animation primitives for React www.react-spring.io 사용하는 방법은 간단하다. import { Spring } from 'react-spring/renderprops'; {props => {props.number}} 내가 사용한 코드는 다음과 같다. 0부터 43109까지 Cou.. 2020. 8. 3.
React: Webpack 설치, 환경설정 및 빌드 # 웹팩 설치하기 웹팩을 왜쓸까? -실제 개발환경에서 component를 여러개를 사용해야 한다. -컴포넌트마다 script를 사용하면 너무 길어져서 유지보수가 불가능하다. -여러개의 js 파일을 한번에 합쳐서 한개의 js파일로 만드는 기술이 웹팩이다. -합치면서 바벨적용 + 쓸모없는 코드 제거가 가능하다. *React에서 node가 필요한 이유 -자바 스크립트 실행기가 필요해서 -웹팩을 돌리기 위해서 사용하는 순서 npm init npm i react react-dom npm i -D webpack webpack-cli npm i -D @babel/core @babel/preset-env @babel/preset-react babel-loader @babel/plugin-proposal-class-pr.. 2020. 7. 28.
React : Hooks 사용. (Class와의 차이점) useState, useEffect Hook을 쓰는 이유!? class를 쓰지말고 함수로, 함수 컴포넌트에서도 state랑 ref를 쓰기 위해 만든 것. const GuGuDan = () => { //state 선언시 함수 안에다가 써야한다. //use로 시작하면 hooks다. //비구조화 할당(= 구조 분해 할당 방식) const [first, setFirst] = React.useState(Math.ceil(Math.random() * 9)); const [second, setSecond] = React.useState( Math.ceil(Math.random() * 9) ); const [value, setValue] = React.useState(""); const [result, setResult] = React.useState(.. 2020. 7. 28.

티스토리툴바