개발공부일지

목차 1. runtime 2. 호이스팅 3. 이벤트 루프 4. setTimeout 5. 문제 ① 6. 결과(console창과 그림) 7. 문제 ② 1. runtime - 코드를 실행해주는 것 - runtime이 돌아가는 2가지 환경 : 브라우저, Nodejs (어떤것을 조작하고 싶은지에 따라 용도가 다름) - 브라우저는 브라우저 안에 js runtime이 포함되어있으며, 한계가 있다. (파일을 열수없음) - Nodejs의 경우 브라우저에서 안되는 것을 포함하고있다. (파일을 열수있음 → 내 컴퓨터를 조작할 수 있다! → 그래서 통신을 구현할 수 있다!) const a = 10; function fn() { console.log(c); let c = 10; } let b = fn(); const c = 1..

목차 1.class 2. 게시판 만들기 1.class - 추상을 만들고 실체를 만드는것 - new 라는 인스턴스를 생성 (인스턴스화) class 의자 { 다리가 있다. 앉을수 있다. 등받이가 있다. //추상 } const chair = new 의자(); //인스턴스화, 실체화한다 ★ 직업이라는 사람의 정보를 class로 만들때 function Job(_job) { // this = {} this.job; console.log(_job); // return this } const job = new job("senior"); - Job에 this가 빈 객체이고, 리턴으로 this가 생략되어있다고생각하면 된다. class Job { job; //쓸거라고 미리 지정 constructor(_job, _career..

목차 1. 함수 선언식과 표현식 2. 함수를 사용하는 방법 2-1 일반함수로 사용 2-2 생성자 함수로 사용 2-3 객체 메서드 할당 3. this 바인딩 1. 함수 선언식과 표현식 - 선언식 function a(){ console.log('a') } - 표현식 const b = function (){ console.log('b') } 2. 함수를 사용하는 방법 2-1 일반함수로 사용 function foo(a, b) { console.log(this); // window객체 return [a, b]; } const a = foo(1, 2); console.log(a); //[1,2] 2-2 생성자 함수로 사용 function foo() { // this={} console.log(this); // re..

목차 1. 참조타입 2. 얕은 복사와 깊은 복사 3. 과제 4. 과제 결과 5. job의 메모리 주소 그림 1. 참조타입 - 원시타입을 제외한 배열, 객체, 함수를 말한다. ※ 원시타입 : string, number, boolean, null, undefined, symbol 2. 얕은 복사와 깊은 복사 - 얕은 복사 : 원본의 내용을 수정해 (메모리 주소를 복사해) 사용하는것 - 깊은 복사 : 원본의 내용을 새로 만들어 사용하는것 const a = { name: "ingoo" }; const b = a; b.name = "web7722"; console.log(a); const a = { name: "ingoo" }; const b = { ...a }; b.name = "web7722"; console..

목차 1. html에서 board 페이지 만들고 home 게시글 눌렀을 때 이동 & 댓글칸 만들기, css, js 2. js로 작성한 게시글 내용 보여주기 (추천수, 조회수, 댓글까지) 3. 결과 1. html에서 board 페이지 만들고 home 게시글 눌렀을 때 이동 & 댓글칸 만들기, css, js Add Comment - create에서 작성한 게시글이 보여지는 화면 만들기 - 제목, 유저이름, 좋아요 수, 조회수, 날짜, 내용, 댓글에 버튼까지 만들어주기 .header { display: flex; justify-content: space-between; } .flex-box { display: flex; justify-content: space-between; align-items: cente..

목차 1. html에서 home 페이지 table 만들기, css 2. js로 tbody 내용 만들고 thead th의 값 넣어주기 (localStorage 활용) 3. html에서 create 페이지 만들기, css 4. js로 등록 버튼 onclick 이벤트 주기 (localStorage 활용) 5. 결과 1. html에서 home 페이지 table 만들기, css Create Num Title User Created At Views Likes - 로 home과 create 를 연결시켜주기 - 은 에서 세로로 나열된 항목에 를 주어 각각 다른 스타일을 적용시켜 줄 수 있음 table { width: 100%; border-collapse: collapse; table-layout: fixed; } c..

목차 1. 정규표현식 https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Regular_expressions 정규 표현식 - JavaScript | MDN 정규 표현식, 또는 정규식은 문자열에서 특정 문자 조합을 찾기 위한 패턴입니다. JavaScript에서는 정규 표현식도 객체로서, RegExp의 exec()와 test() 메서드를 사용할 수 있습니다. String의 match(), matchA developer.mozilla.org 1. 정규표현식 - 특정한 규칙을 문자열의 집합을 표현하는데 사용하는 const reg1 = /정규표현식/; const reg2 = new RegExp("정규표현식"); console.log("정규표현식 사용중".mat..

목차 1. sort 2. Bubble 3. Insert 4. Select 5. 속도비교 const arr = [8, 16, 88, 18, 343, 0, 100, 28, 90000, 0.5, 7, 13]; const testArr = [ 100,000개의 숫자가 들어있음 ] 1. sort - 앞에서부터 하나씩 확인하며 가장 작은 수를 새로운 배열에 넣는 방식으로 정렬했을때 function gsb(arr) { const tempArr = []; while (arr.length) { let minNumber; let tempIdx = 0; for (let j = 0; j < arr.length; ++j) { if (minNumber == undefined || arr[j] < minNumber) { minNu..

목차 1. Big-O 2. Flow chart 1.Big-O O(1) - 입력값으로 몇개를 넣어도 코드 실행함에 있어서 항상 일정한 속도를 유지하는것 - 데이터베이스설계할때, 블록체인에 있어서 생각해봐야함!! console.log("a"); O(n) - 입력한 갯수만큼 실행되는것 (선언, 함수 메서드 계산법) - 무한대까지 생각을 해야한다. function bigOn(...arr) { for (let i = 0; i < arr.length; i++) { console.log(arr[i]); } } bigOn(1, 700, "abc"); O(log n) - 입력수가 늘어날수록 입력수에 비해, 코드를 실행하는 횟수는 적게올라가는것 - 정렬에서 많이 사용한다 - 예시로 updown게임이있다. → 1~100중에..

목차 1. this 2. bind 3. static 4. closure 1.this 전역스코프에서의 this console.log(this); - 전역 스코프에서 this를 console하면 window 객체를 가리킨다. 객체에서의 this ({ a: 1000, checkThis() { console.log(this); }, }).checkThis(); - 객체안에서의 this를 console하면 자기자신을 보여준다. class내에서의 this class Test { checkThis() { console.log(this); } checkThisArrow = () => { console.log(this); }; } const test = new Test(); test.checkThis(); test.ch..