코딩 일지

nunjucks란? 템플릿 엔진 중 하나이다. 사용하는 이유, 첫번째 HTML 파일을 만들어주기 위해서이다. 예를들어 프로젝트한 내용을 express를 통해 넣으려고한다. send안에 넣어야하는데.. html 그 긴코드를 다 넣을 순 없다. (가독성이 떨어짐.) 즉, HTML이 하는 역할과 express가 하는 역할을 구별하기 위해 템플릿 엔진을 쓴다. 종류는 nunjucks, ejs, pug 등등 템플릿 엔진은 많으나, 지금은 numjucks 사용할 것이다. nunjucks 설치하기 비주얼스튜디오코드에서 사용할 폴더에! npm install nunjucks 를 해주어야한다. 터미널에서 cd로 원하는 폴더로 이동 후 (ls 쳤을 때 node_modules, package.json 등등 외부 라이브러리가 ..

목차 - 구조분해 할당(비구조 할당) - 객체 리터럴 - require - 자바스크립트 구동원리 - 랜덤함수 - promise 구조분해 할당 let obj = { a:10, b:20, c:{ d:30, } } let {a,b,c} = obj //문법이 이럼. //let a, b, c = obj 하면 a:10 b:20 ... 이런식으로 출력됨 console.log(a, b, c) //변수 명을 변경하려면? let {b:result} = obj //이렇게하면 b가 사라집니다. 변수명은 result가 됨. 객체리터럴 let a =10 let b = 20 let c = 30 //이녀석들을 한번에 다 객체에 담으려면? let obj2 = { a, b, c, } // let obj2 = { // a:a, // b:..

목차 - 웹서버 - 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") //인자값이 중요 인자값이 무엇? #..