즐코

1/ nunjucks , 템플릿 엔진? 템플릿 엔진 == 자바스크립트를 사용해서 HTML 파일을 렌더링해주는 역할 nunjucks는 여러 template engine 들 중 하나이다. 자세한 예를 들자면, 우리가 프로젝트한 내용을 express를 통해서 넣으려고 한다. 그럴 경우, res.send()의 인자값으로 의 모든 코드를 넣어줘야하는데, 굉장히 복잡하고 불편해질거다. => 즉, html이 하는 역할과 express가 하는 역할(서버의 역할)을 구별하기 위해서 이 템플릿 엔진을 쓰는 것! 2/ nunjucks 설치 및 세팅 #1. 경로 확인하기 nunjucks도 express처럼 외부 라이브러리다. 즉, express처럼 설치를 해줘야한다. 이 때, 바로 설치하지 말고 경로 확인부터 필수로 해주기 ..

1/ Promise 맛보기 1- Promise의 목적 콜백 기능을 그대로 하되 코드를 조금 더 깔끔하게 만들어준다. 2- Promise 사용법 Promise 는 객체라는 게 포인트 지난번에 다뤘던 객체틀(붕어빵틀) 만들고 객체들(붕어빵)을 복사했던거를 복습해보면, 새로운 객체를 복사, 찍어낼 때 new라는 생성자를 썼었다. // 객체들을 찍어내는 틀을 만드는 방법1 (함수 쓰기) function person(name,job){ this.name = name; this.job = job; } // 객체들을 찍어내는 틀을 만드는 방법2 (class-constructor 쓰기) class person{ constructor(name,job){ this.name = name this.job = job } } /..

1/ require 와 module.export 2/ 자바스크립트 동작 원리 3/ 콜백함수 1/ require 와 module.export require은 Node.js의 모듈이고, require 문법은 표준 문법은 아니다. 표준에 없는데 왜 node.js는 이게 필요할까? #1. require 왜 쓰는거지? node.js에선 내가 실행할 파일만 해석해준다. 서로 다른 js 파일들이 같은 폴더 상에 존재해도 서로간의 데이터, 코드를 쉐어할수가 없다. node.js에서는 어떻게 다른 코드들과 연결시켜줄까? 이 때 쓰는게 require다. 반복되는 데이터, 기능별 코드를 묶어놓은 모듈을 다른 파일로 공유가 되게끔 도와준다. 그래서, express 라는 웹서버를 구축해주는 코드를 묶어논 패키지를 가져올 때 썼..

1/ 사용자,브라우저-서버 간의 역할 (요청과 응답) 2/ express 코드 작성 및 분석 (ft. 동기,비동기 / url) 1/ 사용자,브라우저-서버 간의 역할 (요청과 응답) 브라우저(사용자) 서버 사용자가 브라우저를 통해 url을 줘서 필요한 정보를 요청하고, 웹서버가 html,css,js 코드를 전달 즉, 응답을 해주면 브라우저가 그 응답을 받아서 텍스트를 읽어서 렌더링 해주는 것 http : 통신규격, 규약, 통신 방법을 통해 요청과 응답이 이루어진다. 요청 들어온 텍스트를 읽어서 요청을 한사람에게 text를 보내는 행위, 응답을 하는 코드를 작성할 것이다(express로!) 2/ Express 코드 작성 및 분석 #1. 아래의 응답 헤더 부분을 express가 작성해주고, 브라우저 - 개발자..

명령어에 대해서 정리해보았다. #1. pwd Print Working Directory 단어 그대로 일하고 있는 장소, 폴더를 출력해줘 라는 뜻 => 즉 pwd는 현재 나의 디렉토리 위치를 알고싶을 때 쓰는 명령어이다. #2. cd Change Directory 단어 그대로 directory를 바꿔줘 라는 뜻 내가 있는 위치에서 다른 디렉토리로 이동하고 싶을 때 쓴다. cd .. 현재 디렉토리의 상위 디렉토리로 이동 (이전 단계로 이동) cd ~ 현재 사용자의 home 디렉토리 내의 내 계정으로 이동 cd / 최상위 디렉토리로 이동 (이 이전의 디렉토리가 없다) 이를 root directory 라고 한다 root (cd /) => home => leeyj (cd ~) 컴퓨터를 키면 => 계정이 몇 개인지..

1/ nvm 설치 2/ Node.js 실행하기, REPL 3/ npm 4/ npm 활용해서 express를 다운받아보자 Node.js는 반년마다 버전을 한 단계씩 업데이트된다. 그 중 짝수 버전이 안정성이 있어서 짝수 버전을 쓰는 게 좋다. 일반 버전말고 LTS 버전 쓰는 걸 추천받음 1/ nvm 설치 Node Version Manager Node.js의 버전을 관리하고 설치시켜주는 도구 찾아보니 같은 시스템 안에서 여러 Node.js를 사용하기 위해 version별로 node.js 환경을 격리, 구분시키는 역할로 많이 사용된다고 한다.. 아직까진 와닿진 않는다. #1. 아래 url로 접속해서 NVM 설치해주기 curl -o- https://raw.githubusercontent.com/creationi..

#1. Ubuntu (linux) 접속하기 Powershell을 실행시키면, 아래 스크린 샷에서 wsl 치기 전엔 PS C:\Users\leeyj 에 위치해 있었다. 즉, 아직 리눅스(우분투)가 아닌 윈도우의 C드라이브\사용자\leeyj(내계정) 에 위치 중이다. 이 때 wsl 을 입력하면, welcome to Ubuntu 가 뜨면서 초록색 글씨로 leeyj라는 리눅스(우분투) 계정에 접속해있음을 알 수 있다. leeyj@DESKTOP-K4UC22N:/mnt/c/Users/leeyj$ : (colon) => 이 콜론표시가 구분값 역할을 해주는데, 그 뒤로 나오는 /(slash) 부터가 directory 쉽게 말하면 폴더의 위치, 경로를 알려준다. 즉, 지금 나는 mnt 안에 있는 c 드라이브 안에 있는 ..

GUI / Graphic User Interface (Window, Mac) 그래픽, 소스가 많이 필요해서 용량이 많이 필요하나 완제품으로 end-user가 사용하기 좋음 CLI / Command Line Interface (Linux, Unix) 명령어로만 컴퓨터를 조작하니까 용량을 덜 차지하고 서버쪽 컴퓨터로 쓰기 좋다. 완제품이 아닌 재료를 주는 형태이므로 다양하게 customizing 가능하다. 그래서 linux, unix는 버전이 엄청 많은데, 우리는 Ubuntu를 사용할 예정 CLI는 명령어로 터미널에서 컴퓨터를 조작한다. 즉, 윈도우 자체로는 CLI가 실행 불가하다. 윈도우는 GUI이기 때문이다. 따라서, Linux를 이용하려고 하는데, 이 때 가지고 있는 Windows를 삭제하고 새로운 O..

1. document.querySelector() 2. elementobj.addEventListener(event,function) 3. 콜백함수 HTML상의 button을 사용자가 눌렀을 때, 콘솔창에 클릭횟수와 메시지가 뜨도록 JS로 연결해보자 1. document.querySelector( ) 간단하다, 형태가 어디서 많이 봤다했더니 객체의 메소드를 불러올 때 썼던 syntax다! 객체.method( ) 즉, document라는 객체의 메서드 중에 querySelector를 쓰겠다는 뜻 이 객체메서드를 이해하기 위해서 하나하나 해석해본다. document : 문서 즉, 브라우저 상에서 HTML을 뜻한다! DOM / 즉 HTML문서를 파싱하여 객체화 시키고 HTML과 JS가 소통하게끔 인터페이스가 ..

DOM 이란? Document Object Model document인 html을 JavaScript가 이해할 수 있게, 컨트롤할 수 있게 object(객체)로 만들어 모델링 해주는 것 브라우저에 기본적으로 내장되어 있는 객체 즉, API다. API = Application Programming Interface 여기서 interface 란 말 자체가 프로그램 간의 소통, interact를 도와주는 의미가 묻어있다고 생각하면 쉽다. html 문서를 javascript와 상호작용하게끔 object 객체로 파싱하여 dom을 생성하는 것 this 객체 // 예약어에 가깝고, data type이 object이다 this = 이것, 여기.. => 뜻 그대로 사용하는 위치에 따라서 결과물이 달라진다. console..