Starters Starters

/src 폴더 내에 새로운 .js 파일 생성 맨 위에 React 를 사용한다고 선언 import React from 'react'; React 컴포넌트를 만드는 방법 2가지(함수, 클래스) 함수로 먼저 만들어보자 ※ 컴포넌트 이름은 대문자로, 다음 단어 있으면 또 대문자로 ※ HTML같이 생겼지만, JSX 이라 부름 ※ export default Hello; 는 Hello라는 컴포넌트 내보낸다는 뜻 ※ 맨 뒤에 세미콜론은 있어도 없어도 노상관 - hello.js - import React from 'react'; function Hello(){ return 안녕하세요; } export default Hello; - App.js - import 할 때, 파일명 Hello.js에서 .js 는 생략해도 된다...

1. node.js 설치 2. yarn 설치 window 사용자 - git bash 사용 ※ pwd - 디렉토리 경로 볼 수 있음 1. 폴더 하나 생성(mkdir) 2. 생성한 폴더로 들어가서 npx create-react-app begin-react 입력하면, begin-react 라는 이름의 폴더 생성됨 3. 다시 생성된 begin-react 폴더로 가서, yarn start(또는 npm start) 입력하면 위와 같은 화면이 새로운 브라우저 창에 뜬다. /src/App.js 에서 html 코드 수정하면 내용이 자동으로 바뀌게 된다. 서버 끝낼 땐 Ctrl + c 국(제)룰

JS 로 쓴 코드로 인해 어떠한 값이 바뀐다면 해당 값에 대한 특정 DOM의 속성도 계속해서 바뀌어야함 => AngularJS, backbone 등으로 갑시 바뀔 때, DOM 까지도 변환해줌 ==> React는 그냥 다 날려버림, 처음부터 모두 새로 만들어서 하자는 데에서 시작 - virtual DOM 을 통해 속도가 낮아지는 문제 없이, 업데이트를 어떻게 할 지에 대한 고민 하지 않아도됨 UI가 어떻게 보여질지에 집중할 수 있다. 컴포넌트(일종의 UI조각) 사용

ico 파일 만든 후 두가지 다 넣어주어야 IE chrome 등 대부분의 브라우저에서 실행된다.

데이터 저장하는 부분 데이터를 처리하는 부분 -> Extract, Transform & Load (ETL) / 데이터 랭글링(Data Wrangling) 데이터 사이언티스트 VS 데이터 엔지니어 ETL - 데이터를 추출하고 변환하여 불러오는 것(data warehouse에 저장하기 위해) Data Warehouse - 전통적인 방식 -이미 전처리가 된 데이터를 받아들임 -정형화된 데이터 -어디에 사용할 지 이미 정해져 있다. ETL -> Data Warehouse Data Lake - 빅데이터 시대의 저장 시스템 - 주로 비정형화된 데이터를 받아들임 - 정형화된 데이터도 저장 - row data형태로 저장 -> 어디에 사용할지 명확하지 않기 때문 Data Lake -> Data Wragling 공통점: ..

모달이란? - 기존의 브라우저 내용 가리면서 팝업처럼 뜨는 것 HTML 안녕하세요! 내용내용내용 모달 열기 안녕하세요 모달 내용입니다~~~~ 닫기 CSS .modal-wrapper{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; } .modal{ background: white; padding: 24px 16px; border-radius: 4px; width: 320px; } .modal p{ font-size: 16px; } .modal-title{ font-size: 24p..

HTML 0 +1 -1 JS const number = document.getElementById('number'); const increase = document.getElementById('increase'); const decrease = document.getElementById('decrease'); console.log(number.innerText); console.log(increase.offsetTop); // top 위치 알수 있음 console.log(decrease.id); increase.onclick = () => { // parseInt 정수형으로 변환, 뒤에 파라미터는 몇 진수로 할 것인지 const current = parseInt(number.innerText, 10); ..

Promise.all function sleep(ms){ return new Promise(resolve => setTimeout(resolve, ms)); } const getDog = async () => { await sleep(1000); return '멍멍이'; } const getRabbit = async () => { await sleep(500); return '토끼'; } const getTurtle = async () => { await sleep(3000); return '거북이'; } async function process(){ const dog = await getDog(); console.log(dog); const rabbit = await getRabbit(); consol..