[부스트캠프 9기 챌린지] 학습 정리 - 01일차

안녕하세요!

저는 현재 부스트캠프 9기 웹모바일 챌린지에서 웹 풀스택에 속해서 현재 열심히 학습에 몰두하고있는 김정욱이라고 합니다.

저와 같이 진행하고 있는 캠퍼 그리고 진행자분들이 볼 것 같아 첫 주차인 김에 자기소개 한번 해봤습니다! 

 

캠퍼분들 다들 1주차 과제가 어땠을지 궁금하네요. 저는 따라가기에도 급급했습니다ㅠ

물론 수월하게 진행하셨던 캠퍼분들도 많으셨겠지만 저와 같이 고난을 겪었던 캠퍼분들을 위해 힘이 되는 명언 하나 공유해드리고 이만 정리로 넘어가겠습니다.

나를 죽이지 못하는 고통은 나를 성장시킬 뿐이다 - 프리드리히 니체

---

객체(Object)를 이용하자!

이번 과제를 진행하면서 가장 먼저 고민해본 것은 데이터가 들어갈 공간을 어떻게 설계할 것이냐였습니다. 단순하게 배열로 만들 것이냐, 아니면 객체를 이용할 것이냐 고민하던 중 배열을 2차, 3차 만들어 사용하다 보면 각 인덱스가 어디였는지 헷갈릴 것이 뻔히 보여 인덱스를 문자열로 사용할 수 있는 객체를 만들게 되었습니다.

 

Javascript의 객체는 매우 익숙한데요, 바로 JSON덕분입니다. JSON이 애초에 Javascript의 객체 형태로 만든 데이터 구조이기 때문이죠.

과제에선 제가 어떻게 객체를 구성했냐는 보안상 보여드릴 순 없으니 객체의 예제를 적어놓겠습니다.

const obj1 = {
    "user1": {
        "age": 0,
        "money": 0
    },
    "user2": {
        "age": 0,
        "money": 0
    }
}

---

reduce() 활용

객체를 만들긴 만들었는데 너무 들여쓰기도 많아지고 줄을 많이 잡아먹게 되어서 조금 더 간단히 사용할 방법을 생각해 봐야 했습니다.

그런데 혹시 캠퍼분들은 기억하실까요? 과제가 시작하기 전 Array.reduce()함수를 다양하게 사용할 수 있다고 소개해주신 한 캠퍼분의 채팅이 있는데요, 저는 이분이 참고하라고 첨부한 블로그 덕분에 문제를 해결했습니다. reduce()는 G.O.A.T가 맞았습니다.

https://dev.to/mattlewandowski93/arrayreduce-is-goated-1f1j?utm_source=substack&utm_medium=email 

Array.reduce() is Goated 🐐✨

reduce()는 다양하게 사용할 수 있지만 오늘 사용한 방식을 토대로 설명드리겠습니다. 위에서 만든 객체를 더 간편하게 만드는 과정으로 설명드릴게요!

 

reduce()는 두 개의 인수를 받습니다.

1. 콜백 함수

2. 초기값

초기값으로는 객체를 만들것이니 {} 안에 넣어줘야하므로 {}를 넣어줍니다.

 

그리고 콜백함수는 총 4개의 인수를 받을 수 있습니다.

1. 누적값

2. 배열의 현재 요소값

3. 현재 요소의 인덱스

4. 원본 배열

 

그러면 위 객체에서 중복되는 부분을 간소화하기 위해 "user1"과 "user2"만 따로 하여 배열로 만든 다음,  이 배열에 값을 하나하나 불러와 그 안의 값을 중복되는 부분으로 넣어주고, 이걸 누적값에 넣어 return해주게 되면 불필요한 중복을 제거하고 객체를 만들 수 있었습니다.

const username = ["user1", "user2"];

const obj1 = username.reduce((users, user) => {
    users[user] = {
        'age': 0,
        'money': 0
    };
    return users;
}, {});

---

얕은 복사와 깊은 복사

이번에 처음 공부하게 된 또 다른 부분은 바로 얕은 복사와 깊은 복사였습니다. 위처럼 만들어진 객체를 obj1이라 한 후에 이와 똑같은 객체 obj2를 만들 필요가 있었습니다. 저는 당연히 =을 사용했습니다.

const obj2 = obj1

근데 문제가 생겼습니다. 저는 분명 똑같은 형태로 복제가 된다고 생각했지만 그게 아니었습니다.

C언어를 배웠을 때 포인터를 통해 주소값을 똑같이 받아오는 변수를 만들었을 때 처럼 obj1이 변할 때 obj2도 같이 따라 값이 변하는 것이었습니다. 

이 상황을 GPT에게 물어보니 GPT는 저에게 얕은복사와 깊은 복사에 대해 알려주었습니다.

• 얕은 복사: 객체의 최상위 속성만 복사하고, 새로 만들어진 객체들은 원본 객체와 참조를 공유하여 각 객체들이 서로 다른 복사된 객체들에게 영향을 줄 수 있음.
• 깊은 복사: 형태만 똑같은 원본 객체와 독립적인 새 객체를 생성하기 때문에 다른 객체에 영향을 미치지 않음.

그렇습니다. 제가 한 방식은 얕은 복사 방식이었던 것이었습니다.

 

그럼 깊은 복사 방식은 어떻게 하는 것인지도 물어봐서 배워왔습니다. 바로 복사객체 = JSON.parse(JSON.stringify(원본객체))를 쓰면 된다고 합니다.

• JSON.stringify(): javascript의 객체를 JSON 형태의 문자열로 변환하는 메서드
• JSON.parse(): JSON 형태의 문자열을 javascript 객체로 변환하는 메서드

그러니 정리해보면 =으로 그대로 때려박아 복사하는 게 아니라 javascript의 객체를 문자열로 바꾸고, 또 그 바꾼 문자열을 바로 javascript 객체로 바꿔서 선언하면 원본 객체랑은 아예 관련 없지만 형태는 같게 깊은 복사가 가능하다는 겁니다.

---

숫자인지 확인하기

예외 처리를 할 때였습니다. javascript가 익숙하지 않은 저는 숫자를 입력받아야 하는 부분에 만일 숫자가 아닌게 오게되면 어떻게 될 지 궁금했습니다. 다른 언어와 같이 특정 Exception이 터질 것이라 생각하고 해당 예외를 try catch를 사용해서 검증해야하나 생각하고 Number("a");를 출력해봤습니다. 그런데...

NaN

 제 예상과는 다르게 NaN이 출력이 되었습니다. NaN은 javascript의 null이라 생각하면 되는데, 덕분에 편하게 숫자가 맞는지 확인할 수 있게 되었습니다.

if (isNaN(num)) {
    예외처리...
}

isNaN()이란 함수를 사용하여 숫자가 들어와야할 변수를 검증하고 예외처리할 수 있었습니다.

---

내일 2일차도 화이팅하고 얻어갈 것이 많은 좋은 기회인 만큼 평소보다 조금이라도 더 성실히 임하고 적극적으로 나아가는 챌린지 기간이 되도록 노력합시다!