TIL 20230614

728x90

Event

20:00 후발대 수업 OT

생활 계획표

AM 6:00 체조, 아침식사, 산책, 샤워, 설거지, 세탁

AM 8:00 입실, TIL 리뷰, 노드 시간표 및 오늘 목표 체크

AM 8:30 공부 시작

PM 1:00 ~ 2:00 점심 식사

PM 6:00 ~ 7:00 저녁식사

PM 7:00 TIL, WIL 제출

PM 9:00 퇴실 (카톡 확인)

PM 11:00 취침

이번 주 목표 및 일정

~~월 : 노드 입문 1~16~~

~~화 : 노드 입문 17~ end~~

~~수 : 과제 / 20:00 후발대 수업 OT / javascript 문법 종합반 3주차~~ j~~avascript 문법 종합반 4주차~~ ~~javascript 문법 종합반 5주차~~

목 : node 입문 복습 1~16

금 : ~ ~~13:00 과제 점검 및 제출~~ / 19:00 개인과제 해설 / node 입문 복습 17~end

토 : 개인 과제 리팩토링

일 : node 숙련 예습 (강의 열리면)

오늘 목표

TIL 작성

TIL 리뷰

과제 : 게시글, 댓글 CRUD 기본 구조 잡기

프로그래머스 : 1문제 풀기

오늘 한 것

TIL작성

TIL 리뷰

과제 완성 및 제출

프로그래머스

편지 : https://verdantjuly.tistory.com/209

javascript 문법 종합반 강의 자료 3주차, 4주차, 5주차

1. Mongoose란?

MongoDB의 ODM(Object Document Mapping)

MongoDB의 Document를
자바스크립트의 객체로 바꾸어주는 역할을 해준다.

2. _id 필드명 바꾸기

문제

몽고디비에서 자동으로 부여하는 _id를 사용하고 싶은데 필드명을 바꿔서 사용하고 싶다.

시도

postid : {

type : string

value : _id

}

postid에 값을 _id로 준다. > 실패

// Duplicate the ID field.
Schema.virtual('userId').get(function(){
    return this._id.toHexString();
});
// Ensure virtual fields are serialised.
Schema.set('toJSON', {
    virtuals: true
});

참고자료

이렇게 _id를 복제해 새로운 필드에 넣은 뒤

원본 _id를 select : false 로 숨기고

필요할 때 .select(‘+_id’) 로 나타내기

> 게시글 조회/생성 시 필수적으로 숨겼던 _id가 있어야 한다는 오류 메시지가 나온다. > 실패

해결

별도로 필드명을 수정하지 않고 그대로 사용하되, 모든 댓글에 postid라는 PK를 준다.

알게 된 점

과제를 제출한 이후에 두 번째 질문을 통해 새로운 방법을 알게 되었다!
db.fruits.find({}, {_id: 0})

3. res 디테일

respond 부분에 http 코드만 넣는 것 보다는 수정하려던 것, 삭제하려던 대상이 무엇인지 적어 주면

무엇이 업데이트 되었는지 바로 알 수 있어 좋다고 한다!

같이 일하는 동료와 읽는 사람들을 배려하다 보면 좋은 코드를 짤 수 있을 것 같다!

4. Promise

Promise는 비동기 처리에 대해, 처리가 끝나면 알려달라는 ‘약속'

resolve/reject 둘 중 하나가 실행되기 전까지는 다음(then), 오류(catch)로 넘어가지 않는다.
비동기작업이 완료될 때 resolve/reject 호출

new Promise(function (resolve) {
	setTimeout(function () {
		var name = '에스프레소';
		console.log(name);
		resolve(name);
	}, 500);
}).then(function (prevName) {
	return new Promise(function (resolve) {
		setTimeout(function () {
			var name = prevName + ', 아메리카노';
			console.log(name);
			resolve(name);
		}, 500);
	});
}).then(function (prevName) {
	return new Promise(function (resolve) {
		setTimeout(function () {
			var name = prevName + ', 카페모카';
			console.log(name);
			resolve(name);
		}, 500);
	});
}).then(function (prevName) {
	return new Promise(function (resolve) {
		setTimeout(function () {
			var name = prevName + ', 카페라떼';
			console.log(name);
			resolve(name);
		}, 500);
	});
});

5. async/await

비동기 작업을 수행코자 하는 함수 앞에 async

함수 내부에서 실질적인 비동기 작업이 필요한 위치마다 await

var addCoffee = function (name) {
	return new Promise(function (resolve) {
		setTimeout(function(){
			resolve(name);
		}, 500);
	});
};
var coffeeMaker = async function () {
	var coffeeList = '';
	var _addCoffee = async function (name) {
		coffeeList += (coffeeList ? ', ' : '') + await addCoffee(name);
	};
	await _addCoffee('에스프레소');
	console.log(coffeeList);
	await _addCoffee('아메리카노');
	console.log(coffeeList);
	await _addCoffee('카페모카');
	console.log(coffeeList);
	await _addCoffee('카페라떼');
	console.log(coffeeList);
};
coffeeMaker();

6. 함수와 메서드

// example1(메서드의 예)
person.getName();

// example2(함수의 예)
testLogging();

7. Class

class Person {
	// constructor는 이름을 변경할 수 없어요.
  constructor(name, age) {
		// 이름(name)과 나이(age)가 없으면 사람이 아니죠?
		// new라는 키워드를 이용해서 인스턴스를 만들 때, 기본적으로
		// 넣어야 하는 값들을 의미해요! :)
		// 여기서 말하는 this는 만들어질 인스턴스를 의미한다고 생각해주세요!
    this.name = name;
    this.age = age;
  }

	// 다양한 메소드를 아래와 같이 정의할 수 있어요.
	// 여기서 this.name으로 내부 값을 접근해야 함을 잊지 마세요! :)
  sayHello() {
    console.log(`Hello, my name is ${this.name} and I'm ${this.age} years old.`);
  }
}

const person1 = new Person("Alice", 30);
const person2 = new Person("Bob", 25);

// 만든 객체를 토대로 메서드 호출해보기
person1.sayHello(); // 출력: "Hello, my name is Alice and I am 30 years old."
person2.sayHello(); // 출력: "Hello, my name is Bob and I am 25 years old."

// Getters와 Setters
// 객체지향 프로그래밍 언어 -> G, S
// 클래스 --> 객체(인스턴스)
// 프로퍼티(constructor)
// new Class(a, b, c)
class Rectangle {
  constructor(height, width) {
    // underscore : private(은밀하고, 감춰야 할 때)
    this._height = height;
    this._width = width;
  }

  // width를 위한 getter
  get width() {
    return this._width;
  }

  // width를 위한 setter
  set width(value) {
    // 검증 1 : value가 음수이면 오류!
    if (value <= 0) {
      //
      console.log("[오류] 가로길이는 0보다 커야 합니다!");
      return;
    } else if (typeof value !== "number") {
      console.log("[오류] 가로길이로 입력된 값이 숫자타입이 아닙니다!");
      return;
    }
    this._width = value;
  }

  // height를 위한 getter
  get height() {
    return this._height;
  }

  // height를 위한 setter
  set height(value) {
    // 검증 1 : value가 음수이면 오류!
    if (value <= 0) {
      //
      console.log("[오류] 세로길이는 0보다 커야 합니다!");
      return;
    } else if (typeof value !== "number") {
      console.log("[오류] 세로길이로 입력된 값이 숫자타입이 아닙니다!");
      return;
    }
    this._height = value;
  }

  // getArea : 가로 * 세로 => 넓이
  getArea() {
    const a = this._width * this._height;
    console.log(`넓이는 => ${a}입니다.`);
  }
}

// instance 생성
const rect1 = new Rectangle(10, 7);
rect1.getArea();
// const rect2 = new Rectangle(10, 30);
// const rect3 = new Rectangle(15, 20);

static : 인스턴스를 만들 필요가 없을 때 사용

Class 레벨의 메소드를 정의할 수 있습니다.

Class 레벨의 메소드는 인스턴스에서 호출할 수 없으며, Class 이름으로 직접 호출할 수 있어요.

class Calculator {
  static add(a, b) {
    return a + b;
  }

  static subtract(a, b) {
    return a - b;
  }
}

console.log(Calculator.add(1, 2)); // 3
console.log(Calculator.subtract(3, 2)); // 1

정리

Mongoose란?

MongoDB의 ODM(Object Document Mapping)

MongoDB의 Document를
자바스크립트의 객체로 바꾸어주는 역할을 해준다.

respond 부분에 http 코드만 넣는 것 보다는 수정하려던 것, 삭제하려던 대상이 무엇인지 적어 주기

Promise는 비동기 처리에 대해, 처리가 끝나면 알려달라는 ‘약속'

resolve/reject 둘 중 하나가 실행되기 전까지는 다음(then), 오류(catch)로 넘어가지 않는다.
비동기작업이 완료될 때 resolve/reject 호출

비동기 작업을 수행코자 하는 함수 앞에 async

함수 내부에서 실질적인 비동기 작업이 필요한 위치마다 await

// example1(메서드의 예)
person.getName();

// example2(함수의 예)
testLogging();

class Person {
	// constructor는 이름을 변경할 수 없어요.
  constructor(name, age) {
		// 이름(name)과 나이(age)가 없으면 사람이 아니죠?
		// new라는 키워드를 이용해서 인스턴스를 만들 때, 기본적으로
		// 넣어야 하는 값들을 의미해요! :)
		// 여기서 말하는 this는 만들어질 인스턴스를 의미한다고 생각해주세요!
    this.name = name;
    this.age = age;
  }

	// 다양한 메소드를 아래와 같이 정의할 수 있어요.
	// 여기서 this.name으로 내부 값을 접근해야 함을 잊지 마세요! :)
  sayHello() {
    console.log(`Hello, my name is ${this.name} and I'm ${this.age} years old.`);
  }
}

const person1 = new Person("Alice", 30);
const person2 = new Person("Bob", 25);

// 만든 객체를 토대로 메서드 호출해보기
person1.sayHello(); // 출력: "Hello, my name is Alice and I am 30 years old."
person2.sayHello(); // 출력: "Hello, my name is Bob and I am 25 years old."

// Getters와 Setters
// 객체지향 프로그래밍 언어 -> G, S
// 클래스 --> 객체(인스턴스)
// 프로퍼티(constructor)
// new Class(a, b, c)
class Rectangle {
  constructor(height, width) {
    // underscore : private(은밀하고, 감춰야 할 때)
    this._height = height;
    this._width = width;
  }

  // width를 위한 getter
  get width() {
    return this._width;
  }

  // width를 위한 setter
  set width(value) {
    // 검증 1 : value가 음수이면 오류!
    if (value <= 0) {
      //
      console.log("[오류] 가로길이는 0보다 커야 합니다!");
      return;
    } else if (typeof value !== "number") {
      console.log("[오류] 가로길이로 입력된 값이 숫자타입이 아닙니다!");
      return;
    }
    this._width = value;
  }

  // height를 위한 getter
  get height() {
    return this._height;
  }

  // height를 위한 setter
  set height(value) {
    // 검증 1 : value가 음수이면 오류!
    if (value <= 0) {
      //
      console.log("[오류] 세로길이는 0보다 커야 합니다!");
      return;
    } else if (typeof value !== "number") {
      console.log("[오류] 세로길이로 입력된 값이 숫자타입이 아닙니다!");
      return;
    }
    this._height = value;
  }

  // getArea : 가로 * 세로 => 넓이
  getArea() {
    const a = this._width * this._height;
    console.log(`넓이는 => ${a}입니다.`);
  }
}

// instance 생성
const rect1 = new Rectangle(10, 7);
rect1.getArea();
// const rect2 = new Rectangle(10, 30);
// const rect3 = new Rectangle(15, 20);

static : 인스턴스를 만들 필요가 없을 때 사용

Class 레벨의 메소드를 정의할 수 있습니다.

Class 레벨의 메소드는 인스턴스에서 호출할 수 없으며, Class 이름으로 직접 호출할 수 있어요.

체크리스트

[ X ] 예쁜 말로 협업하였는가?

조금 더 친절하게 말할 수 있었다....파이팅 하자.

[ ... ] 12시간 동안 몰입하였는가?

과제를 완성했다는 점에서 가산점을 부여해 동그라미를 치고 싶지만 사실 그렇지 못하다. 점심 때 과제를 제출하고 난 뒤 두세 시간은 방전되어서 간식만 먹고 음악만 들었다. 휴식도 중요하지만 절대적인 공부량이 중요하다고 하다. 몰입 시간을 늘려야 한다.

[ X ] 코딩 시 복사 + 붙여넣기를 하지 않았는가?

과제 제출을 못하게 될까봐 조급해져서 복사를 좀 하다보니 예전 습관대로 많이 하게 되었다.

[ X ] 친절한 개발자였는가?

친한 동기가 있는데 코드 리뷰를 좋아한다. 하지만 프로젝트 로직의 처음부터 끝까지에 달하는 긴 코드 리뷰를 매일 여러 번 듣는 것은 힘들어서 아침 한 번은 들어보고 점심에 제안한 코드 리뷰는 중간에 솔직하게 이야기 하였다. 내가 하루 불친절할 수 있겠지만 영원히 불친절한 사람이 되는 것보다 나을 것 같았다. 모르는 부분에 대해 전부 나에게 코드 리뷰를 하고 함께 알아가는 것은 좋지만 질문을 세 가지 정도로 정리해서 하나씩 알아가는 것을 권해 봤다. 내 진심이 불친절보다는 깊은 마음으로 닿았으면 좋겠다. 그리고 질문에 대한 제안을 하면서 나의 질문과 공부법도 수정해 나갈 수 있게 되었다.

동기가 다른 사람과 질문을 해결하는 과정을 지켜보았다. 나와는 완전히 다른 방법과 스타일로 동기를 대하는데 많은 것을 배우게 되었다. 사람이 먼저 되고 직업을 가져야겠다고 생각했다.

[ O ] 오늘을 평가하였을 때 주니어 개발자가 될 수 있겠는가?

협업에 관련된 부분, 나의 의견을 말하면서도 좋은 말로, 기분 좋게 할 수 있다면 충분히 가능하다고 생각한다.

아직 경험이 부족하기 때문에 잘 쌓아 나가고 일분 일초 한 마디 한 단어 모두 신경써서 말하면 될 것 같다.

소감

과제를 마쳤다. 나의 번아웃 포인트는 항상 제출이다. 제출 뒤에는 노곤해 져서 아무것도 하기 싫고 목표를 달성했다는 성취감에 취해있다.

하루 하루가 알차게 보내도 급한 시절이다. 내가 파이팅했으면 좋겠다.

시간날 때 다시 모던 자바스크립트 Deep Dive를 읽어나가도 좋을 것 같다.

'verdantjuly > Today I Learned' 카테고리의 다른 글

TIL 20230616 (0)	2023.06.16
TIL 20230615 (0)	2023.06.15
TIL 20230613 (0)	2023.06.13
TIL 20230612 (0)	2023.06.12
TIL 20230611 (0)	2023.06.11