Front (30) 썸네일형 리스트형 스크립트의 로딩 방법 ( 내부 & 외부 자바스크립트 / async & defer ) 작성된 스크립트를 브라우저가 적절한 때에 로딩하는 것에 대해 몇가지 이슈가 있음. HTML Document의 body가 해석되기 전인 head 부분에 로드되고 실행되는 것은 에러를 일으킬 수 있음. 해결방법 1 내부 자바 스크립트 예제 : "DOMContentLoad" 이벤트 사용. "DOMContentLoad" 이벤트는 브라우저가 완전히 로드되고 해석될때 발생된다. document.addEventListener("DOMContentLoaded", function() { ... }); 해결방법 2 외부 자바 스크립트 예제 : async 속성 사용 (외부 스크립트에서만 동작) 일반적으로 HTML요소를 로딩하는 중 태그를 만나면 JavaScript의 내용이 모두 다운될 때까지 HTML로딩은 멈추게 되는데, .. React - tool install (nvm, node.js, homebrew, yarn) / in Mac OS 참고 velopert.com/3621 명령어 라인 도구 (Command Lind Tool) mac 구매 후 처음 사용하는 상황이라 설치가 안되어 있었음. nvm 설치 시 설치 메시지가 나왔을 때, 허락하여 자동으로 설치. nvm (node version manager) node.js 설치를 위해 설치함. * 설정파일에 설정 추가 vi ~/.zshrc export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")" [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" export PATH=/opt/homebrew/bin:$PATH *.. React - 데이터의 변화 (props, state) props 부모가 자식한테 전달해주는 데이터 (읽기전용) state import React, { Component } from 'react'; class Counter extends Component { state = { number: 0 }; // 화살표 함수가 아닌 일반 함수로 정의할 경우 this가 뭔지 인식하지 못함. handleIncrease = () => { // this.state.number = this.state.number + 1; // 이렇게 하면 state값이 업데이트 됐는지를 Component 자신이 모른다. this.setState({ number: this.state.number + 1 }); }; handleDecrease = () => { this.setState({ num.. React 첫 시작. JSX 문법 사용, 렌더링, 조건부 렌더링 JSX 문법 HTML과 비슷하지만 꼭 지켜야 할 규칙이 있다. 1. 태그는 꼭 닫혀있어야 한다. (self closing tag 사용 가능. ) 2. 두개 이상의 엘리먼트는 무조건 하나의 엘리먼트로 감싸져 있어야 한다. ** 의미없이 태그를 낭비하지 않고, 라는 태그를 이용하면 html에서는 태그가 보이지 않는다. 빈 태그도 fragment와 같은 역할을 한다. 조건부 렌더링 1. 삼항연산자 사용 { 1 + 1 === 2 ? '맞다' : '틀리다' } 괄호안에서 삼항연산자 사용 가능. 2. & 연산자 사용 { name === 'green' && '그린이다~~' } 3. IIFE 방식 (함수를 선언한 다음 바로 호출) ** 화살표 함수(ES6문법) : this, arguments, super 의 개념 없음. Callback : Synchronuous(동기) / Asynchronuous(비동기) Synchronous(동기) Vs Asynchronous(비동기) 1. Callback(콜백 함수) : 함수에 인자로 넘겨주는 함수 콜백함수는 인자로 넘겨주는 함수의 역할에 따라, 동기 또는 비동기로 실행 될 수 있음. 2. 콜백 처리 방식에 따른 차이 ( 동기 vs 비동기 ) JavaScript 내부에 있는 함수 -> 콜백을 동기 방식으로 처리 JavaScript 외부에 있는 함수 -> 콜백을 비동기 방식으로 처리 ( 예: 타이머함수(setTimeout), onclick이벤트 ) ** 타이머는 브라우져에 있는 시간을 가져다 쓰고, Onclick은 Dom에서 가져오므로 둘다 자바스크립트 외부에 있음. 3. 콜백 처리 순서 - 동기 방식으로 처리하는 함수 : Queue에 들어있는 Main함수가 Stack에.. fetch().then() /* openweathermap api로 날씨를 가져오기 */ const latitude = ' '; const longitude = ' '; const API_KEY = ' '; fetch( `https://api.openweathermap.org/data/2.5/weather?lat=${latitude}&lon=${longitude}&appid=${API_KEY}` ) .then(function(response){ console.log(response); }); response에 있는 body는 보이지 않음. 이 body는 스트림이고, 데이터가 완전히 다 받아진 상태가 아님. /* .json() 함수 사용 */ fetch( `https://api.openweathermap.org/data/2.5/we.. 이전 1 2 3 4 다음
