[WIL] 프로그래밍 기초 주차 마무리

이현동·2023년 2월 6일

WIL

목록 보기

4/9

프로그래밍 기초 주차

이번 주에는 프로그래밍 기초주차로 JavaScript의 문법을 사용해서 많은 알고리즘 문제를 풀어봤다. 처음에는 확실히 문제에 접근하는 방법조차 막막하고 어떤 방법을 써야할지 잘 몰라서 막막했는데 프로그래머스 문제를 0단계부터 차근차근 풀다보니 어느새 익숙해져 있는 나를 볼 수 있었다. 아직은 0~1단계를 풀고 있지만 감 잡아놓은 걸 놓치기 싫어서 꾸준히 한문제씩이라도 풀어보려고 한다.. 😖

map, filter, reduce, forEach

JavaScript로 문제를 풀면서 처음에는 for문을 이용해서 많이 풀었지만 익숙해지면서 조금씩 내장함수를 사용해봤다. 자주 사용했던(?) 그리고 React를 배우면서 자주 사용하게 될 것 같은 내장함수들을 따로 정리해보려고 한다.

map()

map 함수는 콜백함수를 실행한 결과를 가지고 새로운 배열을 만들 때 사용한다. 이때 원본 배열은 수정되지 않는다.

사용 예

const array1 = [1, 4, 9, 16];

// Pass a function to map
const map1 = array1.map(x => x * 2);

console.log(array1);
// 출력: [1, 4, 9, 16]

console.log(map1); // 새로운 배열 출력
// 출력: Array [2, 8, 18, 32]

filter()

주어진 콜백함수의 테스트(조건)를 통과하는 모든 요소를 모아서 새로운 배열로 반환합니다. 함수 메서드의 이름대로 filtering 합니다.

사용 예

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter(word => word.length > 6); // 문자열의 길이가 6초과인 값만 배열에 담음

console.log(result);
// 출력: Array ["exuberant", "destruction", "present"]

reduce()

배열의 각 요소에 대해 주어진 리두서 (reducer) 함수를 실행하고 하나의 결과값을 반환합니다.
즉, reduce 함수는 배열의 요소들을 하나씩 돌면서, 이전 콜백의 리턴 값을 넘겨받아 작업을 수행하는 메서드이다.

사용 예

const array1 = [1, 2, 3, 4];

// 0 + 1 + 2 + 3 + 4
const initialValue = 0;
const sumWithInitial = array1.reduce(
  (accumulator, currentValue) => accumulator + currentValue,
  initialValue
);

console.log(sumWithInitial);
// 출력: 10

코딩테스트를 풀면서 reduce는 거의 배열의 요소들을 합할 때 사용한 것 같다. 근데 엄청 다양하게 활용이 가능하다고 해서 사용 예를 조금 더 찾아봤다.

1. object 배열 활용

let initialValue = 0

let sum = [{x: 1}, {x: 2}, {x: 3}]
sum.reduce(function (tot, el) {
    return tot + el.x
}, initialValue)

console.log(sum) // 6

2. 같은 property를 가진 object 배열을 그룹핑

//그룹핑
let people = [
  { name: 'Alice', age: 21 },
  { name: 'Max', age: 20 },
  { name: 'Jane', age: 20 }
];

function groupBy(objectArray, property) {
  return objectArray.reduce(function (acc, obj) {
    let key = obj[property]
    if (!acc[key]) {
      acc[key] = []
    }
    acc[key].push(obj)
    return acc
  }, {})
}

let groupedPeople = groupBy(people, 'age')
// groupedPeople is:
// { 
//   20: [
//     { name: 'Max', age: 20 }, 
//     { name: 'Jane', age: 20 }
//   ], 
//   21: [{ name: 'Alice', age: 21 }] 
// }

3. 카운팅

//카운팅
let names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice']

let countedNames = names.reduce(function (allNames, name) { 
  if (name in allNames) {
    allNames[name]++
  }
  else {
    allNames[name] = 1
  }
  return allNames
}, {})
// countedNames is:
// { 'Alice': 2, 'Bob': 1, 'Tiff': 1, 'Bruce': 1 }

forEach()

주어진 함수를 배열 요소 각각에 대해 실행합니다. 이때, 새로운 배열을 반환하지는 않습니다.

사용 예

const array1 = ['a', 'b', 'c'];

array1.forEach(element => console.log(element));

// 출력: "a"
// 출력: "b"
// 출력: "c"

콜백함수

위에서 정리한 내장함수들은 모두 콜백함수를 사용한다.
콜백함수란 함수를 활용하는 방법 중 하나로 정확하게는 파라미터로 전달받은 함수를 말한다.
파라미터로 콜백함수를 전달받고 함수 내부에서 필요할 때 콜백함수를 호출할 수 있다.
콜백함수 정리

장 단점

장점

함수를 인자로 받기 때문에 필ㄹ요에 따라 함수의 정의를 달리해 전달할 수 있음
= 함수를 굳이 정의하지 않고 익명 함수로도 전달이 가능

단점

콜백함수를 남용하면 코드의 가독성이 떨어짐 (콜백지옥)
에러 처리가 어려움

HTTP

웹 개발자라면 HTTP를 많이 사용한다. 그래서 HTTP에 대해서 잘 알고 있어야한다고 한다. 특히, 프론트엔드 개발자라면 기본적인 것은 필수라고 한다..!

정의

HTTP(Hyper Text Transfer Protocol)란 인터넷이서 데이터를 주고받을 수 있는 프로토콜이다. 프로토콜은 규칙이라고 생각하면되고, 이 규칙에 맞춰 개발해 서로 정보를 교환할 수 있는 것이다.
HTTP는 웹에서 이루어지는 모든 데이터 교환의 기초이며, 클라이언트-서버 프로토콜이기도 합니다. 클라이언트-서버 프로토콜이란 (보통 웹브라우저인) 수신자 측에 의해 요청이 초기화되는 프로토콜을 의미합니다. 하나의 완전한 문서는 텍스트, 레이아웃 설명, 이미지, 비디오, 스크립트 등 불러온(fetched) 하위 문서들로 재구성됩니다.

클라이언트와 서버들은 (데이터 스트림과 대조적으로) 개별적인 메시지 교환에 의해 통신합니다. 보통 브라우저인 클라이언트에 의해 전송되는 메시지를 요청(requests)이라고 부르며, 그에 대해 서버에서 응답으로 전송되는 메시지를 응답(responses)이라고 부릅니다.