코딩 일지

css overflow:hidden ; 넘친 컨텐츠는 잘려지고 보여지지 않게 한다. before, after? 가상의 컨텐츠이다. http://blog.hivelab.co.kr/%EA%B3%B5%EC%9C%A0before%EC%99%80after-%EA%B7%B8%EB%93%A4%EC%9D%98-%EC%A0%95%EC%B2%B4%EB%8A%94/ [공유]::before와::after, 그들의 정체는? [공유]::before와::after, 그들의 정체는? 안녕하세요! UI개발2팀 조가영입니다. 무려 10주에 걸쳐 진행한 OJT. 면수습 후 OJT의 꽃인 블로깅을 작성하려니 감회가 더욱 새롭네요! 과제를 하던 중 발견한 blog.hivelab.co.kr logo menu1 menu1-1 menu1-2 me..

목차 - setInterval - setTimeout - querySelectorAll - onClick - clearInterval - setInterval 매 초마다 같은 동작을 실행하고 싶을 때 사용한다. ex) 1초마다 1을 찍고싶다. 첫번째 인자 값은 콜백함수를 넣는다. 두번째 인자 값은 시간을 넣어주면 된다. 1000 = 1s setInterval(podo, 1000) function podo(){ console.log(1) } //1초마다 1이 출력됨 setTimeout 내가 실행하고 싶은 시간을 설정값에 따라 실행한다. setTimeout(podo, 1000) //1초 후에 딱한번 실행하겠다는 뜻이다 아래의 출력 결과는? console.log(4) console.log(3) setTimeo..

// 1월 12일차 let updateFlag = true //on.off 스위치 역할 function updateHandler(e){ if (updateFlag) updateFlag = false else return //한번에 하나만 업데이트. 엔터치기 전까지 다른 거 못 건드림 //삼항연산자 if문 한줄로 줄이는 거 존재 //innerHTML 내용 바꾸고 싶을 때 사용 console.log(e.target.innerHTML) // 안의 내용만 출력 let content = e.target.innerHTML e.target.innerHTML = '' console.log(content) //인풋박스 생성하기 (span안에 input박스 넣기) const inputElement = document.cr..

목차 - form에 담긴 정보로 to do list 만들기 - createElement - innerHTML - preventDefault() - append - target - parentNode - 인풋박스(input box) 초기화 하기 미리보는 완성본 위와 같은 TO DO LIST를 만들어보자. 1. js, css 파일을 head에서 연결하기 2. html 구조 만들기 ❤️ TO DO LIST ❤️ 3. css 설정하기 *{ padding: 0; margin: 0; } ul, li{ list-style: none; } #header{ width: 100%; height: 1200px; background: rgb(252, 238, 241); } #top{ width: 300px; height: 5..

목차 - DOM vs BOM - querySelector(), document.getElememtById() - 버튼에 이벤트 넣기 - 함수 콜백 - 스크립트 외부연결 - onload - 동기 vs 비동기 DOM : document 객체를 나타내고, 대부분 document. 으로 시작한다 BOM : browser 자바스크립트로 브라우저를 조작하기 위해서 DOM의 메서드 1. querySelector() 나이가 많지않다. 그렇게 오래되지 않음 얘 사용하는 것 추천. 더 많이 쓰는 이유? jQuery 때문 2. document.getElememtById() 쿼리셀렉터와 같은 기능. 사용법만 좀다르다 let btn = document.querySelector("#btn") //인자값이 중요 인자값이 무엇? #..

목차 -this -new -class -콜스택(재귀함수 출력순서) -알고갈 사실(항상 함수 바로 위에 작업을 해놓아야함. 이렇게 해도 실행이되는 이유는 함수는 먼저 실행되고 나머지가 차례로 실행되기때문) this this는 예약어, 객체. (이거) 사용하는 위치에 따라 결과물이 달라진다. console.log(this) //브라우저가 가진 객체 다 보여줌 console.log(this) //브라우저가 만들어줌. 내장객체 or APIs 라고 함. new 자바스크립트에서 생성자 new는 그냥 함수다. 객체 중복해서 쓰기 싫어서 사용함 생성자는 객체에대한 초기화이다. 사용 형식 let aa = newArr

https://hanamon.kr/javascript-shallow-copy-deep-copy/ 얕은 복사 vs 깊은 복사 [JavaScript] 얕은 복사(shallow copy) vs 깊은 복사(deep copy) - 하나몬 💡 얕은 복사(shallow copy) vs 깊은 복사(deep copy) ❗️얕은 복사(shallow copy)란? const obj1 = { a: 1, b: 2}; const obj2 = obj1; console.log( obj1 === obj2 ); // true 위의 예시처럼 객체를 직접 대입하는 경우 참조에 의 hanamon.kr 얕은 복사 : 주소값만 참조해주는 것. Object.assign() 즉, 같은 원본을 할당받기 때문에 하나의 내용 변경하면 다른 하나가 항상 ..

목차 -문자열 메서드 replace replaceAll repeat includes indexof substring substr concat valueof slice -콜백함수 -arrow 화살표 함수 -배열 메서드 1.forEach 2.filter 3.map 4.reduce -switch case 문 replace str_text.replace ("찾을 문자열", "변경할 문자열") 예시 let date = "2021-01-06"; let str = date.replace("-", ""); replaceAll let str = "dog dog hello" str.replaceAll("dog","monkey") repeat let str3 = "*" console.log(str3.repeat(6)) in..

목차 -스택, 큐, 데큐 -이중 for문(별쌓기) -재귀함수(피보나치수열) 스택 LIFO 후위선출 가져오기 O(n) 추가하기 O(1) 삭제하기 O(1) 큐 FIFO 선위선출 데큐 양 방향 가능 스택+큐 콜 스택(call stack) 콜 스택이란 컴퓨터 프로그램에서 현재 실행 중인 서브루틴에 관한 정보를 저장하는 스택 자료구조이다. 서브루틴의 이러한 실행은 여러 단계로 중첩될 수도 있는데, 다른 호출에 의해 또 다른 서브루틴으로 넘어가버리거나, 재귀같은 특별한 경우가 있다. 이중 for문 (for문 안에 for문) 이중 for문을 사용하여 크리스마스 트리를 만들어보자. let star = ''; for(let i=0; i

목차 -자바스크립트 메서드, 속성 차이 -프로토타입 배열, 객체 -객체 속 객체 typeof = 예약어 데이터 타입 알아내는 함수 arr.length 배열 길이 알아내는 함수 push 배열 맨 뒤에다 값 하나 추가하는 행위 메서드와 속성 차이 메서드는 뒤에 () 붙는다. (액션을 취해준다.) 속성은 뒤에 () 없다. 가지고 있는 것만으로 표현한다. prototype 찍어보면 메서드, 속성 확인 가능하다. 숙지해놓자. > console.log(arr[arr.length-1]) 자바 스크립트 프로토타입 at: ƒ at() concat: ƒ concat() constructor: ƒ Array() copyWithin: ƒ copyWithin() entries: ƒ entries() every: ƒ every(..