잠깐! 시작하기 전에
이 글은 wecode에서 실제 공부하고(이제 사전 스터디는 아닙니다.), 이해한 내용들을 적는 글입니다. 글의 표현과는 달리 어쩌면 실무와는 전혀 상관이 없는 글일 수 있습니다.
또한 해당 글은 다양한 자료들과 작성자 지식이 합성된 글입니다. 따라서 원문의 포스팅들이 틀린 정보이거나, 해당 개념에 대한 작성자의 이해가 부족할 수 있습니다.
설명하듯 적는게 습관이라 권위자 발톱만큼의 향기가 조금은 날 수 있으나, 엄연히 학생입니다. 따라서 하나의 참고자료로 활용하시길 바랍니다.
글의 내용과 다른 정보나 견해의 차이가 있을 수 있습니다.
이럴 때, 해당 부분을 언급하셔서 제가 더 공부할 수 있는 기회를 제공해주시면 감사할 것 같습니다.
서론
이번 글은 제가 공부하며 주의깊게 본 적 없던 것들에 대한 내용입니다.
따라서, 포스팅 방향이 뒤죽박죽일 수 있습니다.
무슨 의미였는지 정확히 몰랐던 것 혹은 처음 사용해본 것들에 대해 적어보겠습니다.
1. String, Number 교차연산
String과 Number 사이에 + 연산을 사용할 경우, String 형으로 변환됩니다.
반대로 String, Number 사이에 - 연산자를 사용할 경우, 해당 결과값은 Number type이 됩니다.
let string = "22";
let num = 2;
console.log(string - num);
console.log(string + num);
위 코드를 실행시켜보면 실제로 볼 수 있습니다.
2. ===, ==
엄격한 비교를 위해서는 === 연산자를 사용하는게 좋습니다.
== 연산자의 경우 비교를 위해 해당 데이터들의 자료형을 변경하기 때문입니다.
따라서, 조건을 엄격하게 정하고 싶다면 === 연산자를 활용합시다.
3. 10진수 표현(Number, String)
앞의 0이 있는 숫자값은 뒷 숫자만 할당됩니다.
수 표기를 01, 02 등과 같이 하는 방법은 10진 기수법을 위반하기 때문이죠.
그런데 때로는 전화번호를 다룰 일이 있을지도 모르겠습니다.
010-1234-5678 형식의 번호를
01012345678 와 같이 저장해둔 데이터가 있다고 생각합시다.
해당 전화번호를 온전히 표시하고 싶다면 String형으로 저장해야합니다.
또한 String은 length 메서드를 사용할 수 있는 자료형입니다.
다음 정리에서 보다 더 다뤄봅시다.
4. indexOf
String의 경우 indexOf 메서드를 사용할 수 있습니다.
문자열 적용이 가능한 이 메서드의 경우 문자열 내에서 사전에 설정한 문자열이 포함되어있는지 찾아낸 뒤, 결과값을 -1(없음) or index num(주소, 일종의 좌표개념) 의 형태로 반환합니다.
indexOf는 단일로 사용될 경우 큰 힘을 가지지는 않습니다.
그러나 .slice() 등의 메서드와 활용할 경우 입력값의 필터링이 가능한 하나의 함수를 만들어내는 것이 가능합니다.
제가 배워온 공학에서 필터링은 특정 결과물을 얻기 위한 필수과정이었습니다.
프론트 개발을 하다 보면, 앞으로도 다양한 필터를 만들 수 있지 않을까 생각합니다.
벌써 기대되네요.
예시입니다.
만약 우리가 특정 주소를 받았을 때, 도 혹은 시에 해당하는 지명만을 빼고 싶다고 생각해봅시다.
해당 코드에서는 시에 해당하는 주소를 제거해보겠습니다.
단, input은 고정된 형태가 아닐 수 있으니, 한 번 고민해봅시다.
// input은 기본적으로 String이지만, 상당히 다양할 수 있습니다.
// (input 예시)
// "경기도 성남시 분당구 중앙공원로 53"
// "충청남도 당진시 신평면 거산3거리길 12-34" 라던지
// 서울특별시, 제주특별자치도 서귀포시, ~~광역시 등등으로요.
function sliceCityFromAddress(address) {
let region = address.indexOf("도");
let city = address.indexOf("시");
let arr = [], sliceCityArr = [];
if(region !==-1 && city !== -1){
arr.push(address.slice(0,region+1));
arr.push(address.slice(region+1, city+1));
arr.push(address.slice(city+1, address.length));
sliceCityArr = arr[0] + arr[2];
}
else if (region === -1 && city !== -1){
arr.push(address.slice(0, city + 2));
arr.push(address.slice(city + 2, address.length));
sliceCityArr = arr[1];
}
else {
console.log("정확한 주소를 입력해주세요.");
}
return sliceCityArr
}
와 같은 코드를 작성할 수 있었습니다.
대한민국에는 다양한 자치도가 존재하고, 해당 도나 시의 길이(length)값은 고유한데다 서로 다릅니다.
또한, 문자열 사이 공백을 일정한 패턴으로 바꾸어 저장해야 하는 상황은 아니기 때문에 저는 그대로 출력하되, 원하는 "시"에 해당하는 지명을 제거하는 것에 초점을 맞췄습니다.
해당 코드를 다음에 다시 작성한다면 보다 더 다양한 조건을 집어넣고 해결해보고 싶다는 생각이 들었습니다.
5. Date()
거의 사용해본 적 없던 것 같아 코드로만 적어두겠습니다.
날짜에 해당하는 데이터를 사용할 페이지를 만들어본 적 없었던 것 같네요.
크게 어려운 부분은 없지만, 활용에 있어 까다로운 점이 좀 있습니다.
이는 많이 사용하면 익숙해질거라 생각합니다.
function getWesternAge(birthday) {
const now = new Date();
const year = now.getFullYear() - birthday.getFullYear();
if(now.getMonth() + 1 > birthday.getMonth() + 1){
return year
}
else {
let month = now.getMonth() + 1;
console.log(month);
return year - 1
}
}해당 코드는 서양권에서 사용하는 "만"나이 계산입니다.
6. Math.random()
이것도 잘 사용할 일이 없어서 적어두었네요.
랜덤함수는 앞으로 사용할 일이 좀 있지 않을까 합니다.
예를 들면, 포트폴리오 페이지의 첫 화면을 고정적으로 두지 않고 싶을 때 사용하지 않을까 싶습니다.
우선은 코드 정도로 적어두겠습니다.
function getRandomNumber (min, max) {
let rand_num = Math.random();
let inner_rand_num = ((max - min) * rand_num) + min;
return inner_rand_num
}해당 코드는 전달받은 두 수 범위 사이의 난수를 생성하는 코드입니다.
8. map(), forEach()
오랜만에 사용해본 메서드라 다시 한 번 생각하라는 의미로 노트에 적어두었습니다.
아무래도 map(), forEach(), 둘을 깊게 이해하기 위해서는 따로 정리해보는 시간이 필요하지 않을까 생각하고 있습니다.
정리되는 대로 다른 포스팅에 작성하고, 현재 글에도 링크를 걸어두겠습니다.
마치며
Javascript는 크게 노트해둔 내용이 없는 것 같습니다.
아무래도 처음 사용해본 메서드에 대해 구구절절 정리하는 행위 자체가 큰 의미가 있나 싶기도 했던 것 같고, 지금의 저한테 Javascript는 더 아름다운 코드를 작성할 수 있는 능력이 중요하다고 생각합니다.
따라서 추후 공부한 다음 이전에 작성했던 코드나 로직을 보며 셀프 코드리뷰, 리팩토링을 한 번 해보는게 더 남을 것 같습니다.
그리고 매번 메서드를 검색하기보다 직접 필요한 기능들을 조건문과 반복문으로 돌려서 사용했었는데, 그런 습관을 빨리 버려야겠습니다.
또 어디서 주워들은 말이지만, 굳이 코딩이 필요하지 않은 부분을 코딩하는 것은 비효율적인 일이다. 라는 말이 갑자기 떠오르네요.
앞으로는 구현보다 검색을 위주로, 더 빨리 원하는 무언가를 구글에서 찾는 능력을 길러야겠습니다.
그럼 이만 마치겠습니다.
읽어주셔서 감사합니다.
