할머니의 콤퓨타 도전기

html에서 javascript를 포함할때 어떻게 포함하는게 효율적일까? 1. script를 head에 포함 html을 위에서 부터 쭉 파싱하다가 script 태그가 보이면 main.js를 다운받아야한다고 이해한다. 따라서 html 파싱을 잠시 멈추고 필요한 javascript 파일을 서버에서 다운받아 실행한 다음에 다시 파싱하는 부분으로 넘어간다. 단점 js 파일의 사이즈가 크고 인터넷이 느리다면 사용자가 웹사이트를 보는데 까지 많은 시간이 소요된다. 따라서 script를 head에 포함하는 것은 좋지 않음 2. body 태그 가장 끝 부분에 script 추가 브라우저가 html을 다운받아서 쭉 파싱해서 페이지가 준비가 된 다음 script를 만나서 script를 fetching(서버에서 받아옴)하고 ..

1. gh-page 설치 터미널에 npm i gh-pages 입력 gh-pages는 웹사이트를 github의 github page 도메인에 나타나게 해줌 github는 static 웹사이트 무료로 제공 2. package.json 파일에 homepage 생성 "homepage": "https://{your github id}.github.io/{your project name}" 무조건 소문자. 띄어쓰기는 안됨 3. deploy, predeploy 명령어 생성 "scripts": { "start": "react-scripts start", "build": "react-scripts build", "deploy": "gh-pages -d build", "predeploy": "npm run build" }..

Mounting 아래 메서드들은 컴포넌트의 인스턴스가 생성되어 DOM 상에 삽입될 때에 순서대로 호출 constructor() static getDerivedStateFromProps() render() componentDidMount() Updating props 또는 state가 변경되면 갱신이 발생. 아래 메서드들은 컴포넌트가 다시 렌더링될 때 순서대로 호출 static getDerivedStateFromProps() shouldComponentUpdate() render() getSnapshotBeforeUpdate() componentDidUpdate() Unmounting 아래 메서드는 컴포넌트가 DOM 상에서 제거될 때에 호출 componentWillUnmount()

state의 변수의 직접 변경할 수 없음 위와 같이 직접적으로 변경하면 render 함수가 자동적으로 실행되지 않으므로, 뷰가 동적인 변경이 되지 않음 Do not mutate state directly 에러 발생 state값 변경하는 방법 버튼을 클릭하여 add함수를 실행하면, setState() 실행, state의 count 값이 변경되는 동시에 render 함수를 자동으로 실행 this.state.xxx를 직접 사용하는 것은 바람직하지 않음. 따라서 아래와 같이 수정

class component function component와 달리 state 표현 가능 function component는 함수로써 무엇인가를 바로 return해서 screen에 표현하지만, class는 React Component를 extends 하고 render method로 return을 적어서 표현 state 컴포넌트 내부에서 자체적으로 읽고, 업데이트할 수 있는 값을 사용하기 위해 state가 존재 모든 리액트 컴포넌트 내에 존재할 수 있는 Object dynamic data 변화를 주고 싶은 data를 state로 주로 정함 onClick: React에 있는 prop 기능

division의 약자로 웹사이트의 레이아웃을 만들 때 주로 사용 div는 웹페이지에서 논리적 구분을 정의 div 태그를 사용하여 각각의 블록(공간)을 알맞게 배치하고 css를 활용하여 스타일 적용 속성 style 의 스타일 지정 다른 속성들을 사용할 수 있게끔 해줌 width 의 가로 크기 지정 px(픽셀), %(비율) 단위로 지정 height 의 세로 크기 지정 px(픽셀), %(비율) 단위로 지정 border 의 테두리 굵기 지정 background-color 의 배경 색상 지정 float 의 정렬(좌, 우)를 하는 속성 가운데 정렬은 안됨 margin div의 정렬 기준 끝에서부터 여백을 주는 속성 margin-top, margin-bottom, margin-left, margin-right 예시