coding AtoZ

populate

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

사용 및 예제

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

먼저 사용하기 위해선 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 스키마 객체로 출력된다.

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

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

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

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

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

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

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

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

github.com/holicAZ

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

플렉스 박스란?

 -  플렉스 박스는 플렉스 컨테이너, 플렉스 요소로 구성됩니다.

 -  요소를 블록 타입으로 설정하려면 display 속성값을 flex로, 인라인 타입으로 정의 하려면 inline-flex로 설정합니다.

 -  플렉스 컨테이너는 무조건 하나 이상의 플렉스 요소를 포함해야 합니다.

 -  플렉스 요소는 플렉스 라인이라는 가상의 선을 따라 위치합니다.

플렉스 박스(flex box) 레이아웃

플렉서블 박스(flexible box)는 플렉스 박스(flex box)라고도 불리며, CSS3에서 처음 소개된 레이아웃 모델입니다.
이 레이아웃은 서로 다른 크기의 화면과 기기에서도 HTML 요소들이 자동으로 재정렬되어, 웹 페이지의 레이아웃을 언제나 똑같이 유지할 수 있게 해줍니다.

플렉스 박스(flex box)을 위해 제공되는 속성은 다음과 같습니다.

또한, 플렉스 요소(flex item)를 위해 제공되는 속성은 다음과 같습니다.

더 자세한 사항은 (www.tcpschool.com/css/css3_expand_flexbox) 참조

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

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

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

github.com/holicAZ