Juni_Dev_log

pug 포맷은 웹 문서의 태그를 그대로 사용하지 않고 최대한 간단한 형태로 입력하기 때문에 공백과 들여쓰기를 기준으로 태그의 구조가 결정된다. 따라서 pug 포맷을 사용하면 HTML 태그를 사용하는 것보다 훨씬 적은 내용을 입력해도 웹 문서를 만들 수 있다. pug를 사용할 때는 ejs와 마찬가지로 뷰 템플릿 파일을 먼저 만들고 pug 뷰 엔진에서 응답 웹 문서를 만들 때 사용한다. ⚙️ 설치 %npm install pug -g 를 통해서, pug 를 먼저 설치후 진행한다. 먼저 pug 로 템플릿 문서를 만들어보자. [ViewExample2] 를만들고 복사해서 app.js 에서의 뷰 엔진을 pug로 변경한다. # app.js 1 2 3 4 5 6 7 8 9 ... //===== 뷰 엔진 설정 =====/..

app2.js 파일을 노드로 실행하면 웹 서버가 실행된다. 이제 사용자는 필요한 정보를 요청해서 받아볼 수 있다. 사용자가 웹 브라우저를 열고 웹 서버로 데이터 조회를 욫어하고 싶다면 login.html 같은 웹 문서를 띄워보자. 이와 같이 사용자는 웹 문서를 주로 보게 되므로, 웹 문서가 이쁘게 보이는 것이 중요하다. 최대한 간단한 방법으로 꾸며보도록 한다. Semantic UI 라이브러리로 웹 문서 꾸미기 원래는 CSS와 자바스크립트를 사용해야하지만, 코드의 양을 줄이고 싶다면, UI 라이브러리를 사용하면 된다. 다양한 UI 라이브러리 중에서 Semantic UI 라이브러리는 태그만으로도 버튼이나 입력 상자와 같은 웬만한 UI 구성요소를 만들 수 있다. semantic-ui.com/ Semantic ..

기존 데이터베이스로는 오라클이나 MySQL 같은 관계형 데이터베이스가 많은데 노드로 프로그램을 만들 때 이런 관계형 데이터베이스를 연결할 수 있어야한다. 노드에는 이런 종류의 기존 데이터베이스를 사용할 수 있는 외부 모듈이 있다. 여기에서는 MySQL 데이터베이스에 연결하여 데이터를 저장하거나 조회하는 방법을 알아보자. 관계형 데이터베이스 간단하게 이해하기 관계형 데이터베이스는 데이터베이스 저장소 안에 테이블(Table)을 만들어서 데이터를 저장한다. 테이블을 이해할 때는 엑셀 프로그램의 시트를 생각하면 쉽다. 즉, 엑셀의 시트 탭에 어떤 이름의 데이터가 어떤 타입으로 들어갈지 정의한 후 데이터를 한 줄씩 입력하는 과정과 비슷하기 때문이다. 한 줄에 해당하는 데이터를 레코드(Record) 라고 부르며, ..

자바스크립트의 변수에는 숫자나 문자열 같은 데이터, 그리고 중괄호를 이용해 만든 객체 뿐만 아니라 함수도 할당할 수 있다. 이렇게 변수에 함수를 할당할 수 있다는 특징은 함수를 호출할 때 다른 함수를 파라미터로 전달하거나 함수 안에서 또 다른 함수를 만들어 반환할 수 있다. 함수를 호출했을 때 또 다른 함수를 파라미터로 전달하는 방법 함수를 파라미터로 전달하는 경우는 대부분 비동기 프로그래밍(NoN-Blocking Programming) 방식으로 코딩을 만들 때이다. 예를 들어, 더하기 함수를 실행한 후, 결과 값이 반환될 때까지 기다리지 않고 그 다음 코드를 실행하려면 비동기 방식으로 코드를 만들어야한다. 즉 더하기 함수를 실행하는 데 시간이 걸릴 수 있기 때문에 그 다음 코드를 바로 실행한다. 그러고..