프로그래머스 데브코스 5기 MIL (10/19~11/22)

그 동안 함께 성장했던 이세희팀과 1차팀 마무리로 회고를 진행하게 되었습니다.

데브코스에 처음 참여하면서 만나게 된 팀원들이라 더 힘이 됐고 정도 많이 들었는데 아쉽기도 하고 다음 팀에는 어떤 분들이 있을지 기대되는 마음도 있었습니다.

그 동안 학습하면서 도움도 많이 주고 받고 같이 공부할 수 있어서 힘 빠지지 않고 나아갈 수 있던 것 같아요.

성장하고 배운 점

프레임워크를 사용해서 기능별로 컴포넌트를 구분해서 코드를 짜는 방식으로는 개발을 진행했었는데, 바닐라 JS로 각 컴포넌트를 모듈화해서 데이터를 주고 받으며 사용하는 것이 처음이라 흥미로웠고 많이 배웠습니다.

개발을 시작하기 전에, 구조를 어떻게 짤지 고민을 해야 코드를 가독성 좋게 짤 수 있고, 데이터를 활용도 높게 사용할 수 있다는 것을 알게되었어요.

학습 중 어려웠던 점

강의를 듣다가 이해가 되지 않아서 질문을 하여 도움을 얻고 싶은 상황이 있었어요.

하지만 어떤 것을 어떻게 질문해야하는지 정리를 할 수 없어 도움을 요청하기 힘들었습니다.

어느 정도의 내용이 이해가 되었어야 어느 부분을 모르는지 알고 질문을 할텐데 그러지 못했어요.


생각해보면 초반에 이해가 안되었지만 사소한 부분이라 생각하고 넘어가서 전체 코드를 이해하지 못하는 일이 생긴 것 같아요.


매개변수에 중괄호로 묶은 형태가 전달되는 것을 정확히 이해하지 않고 넘어갔었어요.

객체 비구조화 할당에 대한 개념을 찾아보고 알게된 후에 코드가 조금씩 보이기 시작했습니다.

또한 브라우저로 디버깅을 하면서 코드의 흐름을 살펴보니 이해를 잘 못하고 있던 부분도 보였고, 비슷한 구조와 방식으로 진행하는 뒤의 다른 강의들을 보고 실습하면서 코드 흐름을 정확히 알 수 있었습니다.


아래는 추가로 학습하면서 이해에 도움이 되었던 내용입니다.

객체 비구조화 할당

• JS 객체나 배열로부터, 데이터를 추출하여 변수에 할당하는 방법
  (객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 함)
  - 객체 비구조화 : { } 이용 → 객체 속성 추출
  - 배열 비구조화 : [ ] 이용 → 배열 요소 추출

const person = { name: "Hue", age: 23, country: "Republic of Korea" };

// 객체 비구조화를 사용하여, 객체 속성을 추출하여 변수에 할당
const { name, age } = person;

console.log(name); // Hue
console.log(age); // 23

const person = { name: "Hue", age: 23, country: "Republic of Korea" };

function user({ name, age }) {
	console.log(`안녕하세요! 저는 ${name}이고, 나이는 ${age}입니다 :)`);
}

user(person); // 안녕하세요! 저는 Hue이고, 나이는 23입니다 :)

아래와 같이 작성할 필요를 없애준다.

// 다음과 같이 작성할 필요를 없애준다.
const name = person.name;
const age = person.age;
const country = person.country;

매개변수에 객체 형태로 전달하는 이유

• 객체 형태 : { }를 이용해서 객체 형태로, 매개변수에 전달 가능
  • ex. { name }, { age }
• { }를 사용한 이유 : 키가 $target이고, 값이 실제 $target변수인 객체를 정의하기 위함.

// main.js
import App from "./App.js";

const $target = document.querySelector(".app");

new App({$target});

// App.js
import PhotoList from "./PhotoList.js";

export default function App({$target}){
	
	new PhotoList({$target});
}

// PhotoList.js
export default function PhotoList({$target}){
	const $photoList = documnet.createElement("ul");
	$target.appendChild($photoList);
}

여러 함수에서 정의된 하나의 객체의 서로 다른 일부 데이터를 활용할 때 유용한 것 같습니다.

또한, 각 함수에서 활용할 데이터를 명시적으로 알 수 있다는 것이 장점인 것 같습니다.

const person = { name: "Hue", age: 23, country: "Republic of Korea" };

// name과 age를 활용할 함수
function user({name, age}) {
  console.log(`My name is ${name}. I'm ${age} years old`);
}

// country를 활용할 함수
function home({country}){
  console.log(`I'm from ${country}`);
}

user(person);
home(person);

const object = { 
    somethings: {
        some1 : 'a', 
        some2 : 'b'
    }, 
    somethings2: {
        some3: 'c'
    } 
}

function some({somethings}){
  console.log(somethings);
}

some(somethings); //{some1: 'a', some2: 'b'}

const object = { 
    somethings: {
        some1 : 'a', 
        some2 : 'b'
    }, 
    somethings2: {
        some3: 'c'
    } 
}

const somethings = object.somethings;

function some(somethings){
  console.log(somethings);
}

some(somethings); //{some1: 'a', some2: 'b'}

보완해야할 점

강의를 듣고 과제를 진행하면서 모르는 부분에 대해서 알 때까지 같은 강의를 돌려보는 것 보다 관련 키워드는 무엇이 있을지 한 번 생각해보고 검색해보는 태도가 필요하다는 것을 느꼈어요.
같은 강의를 돌려보고 정리하는 것도 큰 도움이 되었지만, 시간을 많이 투자하게 되어서 효율적이지 못했다고 생각이 들었기 때문입니다.