이번에 새로운 프로젝트를 하면서 객체의 형태로 변수를 저장하면서 Js에서 데이터를 다룰 때

많이 사용된다는 것을 알게 되었다.

 

 

객체란..?

 객체란 데이터 저장형식의 일종이다.

 객체는 {key : value} 와 같은 형태로 저장이 된다. Java와 C++의 Map과 같은 형식이다.

 

 

사용법

var ob = {1:"red"}

ob[1] == "red"

 {key : value}의 형태로 사용되며, 호출할 때는 2차원 배열을 호출 하듯이 호출하면 key값에 해당하는

 value 값이 반환된다.

 

 객체는 여러가지 key value 조합을 한 번에 쓸 수도 있는데,

var ob = { 
		1 : {"color" : "red", "name" : "apple"} 
      		2 : {"color" : "yellow", "name" : "banana"}
         }
         

// ob[1]["color"] == "red"
// ob[2]["name"] == "banana"

 위와 같이 객체 내부에 객체를 선언 함으로써 다양한 데이터를 필요에 따라 호출할 수 있다.

 

 

 

코딩을 공부하고 있는 학생입니다.

공부한 것을 정리, 공유하기 위해 블로그를 운영하고 있습니다.

포스팅에 틀린 부분이 있다면 과감한 지적, 수정의 한 마디 부탁드립니다! 감사합니다 :)

github.com/holicAZ

 

holicAZ - Overview

holicAZ has 12 repositories available. Follow their code on GitHub.

github.com

 

'Web > JavaScript' 카테고리의 다른 글

async & await  (0) 2020.12.28

2021.01.06

게시판의 댓글 작성 기능까지 구현을 완료했다.

작성 외의 수정, 삭제, 대댓글 등은 추후 추가할 예정이다.

댓글은 Comment 라는 새로운 스키마의 생성과

User 와 Post 둘 다 관계를 설정해 줘야 해서 좀 까다로웠다.

 

 

추가된 개발 상황

 - 댓글 기능 추가

 

추가할 기능

 - 댓글의 수정 및 삭제

 - 대댓글

 - 비밀번호 오류가 발생 수정 예정

 

 

댓글 기능 추가

 

MongoDB 생성된 모습

 

 

nodejs와 mongoDB를 활용한 간단한 게시판 만들기를 진행해 보았습니다.

CSS와 JS는 bootstrap의 힘을 빌려서 작성했습니다. 개발도구로는 vscode를 사용했습니다.

코드는 아래의 저장소에서 볼 수 있습니다.

처음 공부하고, 만들어 보는 페이지라서 가독성과 클린 코드, 문법 등은

부족합니다.

그 점 양해 부탁드립니다.

github.com/holicAZ/Nodejs

 

holicAZ/Nodejs

Contribute to holicAZ/Nodejs development by creating an account on GitHub.

github.com

 

'개발일지 > 게시판 만들기' 카테고리의 다른 글

게시판 만들기 #6  (0) 2021.01.21
게시판 만들기 #5  (0) 2021.01.14
게시판 만들기 #4  (0) 2021.01.13
게시판 만들기 #3  (0) 2021.01.07
[2020.12.01 ~ ] 게시판 만들기 #1  (0) 2021.01.05

populate

 - 스키마에서 관계를 설정하고, _id값을 기반으로 전체 객체를 가져오는 예약어

 

사용 및 예제

만약 populate 없이 log를 출력하게 되면

 

author 값이 _id 값으로 출력된다.

 

먼저 사용하기 위해선 Schema에 type:mongoose.Schema.Types.ObjectId, ref:'User'와 같이 관계를 설정해 줘야 한다.

예제에선 Post(글)와 User(사용자) 사이의 관계를 설정했다.

const PostSchema = new mongoose.Schema({
  body: { type: String },
  author:{type:mongoose.Schema.Types.ObjectId, ref:'User',required:true},
  ...
  }

그 후, controller단에서 .populate 를 사용한다.

Post.findOne({_id:req.params.id})
  .populate('author','name id')
  .exec((err,data) => { 
      console.log(data);
  })

 

post를 찾음과 동시에 author 부분에

해당 User의 _id 값 대신, 관계 설정을 한 User 스키마 객체로 출력된다.

 

populate의 사용으로 author부분이 객체로 출력

 

 

객체 전체가 출력되기 때문에 불필요한 정보도 같이 출력되는 것을 볼 수 있다.

원하는 한정된 정보만 얻고 싶다면 다음과 같이 요소를 추가해 주면 된다.

Post.findOne({_id:req.params.id})
  .populate('author','id')
  ...

 

불필요한 값은 제거되고, id 값만 출력되는 모습

 

 

만약 관계가 두 개 이상이라면. populate를 연달아 두 번 선언해 주면

두 가지의 객체를 모두 가져올 수 있다.

 

 

 

 

코딩을 공부하고 있는 학생입니다.

공부한 것을 정리, 공유하기 위해 블로그를 운영하고 있습니다.

포스팅에 틀린 부분이 있다면 과감한 지적, 수정의 한 마디 부탁드립니다! 감사합니다 :)

github.com/holicAZ

 

holicAZ - Overview

holicAZ has 9 repositories available. Follow their code on GitHub.

github.com

 

 

async & await

 

- 자바스크립트의 비동기 처리 패턴 중 가장 최근에 나온 문법입니다.

 

- 다른 비동기 처리로는 callback, promise, setTimeout 이 있습니다.

 

 

 

 

JavaScript의 동작 방식

 

- JavaScript(줄여서 JS)는 비동기적 성질을 가지고 있습니다. 즉, 선행되는 코드의 연산이 다 끝나지 않더라도

  기다리지 않고 다음 코드를 실행합니다.

 

 - 위와 같은 성질 때문에 변수에 담긴 값이 undefinded 가 되는 오류가 종종 발생합니다.

 

 

 

 

async & await의 사용과 동작 방식

 

function resolveAfter2Seconds() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve('resolved');
    }, 2000);
  });
}

async function asyncCall() {
  console.log('calling');
  const result = await resolveAfter2Seconds();
  console.log(result);
  // expected output: "resolved"
}

asyncCall();

(위 코드는 MDN Web Docs에서 발췌한 것입니다.developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/async_function)

 

비동기적 처리의 동작을 확인하기 위해 setTimeout 즉 시간적 딜레이를 넣어줬습니다.

 

 

asyncCall() 함수 앞에 async를 기입하고,

그 아래 await을 적용할 resolveAfter2Seconds() 함수 앞에 await을 선언해 줬습니다.

 

 

함수의 동작 결과는 

(1) 'calling' 출력, 2초 후 'resolved' 출력이다.

 

만약 await이 없다고 한다면 동작 결과는

(2) 'calling' 출력, [object Promise] 출력이다. 즉 두 번째 값은 오류 값이다.

 

 

(1)과 (2)의 결과 값이 다르게 나오는 이유는 (1)은 await의 선언으로  resolveAfter2Seconds() 함수가

실행 완료될 때까지 기다린 후 다음 코드를 실행하기 때문입니다.

 

그에 반해 (2)는 resolveAfter2Seconds() 함수에서 2초의 딜레이를 기다리지 않고 바로 다음 코드를 

실행하기 때문에 두 번째 값이 오류 값이 출력되는 것입니다.

 

 

 ※ 쉽게 요약하면 JS는 코드의 연산을 기다리지 않고 다음 코드를 실행하려는 성격을 가지지만,

async & await 비동기 처리를 만나면 단어 뜻 그대로 잠깐 wait(기다림) 후 다음 코드를 실행합니다.  

 

 

 

코딩을 공부하고 있는 학생입니다.

공부한 것을 정리, 공유하기 위해 블로그를 운영하고 있습니다.

포스팅에 틀린 부분이 있다면 과감한 지적, 수정의 한 마디 부탁드립니다! 감사합니다 :)

github.com/holicAZ

 

holicAZ - Overview

holicAZ has 9 repositories available. Follow their code on GitHub.

github.com

 

'Web > JavaScript' 카테고리의 다른 글

객체(Object)  (0) 2021.01.30