코딩 일지

목차 - 웹서버 - host - http://localhost:3000 - 프로토콜 - get() - listen() - 포트 서버는 컴퓨터다. -웹서버 브라우저가 필요한 정보만 주면됨. 어디? 네트워크부분 (주소창) -- > 해당 웹서버에게 html css javascript 요청하는 것임. 웹서버( http라는 통신방법, 통신규격이다.) 브라우저 --요청--> 서버 브라우저 { 응답.send('Hello express') }) / host(포트까지포함) 하나는 host 하나만 말한다. 두번째 인자값은 콜백함수 넣는다. 콜백함수에도 인자값이 2개가 존재한다. 요청과 응답 주소창에 http://localhost:3000 치면 Hello express가 출력된다. app.get('/node',(요청, 응답..

목차 - nodejs 설치 및 업데이트 - nvm(node version manager) 설치, 업데이트 - npm 업데이트 - 패키지, 라이브러리란? - express 라이브러리 설치 홈 디렉토리에서 curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash 똑같이 복사해서 붙여넣기 해준다. 제대로 설치되었는지 확인하는 법. source ~/.bashrc nvm --version 순서대로 쳐 준다. 숫자가 출력되면 잘 설치가 된 것임. 업데이트 버전 설치하는 법 nvm install --lts lts 모양이 뜰 것이다. 여기에 그냥 코드를 입력하면된다. let a = 0 엔터키 누르고, a 엔터 다시 누르면 0..

목차 - nodejs란 - os 조작방식 - os 종류 - VM(버추얼 머신) - WSL(Windows Sub-system for Linux) - 리눅스환경 설정하는법 - 맥이랑 리눅스랑 비슷한 폴더명 - 윈도우 디렉토리 가는법(폴더 찾아가기) - 터미널에서 폴더 생성 및 확인하기 - 숨김 폴더 생성 및 확인하기 - 파일 생성 및 확인하기 - curl - 패키지, 패키지 매니저 노드제이스란? 자바스크립트 코드가 내 컴퓨터에서 실행되게 하는 것. 조작 방식 GUI : 마우스 클릭 CLI : 키보드 자판 OS 종류 윈도우 GUI 리눅스 CLI 유닉스 CLI 매킨토시 IOS 안드로이드 ※즉, 자바스크립트 언어로 CLI를 만드는 것이 노드제이스의 역할 (CLI이해하기위해 노드제이스 배운다.) VM(버추얼 머신)..

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() 즉, 같은 원본을 할당받기 때문에 하나의 내용 변경하면 다른 하나가 항상 ..