비전공자 개발일기

1. node.js 설치 2. create-react-app로 리액트 프로젝트 생성 3. npm init react-app 또는 폴더를 VS Code로 열고 터미널에서 npm init react-app . 4. 개발모드 실행: npm run start 5. react 개발자 도구: chrome 확장프로그램 [react developer tools] JSX: 자바스크립트의 확장 문법 import ReactDOM from 'react-dom'; ReactDOM.render(안녕 리액트!, document.getElementById('root')); 속성명은 카멜 케이스로 작성 ex) onClick,,onBlur, onFocus, onMouseDown, onMouseOver, tabIndex import Re..

1. sort const letters = ['D', 'C', 'E', 'B', 'A']; const numbers = [1, 10, 4, 21, 36000]; letters.sort(); numbers.sort(); console.log(letters); // (5) ["A", "B", "C", "D", "E"] console.log(numbers); // (5) [1, 10, 21, 36000, 4] const numbers = [1, 10, 4, 21, 36000]; // 오름차순 정렬 numbers.sort((a, b) => a - b); console.log(numbers); // (5) [1, 4, 10, 21, 36000] // 내림차순 정렬 numbers.sort((a, b) => b - ..

1. 기명 함수 표현식 함수 표현식으로 함수를 만들때 선언하는 함수에 이름을 표현 const Hi = function () { console.log('Hi'); }; console.log(Hi.name); // Hi const Hi2 = function printHi() { console.log('Hi'); }; console.log(Hi2.name); // printHi 함수 내부에서 함수 자체를 가리킬 때 사용 let countdown = function(n) { console.log(n); if (n === 0) { console.log('End!'); } else { countdown(n - 1); } }; countdown(5); 재귀함수: 자기 자신을 부르는 함수 2. 즉시 실행 함수(익명 함..

1. 이벤트 관련 흐름 캡쳐링 단계: 이벤트가 하위 요소로 전파되는 단계 타깃 단계: 이벤트가 실제 카깃 요소에 전달되는 단계, 이벤트 객체의 target 속성이 되는 요소에 등록되어있던 이벤트 핸들러가 동작하는 단계, 가장 처음 이벤트 핸들러가 동작하게 되는 순간 버블링 단계: 이벤트가 상위 요소로 전파되는 단계 참고 사이트: https://www.w3.org/TR/DOM-Level-3-Events/ UI Events www.w3.org 2. 이벤트 핸들러 등록 및 삭제 (등록) HTML의 속성이나 DOM 속성을 활용해 이벤트를 등록하는 방법 외 Element.addEventListner('type', 'handler') (삭제) Element.removeEventListener('type', 'han..

1. 자바스크립트로 태그 선택하기 메소드 의미 결과 document.getElementById("id") HTML id속성으로 태그 선택 id에 해당하는 태그 하나 document.getElementByClassName("class") HTML class속성으로 태그 선택 class에 해당하는 태그 모음 (HTMLCollection) document.getElementByTagName("tag") HTML 태그 이름으로 태그 선택 tag에 해당하는 태그 모음 (HTMLCollection) document.querySelector("CSS 선택자") CSS 선택자로 태그 선택 CSS 선택자에 해당하는 태그 중 가장 첫번째 태그 하나 document.querySelectorAll("CSS 선택자") CSS ..

// 팩토리얼 // 0! = 1 // 1! = 1 // 2! = 1 * 2 = 2 // 3! = 1 * 2 * 3 = 6 // 4! = 1 * 2 * 3 * 4 = 24 // 5! = 1 * 2 * 3 * 4 * 5 = 120 // 6! = 1 * 2 * 3 * 4 * 5 * 6 = 720 // n! = 1 * 2 * 3 * ... * (n-1) * n = function factorial(n) { let result = 1; for(let i = 1 ; i =0 ; i--){ reverse_word = reverse_word + word[i] } if(word === reverse_word) { return true } else { return false } } console.log(isPalindro..

1. 객체 출력(for ... in) let myObject = { '2': '수학', '3': '과학', '1': '국어' } // // for(변수명 in 객체명) {결과} for (let key in myObject) { console.log(key); // key 출력 console.log(typeof key); // string console.log(myObject[key]); // values 출력 } // // (주의) 숫자형(양수) property name도 가능 -> 실제로 사용될 때는 문자열로 형변환이 됨 // // (주의) 객체는 정수형 프로퍼티 네임을 오름차순으로 먼저 정렬하고, 나머지 프로퍼티들은 추가한 순서대로 정렬 console.log("") let myObject2 = { 3..

let current = 1; let previous = 0; for(let i =1 ; i