leehye1204 webhailey

Part 3. Redux 만들기 - 01. 문제 정의 - 어떤 코드가 상태를 어디서 바꾸나? *참조사이트: https://v2.grommet.io/components ->기본적인 레이아웃과 주요하게 많이 쓰이는 'components'들을 'React' 버전으로 제공 *참조사이트: https://www.npmjs.com/package/uuid -> 간단하게 유니크한 문자열을 만드는 패키지 정리된 사이트 *참조사이트: https://styled-components.com/ -> 간단하게 css 스타일링을 해야 되는 필요성이 생길 때 필요한 사이트 02. 해결책 만들기 *참조사이트: https://facebook.github.io/flux/docs/in-depth-overview/ *참조사이트: https:/..

Part 1. 시작하며 01. 무엇을 배울 것인가 intex.html -> app.js -> function createDOM(node) { if(typeof node === 'string') { return document.createTextNode(node); } const element = document.createElement(node.tag); node.children .map(createDOM) .forEach(element.appendChild.bind(element)); return element; } const vdom = { tag:'p', props:{}, //객체요소 children: [ { tag:'h1', props:{}, //객체요소 children:["React 만들기"],..

http://leehye1204.dothome.co.kr/PORTFPLO/starbucks/index.html

Ch 1. JS 데이터 01. 문자 String: "", '',`` Number Bolean : true, false undefined null Array: [] Ojbect: {} * 참조사이트 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String String - JavaScript | MDN String 전역 객체는 문자열(문자의 나열)의 생성자입니다. developer.mozilla.org 02. 숫자와 수학 const pi = 3.14159265368979 console.log(pi) const str = pi.toFixed(2) console.log(str) console.log(typeof s..

Ch 2. JS 시작하기 01. 개요(ECMAScript) 및 프로젝트 초기화 참조사이트 : https://ko.wikipedia.org/wiki/ECMA%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8 02. 데이터 타입 확인 http://localhost:1234 에서 console.log('Hello world!')로 여러가지 데이터 타입을 작성 뒤 확인할 수 있음 03. 산술, 할당 연산자 산술 연산자(arithmetic operator) console.log(1 + 2) console.log(5 - 7) console.log(3 * 4) console.log(10 / 2) console.log(7 % 5) // 나머지 할당 연산자(assignment operator) let a ..

Ch 1. Node.js 1.개요 및 설치 Node.js는 Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임(프로그래밍 언어가 동작하는 환경!) *참조 홈페이지 : https://nodejs.org/en/ https://github.com/coreybutler/nvm-windows 2. NVM 사용법 터미널에서 nvm install 12.14.1 -> (유의적 버젼) nvm 1s -> 설치된 것을 확인할수있음 nvm use 12.14.1 -> node.js 설치를 사용 node --version -> node 버전 명시되어있음 nvm uninstall 12.21.0 -> 버젼 삭제 3. npm 개요 NPM(Node Package Manager)은 전 세계의 개발자들이 만든 ..

ch 8. CSS 속성 1. 박스 모델 width : 요소의 가로 너비 height : 요소의 세로 너비 (px, em, vw 등 단위로 지정) min- 최소 / max- 최대 * 단위 px, %, em, rem, vm, vh 외부여백 : margin 내부여백 : padding 테두리선 : border: 선-두께 선-종류 선-색상; 색상지정 border-color 모서리선 : border-radius 요소의 크기 계산 기준을 지정: box-sizing content-box : 요소의 내용(content)으로 크기 계산 border-box : 요소의 내용 + padding + border로 크기 계산 넘침 제어 : overflow visible : 넘친 내용을 그대로 보여줌 hidden : 넘친 내용을 잘..

ch 7. CSS 개요 선택자 { 속성: 값 } * : 모든 요소를 선택 .ABC : HTML class 속성의 값이 ABC인 요소 선택. #ABC : HTML id 속성의 값이 ABC인 요소 선택. ABC.XYZ : 선택자 ABC와 XYZ를 동시에 만족하는 요소 선택. ABC > XYZ : 선택자 ABC의 자식 요소 XYZ 선택. ABC .XYZ : 선택자 ABC의 하위 요소 XYZ 선택. '띄어쓰기'가 선택자의 기호! ABC + XYZ : 선택자 ABC의 다음 형제 요소 XYZ 하나를 선택. ABC ~ XYZ : 선택자 ABC의 다음 형제 요소 XYZ 모두 선택. ABC:hover : 선택자 ABC 요소에 마우스 커서가 올라가 있는 동안 선택. ABC:active : 선택자 ABC 요소에 마우슬 클릭..