DalpangLOG

프로토타입 상속 - 자바스크립트의 모든 객체엔 숨김 프로퍼티인 [[Prototype]]이 있고, 이 프로퍼티는 객체나 null을 가리킨다. - obj.__proto__ 를 사용하면 프로토타입에 접근 가능. (요즘엔 __proto__ 대신, Object.getPrototypeOf나, Object.setPrototypeOf를 써서 프로토타입을 get or set 한다. - [[Prototype]]은 prototype이라는 객체를 참조한다. - 객체에서 프로퍼티를 읽거나 메서드 호출 시, 해당 객체 내에 읽으려는 프로퍼티나 메서드가 없으면 자바스크립트는 자동으로 프로토타입에서 해당 프로퍼티나 메서드를 찾는다. - 프로토타입 내에 getter, setter가 없는 경우, 쓰기나 지우기 관련 연산은 객체에 직접 ..

개발공부/개발공부 2022. 12. 30. 11:19

프로퍼티 플래그와 설명자. 객체에 설정할 수 있는 프로퍼티. 객체 프로퍼티는 플래그라는 특별한 속성 세 가지를 갖는다. 1) writable - true이면 값 수정 가능. 2) enumerable -true면 반복문 사용해 나열 가능. 3) configurable - true이면 프로퍼티 삭제나 플래그 수정 가능. Object.getOwnPropertyDescriptor 메서드를 사용해 특정 프로퍼티에 대한 정보를 모두 얻기 가능. let user = { name: "John" }; let descriptor = Object.getOwnPropertyDescriptor(user, 'name'); alert( JSON.stringify(descriptor, null, 2 ) ); /* property d..

개발공부/개발공부 2022. 12. 30. 11:00

객체로서의 함수와 기명 함수 표현식 함수 객체에 내장된 프로퍼티 - name : 함수 이름 리턴. - length : 함수 매개변수의 개수 반환 프로퍼티는 변수가 아님. 커스텀 프로퍼티. => 함수에 자체적으로 만든 프로퍼티를 추가할 수 있음. js 라이브러리인 jQuery는 $라는 주요 함수로 이뤄져 있다. 여기에 헬퍼 함수를 붙여 사용. 기명 함수 표현식(Named Function Expression, NFE) => 이름이 있는 함수 표현식. 1) 이름(func)을 사용해 함수 표현식 내부에서 자기 자신을 참조할 수 있다. 2) 함수 외부에선 그 이름 사용 불가. let sayHi = function func(who) { if (who) { alert(`Hello, ${who}`); } else { ..

개발공부/개발공부 2022. 12. 29. 18:32

재귀와 스택 재귀 함수 : 자기 자신을 호출하여 실행하는 함수. function pow(x, n) { return (n == 1) ? x : (x * pow(x, n - 1)); } 사용 예) let company = { // 동일한 객체(간결성을 위해 약간 압축함) sales: [{name: 'John', salary: 1000}, {name: 'Alice', salary: 1600 }], development: { sites: [{name: 'Peter', salary: 2000}, {name: 'Alex', salary: 1800 }], internals: [{name: 'Jack', salary: 1300}] } }; // 급여 합계를 구해주는 함수 function sumSalaries(depar..

개발공부/개발공부 2022. 12. 29. 10:46

원시값의 메서드 자바스크립트에서는 원시값(문자열, 숫자 등)을 객체처럼 다룰 수 있다. 원시형의 종류:  문자(string), 숫자(number), bigint, 불린(boolean), 심볼(symbol), null, undefined 객체 : 프로퍼티에 다양한 종류의 값 저장 가능. {} 대괄호를 사용해 만들 수 있음. 함수도 객체의 일종. 원시값을 객체처럼 사용하기. Object Wrapper : String, Number, Boolean, Symbol, etc.ex) str.toUpperCase()new 를 붙여서 생성자처럼 사용하지 않길 추천. 형변환을 위해 다음과 같이 사용하는 것 추천. let num = Number("123"); // 문자열을 숫자로 바꿔줌 Null, undefined에 대..

개발공부/개발공부 2022. 12. 28. 17:52

옵셔널 체이닝 '?.' - '?.' 옵셔널 체이닝은 '?.' 앞의 평가 대상이 undefined나 null이면 평가를 멈추고, undefined를 반환한다. let user = {}; // 주소 정보가 없는 사용자 alert( user?.address?.street ); // undefined, 에러가 발생하지 않습니다. ?.는 존재하지 않아도 괜찮은 대상에만 사용 만약 '?.'앞에 오는 값이 null이나 undefined가 아닌 경우, 반드시 해당 프로퍼티가 존재해야만 에러가 나지 않음. 단락평가 왼쪽 평가대상에 값이 없으면 즉시 평가를 멈춥니다. let user = null; let x = 0; user?.sayHi(x++); // 아무 일도 일어나지 않습니다. alert(x); // 0, x는 증가..

개발공부/개발공부 2022. 12. 27. 15:40

객체 생성방법 let user = new Object(); // '객체 생성자' 문법 let user = {}; // '객체 리터럴' 문법 상수 객체 수정 가능 const user = { name: "John" }; user.name = "Pete"; // (*) alert(user.name); // Pete 대괄호 표기법 let user = {}; // set user["likes birds"] = true; // get alert(user["likes birds"]); // true // delete delete user["likes birds"]; 계산된 프로퍼티 let fruit = 'apple'; let bag = { [fruit + 'Computers']: 5 // bag.appleComput..

개발공부/개발공부 2022. 12. 27. 14:58

***다음 글의 내용은 javascript.info 사이트의 내용을 공부하며 작성한 내용입니다. JavaScript Fundamentals 3.3 ~ 3.6 3.3 주석 한 줄 주석 : // 여러 줄 주석 : /* ... */ 만약 이 함수가 무슨 역할을 하는지 주석을 많이 달아야 한다면, 함수를 리팩토링 하는게 나을 수도 있다. 리팩토링 : 함수 분리하기 함수 분리 전) function showPrimes(n) { nextPrime: for (let i = 2; i < n; i++) { // i가 소수인지를 확인함 for (let j = 2; j < i; j++) { if (i % j == 0) continue nextPrime; } alert(i); } } 분리 후) self-descriptive한 ..

개발공부/개발공부 2022. 12. 27. 13:40

***다음 글의 내용은 javascript.info 사이트의 내용을 공부하며 작성한 내용입니다. JavaScript Fundamentals 3.1 ~ 3.2 코드 품질 3.1 Chrome으로 디버깅하기 chrome -> F12 (MacOS : Cmd + Opt + I) : 개발자 도구. Source 패널 열기. 1. 파일 탐색 영역 : 페이지 리소스 2. 코드 에디터 영역 : 선택한 파일의 소스코드 보여줌. 소스 코드 편집 가능. 3. 자바스크립트 디버깅 영역 : 디버깅 관련 기능 제공. 중단점 javascript 파일을 2번 코드 에디터 영역에 띄우고 왼쪽에 있는 숫자 부분을 클릭하면 breakpoint 지정이 가능하다. 중단점(breakpoint)은 자바 스크립트의 실행이 중단되는 지점을 의미하는데,..

개발공부/개발공부 2022. 12. 23. 12:28

***다음 글의 내용은 javascript.info 사이트의 내용을 공부하며 작성한 내용입니다. JavaScript Fundamentals 2.16 ~ 2.18 2.16 함수 표현식 선언문 방식(Function Declaration) function sayHi() { alert( "Hello" ); } 함수 표현식(Function Expression) let sayHi = function() { alert( "Hello" ); }; 위 두 개의 함수 선언 방식 모두 동일한 역할을 한다. 콜백 함수 함수 매개변수로 다른 함수를 부를 때, 매개변수로 사용된 함수를 콜백 함수 또는콜백이라고 한다. function ask(question, yes, no) { if (confirm(question)) yes() ..

개발공부/개발공부 2022. 12. 22. 15:01

***다음 글의 내용은 javascript.info 사이트의 내용을 공부하며 작성한 내용입니다. JavaScript Fundamentals 2.12 ~ 2.15 2.12 nullish 병합 연산자 '??' * 최근 추가된 문법. a ?? b a 가 null도 아니고 undefined도 아니면 a, 그 외의 경우는 b. => 다음과 동일한 결과 x = (a !== null && a !== undefined) ? a : b; '??'와 '||'의 차이 - '||'는 첫 번째 truthy 값 반환 - '??'는 첫번째 정의된(defined) 값 반환 let height = 0; alert(height || 100); // 100 alert(height ?? 100); // 0 => '||'는 0이 falsy ..

개발공부/개발공부 2022. 12. 22. 12:55

***다음 글의 내용은 javascript.info 사이트의 내용을 공부하며 작성한 내용입니다. JavaScript Fundamentals 2.7 ~ 2.11 2.7 형변환 - 자동 형 변환과, 명시적 형 변환. 연산자, 함수는 대부분 자동적으로 전달받은 값을 적절한 자료형으로 변환해 준다. (자동 형변환) 하지만 때로는 병시적으로 특정 타입으로 형변환 시켜야 할 때도 있다. (명시적 형변환) 문자형으로 변환 String(문자열로변환할값) 숫자형으로 변환 Number(숫자로변환할 값) 전달받은 값 형 변환 후 undefined NaN null 0 true / false 1 / 0 string 문자열의 앞뒤 공백 제거 후 남은 문자열에서 숫자를 읽어 값 리턴. 단, 공백 제거 후 아무것도 안남으면 0, 숫..

개발공부/개발공부 2022. 12. 21. 18:25

***다음의 내용은 javascript.info 사이트의 내용을 공부하며 작성한 내용입니다. https://ko.javascript.info/hello-world Hello, world! ko.javascript.info JavaScript Fundamentals 2.1 ~ 2.6 Hello, World! HTML 파일 내 javascript 코드 작성 시. 모던 자바스크립트에서는 자주 사용하지 않는 script 태그의 속성(attribute) - type 속성 - language 속성 : javascript가 디폴트임으로 더 이상 사용할 필요 없는 속성. - 외부 스크립트 가져오기. 다음의 경로 부분에 가져올 자바스크립트 외부 파일 위치를 작성해주면 됨! 여러 javascript 파일을 적용시킬 경우,..

개발공부/개발공부 2022. 12. 20. 09:07

파이썬을 통해 간단한 웹 서버 실행 하기 1) 해당 프로젝트 파일이 있는 위치로 terminal에서 경로 변경. 2) 다음의 파이썬 커맨드 사용해 서버 띄우기. *** python3 버전 기준 서버 동작 커맨드. python3 -m http.server ***python2 사용 시 아래의 커맨드 사용. python2 -m SimpleHTTPServer 8000 위의 커맨드 뒤에 '&'를 추가해 background에서 실행되게 할 수 있다. ex ) python3 -m http.server & 다른 PC에서 지금 띄운 서버에 접속하기 (같은 와이파이를 사용하는 경우 가능) 서버를 띄운 피씨를 MyPC, 접속을 하려는 다른 피씨를 OtherPC라고 하자. (맥기준으로 설명) 1) 우선, 현재 컴퓨터의 IP ..

개발공부/개발공부 2022. 12. 19. 14:13

JavaScript ? - 웹페이지에 살아있는 것 같은 동적인 요소를 넣기 위해 생긴 언어. HTML 페이지 내에 작성되거나, 별도의 파일로 작성되어 웹 페이지가 로딩될 때 자동으로 실행되게 할 수 있다. 자바 스크립트로 작성한 프로그램을 스크립트 (Script)라고 부른다. 자바 스크립트와 자바 자바 스크립트가 만들어질 당시 초기 이름은 'LiveScript'이었으나, 당시 자바의 인기에 편승하여 자바의 동생 같은 느낌으로 포지셔닝하려고 이름을 '자바'스크립트로 변경하였다. 사실상 자바와 관계 없음! 자바 스크립트는 브라우저에서 뿐만 아니라 자바스크립트 엔진이 있다면, 서버에서도 동작 가능하다. 자바 스크립트 가상 머신이라고 불리는 엔진이 웹 브라우저에 내장되어 있음. - V8 : Chrome, Ope..

개발공부/개발공부 2022. 12. 15. 15:59

Webpack? : 여러 자바 스크립트 파일을 합쳐 하나(또는 하나 이상일 수도 있음)의 번들(묶음)로 변환시켜 주는 '정적 모듈 번들러'. 즉, 각각의 스크립트 파일들이 따로 렌더링 되는 것이 아니라, 미리 정적 모듈로 만들어진 하나(또는 소수의) 큰 번들을 렌더링 시킴으로써 유저가 더 빠른 시간 안에 서비스받을 수 있게 만들어주는 기능. > Module - 프로그램 구성 요소. 관련 데이터와 함수를 하나로 묶은 단위. > Dynamic shared objects? : DSO. 실행중에 여러 애플리케이션이나 파일에서 동시에 또는 공유하여 사용할 수 있는 객체 파일. > Mosel Langage? - 모델링 언어나 프로그램언어 모두를 통칭할 수 있는 언어. Modeling Language -> UML (..

개발공부/개발공부 2022. 12. 14. 16:00