[24/09/19-25] 안내 및 질문 모음집

[minjeongss]

📚 분량

Chapter 28-37

🎤 발표자

김민정

질문

33장

• symbol이 프로퍼티 키 충돌을 방지할 수 있다는데, 실제로 팀 협업 개발할때 어떤 식으로 사용하면서 충돌을 방지 하는지 (김주영)

34장

• for…of 문과 for문과 forEach 문을 이용하여 배열을 순회하는데, 각각 어떤 경우에 사용하는게 좋은지 (알고리즘 문제 풀이 관점에서?) (김주영)
• 리액트에서 map 반복문을 많이 사용한다고 알고 있는데, for..of문도 간혹사용한다고 알고 있습니다 for...of문을 사용하면 좋은 경우가 궁금합니다. (조천산)

36장

• useState에서 배열 디스트럭처링을 사용하는 이유? (김민석)
• 유사 배열 객체는 스프레드 연산자 적용이 안되고, 일반 객체는 되는 것인가? (김민정)

37장

• Map은 중복된 키를 갖는 요소가 존재하면 값을 덮어씌우는데, 객체는 어떠한가? (김민정)

[joarthvr]

33장

• symbol이 프로퍼티 키 충돌을 방지할 수 있다는데, 실제로 팀 협업 개발할때 어떤 식으로 사용하면서 충돌을 방지 하는지 (김주영)
  라이브러리나 모듈에서 private 속성 정의:

javascriptCopyconst privateProperty = Symbol('privateProperty');

class MyClass {
  constructor() {
    this[privateProperty] = 'This is private';
  }

  getPrivateProperty() {
    return this[privateProperty];
  }
}

34장

• for…of 문과 for문과 map 문을 이용하여 배열을 펼치는데, 각각 어떤 경우에 사용하는게 좋은지 (알고리즘 문제 풀이 관점에서?) (김주영)

  1. for...of 문:

  장점:

  • 코드가 간결하고 읽기 쉽습니다.
  • 배열의 요소에 직접 접근할 수 있어 편리합니다.
  • break, continue 사용이 가능합니다.

  단점:

  • 인덱스에 직접 접근할 수 없습니다.

  사용 케이스:

  • 단순히 배열의 모든 요소를 순회해야 할 때
  • 특정 조건에서 루프를 중단하거나 건너뛰어야 할 때
  • 코드의 가독성이 중요할 때

  알고리즘 문제 예시:

  • 배열에서 특정 조건을 만족하는 첫 번째 요소 찾기
  • 배열의 모든 요소에 대해 조건 검사 수행
  1. 일반 for 문:

  장점:

  • 인덱스에 직접 접근할 수 있습니다.
  • 루프의 시작, 종료, 증가 조건을 완전히 제어할 수 있습니다.
  • 가장 높은 성능을 제공합니다.

  단점:

  • 코드가 다소 복잡해 보일 수 있습니다.

  사용 케이스:

  • 인덱스가 필요한 경우 (예: 두 개의 배열을 동시에 순회)
  • 특정 간격으로 요소를 건너뛰어야 할 때
  • 역순으로 배열을 순회해야 할 때
  • 성능이 중요한 대규모 데이터 처리

  알고리즘 문제 예시:

  • 두 배열의 요소를 동시에 비교
  • 배열의 요소를 2개씩 묶어 처리
  • 배열을 역순으로 순회하며 처리
  1. forEach 문:

  const arr = [1, 2, 3, 4, 5];
  arr.forEach((item, index) => {
    console.log(item, index);
  });

  장점:

  • 함수형 프로그래밍 스타일에 적합합니다.
  • 인덱스와 요소에 모두 쉽게 접근할 수 있습니다.
  • 코드가 간결하고 읽기 쉽습니다.

  단점:

  • break, continue를 사용할 수 없습니다.
  • 중간에 루프를 중단할 수 없습니다.
  • 약간의 성능 오버헤드가 있을 수 있습니다.

  사용 케이스:

  • 배열의 모든 요소에 대해 동일한 작업을 수행해야 할 때
  • 부수 효과(side effects)가 필요한 경우
  • 함수형 프로그래밍 스타일을 선호할 때

  알고리즘 문제 예시:

  • 배열의 모든 요소에 대해 변환 작업 수행
  • 배열의 요소들의 합계 또는 평균 계산

  알고리즘 문제 풀이 관점에서의 권장 사항:

  1. 단순 순회나 조건부 중단이 필요한 경우: for...of 문을 사용하세요. 코드가 간결하고 의도가 명확합니다.
  2. 인덱스가 필요하거나 복잡한 순회 로직이 필요한 경우: 일반 for 문을 사용하세요. 특히 다차원 배열이나 여러 배열을 동시에 다룰 때 유용합니다.
  3. 모든 요소에 대해 동일한 작업을 수행하는 경우: forEach 단, 중간에 루프를 중단할 필요가 없는 경우
  4. 성능이 중요한 대규모 데이터 처리: 일반 for 문을 사용. 가장 빠른 성능을 제공
  5. 함수형 프로그래밍 스타일을 선호하는 경우: forEach나 map, filter, reduce 등의 배열 메서드를 활

• 리액트에서 map 반복문을 많이 사용한다고 알고 있는데, for..of문도 간혹사용한다고 알고 있습니다 for...of문을 사용하면 좋은 경우가 궁금합니다. (조천산)

  1. 대량의 데이터를 처리할 때 메모리 효율성:

  function processLargeDataSet() {
    const results = [];
    for (const item of getLargeDataSet()) {
      if (results.length >= 1000) break;
      results.push(<DataItem key={item.id} data={item} />);
    }
    return results;
  }

  대규모 데이터셋을 처리할 때 for...of를 사용하면 메모리 사용을 제어하기 쉽습니다.

36장

• useState에서 배열 디스트럭처링을 사용하는 이유? (김민석)

  1. 간결성과 가독성:
  2. 이름 지정의 유연성:

  배열 디스트럭처링을 사용하면 상태 변수와 setter 함수의 이름을 자유롭게 지정할 수 있습니다.

  const [isLoading, setIsLoading] = useState(false);
  const [userInput, setUserInput] = useState('');

  1. 관례 준수
  2. 타입스크립트와의 호환성
  3. 다중 상태 관리의 일관성
  4. 코드 리팩토링 용이성

• 유사 배열 객체는 스프레드 연산자 적용이 안되고, 일반 객체는 되는 것인가? (김민정)

  이터러블 객체 → 이터러블하면 적용 가능

  일반객체 → 객체 스프레드 문법이 ECMAScript 2018 (ES9)에서 도입되었기 때문

  유사 배열 객체 - > 이터러블 x

  • Array.from()을 사용하여 배열로 변환한 후 스프레드 연산자를 사용할 수 있음

    이는 JavaScript의 스프레드 연산자가 기본적으로 이터러블 프로토콜을 따르기 때문

37장

• Map은 중복된 키를 갖는 요소가 존재하면 갚이 덮어써지는데, 객체는 어떠한가? (김민정)

  객체(Object)에서도 Map과 마찬가지로 중복된 키를 갖는 요소가 존재하면 값이 덮어씌워집니다. 이는 JavaScript 객체의 기본적인 동작 방식

[minjeongss]

33장

• symbol이 프로퍼티 키 충돌을 방지할 수 있다는데, 실제로 팀 협업 개발할때 어떤 식으로 사용하면서 충돌을 방지 하는지 (김주영)

  • 제 3의 스크립트에서 동일한 키를 가져, 의도치 않게 값이 덮어 쓰이는 문제 해결(충돌 해결)

    • 문제

    let user = { name: "John" };
    
    // 문자열 "id"를 사용해 식별자를 만들었습니다.
    user.id = "스크립트 id 값";
    
    // 만약 제3의 스크립트가 우리 스크립트와 동일하게 문자열 "id"를 이용해 식별자를 만들었다면...
    
    user.id = "제3 스크립트 id 값"
    // 의도치 않게 값이 덮어 쓰여서 우리가 만든 식별자는 무의미해집니다.

    • 해결

    let user = { // 서드파티 코드에서 가져온 객체
      name: "John"
    };
    
    let id = Symbol("id");
    
    user[id] = 1;
    
    alert( user[id] ); // 심볼을 키로 사용해 데이터에 접근할 수 있습니다.

34장

• for…of 문과 for문과 forEach 문을 이용하여 배열을 펼치는데, 각각 어떤 경우에 사용하는게 좋은지 (알고리즘 문제 풀이 관점에서?) (김주영)
  • for: 속도가 중요하거나, 인덱스 처리가 필요한 경우
  • for…of: 배열 값을 직접 다루는 경우
  • forEach: 모든 요소를 간단하게 처리하는 경우, 단 반복문 제어가 필요한 경우는 사용 불가능
• 리액트에서 map 반복문을 많이 사용한다고 알고 있는데, for..of문도 간혹사용한다고 알고 있습니다 for...of문을 사용하면 좋은 경우가 궁금합니다. (조천산)
  • for…of 반복문: 컬렉션 전용 반복 구문이며, [Symbol.iterator] 속성 필수
    • 매 반복마다 배열 상태가 업데이트되어, 배열의 요소 개수가 늘어나는 경우 반복 횟수가 늘어남
    • 반복 횟수가 유동적으로 변경되며, break 또는 continue 사용 가능
  • map 메서드:
    • 반복이 시작될 때 반복 횟수가 미리 결정되어, break 또는 continue 사용 불가능

36장

• useState에서 배열 디스트럭처링을 사용하는 이유? (김민석)
  • 상태를 간편하게 관리할 수 있음
• 유사 배열 객체는 스프레드 연산자 적용이 안되고, 일반 객체는 되는 것인가? (김민정)
  • 유사 배열 객체: 스프레드 연산자 사용 불가능(이터러블이 아니기 때문)
    • Array.from() 또는 Array.prototype.slice.call() 사용하여 배열로 변환 필요
  • 일반 객체: 스프레드 연산자 사용 가능

37장

• Map은 중복된 키를 갖는 요소가 존재하면 값을 덮어 씌우는데, 객체는 어떠한가? (김민정)
  • 객체도 중복된 키를 갖는 요소가 존재하면, 값을 덮어 씌움
  • 단 Map은 순서가 있지만 일반 객체는 순서가 없음

[kimjuyoung78]

33장

symbol이 프로퍼티 키 충돌을 방지할 수 있다는데, 실제로 팀 협업 개발할때 어떤 식으로 사용하면서 충돌을 방지 하는지 (김주영)

• 라이브러리나 프레임워크 개발 시 내부용 프로퍼티 키로 사용
• 모듈 시스템에서 모듈 간 충돌 없는 상수 정의

34장

for…of 문과 for문과 forEach 문을 이용하여 배열을 순회하는데, 각각 어떤 경우에 사용하는게 좋은지 (알고리즘 문제 풀이 관점에서?) (김주영)

• for...of: 간단한 순회, break/continue 사용 가능 ➡️ 단순 순회가 필요할 때
• for: 인덱스가 필요하거나 복잡한 제어가 필요할 때 ➡️ 인덱스 조작이 필요하거나 성능이 중요할 때
• forEach: 단순 반복 작업, 함수형 프로그래밍 스타일 ➡️ 가독성이 중요하고 전체 순회가 필요할 때

리액트에서 map 반복문을 많이 사용한다고 알고 있는데, for..of문도 간혹사용한다고 알고 있습니다 for...of문을 사용하면 좋은 경우가 궁금합니다. (조천산)

• 비동기 작업이나 복잡한 로직이 필요할 때 유용하다.
  ➡️ 중첩된 반복문이 필요한 경우
  ➡️ break/continue를 사용해야 하는 경우

36장

useState에서 배열 디스트럭처링을 사용하는 이유? (김민석)

• 간결하고 읽기 쉬운 코드를 작성할 수 있다.
• 원하는 이름으로 변수를 할당할 수 있다.
• 필요한 요소만 추출 가능하다.

유사 배열 객체는 스프레드 연산자 적용이 안되고, 일반 객체는 되는 것인가? (김민정)

• 유사 배열 객체를 스프레드 하려면 먼저 배열로 변환해야 한다.
• 예시

const arrayLike = { 0: 'a', 1: 'b', length: 2 };
const arr = [...Array.from(arrayLike)]; // 가능

37장

Map은 중복된 키를 갖는 요소가 존재하면 값을 덮어씌우는데, 객체는 어떠한가? (김민정)

• Map: 중복된 키를 갖는 요소가 추가되면 값을 덮어쓴다.
• 객체 : 중복된 키를 사용하면 마지막으로 정의된 프로퍼티가 이전 프로퍼티를 덮어쓴다.
• 예시

const obj = { a: 1, a: 2 };
console.log(obj); // { a: 2 }

const map = new Map();
map.set('a', 1);
map.set('a', 2);
console.log(map); // Map(1) { 'a' => 2 }

두 가지 경우 모두 중복된 키의 마지막 값이 유지가 된다.

[se0kcess]

33장

• symbol이 프로퍼티 키 충돌을 방지할 수 있다는데, 실제로 팀 협업 개발할때 어떤 식으로 사용하면서 충돌을 방지 하는지 (김주영)
  • 고유 식별자로 사용
  • 프라이빗 프로퍼티와 유사한 효과
  • 플러그인 시스템에서의 사용 -> 다른 프로퍼티와 충돌할 위험이 없다
  • 팀 내에서 공유되는 상수를 정의할 때

34장

• for…of 문과 for문과 forEach 문을 이용하여 배열을 펼치는데, 각각 어떤 경우에 사용하는게 좋은지 (알고리즘 문제 풀이 관점에서?) (김주영)

  • for of 문
    • 배열의 요소에만 접근하고 싶을 때
    • break, continue 문을 사용해야 할 때
    • async/await와 함께 사용할 때
  • forEach 문
    • 함수형 프로그래밍 스타일을 선호할 때
    • 각 요소에 대해 부수 효과만 필요할 때 (반환값이 필요 없을 때)
    • 코드를 간결하게 유지하고 싶을 때

• 리액트에서 map 반복문을 많이 사용한다고 알고 있는데, for..of문도 간혹사용한다고 알고 있습니다 for...of문을 사용하면 좋은 경우가 궁금합니다. (조천산)

  • 비동기 작업 처리, 복잡한 조건부 로직, 대용량 데이터 처리, 이터러블 객체 처리등에 사용됨

36장

• useState에서 배열 디스트럭처링을 사용하는 이유? (김민석)

  • 상태 변수와 설정 함수에 원하는 이름을 자유롭게 지정하여 코드의 의미를 더 명확하게 만듦
  • 여러 개의 useState를 사용할 때, 배열 디스트럭처링을 통해 각 상태를 쉽게 구분하고 관리할 수 있음
  • 배열 디스트럭처링은 타입 추론과 호환성이 좋음

• 유사 배열 객체는 스프레드 연산자 적용이 안되고, 일반 객체는 되는 것인가? (김민정)

  • 유사 배열 객체는 기본적으로 스프레드 연산자를 직접 사용할 수 없다. 이는 유사 배열 객체가 이터러블이 아니기 때문
  • 유사 배열 객체를 배열로 변환한 후에는 스프레드 연산자를 사용 가능
  • 일반 객체: ES2018 이후 스프레드 가능
  • 이터러블 객체: 직접 스프레드 가능

37장

• Map은 중복된 키를 갖는 요소가 존재하면 값을 덮어씌우는데, 객체는 어떠한가? (김민정)
  • 객체도 Map과 마찬가지로 중복된 키를 갖는 요소가 존재하면 값을 덮어씌움
  • 객체에서 키는 고유해야 하며, 동일한 키로 값을 할당하면 이전 값은 새로운 값으로 대체됨

[shlee9999]

33장

• symbol이 프로퍼티 키 충돌을 방지할 수 있다는데, 실제로 팀 협업 개발할때 어떤 식으로 사용하면서 충돌을 방지 하는지 (김주영)

  Symbol은 JavaScript에서 유일한 값을 생성하는 데 사용되며, 객체의 프로퍼티 키로 사용할 수 있습니다. 팀 협업 개발 시, Symbol을 사용하면 다음과 같은 방식으로 프로퍼티 키 충돌을 방지할 수 있습니다:

  • 고유한 프로퍼티 생성: Symbol은 항상 고유하므로, 다른 코드나 라이브러리에서 동일한 이름의 프로퍼티를 사용할 경우에도 충돌을 피할 수 있습니다. 예를 들어, const uniqueKey = Symbol('description');과 같이 사용하여 객체에 고유한 프로퍼티를 추가할 수 있습니다.
  • 라이브러리와의 통합: 여러 개발자가 동일한 객체를 확장하거나 수정해야 할 때, Symbol을 사용하면 각자의 기능이 서로 간섭하지 않도록 보장할 수 있습니다.
  • 내부 구현 숨기기: 외부에서 접근하지 않아야 하는 내부 메서드나 데이터를 숨길 때 Symbol을 사용하여 외부 접근을 어렵게 만들 수 있습니다.

  이러한 방식으로 Symbol을 활용하면 코드의 모듈성과 안전성을 높이고, 예기치 않은 충돌을 방지할 수 있습니다.

34장

• for…of 문과 for문과 forEach 문을 이용하여 배열을 순회하는데, 각각 어떤 경우에 사용하는게 좋은지 (알고리즘 문제 풀이 관점에서?) (김주영)
  • 만약 배열을 순회하면서 배열 내부의 index에 영향을 줄 때(대표적으로 삭제할 때)는 항상 일반 for문을 사용해야 합니다. 3번째 값을 지웠다면, 4번째 값이 3번째 값으로 땡겨지므로 i—를 해서 한번 돌아와야 되기 때문이죠. 또는 배열의 요소에 원래 값이 아닌 다른 값을 할당할 때 for문을 사용합니다.
  • for … of 문은 for문 만큼 정말 자주 씁니다. 가독성이 좋기 때문인데, 뭔가 for문으로 보는게 복잡하다고 느껴질 때 사용합니다.
• 리액트에서 map 반복문을 많이 사용한다고 알고 있는데, for..of문도 간혹사용한다고 알고 있습니다 for...of문을 사용하면 좋은 경우가 궁금합니다. (조천산)
  • 리액트에서 map은 주로 컴포넌트를 나열할때 사용하고, for … of는 로직을 처리할 때 사용하는 것으로 알고 있습니다. 복잡한 로직을 짤 때 map을 사용하지는 않습니다. map은 항상 원본 배열과 동일한 길이의 배열을 반환하는데, 그저 로직만 짠다면 이는 필요 없기 때문입니다.

36장

• useState에서 배열 디스트럭처링을 사용하는 이유? (김민석)
  • 객체 디스트럭처링에 비해 네이밍이 자유롭고, 고로 간결하기 때문입니다.
• 유사 배열 객체는 스프레드 연산자 적용이 안되고, 일반 객체는 되는 것인가? (김민정)
  • 유사 배열 객체도 됩니다. 다만 유사 배열 객체는 배열 메서드를 사용할 수 없어요. querySelectorAll로 받아온 NodeList가 대표적인 유사 배열 객체입니다. 유사 배열 객체에서 배열 메서드를 사용하고 싶다면, 스프레드 연산자로 풀어주고 대괄호로 묶어야 합니다.

37장

• Map은 중복된 키를 갖는 요소가 존재하면 값을 덮어씌우는데, 객체는 어떠한가? (김민정)
  • 객체도 마찬가지로 중복된 키를 갖는 요소가 존재한다면 덮어씌웁니다. 다만 그 프로퍼티의 프로퍼티 어트리뷰트 [[Writable]]의 값이 true여야 겠죠.