[TIL] 240516 캠프 32일차: 눈에 보여야 도전하고 싶어진다.

오늘의 한 마디: 내 눈으로 내가 원했던 능력을 가진 사람을 보는 것만큼 강력한 동기부여는 없다.

오늘 배운 내용                                     

• HTTP에는 상태 코드라는 것이 존재한다. 상태 코드는 서버에서의 처리 결과를 나타내는 일종의 메세지이며,  첫 번째 숫자는 HTTP 응답의 종류를 구분하는 데 사용하며 나머지 2개의 숫자는 세부적인 응답 내용 구분을 위한 번호이다. 오늘 알게 된 상태 코드는 200(성공), 201(생성됨), 400(잘못된 요청), 404(찾을 수 없음)이 있다.
• 만약 mongoose에서 scheme형태로 데이터를 저장할 때 속성의 value값을 배열로 하고 싶다면 다음과 같이 하면 된다.

const EquipmentsSchema = new mongoose.Schema({
  character_id: {
    type: Number,
    require: true,
    unique: true,
  },
  equipment_list: [Number],				// Number타입의 배열 속성을 넣었다!
});

• 배열에 값을 추가 또는 제거하고 싶다면 push(), pull()을 사용하면된다. 아래 코드처럼 말이다.

push()

  // 해당 캐릭터의 '아이템 장착 여부'데이터를 가져옵니다.
  // 만약, 해당 ID값을 가진 '아이템'을 장착하고 있다면 해당 사실을 클라이언트에 전달합니다.
  const searchCharacterId_equipment = await Equipments.findOne({
    character_id: character_id,
  }).exec();
  const item_list = searchCharacterId_equipment.equipment_list;
  for (let code of item_list) {
    if (code === item_code) {
      return res
        .status(400)
        .json({ errorMessage: '이미 장착한 아이템입니다.' });
    }
  }

  // 장착할 아이템ID를 장착 리스트에 추가합니다.
  item_list.push(item_code);			// <--------- item_list는 DB에 저장된 배열이다.

 

pull()

  // 만약, '아이템 장착 여부' 데이터에 해당 ID값을 가진 '아이템'이 있다면, 해당 사실을 클라이언트에 전달합니다.
  const item_list = searchCharacterId_equipment.equipment_list;
  let find = false;
  for (let code of item_list) {
    if (code === item_code) {
      find = true;
      break;
    }
  }

  if (!find) {
    return res
      .status(404)
      .json({ errorMessage: '해당 아이템을 장착하지 않았습니다' });
  }

  // 장착한 아이템 리스트에서, 해당 아이템을 제거합니다.
  item_list.pull(item_code);			// <--------- item_list는 DB에 저장된 배열이다.

 

오늘의 Trouble Shooting                  

Problem 1. 객체에 존재하지 않는 속성

캐릭터가 아이템을 장착하면 아이템 스텟만큼 캐릭터 스텟이 오르는 로직을 짜는 도중, 캐릭터에게 없었던 스텟 속성을 증가시키거나 감소시키려고 하면 오류가 발생하며 서버가 튕기는 현상을 발견했다. 

Solve. 삼항 연산자 '||' 사용

해당 문제는 없는 스텟 속성의 값을 증가시키거나 감소시키려고 할 때, 숫자와 숫자가 아닌 값(아마 Nan인것 같다)을 연산하는 상황이 발생해서 튕긴 것이였다. 이런 문제를 해결하기 위해서, 그리고 짧은 코드로 해결하기 위해서 삼항 연산자 '||'를 사용하면 된다. 

자바스크립트는 || 를 사용하면 삼항연산자 처럼 작동하는 기능이 존재하는데 다음과 같이 사용하면 매우 간단하게 해당 문제를 해결할 수 있다. 

  // 장착할 '아이템'의 스탯만큼 캐릭터의 체력, 힘을 증가시킵니다.
  searchCharacterId_character.health =
    (searchCharacterId_character.health || 0) + (item.item_stat.health || 0);
  searchCharacterId_character.power =
    (searchCharacterId_character.power || 0) + (item.item_stat.power || 0);

 

간단하게 설명하자면, searchCharacterId_character에서 health / power 속성이 존재하지 않으면 false 판정이 나고, searchCharacterId_character.health || 0 코드가 false판정이 났을 때 0을 반환한다.  이로써 속성이 존재하지 않아 숫자가 아닌 값 대신 0이 나오게 되면서 오류가 발생하지 않는 것이다.

---

Problem 2. app.js 실행 시 웹페이지가 나오지 않는다.

app.js를 실행했을 때 시작 화면을 꾸미고 싶어서 index.html을 만든 다음 app.js를 실행해 보았지만  index.html 화면이 나오지 않았다. 지금까지는 해당 html을 라이브 서버나 default browser를 실행해 화면에 보이게 했지만 시작 자체를 app.js에서 하는 바람에 index.html 화면을 켤 수 없는 상황이 되어버렸다...

Solve. express.static('{directory_path}') 사용

다행히 express.js에는 static이라는 메소드가 있었다. app.js에 static메소드를 선언하고 매개변수로 시작 시 보이게 하고 싶은 html의 경로(index.html의 경로)를 넣으면 app.js로 실행해도 해당 html이 나온다.

// app. js
.
.
.
.
.

// Express에서 req.body에 접근하여 body 데이터를 사용할 수 있도록 설정합니다.
app.use(express.json());
app.use(express.urlencoded({ extended: true }));
app.use(express.static('./assets')); // 시작시, ./assets에 있는 파일로 시작한다.(index.html존재)

const router = express.Router();

router.get('/', (req, res) => {
  return res.json({ message: 'Hi!' });
});

// '/api' 주소로 접근 하였을 때, router와 CharactersRouter로 클라이언트의 요청이 전달됩니다.
app.use('/api', [router, CharactersRouter, ItemsRouter, EquipmentsRouter]);

app.listen(PORT, () => {
  console.log(PORT, '포트로 서버가 열렸어요!');
});

---

 

오늘 하루는?                                       

• 처음으로 팀원들과 이야기 해봤다. 매니저분들이 조 이름을 짜라고 해서인지 팀원분들이 전부 마이크를 켜고 대화를 하는 것을 들었다. 채팅이라도 매일 끝날 때마다 인사를 남겼지만 매 번 씹힌 경험이 있는지라(ㅠㅠ) 소통을 별로 안좋아하는 팀원분들만 있는게 아닐까 걱정이 꽤 있었는데 예상 외로 다들 활발하게 소통하는 것을 보고 무척 놀랐다. 
• 오늘 저녁 7시부터 9시까지 줌으로 다른 사람들의 발표를 봤었다. 두 분이 발표를 하는데 두 분 다 너무 깔끔하게 잘 정리된 ppt로 군더더기 없이 발표하는 것을 보고 부럽다는 생각이 들었다. 나는 글이든 말이든 설명이 깔끔하지 않고 TMI가 많아 듣는 사람이 어려워한다는걸 자주 느끼기 때문에, 말 잘하고 글 잘 쓰는 사람이 되고 싶었다. 멀리 갈 필요없이 옆에 이런 사람들이 있었다니... 동료들한테도 배울 점이 많다는 것을 다시금 느끼게 된 하루였다.
• '눈에 보여야 도전하고 싶어진다'. 어디 있는 명언은 아니고, 살다보니 느껴지는 것이다. 아무리 공부 해야한다, 너보다 열심히 사는 사람 많다, 수도 없이 이런 종류에 얘기를 백날 들어도 결국 사람은 체감보다 강력한 동기부여는 없는 것 같다. 오늘 많은 사람들과 얘기하고 난 뒤 그 어느 때보다 강한 동기부여가 된 나를 보고 다시 한 번 증명하고야 말았다. 잘한다고 나대지말고, 겸손하게 살아야겠다

 

오늘 한 일?                                         

• AWS 탄력적 IP적용
• 과제 필수 요구사항 -완-
• 과제 선택 요구사항 구현 완료
• 코드 정리 및 주석 추가
• json 메세지 정리(서버 status)
• 시작화면 html만들기