프로그래머스 데브코스 14일차 with. TS 웹 풀스택

📚요약

지난 시간에 json을 가지고 데이터를 넘겨주는 실습을 했었습니다. 이번 시간에는 데이터의 자료형에 대해 살펴보고, Express.js에서 쿼리 스트링을 이용하는 방법을 배워보겠습니다. 그 외에 JS에 대한 내용과 네이밍 규칙을 알아보겠습니다.

 

📖JS

📄형 변환(String → Number)

지난 시간 params 실습을 진행할 때 느꼈을 수 있는 이상한 부분은 이번 시간에 해결하고 넘어가겠습니다. 지난 시간 화면을 가져오겠습니다.

params 실습 결과 화면

지난 시간 화면을 보면 num에 값이 '1'이 들어가 있는 것을 볼 수 있습니다. 하지만 저 값은 수(Number)가 아닌 문자열(String) 형태입니다. 

'localhost:1234/products/1'에 extension을 사용한 결과 화면

지난 시간 다른 결과 화면을 보면 20000이라는 숫자가 다른 모양인 것을 볼 수 있습니다. 이를 해결하기 위해 사용할 수 있는 방법이 형 변환입니다. 말 그대로 자료형을 변환 시킨다는 의미입니다. 다양하게 자료형을 변환시킬 수 있는 방법이 있지만 여기서는 문자열에서 숫자로 바꾸는 코드만 알고 넘어가겠습니다.

🍯tip! Javascript에서 자료형을 알기 위해서는 typeof 키워드를 사용하면 됩니다.

 

let strNum = '123';

console.log(typeof strNum);

// 1. Number()
console.log(typeof Number(strNum));

// 2. parseInt()
console.log(typeof parseInt(strNum));

// 3. + 연산자 기호
// 간단하게 사용할 수 있는 방법이지만 다른 사람과의 공유되는 코드에서는 지양하는 것이 좋다
console.log(typeof +strNum);

 

📄구조 분해 할당(Destructuring, 비구조화)

JS에서 사용하면 너무나 편리한 기능을 설명하고 넘어가겠습니다.

구조 분해 할당이란 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 Javascript의 표현식

△구조 분해 할당-MDN

구조 분해 할당을 통해 객체나 배열의 요소에 좀 더 쉽게 접근할 수 있습니다. 배열의 경우 index를 통한 접근이 아닌 직접 변수명을 바로 붙여 사용할 수 있고, 객체의 경우 내부에 있는 키 이름을 통해 바로 사용할 수 있습니다.

// 배열의 경우
const Arr = [1,2,3,4,5];
let [index1, index2, , ...rest] = Arr;

console.log(index1); // 첫 번째 요소 가져오기 // 1
console.log(index2); // 두 번째 요소 가져오기 // 2
console.log(rest); // 네 번째, 다섯 번째 요소 가져오기 //[4,5]

index1 = 15;

console.log(index1); // 15
console.log(Arr); // [1,2,3,4,5]

// 객체의 경우
const Obj = { title:'title', author:'author', price:'price'}
let {title, price} = Obj;

console.log(title); // title
console.log(Obj.author); // author
console.log(price); // price

title = 'best';

console.log(title); // best
console.log(Obj.title); // title

위의 코드 이외에도 더 많은 방법들이 존재합니다.

 

📄Map

JS의 Map은 키-값을 사용해 데이터를 저장합니다. Object로 키-값으로 데이터를 저장하는데 왜 이름이 다를까요? 둘의 차이점을 알아보겠습니다.

Map과 Object의 차이점

• 키(key)
  • Object의 경우 integer, string, symbols와 같은 단순한 유형이어야 한다. 결과적으로 사용되는 타입은 String이다.
  • Map의 경우 어떠한 데이터 유형도 가능하다.
• 요소 순서
  • Map에서는 기존 요소들의 순서가 보존되지만 Object는 그렇지 않다.

// Object
const obj = {
  key : 'value'
};
// get
console.log(obj.key); // value
console.log(obj['key']); // value
// set
obj['newkey'] = 'newvalue';
obj.newkey = 'newvalue';

// Map
const map = new Map([['key','value']]);

console.log(map.get('key')); // value

map.set('newkey','newvalue');

// 둘의 차이점
obj[1] = 'one';
obj['1'] = 'oneStr';

console.log(obj['1']); // oneStr

map.set(1,'one');
map.set('1','oneStr');

console.log(map.get(1)); // one
console.log(map.get('1')); // oneStr

Map과 Object 중 무엇을 사용할지 고민하는 경우 다음을 참고해봅시다.

1. 각 개별 요소에 대해 적용해야 하는 로직이 있는 경우 Object 사용
2. 실행 시까지 키를 알 수 없고, 모든 키가 동일한 type이며 모든 값들이 동일한 type일 경우 Map 사용

 

📖쿼리 스트링(Query String) in Express.js

지난 시간에 req의 params를 이용해 param이름을 통해 주소에서 값을 가져왔습니다. 오늘은 '?키=값&키=값'의 형태로 나오는 쿼리 스트링으로 가져오겠습니다.

app.get("/query", function (req, res) {
  const query = req.query;

  console.log(query); // {key: value}
});

req의 query를 이용하면 'http://localhost:1234/query?v=1234'로 요청을 보내게 되면 위의 코드를 통해 처리하게 되는데, 이때 '?'이후의 키 값을 가져와서 사용할 수 있게 됩니다.

 

params와 query의 차이는 단순하게 생각해서 키-값으로 구부하는 일이 필요하면 query를 사용하고 그 외에는 params로 사용하면 될 듯합니다.

 

📖네이밍 규칙

파일, 변수, 폴더, 함수 등 이름이 필요한 곳이 많습니다. 그런데 이 이름들이 통일성이 없고 본인이 원하는 대로 만들어지면 어떻게 될까요? 찾으려고 하는 것을 찾기 힘들뿐더러 하나의 파일을 읽기도 힘들 겁니다. 그렇기에 네이밍 규칙이라는 것이 있습니다.

• camelCase : 두 번째 이상의 단어는 첫 글자를 대문자로 사용한다.
• PascalCase : camelCase에서 첫 번째 단어의 첫 글자도 대문자로 사용한다.
• snake_case : _(언더바)를 이용해 단어를 구분한다.
• kebab-case : -(하이픈)을 이용해 단어를 구분한다.

이 외에도 많은 규칙들이 존재합니다. 규칙들을 찾아 사용해 보는 것도 좋고, 팀의 규칙을 만들어서 사용하는 것도 좋지만 가장 중요한 것은 통일성이 있어야 한다는 것을 잊지 말아야 합니다.

 

다음 시간에 계속...

 

출처 & 참고

김송아 강사님의 강의

Map vs Object 비교[번역], 맨땅에코딩, 2024.04.25

키 기반 컬렉션, MDN, 2024.04.25

Naming convention, 위키백과, 2024.04.25