분류 전체보기 (71) 썸네일형 리스트형 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 의 개념 없음. GIT 원격저장소 (git hub) 기본 사용법 - repository, push, pull, .gitignore github과 연결할 로컬의 git저장소를 생성 1. 폴더 생성. 2. git 초기화 : 폴더를 git관리하에 둔다. git init 3. 계정설정 (처음한번만) git config --global user.name "이름" git config --global user.email "메일" github에 원격 저장소를 생성 1. github 계정생성(회원가입) - github.com 2. repository 생성 (github내에 저장소 생성, 프로젝트하나당 repository하나) - public / private : 이미 로컬에서 git으로 관리하던 프로젝트를 올리는거니까 add a README file 체크안함 * pubilc : 오픈소스 또는 포트폴리오용 ( public / private 추후 수정.. GIT 입문 - 기본 사용법 (commit, reset, revert, branch, merge..) git / source tree / vs code 설치 원하는 위치에 git으로 관리할 폴더를 생성하고 vs code에서 오픈. (File -> Open Folder) ctrl + ` : 터미널 오픈 이미 해당 폴더로 경로가 잡혀있음. /*해당 경로에서 git을 시작하겠다는 명령어*/ git init 해당 폴더에 들어가서 숨겨진 파일을 보면 .git 파일이 있음. 계정설정 : git이 저장될때 이력에 남길 이름과 메일 설정. git config --global user.name "이름" git config --global user.email "메일" 계정확인 : 설정된 계정 확인 git config user.name git config user.email config 파일 열어보기 open ~/.gitc.. Callback : Synchronuous(동기) / Asynchronuous(비동기) Synchronous(동기) Vs Asynchronous(비동기) 1. Callback(콜백 함수) : 함수에 인자로 넘겨주는 함수 콜백함수는 인자로 넘겨주는 함수의 역할에 따라, 동기 또는 비동기로 실행 될 수 있음. 2. 콜백 처리 방식에 따른 차이 ( 동기 vs 비동기 ) JavaScript 내부에 있는 함수 -> 콜백을 동기 방식으로 처리 JavaScript 외부에 있는 함수 -> 콜백을 비동기 방식으로 처리 ( 예: 타이머함수(setTimeout), onclick이벤트 ) ** 타이머는 브라우져에 있는 시간을 가져다 쓰고, Onclick은 Dom에서 가져오므로 둘다 자바스크립트 외부에 있음. 3. 콜백 처리 순서 - 동기 방식으로 처리하는 함수 : Queue에 들어있는 Main함수가 Stack에.. Project 배포 단계 - compile / build(package) / deploy / WAS * 배포 구현(코딩)이 끝난 후, 사용자가 이용할 수 있도록 실행가능한 파일을 서버에 올리는 작업 1. Compile 컴파일이란 개발자가 작성한 소스코드를 바이너리 코드로 변환하는 과정을 말한다. (목적파일이 생성됨) 즉, 컴퓨터가 이해할 수 있는 기계어로 변환하는 작업이다. 이러한 작업을 해주는 프로그램을 가르켜 컴파일러(Compiler)라 한다. 자바의 경우, 자바가상머신(JVM)에서 실행가능한 바이트코드 형태의 클래스파일이 생성이 된다. 2. Build 소스코드를 실행 가능하도록 소프트웨어 결과물로 만드는 과정. (Package라고도 함) .java, .html, .css, .js, .jsp 등의 파일이 있는 Project(하나의 Web Application을 구현한 소스코드)를 하나의 .war파일.. 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 ··· 6 7 8 9 다음
