JavaScript
[책] CH10 리액트 라이브러리 맛보기
※ 책 [혼자 공부하는 자바스크립트]를 공부하며 기록, 정리해 놓은 노트이다.(이 파트는 대강 정리하고 넘어간다) 목차리액트의 기본요약: 리액트 라이브러리 React Library리액트 라이브러리 사용 준비바벨을 적용하겠다고 선언하기루트 컴포넌트 출력하기컴포넌트 componenet컨테이너 containerJSX(JavaScript XML: 자바스크립트 확장 문법)클래스 컴포넌트컴포넌트의 기본적인 속성과 메소드자주 (오버라이드해서)사용되는 메소드: 자주 (변경해서)사용되는 속성:컴포넌트에 이벤트 연결하기이벤트 연결 템플릿스타일 지정하기컴포넌트 배열리액트와 데이터요약:여러 개의 컴포넌트 사용하기부모에서 자식의 state 속성 변경하기자식에서 부모의 state 속성 변경하기리액트로 만드는 할 일 목록 애플리케..
[책] CH9 클래스 part2(끝). 클래스 고급
※ 책 [혼자 공부하는 자바스크립트]를 공부하며 기록, 정리해 놓은 노트이다. 목차클래스의 고급 기능요약: 상속 inheritance애플리케이션 개발자프레임워크 개발자 (엔진 개발자) private 속성과 메소드게터와 세터클래스 선언할 때(프레임워크 개발자):사용할 때(애플리케이션 개발자): static 속성과 메소드오버라이딩 overridingalert()의 출력 형태 바꿔보기 클래스의 고급 기능상속, private 속성/메소드, 게터/세터, static 속성/메소드, 오버라이드요약: ☝🏿클래스 내부에서 인스턴스를 가리키는 “this.”, 자기자신 클래스를 가리킬 땐 “클래스명.”☝🏿상속은 extends 프라이빗은 # 정적은 static 게터와 세터는 get, set 부모의 메소드를 가리킬 땐 supe..
[책] CH9 클래스 part1. 클래스의 기본 구성
※ 책 [혼자 공부하는 자바스크립트]를 공부하며 기록, 정리해 놓은 노트이다.목차클래스의 기본 기능요약: 객체 지향 패러다임추상화 abstraction1. 같은 형태의 객체 손수(노가다로) 만들기2. 객체를 활용하는 함수3. 객체의 기능을 메소드로 추가하기4. 객체자체도 함수로 생성하기5. (마침내) 클래스(로) 선언하기객체 지향 프로그래밍 Object Oriented Programming클래스 class프로토타입 prototype인스턴스(객체) instance생성자 constructor 메소드 method 클래스의 기본 기능객체 지향 패러다임, 추상화, 클래스, 인스턴스, 생성자요약: ☝🏿class Student { 키:값 … 키:값, 메소드1{} 메소드2{}… }와 같이 클래스를 선언한다.☝🏿cons..
[책] CH8 예외 처리
※ 책 [혼자 공부하는 자바스크립트]를 공부하며 기록, 정리해 놓은 노트이다. 목차구문 오류와 예외요약: 오류의 종류1. 구문 오류 syntax error2. 예외 exception (런타임 오류 runtime error)예외 처리 exception handling1. 기본 예외 처리2. 고급 예외 처리예외 처리 고급요약: 예외 객체 exception object예외 객체의 속성throw 구문“자바스크립트는 예외를 잘 발생시키지 않아요. 아주 얌전하죠”try 구문 안에서 throw로 던진 에러도 catch가 받을까? 구문 오류와 예외구문 오류, 예외(런타임 오류), 예외 처리, try cath finally 구문요약: ☝🏿오류에는 구문 오류와 런타임 오류(=예외) 두 가지가 있고☝🏿그 중 런타임 오류를 ..
[책] CH7 문서 객체 모델(DOM)
※ 책 [혼자 공부하는 자바스크립트]를 공부하며 기록, 정리해 놓은 노트이다. 목차문서 객체 조작하기요약:DOMContentLoaded 이벤트문서 객체 가져오기문서 객체 생성하기문서 객체 이동하기문서 객체 제거하기문서 객체 내부를 조작하기글자 조작속성 조작스타일 조작이벤트 설정하기이벤트 연결 생성하기이벤트 연결 제거하기이벤트 활용요약:이벤트 모델 event model표준 이벤트 모델고전 이벤트 모델인라인 이벤트 모델키보드 이벤트이벤트 발생 객체글자 입력 양식 이벤트입력 양식 form드롭다운 목록체크 박스 라디오 버튼 기본 이벤트 막기할 일 목록 만들기아주 강력한 글자 수 세기 프로그램localStorage 객체 문서 객체 조작하기실제 HTML문서에는 내용을 입력하지 않고도 자바스크립트 쪽에서 body태그..
[책] CH6 객체 part4(끝). 다중 할당과 깊은 복사
※ 책 [혼자 공부하는 자바스크립트]를 공부하며 기록, 정리해 놓은 노트이다. 목차객체와 배열 고급요약:속성 존재 여부 확인배열 기반의 다중 할당객체 기반의 다중 할당다중 할당 (구조 분해 할당) 활용 예시얕은 복사: 참조 변수만 바꾸기깊은 복사: 내용물도 복사배열 전개 연산자로 깊은 복사하기객체 전개 연산자로 깊은 복사하기전개 구문 spread operator객체와 배열 고급속성 존재 여부 확인, 다중 할당, 얕은 복사(참조 복사), 깊은 복사 요약:☝🏿“객체.속성1”의 값이 null이나 NaN, 0, “”가 아니라는 게 확실하면 if (객체.속성1)로 속성1의 존재 여부를 확인하고(확실치 않다면 if (객체.속성1 !== undefined)로),☝🏿할당 연산자 오른쪽에 배열이나 객체를 써서 다른 배열..
[책] CH6 객체 part3. 외부 라이브러리 연결
※ 책 [혼자 공부하는 자바스크립트]를 공부하며 기록, 정리해 놓은 노트이다. 목차외부 script 파일 읽어들이기외부 자바스크립트 파일 뭉치 - Lodash 라이브러리CDN (Contents Delivery Network) 이란…min 버전이란…이름이 왜 ‘Lodash’인가 외부 script 파일 읽어들이기프로그램이 커지면 html파일에서 로 외부 자바스크립트 파일을 읽어들이면 된다.HTML 파일은 위에서부터 아래로 태그를 읽어들이면서 차근차근 처리하기 때문에, 위에 있는 // 콜렉션(배열과 객체)에 적용 가능한 _sortBy(): => 결과: (4) [{…}, {…}, {…}, {…}] 0 : {user: 'barney', age: 36} 1 : {user: 'barney', age: 34} 2 : ..
[책] CH6 객체 part2. 기본 자료형과 승급
※ 책 [혼자 공부하는 자바스크립트]를 공부하며 기록, 정리해 놓은 노트이다. 목차객체의 속성과 메소드 사용하기요약: 객체 자료형 object일급 객체 first-class object(citizen)기본 자료형 primitives(primitive types)기본 자료형을 객체로 선언하기기본 자료형의 일시적 승급프로토타입으로 메소드 추가하기대표 객체들 - Number, String, JSON, MathNumber 객체에서 자주 쓰는 메소드:String 객체에서 자주 쓰는 메소드:JSON 객체에서 자주 쓰는 메소드:Math 객체에서 자주 쓰는 메소드: 객체의 속성과 메소드 사용하기기본 자료형, 객체 자료형, 기본 자료형의 승급, prototype요약: ☝🏿클래스 속성 Math.PI등과 ☝🏿인스턴스 속성 ..
[책] CH6 객체 part1. 객체 만들고 사용하기
※ 책 [혼자 공부하는 자바스크립트]를 공부하며 기록, 정리해 놓은 노트이다. 목차객체의 기본요약:객체속성과 메소드동적으로 객체 속성 추가/제거메소드 간단 선언 구문객체 구조 분해 할당자유로운 this 객체의 기본요소, 속성, 메소드, this, 동적 속성 추가/제거요약:☝🏿객체를 만들 때: { 키:값, 키:값, }형태 안에, ☝🏿키로는 식별자와 문자열을 선언할 수 있고(기존의 식별자가 아니어도 된다),☝🏿값으로는 뭐든지 올 수 있는데 함수가 오면 메소드, 그렇지 않으면 속성이 되며,☝🏿메소드를 선언할 땐 익명 함수의 일반적인 축약형인 화살표 함수가 아니라 메소드 전용 축약형인 메소드 간단 선언 구문을 쓴다. ⇒ 키( ) { 함수 내용 }☝🏿객체를 다 만들고서 사용할 때:☝🏿값을 불러올 땐 객체[’키’]..
[책] CH5 함수
※ 책 [혼자 공부하는 자바스크립트]를 공부하며 기록, 정리해 놓은 노트이다.목차함수의 기본 형태요약: 익명 함수 선언적 함수 매개변수와 리턴값기본적인 함수 예제윤년을 확인하는 함수A부터 B까지 더하는 함수최솟값 구하는 함수나머지 매개변수 rest parameter나머지 매개변수와 일반 매개변수 조합하기매개변수의 자료형에 따라 다르게 작동하는 getMin()함수전개 연산자 spread operator기본 매개변수구버전 자바스크립트에서는…나머지 매개변수가 없었다전개 연산자가 없었다기본 매개변수도 없었다한마디로 함수에 일반 매개변수밖에 못 썼다. 부를 때도 마찬가지.함수 고급: 함수를 매개변수로 전달하는 특성요약: 콜백 함수 callback function선언적 함수를 콜백으로 사용하기:익명 함수를 콜백으로..
[책] CH4 배열과 반복문
※ 책 [혼자 공부하는 자바스크립트]를 공부하며 기록, 정리해 놓은 노트이다. 배열요약:💡자바스크립트의 배열에 들어가는 요소는 타입이 혼합될 수 있다.💡배열을 만들고, 요소를 가져오고/추가하고/제거하고, 길이를 파악할 수 있다.💡저런 작업들은 작업 후에 배열의 내용이 바뀌는 파괴적 처리가 대부분이고, 비파괴적 처리라면 filter() 메소드가 대표적이다. 배열 만들기: 배열의 요소로 어떤 타입이든 다 들어갈 수 있다. (파이썬과 비슷)> const array = [23, 'Fire!', true, function () {}, {}, [1,2]] (6) [23, 'Fire!', true, ƒ, {…}, Array(2)] 배열에서 가져오기> typeof array[3] 'function'인덱스 자리에 계산식..
[책] CH3 조건문
※ 책 [혼자 공부하는 자바스크립트]를 공부하며 기록, 정리해 놓은 노트이다. if 조건문if 조건문자바와 마찬가지로 한줄 짜리 실행 문장은 중괄호를 생략 가능하다.스치듯 지나간 시각 객체 Date의 메소드들getFullYear() // 2022getMonth() // 1월이면 0을 반환함getDate() // 1getHours() // 21getMinutes() // 18getSeconds() // 38if else 조건문 중첩 조건문 if else if 조건문 ‘조건’이 한 문장이라면 if 조건문에서 중괄호를 생략해도 된다는 점에 기인하여 중첩 조건문에서 중괄호를 생략한 형태가 if else if 조건문이라고?? 분명 ‘실행’할 문장이 하나일 때 중괄호를 생략할 수 있다고 써져있는데(p131, 133..
[책] CH1 자바스크립트 시작
※ 책 [혼자 공부하는 자바스크립트]를 공부하며 기록, 정리해 놓은 노트이다. Statcounter - 웹 브라우저 점유율:Browser Market Share Worldwide | Statcounter Global StatsThis graph shows the market share of browsers worldwide based on over 5 billion monthly page views.https://gs.statcounter.com/browser-market-sharehttps://gs.statcounter.com/browser-market-share 자바스크립트 식별자 규칙⭐키워드는 안됨숫자로 시작도 안됨특수문자는 _와 $만 허용 (”_alpha”, “$alpha”, “_”, “$”도 가..
[책] CH2 상수와 변수
※ 책 [혼자 공부하는 자바스크립트]를 공부하며 기록, 정리해 놓은 노트이다. 기본 자료형 - 문자열, 숫자, 불(그리고 null, bigint, undefined, symbol타입까지가 기본 자료형이지만 설명을 생략한다)문자열이스케이프 문자 활용하기> "동해물과 백두산이\n마르고 닭도록" '동해물과 백두산이 마르고 닳도록' > "이름\t나이" '이름 나이'> " \ " " " > "\" Uncaught SyntaxError: Invalid or unexpected token (따옴표 안 닫았다는 그것) > "\\ \\ \\ \\" '\ \ \ \' (라는데 크롬 콘솔창에 실험하면 '\\ \\ \\ \\' 그대로 뜬다. 왜지??) (아! console.log()로 찍어줘야 '해석'되어서 나온다) > co..