개발공부일지

목차 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중에..

경일게임아카데미 intro페이지 스크롤을 내릴때 시간차를 두고 효과가 나타나게끔 하기 https://www.kiweb.or.kr/intro 경일게임 아카데미 현장과 가장 닮아있는 교육을 목표로 합니다. 경일만의 후끈한🔥 관리를 받아보세요. 우리는 취업에 진심입니다. 현장과 가장 닮아있는 교육을 목표로 합니다. 경일만의 후끈한🔥 관리를 받아 www.kiweb.or.kr 개발자 취업, 그 이상의 가치를 만들다! 능력으로 인정 받는 슈퍼신입으로 만들어드립니다. 왕초보여도 상관없어요. 제대로 하겠다는 마음만 가지고 오세요! .anim { transition: transform 1s linear, opacity 1s linear; } .off { transform: translateY(3rem); opacity:..

경일게임아카데미 intro페이지 footer https://www.kiweb.or.kr/intro 경일게임 아카데미 현장과 가장 닮아있는 교육을 목표로 합니다. 경일만의 후끈한🔥 관리를 받아보세요. 우리는 취업에 진심입니다. 현장과 가장 닮아있는 교육을 목표로 합니다. 경일만의 후끈한🔥 관리를 받아 www.kiweb.or.kr

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

목차 1. class 2. prototype 3. 객체지향 1. class - prototype을 고급화되게 만든것 ( prototype과는 다른 방식 ) , 객체지향 - class라는 명령어를 쓰고, 이름을 지어준 다음 객체에 들어갈 키를 정해준다. (사용할 것들을 선언해준것이다) - constructor() {} 생성자 함수를 만들고 그안에 매개변수에 this. 를 붙여준다. → this는 생성된 객체 자체를 뜻한다. class Fruits { color; weight; constructor(color, weight) { this.color = color; this.weight = weight; } getColor() { return this.color; } getWeight() { return th..

목차 1. 고차함수 2. 즉시실행함수, 익명함수 3. 재귀함수 4. setTimeout / setInterval 1. 고차함수 - 함수를 전달받거나 함수를 반환하는 함수 ( 콜백함수를 받는 함수 ) - forEach, array, findIndex, filter, sort ▼ 콜백함수를 받는 경우 function pleaseCallback(tempLog) { tempLog("고차함수"); } pleaseCallback(console.log); pleaseCallback((temp) => { console.log(temp); }); ▼ 함수 자체를 반환하는(리턴하는) 경우 - higherFunc()을 호출하면 그 리턴값이 console.log 라는 메서드라는것이다. → 그래서 higherFunc()("고차..