비전공자 개발일기

HTML: Hyper Text(문서를 서로 연결해주는 링크) Markup Language 시멘틱(의미가 통하는) 태그를 사용하여 만든 웹 문서 시멘틱 태그가 필요한 이유 웹 브라우저가 HTML의 소스 코드만 보고도 어느 부분이 제목, 메뉴, 본문 내용 등 알 수 있음 문서 구조가 정확히 나눠지므로 PC, 스마트기기 등 다양한 화면에서 웹 문서를 표현하기 쉬움 인터넷에서 웹 사이트를 검색할 때 필요한 내용을 정확히 찾을 수 있음 시멘틱 태그의 종류 : 헤더 영역을 나타냄, 검색창이나 사이트 메뉴를 삽입 : 내비게이션 영역, 같은 웹 문서 안에서 다른 위치로 연결하거나 다른 웹 문서로 연결하는 링크 : 핵심 콘텐츠, 웹 문서마다 다르게 보여주는 내용으로 구성, 1회만 사용 권장 : 독립적인 콘텐츠, 웹에서 ..

모듈: 자바스크립트 파일 하나, 복잡하고 많은 양의 코드를 기능에 따라 파일로 나눠서 관리하기 위함 모듈 스코프: 외부에서 자유롭게 접근하는 걸 막기위해 파일 안에서 독립적인 스코프를 가지고 있어야함 모듈 문법: export, import // printer.js export const title = 'Printer'; export function print(value) { console.log(value); }; // index.js import { title, print } from './printer.js'; print(title); // 이름 바꿔서 import import { title as printerTitle, print, printArr } from './printer.js'; impor..

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 ..