K코딩

템플릿엔진을 사용하면 데이터를 웹페이지에 넣을수있음

ejs 템플릿엔진 쓸려면

설치

터미널에

npm install ejs

세팅

서버.js파일에

app.set('view engine', 'ejs')

사용법

html 파일 안에 데이터를 꽂아넣고 싶으면
.ejs 파일을 만들어서 거기에 데이터를 꽂아넣으면 그걸 자동으로 html로 변환해줍니다. 

ejs 파일들은 전부 views라는 폴더만들어서 거기 보관하는게 룰임
그래서 저는 거기에 list.ejs를 만들어봤습니다. 
ejs 파일은 어려운거 없고 기본적으로 html이랑 똑같이 작성하면 됩니다.
근데 안에 살짝씩 ejs 문법써서 서버데이터를 집어넣을 수 있다는것만 다름 
그래서 글목록페이지같은걸 만들고 싶으니
거기맞는 레이아웃 디자인을 넣어보도록 합시다. 

데이터 넣는 법 

1. 일단 ejs 파일로 데이터를 보내고 
2. ejs 파일 안에서 ejs 문법써서 데이터를 원하는데 꽂으면 됩니다.

app.get('/list', async (요청, 응답) => {
  let result = await db.collection('post').find().toArray()
  응답.render('파일이름.ejs', { 여긴작명 : result })
})

해석

응답.render('파일이름.ejs', { 맘대로작명 : 변수이름 })

응답.render : ejs 파일을 응답으로 보여는 방법 render(렌더)

파일이름에

가져온데이터에 이름붙혀서 전송

(그럼 파일이름.ejs파일에서 작명한이름 불러서 데이터 가져다 쓸수있음)

데이터 바인딩

서버사이드 렌더링 : html을 서버에서 보내줄때 미리 데이터를 채워주는걸 일컷는 말

클라이언트 사이드 렌더링 : 서버에서 빈html 과 데이터를 보내주면 유저의 컴퓨터에서 만드는것

ejs파일에서 데이터 띠우는법

위에서 데이터에 이름을 붙혀서 ejs파일에 보내는거 까지 함

이제 받아온 파일을 ejs파일에 넣어서 표시하는법을 해봄

<%= JSON.stringify(작명한데이터이름) %>
받아오는 데이터를 깨짐없이 ejs 파일에 띠워보기


<%= 작명한데이터이름[0].title %>
0은 보여주고싶은 데이터의 순번임

<% %> = <% ejs파일은 여기에 자바스크립트 문법을 쓸수있음 %>

다른 ejs파일의 내용을 가져오는 문법

<%- include('nav.ejs') %>

만약 ejs파일의 이름을 nav로 작명한뒤 안에 네비게이션 바 코드를 넣어넣고 위의 코드를 쓰면

위코드를 쓴자리에 nav.ejs안에 내용을 모두 가졍와짐

위문법은 재사용성이 좋아짐

자바스크립트 for 반복문을 사용해서 모든 데이트를 표시하는 방법

<% for (let i = 0; i < 작명한이름.length; i++) { %>
<h4> <%= 작명한이름[i].title %> </h1>
<h1> <%= 작명한이름[i].text %> </h1>
<% } %>

<% %> : JS 코드 작성

<%_ _%> : 태그 내부 공백 제거

<%# %> : 주석

<%= %> : 변수 출력(html escape 처리)

<%- %> : html escape 처리 없이 출력

예를 들어 /list 페이지에 방문하면 DB에 있던 글을 뽑아서 보여주고 싶으면 어떻게하는지 알아봅시다.

app.get('/list', (요청, 응답) => {
  응답.send('안녕')
})

유저가 /list 페이지 방문하면 뭔가 보내주고 싶으면 
이런거 코드짜면 된다고 했습니다.
근데 '안녕' 말고 DB에 있던 글을 뽑아서 보내주고 싶으면요? 

외우지말고 검색하거나 복사해서 쓰는거

app.get('/list', async (요청, 응답) => {
  let result = await db.collection('컬렉션명').find().toArray()//DB에서 '컬렉션명'이라는 곳가서
  응답.send(result[0].title)// 0번째 데이터데이터에서 title이라는 이름 가진데이터 가져와
})

app.get : 겟요청

async : await 쓸려고 쓰는거

await : 이코드가 완료 되야 다음 코드로 넘어가라는 문법

mongodb 라이브러리를 설치

npm install mongodb@5

터미널 열어서 입력

mongodb 라이브러리 셋팅

const { MongoClient } = require('mongodb')

let db
const url = 'mongodb사이트에 있던 님들의 DB 접속 URL'
new MongoClient(url).connect().then((client)=>{
  console.log('DB연결성공')
  db = client.db('데이터베이스이름')//데이터베이스 이름 입력
}).catch((err)=>{
  console.log(err)
})

이런 코드를 서버파일 상단쯤에 추가

간단히 설명하면 님들이 호스팅받은 mongodb에 접속하고 접속 결과를 db라는 변수에 저장했을 뿐입니다.
mongodb 라이브러리 사용법이라 굳이 이해할 필요 없습니다. 

DB 접속 URL

▲ DB접속 URL은 어딨냐면 mongodb 사이트가서 connect 버튼이 어딘가 있을텐데 
눌러서 Driver를 선택해봅시다. 

mongodb+srv:DB접속아이디:DB접속비번@cluster0.jea.mongodb.net/?retryWrites=true&w=majority

그러면 대충 이렇게 생긴게 나오는데 이게 DB접속용 URL입니다.
근데 DB접속용 아이디 / 비번자리에 여러분이 만든 DB접속용 아이디 / 비번을 잘 집어넣읍시다.
mongodb.com 로그인할 때 쓰는 아이디 비번 아님 

MongoDB 호스팅받기

MongoDB를 사용해볼건데 사용하고 싶으면 방법이 2개 정도 있습니다.
여러분 컴퓨터에 직접 mongodb를 설치해서 쓰거나
아니면 클라우드에서 호스팅받아서 쓰거나 
둘 중에 하나 선택하면 됩니다.

 
근데 보통 초보자들은 호스팅받아서 쓰는게 좋기 때문에 호스팅을 받도록 합시다.
- 가입만하면 무료용량도 제공해주고 
- 돈내서 업그레이드하면 백업도 자동으로 해주고
- replica set이라고 해서 자동으로 3개의 데이터베이스에 분산저장해줘서 하나가 다운되면 자동으로 나머지 2개가 돌아가고 
- full text search index도 만들 수 있고 (호스팅받아야만 사용가능)
안 쓸 이유가 없습니다. 

mongodb.com 사이트 들어가서 가입하면 무료 호스팅같은걸 받을 수 있으니까 가입하고 호스팅까지 받아옵시다. 

Database / collection 만들기

 DB접속용 아이디/비번 만들고 
DB접속가능한 아이피주소도 설정해놓으면 끝입니다. 

셋팅이 완료되면 collection 아니면 create 버튼이 어딘가에 있을텐데 눌러서 데이터베이스를 하나 만들어봅시다.

database는 하나의 프로젝트같은 것이고 이름은 맘대로 작명하면 되는데
저는 게시판을 만들어볼 것이니 forum이라고 할겁니다.  
그 안에 collection도 하나 만들라고 하는데 저는 post라고 이름지어보겠습니다. 
그럼 이제 요런 post라는 컬렉션 안에 맘대로 document들을 발행해서 데이터를 저장할 수 있습니다.

다음 시간엔 데이터 몇개 저장해놓고 그걸 원할 때 출력해서 보여주는 법을 알아봅시다. 

 css 파일처럼 쓸데없는 파일이나 이미지는 public 폴더같은 곳에 넣어두는게 일반적입니다. 

이제 html 파일에서 css 파일을 가져다가 쓰고 싶으면 <link> 태그 추가하면 되는데 

근데 여기까지만 하면 아마 css 반영이 안될걸요 

왜냐면 css, 이미지, js 파일들을 html 안에서 사용하고 싶으면

우선 그게 들어있는 폴더를 서버에 등록부터 해놔야합니다. 

app.use(express.static(__dirname + '/public'));

public폴더안에 있는 파일들을 html에서 가져다가 쓰고 싶으면 

서버파일에 app.use라는 문법으로 public 폴더를 등록해놔야합니다. 

그럼 이제 public 폴더안에 있는 css파일 이미지파일 js파일은 전부 html에서 가져다가 쓸 수 있습니다. 

참고로 css, js, 이미지 파일들을 static 파일들이라고 부릅니다. 

<link href="/main.css" rel="stylesheet">

그럼 이제 html 파일에서 css 파일을 첨부해서 사용할 수 있습니다. 

소스코드를 수정했을 경우 터미널에서 계속 node server.js를 입력해야 수정사항을 볼수있는게 상당히 귀찮

그래서 노드몬을 사용 하는데 노드몬은 서버파일에 수정사항이 생기면 자동으로 서버를 재시작해줘서 즉시 결과를 볼수있음

설치방법

터미널에서

npm install -g nodemon

(npm 사용법 참조)입력하면 설치끝

사용법

터미널에서

nodemon server.js

입력하면 끝

app.get('/어쩌구', (요청, 응답)=>{
  응답.send('보내줄 웹페이지 내용')
})

app.get : 겟요청

응답.send : 응답내용

/news라는 url로 유저가 접속하면 오늘 뉴스를 보내주는 서버를 구축할려면

새로운 페이지를 하나 만들고 싶으면 express문법으로 이렇게 작성하면 됩니다

/어쩌구 부분은 자유롭게 작명하고

보내줄 내용 부분도 응답.send() 로 작성하면 끝

app.get('/', function(요청, 응답) {
  응답.sendFile(__dirname + '/index.html')//index.html 자리에 html파일 이름씀
})

app.get : 겟요청

응답.sendFile : 파일(html등)을 보내주수있음

1. 응답.send가 아니라 .sendFile('파일경로') 입력하면 이 파일을 유저에게 보내줍니다.

2. 파일경로를 적고 싶으면

__dirname이라고 쓰면 (언더바2개) 현재 server.js 파일의 절대경로가 나옵니다.

근데 index.html은 server.js와 같은 폴더에 있으니깐

__dirname 뒤에 /index.html 만 추가하면 index.html 파일 경로가 나옴

/news라는 url로 유저가 접속하면 오늘 뉴스를 보내주는 서버를 구축할려면

app.get('/어쩌구', (요청, 응답)=>{
  응답.send('보내줄 웹페이지 내용')
})

새로운 페이지를 하나 만들고 싶으면 express문법으로 이렇게 작성하면 됩니다

/어쩌구 부분은 자유롭게 작명하고

보내줄 내용 부분도 응답.send() 로 작성하면 끝

1. npm : command not found 에러 

command not found 라는 에러가 터미널에 뜨면 

nodejs 설치가 아직 안되었거나 제대로 안된 것입니다. 

nodejs 삭제했다가 공식 홈페이지에서 LTS버전 제대로 다운받아서 설치합시다.

맥도 brew 어쩌구 그런걸로 설치하지 마시고 다운받읍시다. 

2. 맥북에서 권한, permission이 없다 어쩌구 에러 

npm ERR! syscall access
npm ERR! Error: EACCES: permission denied, access '/usr/local/lib/node_modules'

npm ERR! syscall access
npm ERR! Error: EACCES: permission denied, access '/usr/local/lib/node_modules'
폴더 수정 권한이 없다고 에러를 띄우는 것입니다.
위의 에러는 /usr/local/lib/node_modules 라는 폴더에 수정권한을 주면 됩니다. 

 

sudo chown -R $USER 위에 에러 뜬 경로
터미널에 이거 입력해봅시다. 

 

sudo npm install express
그래도 안되면 npm으로 뭔가 할 때 그냥 sudo라는 단어를 앞에 붙여서 실행합시다.

맥북 비번 입력하라고 하면 입력합시다. 

 

 

 

 

3. 윈도우 Powershell에서 빨간글씨로 허가되지않은 스크립트, 보안오류가 뜸

시작 - 검색 - Powershell 검색 - 우클릭 - 관리자 권한으로 실행한 뒤

Set-ExecutionPolicy Unrestricted 라고 입력해보고

에디터 껐다 켭시다. 

 

 

 

 

4. 윈도우도 npm으로 뭐 할때 권한이 없다 어쩌구 에러  

그럼 powershell을 관리자 권한으로 열어서 실행하면 됩니다. 

 



 

▲ 직접 작업폴더로 들어가서 상단에서 파일 - PowerShell 열기 - 관리자권한으로 PowerShell 열기 눌러서 터미널을 엽니다.

이렇게 연 다음에 npm install 어쩌구가 되면 앞으로 터미널에서 뭐 하라고 하면 터미널 이렇게 켜서 사용합시다. 

 

 

이거 말고도 다른 에러가 있을 수 있어서 

에러메세지는 직접 구글 검색해보는게 빠릅니다. 

PORT가 뭐냐면 

 

여러분 컴퓨터는 항상 외부 컴퓨터와 통신할 수 있게 설계되어있습니다.

랜선만 꽂혀있으면 다른 사람이 여러분 컴퓨터로 접속을 할 수 있고 그렇습니다. 

웹서버도 실은 다른 사람 컴퓨터에 접속하는 행위랑 똑같습니다. 접속하면 웹페이지를 보여주는 것일 뿐

 

하지만 평상시엔 남들이 내 컴퓨터에 무단으로 접속을 할 수는 없습니다. 

여러분들이 컴퓨터에 구멍을 하나 뚫어놓아야 거기로 외부 사람들이 내 컴퓨터로 접속할 수 있습니다

구멍을 전문용어로 PORT라고 부르고 컴퓨터에는 내 맘대로 오픈할 수 있는 포트 구멍이 6만개 정도 있습니다.

 

그래서 아까 누가 내 컴퓨터에 접속할 수 있게 만들기 위해서 

8080번째 포트하나를 맘대로 연겁니다. 

이제 외부 컴퓨터가 여러분 아이피주소:8080이라고 브라우저 주소창에 입력하면

여러분 컴퓨터로 들어올 수 있게 되는 것입니다. 

(터미널에 ipconfig 치면 뜨는 그 아이피주소임)

 

참고로 열 수 있는 포트는 6만개 정도 있는데

컴퓨터가 이미 예약해서 쓰고 있는 포트번호들도 여러개 있습니다.

그런건 쓰면 안됩니다. 

개발환경 세팅

Node.sj 설치하기

https://nodejs.org/en

LTS버전 다운 및 설치

설치시 경로같은건 안만지는게 좋을 수 있음

윈도우는 chocolatey 같은거 설치 안해도 됩니다.

프로젝트 생성

1.server.js 파일을 하나 만들어줍시다. 

거기다가 서버코드짤 것임 

2. 에디터 상단 terminal 눌러서 터미널을 열 수 있는데
거기다가 npm init -y 를 입력합시다. 
package.json 파일 생성해주는 명령어입니다. 

3.터미널에 npm install express를 입력합시다. 
express라는 라이브러리를 설치하는 명령어입니다. 
처음부터 쌩으로 코드짜면 너무 힘들기 때문에
사람들 많이 쓰는 express라는 라이브러리를 써서 서버를 만들 것임 

4.server.js 파일안에 서버코드 작성

const express = require('express') //익스프레스 라이브러리 사용을위한 코드
const app = express() //익스프레스 라이브러리 사용을위한 코드

app.listen(8080, () => { //8080은 원하는 포트번호 입력란
    console.log('http://localhost:8080 에서 서버 실행중')
})

app.get('/', (요청, 응답) => { //기본 겟요청 예시
  응답.send('반갑다')
})

5.서버 여는법

터미널에

node server.js 치면

포트에 웹열림

주로 쓰이는 자료형의 종류

기본연산자

단축된 연산자

관계연산자

논리연산자

오늘은 변수의 구조를 알아보겠습니다.

오늘 이 글을 읽는 순간 여러분은 변수라는 것을 보고 이해할 수 있는 사람이 되어있으실 겁니다.

자 저번글에서 let(렛)과 const(컨스트)라는 변수를 만들어내는 일종의 명령어를 알게 되셨습니다.

소리 내어 읽어보기까지 했죠. 만약 기억이 안 난다? 괜찮습니다. 지금 소리 내어 읽어보시고 가겠습니다.

이 변수가 대체 뭐고 어디에 어떻게 쓰이는 거지? 이런 잡생각 아직까지는 넣어두세요.

우선 변수의 구조를 한번보겠습니다

실제로 우리가 코드를 작성할 때 이렇게 작성합니다.

let abc = 123
//위 변수를 3등분 하면
      let                abc            = 123
//앞(변수의 종류) //중간(변수의 이름) //뒤(변수의 값)

변수라는 것은 크게 3 등분해서 보면 쉽습니다

앞 : 변수의 종류 let(렛)과 const(컨스트) 2가지

중간: 변수의 이름[아무렇게나 알아보기 쉽게 적으면 됩니다]

뒤 : 변수의 값[변수의 값의 앞에 보면 =(이퀄사인)이 있죠?

이 =(이퀄사인)은 오른쪽 값을 왼쪽 이름에 넣는다는 뜻입니다

수학에서 =(이퀄사인)은 "같다"라고 쓰이지만

프로그래밍 안에서 =(이퀄사인)은 오른쪽 값을 왼쪽에 넣는다!라는 뜻입니다

변수의 값에는 예시에서 본 것과 같은 123이라는 숫자형도 있지만

여러 가지 종류가 존재합니다

다음글에서는 변숫값의 종류의 대해서 짚어보겠습니다.

SQL이란 무엇인가..

SQL은 데이터베이스와 대화하는 일종의 "언어"이다.

옆사람에게 음료를 주겠니? 라고 하는 말이랑 똑같음

Query(쿼리)는 데이터베이스에 요청하는 질의를 의미함

일종의 데이터를불러오는 검색 코드를 장성하는것이다

데이터베이스를 쉽게 이해하기

데이터베이스 : 일종의 데이터들이 담겨있는 큰 폴더

         └ 테이블 : 데이터베이스라는 큰 폴더 안에 있는 각각의 파일들

                 └ 컬럼 : 컬럼은 엑셀 파일 형식과 비슷한 데이터들의 세로 나열임

Q. 내가 게임서버(Node) 트랙에 참여한 계기는 무엇인가요?

A. 29살이라는 늦다면 늦은 나이지만 20살때부터 게임방송도 하고 관심이 있었습니다.

   방송을 하고 부족한 수입은 요리라는 진로를 잡고 식당일을 하며 생활을 했습니다.

   하지만 방송에는 자질이, 요리는 나와 맞지 않은 진로라는 생각이 많이 들던와중 스파르타코딩클럽을 우연히 알게되었고

   개발자라는 기술을 배워서 일을 하고싶다는 새로운 길을보게 되어서 지원 하게 되었습니다.

Q. 내가 이해한 개발자는 어떤 역할을 하는 사람인가요?

A. 상상한걸 노력으로 구현하고 만들어 낼수있는사람

Q. 개발을 경험해보셨나요? 해보셨다면 어떤 경험을 하셨는지를 작성해주시고, 아니라면 개발에 대해 찾아본 것을 작성해주세요.

A. 경험은없지만 개발자의 기초를 먼저 배우는게 좋겠다는 생각에 웹개발 프론트엔드에 대해서 먼저 알아보고 따라해보며 공부하고있습니다.

Q. 개발자의 역할을 수행하는 데에 있어 나의 강점과 연관된 부분은 무엇이라고 생각하나요? 혹은 보완, 개선하고 싶은 개인 역량이 있나요 ?

A. 저는 호기심이 많은편이고 공부를 할수록 점점더 많이 알고싶어져서 이런점이 저의 강점이 될수있다고 생각합니다.

   예를들어 프론트엔드의 역활에 대해 알아보니 백엔드에대해 궁금해지고 웹개발의 전체적인 원리와 언어 시스템 등이 알     고싶어지고 그런 저의 호기심을 따라가다보면 모든걸 잘 할수있는 사람이 될꺼라 생각합니다.

Q. 본 코스 수료 후, 어떤 개발자로 성장하고 싶나요?

A. 회사나 동료들에게 짐이 되지않는 도움이되는 개발자로 성장하고싶습니다.

    또 제가 상상한걸 간단하게 라도 혼자 만들어 낼수있는 전체적인 지식이있는 개발자로 성장하고싶습니다.

Q. 그 외에 개발 트랙에 기대하는 것이 있다면 자유롭게 작성해 주세요.

A. 저를 잘 성장시켜주셨으면 좋겠습니