K코딩

프레젠테이션 계층(컨트롤러)

• 컨트롤러의 역활

클라이언트의 요청을 받은 후 요청 속 사용자 입력 검증등을 한 후 다음 계층으로 보냅니다.

하위 계층에서 최종 결과를 받아서 클라이언트에게 결과반환(Response)의 역활을 합니다.

그리고 전역 오류 처리등의 예외 처리를 담당함으로서 에러처리 미들웨어를 사용하는 곳입니다.

게시글 작성 컨트롤러가로 가정했을 경우

src/controllers 경로에 posts.controller.js <<파일을 만들고

예시 사진 처럼 api를 작성하며 트라이 케치, 에러처리 미들웨어 등을 사용하며 요청을 처리하는 비즈니스 로직은

이곳에 적성하지 않고 단순히 요청을 받아서 검증하고 로직을 수행하는 다른 계층으로 요청을 넘기는 역활만을 수행합니다. 

서비스 계층 (비즈니스 계층이라고도 부름)

• 데이터를 파싱하거나 정렬하는 등의 핵심적인 "기능"을 구현

게시글 관련 기능을 하는 기능을 만든다는 예시를 들었을 경우

src/services 경로에 posts.service.js등으로 파일을 만들고 비즈니스 로직을 작성

게시글 조회 요청이 들어왔을 경우 위 예시사진처럼 조회결과를 정렬하거나

특정 데이터를 제외한 결과를 반환하는 작업을 수행하는등 필요한 핵심기능들을 수행하는 역활을 합니다

저장소 계층(Data Access Layer)

저장소계층(데이터 엑세스 계층)을 사용할 경우

• 데이터의 저장방법을 더욱 쉽게 변경 가능
• 테스트코드 작성시 가짜저장소를 제공하기 쉬움
  • 유닛 단위로 코드를 테스트 할 때 저장소 계층만 제외시키면 되기때문

저장소 계층에서 로우쿼리를 사용하던 파인드올을 사용하던간에 경과만 정상으로 도출되면

다른 코드들에게 영향을 주지 않음

게임 개발은 어떤 단계로 이뤄질까

첫번째 : 기획 단계

기획단계에서는 PD, TD, AD라는 세사람이 등장합니다.

▼

▼

두번째 : 개발 단계( 서버 개발자 기준 )

사실 서버팀은 개발 단계에서 그렇게까지 바쁘지 않다.

게임의 장르에 따라서 팀의 규모가 정해지는데 "팀", "셀", "스튜디오" 등 회사마다 팀을 부르는 호칭이 달라질 수 있음

이 시기에 서버팀이 하는 일은?

• 인프라 구성
  • 대규모 트래픽처리를 위한 분산 서버 구성( 테스트 정도 수준)
  • 업데이트 방식 설계 → 서버를 다내렸다 키는방식을 할꺼냐, 아니면 롤링방식으로 업데이트를 할꺼냐 등을 정함
  • 서버 관리, 모니터링 툴 적용
  • NAS, 내부망, 클라우드 세팅
• 팀원 모집
  • 인프라, 클라우드, DBA, 웹, 게임서버
• 서버 로직 개발
  • 오픈 컨텐츠 개발 대응
  • 더미테스트, 부화테스트 진행
  • 내, 외부 QA 대

세번째 : 라이브 단계( 오픈단계 )

서비스 릴리즈 날짜가 정해졌다면 사무실 불은 끄지 마라

즉 라이브 단계부터 바빠짐

오픈 이후에는 ?

• 처음 몇달간 이슈대응으로 고생하면 또 다시 점점 할 일이 적어짐(상대적으로)
• 트래픽의 경우는 점진적으로 감소하는것이 일반적이라 크게 대응할 일이 없어짐
  • 업데이트의 경우에만 바짝 긴장
• 게임 컨텐츠 개발의 연속X100
  • 미션추가, 전투 형태 변경, pvp등
• 각종 이벤트 대응
  • 외부 투자사, 콜라보를 통해 진행하는 이벤트 로직 개발 및 기존 코드에 적용

프리즈마란?

프리즈마(Prisma)는 데이터베이스와 쉽게 소통할 수 있게 도와주는 ORM 도구입니다.

주로 Node.js 및 TypeScript 환경에서 사용되며

보통 데이터베이스에 정보를 저장하거나 가져오려면 복잡한 SQL 쿼리문을 써야 하는데,

프리즈마를 사용하면 코드만으로 이런 작업들을 간단하게 할 수 있습니다.

프리즈마의 핵심 개념

ORM

 ㄴ ORM은 데이터베이스의 테이블을 코드에서 객체로 다룰 수 있게 해주는 기술입니다. 프리즈마는 ORM 도구로,

      SQL 없이 데이터베이스의 데이터를 쉽게 가져오거나 수정할 수 있게 도와줍니다.

프리즈마 스키마

 ㄴ 프리즈마를 사용하려면 먼저 데이터 구조(스키마)를 정의해야 합니다.

      이 스키마 파일에서 어떤 테이블이 있고, 테이블에 어떤 정보가 저장될지 미리 설정합니다.

      예를 들어, User라는 테이블이 있고 그 안에 id, email, name 같은 필드가 있다고 설정합니다.

//프리즈마 스카마 예시
model User {
  id    Int     @id @default(autoincrement()) // 기본 키, 자동 증가하는 정수 값
  email String  @unique                      // 고유한 이메일 필드
  name  String?                              // 선택적인 이름 필드 (null 가능)
}

프리즈마 클라이언트

 ㄴ 스키마가 정의되면, 프리즈마는 자동으로 코드를 생성해 줍니다.

      이 코드를 통해 데이터베이스와 쉽게 소통할 수 있는데, 이것이 바로 프리즈마 클라이언트입니다.

      클라이언트를 사용하면 SQL을 쓰지 않고도 데이터를 쉽게 저장하고 불러올 수 있습니다.

사용법

프로젝트에 프리즈마를 설치합니다. 코드 에디터의 터미널에

// 코드에디터 터미널에

npm init <- 엔피엠 인잇 입력 후

// package.json 파일의 생성이 확인된다면 

npm install prisma @prisma/client

를 입력합니다

미들웨어가 뭐고 왜써야하는지 알려줌

미들웨어는 서버만들때 요청이 들어오면 응답을 해주는 API를 만들때

요청을 받고 응답을 해주기전에 여러가지 기능을 수행할 수 있게 해주는거임

이게뭔말이냐면

예를들어 클라이언트로부터 게시물을 보는 gat요청이 들어오면

해당 게시물을 응답해줘야할꺼 아닙니까

근데 로그인을 한사람만 게시물을 볼수있게 하고싶으면 어쩝니까?

API코드 작성할때 로그인을 했는지 검사하는 코드를 작성하면 되는데

로그인이 필요한 수많은 API들에 로그인 검사코드를 하나하나 작성하면 너무 비효울 적일꺼같습니다

그럴때 미들웨어를 사용하면 손쉽게 로그인이 되어있는지 확인한 뒤에 게시물을 응답해주는 API를 만들수 있습니다

//로그인 검사하는 함수를 대충만듬

function 로그인검사(요청, 응답){
	if(!요청.user){ //로그인정보가 없으면
    	응답.send("로그인하세요~") //로그인하세요를 응답해줌
    }
}
              ▼여기에 함수명 써서 이게 실행된후 다음 으로 넘어감 여기를 '미들웨어'라고 부름
app.get('/', 로그인검사, (요청, 응답, next)=>{
	//메인페이즈 보여주는 코드~~
})

근데 이것도 로그인이 필요한 모든 API에 넣기 힘들지 않겠습니까

API 1000개 있으면 매운 곤란할꺼 같습니다

그럴때 사용할 수 있는 방법이

//로그인 검사하는 함수를 대충만듬

function 로그인검사(요청, 응답){
	if(!요청.user){ //로그인정보가 없으면
    	응답.send("로그인하세요~") //로그인하세요를 응답해줌
    }
}

app.use(로그인검사) <--'이 코드 아래에 있는거 모두 미들웨어 자동적용됨'

app.get('/', (요청, 응답, next)=>{
	//메인페이즈 보여주는 코드~~
})

근데 아래있는거 모두는 말고 특정 URL만 로그인검사를 하고싶으면 어쩝니까

그럴때

//로그인 검사하는 함수를 대충만듬

function 로그인검사(요청, 응답){
	if(!요청.user){ //로그인정보가 없으면
    	응답.send("로그인하세요~") //로그인하세요를 응답해줌
    }
}

app.use('/어쩌구', 로그인검사); <-'/어쩌구 로 시작하는 모든API에 미들웨어 자동적용~'

app.get('/', 로그인검사, (요청, 응답, next)=>{
	//메인페이즈 보여주는 코드~~
})

app.get('/어쩌구', 로그인검사, (요청, 응답, next)=>{
	//메인페이즈 보여주는 코드~~
})

미들웨어를 잘 활용하면 요청이 왔을때 현재 시간을 출력한다던지 상상력을 더해서 유용하게 사용할수 있습니다

서버에 뭔가 요청하려면 정확히 URL과 method를 기입해야함
<form> 태그에 URL과 method 기입란이 있음

<form action="/URL~" method="post">
	<butten>버튼</butten>
</form>

이런식으로 <form>태그 안에 action="/URL~" 과 method="POST" 를 쓰면 끝

이제 폼태그안에있던 전송버튼누르면 /어쩌구 URL로 POST요청이 갑니다.

첫째 . html이나 ejs파일에 글작성 란을 만든다

<form action="/add" method="POST"> //add라는 url로 post요청 보낸다는뜻
   <h4>글쓰기</h4>
    <input name="title"> //name="작명" 속성에 DB에 저장할 이름 작명
    <input name="content"> //name="작명" 속성에 DB에 저장할 이름 작명
    <button type="submit">전송</button>
</form>

서버로 전달하고 싶으면 <input>에다가 전부 name = "  " 속성을 열어서 아무거나 영어로 작명해주면 됩니다. 

<form class="form-box" action="/posting" method="POST">
   <h4>인풋박스제목</h4>
   <input name="title">
   <input name="text">
   <button type="submit">전송</button>
</form>

<form> : 폼태그는 html에서 인풋박스 만들때 쓰는거임

form(폼)안에다 인풋박스 만들어야 서버에 전송하기 편함

action="/ULR~~" : URL내용은 서버파일 에서 사용할 URL

name="이름" : input박스에는 DB에 어떤이름 으로 저장할지 name을 지정해줘야함

 method="POST" : 서버에 post 요청 할꺼란 뜻임

위 내용 에서 인풋태그에 유저가 적어서 전송한 내용을 보고싶으면

app.use(express.json())
app.use(express.urlencoded({extended:true}))

//서버파일 상단 쯤에 이런거 추가합시다. 
//원래 유저가 데이터를 보내면 그걸 꺼내쓰는 코드가 좀 귀찮게 되어있는데
//그걸 요청.body로 쉽게 꺼내쓸 수 있게 도와주는 코드입니다.

둘째 . 서버파일.js에서 post요청을받을 API를 만들어야함

html이나 ejs파일에 /URL과 서버파일의 /URL이 일치하게 해야함

app.post('/URL', async (요청, 응답) => {
  await db.collection('post').insertOne({ title : 요청.body.title, content : 요청.body.content })
  응답.redirect('/list')
})

해석해보면

/add 라는 url로 post요청이 오면 DB에 컬랙션리스트중에 POST라는 이름 가진 컬렉션에 하나 삽입하라
그리고 /list 라는 페이지로 이동하게끔 응답을 줘라 이런뜻임

셋째 . 글을 잘썼는지 검열하거나 걸러내는 기능

유저가 제목을 안적고 글을 전송하는 이런상황을 검열할려면

자바스크립트의 if문 을 사용하면 됩니다.

app.post('/add', async (요청, 응답) => {
  if (요청.body.title == '') {
    응답.send('제목안적었는데')
  } else {
    await db.collection('post').insertOne({ title : 요청.body.title, content : 요청.body.content })
    응답.redirect('/list') 
  }
})

해석해보면

if 만약에 요청 >>요청.body.title == ' ' << 이게 빈칸으란뜻

else 아니면 정상실행 하라 원래코드를

누가 /detail/??? 으로 접속하면 그 글번호를 가진 글의 상세페이지를 보여줍시다.

app.get('/post/:id', async (요청, 응답) => {
  let result1 = await db.collection('js').findOne( {_id: new ObjectId(요청.params.id) })
  응답.render('post.ejs', { data : result1 })
})

해석

여기까지 하면 데이터를 id값으로 가져다가 파일에 보내주기까지는 완료

이제 보내준 데이터를 가져다가 쓸려면

<div class="white-bg">
      <% for ( let i = 0; i < data.length; i++ ) { %>
      <div class="list-box">
        <a href="/post<%= data[i]._id %>">
          <h4><%= data[i].title %></h4>
        </a>
      </div>
      <% } %>
    </div>

<div class="white-bg">
      <% for ( let i = 0; i < data.length; i++ ) { %>
      <div class="list-box">
        <a href="/post/<%= data[i]._id %>">
          <h4><%= data[i].title %></h4>
        </a>
      </div>
      <% } %>
    </div>

해석

<% %> : ejs문법으로 자바스크립트 문법을 ejs파일 에서 바로 쓸수있게 해주는거

for : 자바스크립트의 반복문

data.length : 서버에서 data라고 이름 붙혀서 가져온거의 갯수만큼

 <a></a> : a테그를 쓰면 href="" 를 사용해서 링크를 걸수있음

post : 서버파일에서 주소 정한한거 이름임 post라고 대충 정한거임

data[i]._id : for문을 활용해 data의 갯수만큼 id를 저자리에 반복하라는뜻

data[i].title : h4태그안에 데이터 타이틀이라는 이름 가지 데이터 갯수만큼 만들라는거임

우리가 만약에 아래사진 처럼 폼태그 안에 인풋박스 2개를 만들었다고 쳤을때

제목,내용에 아무것도 입력안하거나 이런걸 검열하고싶을때 아래태그를 씀

//유저가 작성한 글을 db에 저장해주기
app.post('/URL작명', async (요청, 응답) => {
  try {
  if(요청.body.인웃name == ''){
    응답.send('제목없음')
  } else if (요청.body.text == '') {
    응답.send('내용없음')
  } else {
    await db.collection('js').insertOne({ title : 요청.body.title, text : 요청.body.text })
    응답.redirect('/')
  }
  } catch(e){
  console.log(e)
  응답.status(500).send('서버에러남')
  }
})

코드 해석

app.post('/URL작명', async (요청, 응답) => {
  try {
  if(요청.body.제목인풋name == ' '){
    응답.send('제목없음') //여기는 알러트박스같은걸로 띠워주는게 좋음
     } else if (요청. 내용인풋name == ' ' ) {
    응답.send('내용없음')  //여기는 알러트박스같은걸로 띠워주는게 좋음
     } else {
    await db.collection('js').insertOne({ title : 요청.body.title, text : 요청.body.text })
    응답.redirect('/')
     }
  } catch(e){
  console.log(e)
  응답.status(500).send('서버에러남')
  }
})

 if , else if , else : 이것도 모르면 이거 볼때가 아니고 자바스크립트 기본문법공부하셈

요청.body.제목인풋name == ' ' : 입력한 인풋제목 칸이 빈칸으면 이란뜻

try { } catch(e) { } : 작성한코드에서 DB가 다운된다던지 하는 에러사항이 생겼을때

catch(e) { } 를 실행해서 서버에러남이라고 가르쳐줌

- 기능이 어떻게 동작하는지 한글로 상세히 정리부터 하고
- 그걸 코드로 번역하기  
이렇게 하면 처음보는 기능도 알아서 잘 만들 수 있습니다. 
숙련된 프로그래머들도 다들 이렇게 합니다.

<form class="form-box" action="/posting" method="POST">
  <h4>인풋박스제목</h4>
  <input name="title">
  <input name="text">
  <button type="submit">전송</button>
</form>

해석

<form class="form-box" action="/posting" method="POST">
   <h4>인풋박스제목</h4>
   <input name="title">
   <input name="text">
   <button type="submit">전송</button>
</form>

<form> : 폼태그는 html에서 인풋박스 만들때 쓰는거임

form(폼)안에다 인풋박스 만들어야 서버에 전송하기 편함

action="/ULR~~" : URL내용은 서버파일 에서 사용할 URL

name="이름" : input박스에는 DB에 어떤이름 으로 저장할지 name을 지정해줘야함

 method="POST" : 서버에 post 요청 할꺼란 뜻임

//유저가 데이터를 보내면 그걸 꺼내쓰는 코드가 원래 귀찮은데
//그걸 쉽게 요청.body에 넣는걸 도와주는 코드
//위쯤에 넣어두고 시작한다 생각하면 편함
app.use(express.json)
app.use(express.urlencoded({extended:true}))

이제 서버파일에서

//유저가 작성한 글을 db에 저장해주기
app.post('/URL작명', async (요청, 응답) => {
   await db.collection('js').insertOne({ DB에넣을 이름 : 요청.body.인풋박스name })
   응답.redirect('/')
});

해석

app.post('/URL작명', async (요청, 응답) => {
   await db.collection('js').insertOne({ DB에넣을 이름 : 요청.body.인풋박스name })

   응답.redirect('/')
});

app.post() : 포스트요청 메소드임

'/URL작명' : 요청할 url작명해서 적는곳 대충 '/posting' 이런거

db.collection('컬렉션명') : 대충 주소임 DB의 컬렉션('컬렉션이름') 라는뜻

insertOne : 삽입한다는뜻

DB에넣을 이름 : 몽고DB는 데이터를{ 이름 : 내용 } 이렇게 저장함 그중 제목 부분

요청.body. : 인풋박스에 입력한 내용

요청.body.인풋박스에서 설정한name

응답.redirect('/') : 이건 인풋을누르면 홈화면으로 이동한다는 뜻

서버 기능이 끝나면 항상 응답을 해줘야 무한대기에 안빠짐

DB데이터 불러오기

app.get('/list', async (요청, 응답) => {
  let result = await db.collection('컬렉션명').find().toArray()
  console.log(result) //콘솔에 가져온 데이터 모두 표시
  응답.send(result[0].title) //응답해주세요. 0번째 개시물의 title이라는 데이터를
})

해석

app.get('/list', async (요청, 응답) => {

app.get : 겟요청

async : await 을 쓰기위한 문법(그냥 만든사람이 어웨잇쓸려면 에이싱크 적으래)

=> : function과 같은뜻

let result = await db.collection('컬렉션명').find().toArray()

await : 다음줄을 실행하기 전에 잠깐 대기 await를 쓰기위해서는 async를 써야함

db.collection('컬렉션명') : DB.의 ' 아무게'컬렉션 에서

find() : 찾아라

toArray() : 모든 배열을

(참고로 자바스크립트문법 중에 대괄호[ ] 안에 여러가지 데이터를 넣는게 Array(배열)임)

(자바스크립트 문법 중에 중괄호{ } 안에 이름 : 내용 이런식으로 여러가지 데이터를 넣는게 object임)

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

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

입력하면 끝

/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 치면

포트에 웹열림