바닐라코딩 프렙 1~2주차 근황 및 최근 학습

드디어 시작된 바닐라코딩 프렙을 맞이하여 최근 근황과 함께 일상포스팅을 하려고 한다.

 

[1] 과제를 진행하며 처음으로 코드리뷰를 받아봄
 상세한 내용은 아마.. 공유하면 안되는걸로 알아서 리뷰 받으면서 개선했던 점과 참고 했던 자료들을 이야기해볼까 합니다. 로대시에서 주로 사용하는 reduce를 포함한 매소드를 직접 구현해 보면서 코드를 구성하였습니다.

 1. 컨벤션 관련

 - if 1 줄에서 되도록 생략하지 않기

-> 생략해도 되지만 가독성 및 미스방지를 위해서는 집어넣기로 하고 꾸준히 버릇 수정중

 

 - 문맥이 바뀔 땐 공백 삽입하기

-> 아직 문맥이 했갈리지만 for if 등 연결된 구문 이외에 엔터를 추가하니 훨신 가독성이 개선됨을 느꼇습니다.

 - git commit 시 정해진 규칙에 따라하기

-> https://overcome-the-limits.tistory.com/entry/협업-협업을-위한-기본적인-git-커밋컨벤션-설정하기

[협업] 협업을 위한 git 커밋컨벤션 설정하기

해당 글을 보면서 많은것을 느꼇습니다. 일단 git commit등에서 내용은 생략하는 경우가 많아서 제목만이라도 깔끔하게 작성하려고 참고하면서 작성하는 중입니다. (특히 이모지.. 이모지.. 이모지!!)

 

그 와중에 2번째는 대문자를 첫글자로 하지못한 나의 성급함..

 2. 리팩토링

-> 주로 신경썻던 부분은 중복되는 변수를 줄이고 this , return , 재귀 등을 활용하는 방법을 익혀보고 있습니다. 아무래도 잘 안사용하다 보니 익숙하지 않은점은 차차 개선 될 꺼라고 믿습니다.

 3. 비교 연산자 사용 시 특별한 경우가 아니면 === 사용하기

->

출처 - https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Expressions_and_Operators

특별한 경우가 아니면 타입까지 일치시키는 ===로 통일하도록 정했습니다.

 

 4. const를 메인 으로 사용하고 필요에 따라 let과 var를 활용하기 (함수 안 , for...in 문 등)
-> 이부분은 아직도 가끔씩 했갈리지만 가장 큰틀은 기본 const를 사용하고 값이 변환되는 경우 let을 사용 , var는 사용하지 말고 미사용으로 작동이 안된다면 다른 방법을 찾도록 하고 있습니다.

 

 

[2] reduce를 배우면서 느낀 여러가지

 

 세상에 이런 놀라운 구문이 있다는걸 처음 깨달았습니다. 심지어 구현도 해봤지만 아직도 구문을 해석하다 보면 머리가 멍합니다.

 

https://jo-c.tistory.com/54

[JavaScript] reduce 활용하기

https://miracleground.tistory.com/entry/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%ED%95%A8%EC%88%98%EA%B5%AC%ED%98%84filteruniqeachmapreduce

자바스크립트_기본 함수 구현하기(_.filter, _.uniq, _.each,_.map, _.reduce)

 

교육하면서 참고가 된 사이트를 링크합니다. 평소에 여러 메소드를 전혀 사용하지 않는 바닐라 자바스크립트만 사용하던 차에 활용하면 활용도가 매우 올라갈 것 같았습니다.

5번정도 봤는데도 아직 이해가 안가서 함수를 볼 때마다 다시 켜보고 있습니다.

특히 활용도에 주목한것은 reduce와 indexOf 그리고 map과 each 였습니다. 이부분은 나중에 다시 복습할 예정입니다.

 

 

[3] 알고리즘 공부의 시작

 

https://www.inflearn.com/course/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%95%8C%EA%B3%A0%EB%A6%AC%EC%A6%98-%EB%AC%B8%EC%A0%9C%ED%92%80%EC%9D%B4

자바스크립트 알고리즘 문제풀이(코딩테스트 대비) - 인프런 | 강의

챕터 10까지 구성되 있고 챕터 3까지 진행중입니다.

특히 요주의로 봤던 내용은 평소에 사용하지 않던 메소드.. 그리고 발상의 전환이라고 생각합니다.

 

1. .replace()

.replace(/[^A-Za-z0-9-]/g, "")

마법과도 같은 영단어 및 숫자와 -을 제외한 모든 단어를 string내에서 지워줍니다.
g -> 전체 모든 문자열의 변경

"" -> 변화하는 대상이며 내용이 없음으로 지워줍니다.

 

2. .toLowerCase() , .toUpperCase()

.toLowerCase() // 모두 소문자로 변경
.toUpperCase() // 모두 대문자로 변경

 

3. Number.MAX_SAFE_INTEGER; , Number.MIN_SAFE_INTEGER;

let max = Number.MAX_SAFE_INTEGER; // 최대 상수
let min = Number.MIN_SAFE_INTEGER; // 최소 상수

 

4. Math.floor, Math.round

Math.floor( 45.95); //  45
Math.floor( 45.05); //  45
Math.floor(  4   ); //   4
Math.floor(-45.05); // -46
Math.floor(-45.95); // -46

Math.round( 20.49); //  20
Math.round( 20.5 ); //  21
Math.round( 42   ); //  42
Math.round(-20.5 ); // -20
Math.round(-20.51); // -21

Math.floor는 내림값을 , Math.round는 반올림값을 반영합니다. 실사용은 둘중 하나만 사용해도 유용할 것 같습니다.

 

 

[4] 문뜩 들었던 코드의 최적화에 대하여

 

 for 구문을 사용하여 알고리즘을 구성중에 문득 for을 사용하는게 맞나 싶어서 여러가지 방법에 대해 고민하게 되었습니다. (for..in , for..of , foreach , .filter , .reduce 등등)

 

https://develogger.kro.kr/blog/LKHcoding/66

[JavaScript] 반복문 (for, forEach 등)의 종류와 퍼포먼스 비교

결론은 그냥 평소 쓰던데로 for 문을 사용할 수 있다면 되도록 for문을 사용하는게 맞다고 생각했습니다.

가독성을 위해서 foreach도 고려할 대상이라고 생각됩니다.

 

Object(객체)의 경우 for...in

Collection(콜랙션)의 경우 for...of

배열에서 콜백함수를 사용하다면 foreach를 사용

 

참고로 콜랙션의 경우 배열을 포함한 컨테이너로

 

https://velog.io/@yesdoing/JavaScript-Collections

입니다.

 

 

[5] for문의 속도개선

 

이부분은 4번에 대해서 찾아보다가 추가적으로 안 부분인데 참고하기 위해 기술합니다.

 

const str = "aaaaa";
for (let i = 0; i < str.length; i++) {
	console.log(str[i]);
}

순서대로 a a a a a를 출력하는 for 문입니다. 이 함수를 3단계의 과정을 통해 최적화 할 수 있습니다.

 

const str = "aaaaa";
const n = str.length;
for (let i = 0; i < n; i++) {
	console.log(str[i]);
}

// 에서 조금 더 개선시키려면

const str = "aaaaa";
for (let i = 0 , n = str.length; i < n; i++) {
	console.log(str[i]);
}

str.length라는 메소드에 단 한번만 접근하게 됨으로 코드 속도가 개선됩니다.

 

const str = "aaaaa";
for (let i = str.length; i--;) {
	console.log(str[i]);
}

 극한의 효율을 추구하면 이런 코드로도 구성 가능합니다. 단 이경우 str[4]부터 str[0]까지 선언되는 방식임으로 역순으로 배열됩니다. 오히려 역순으로 해야 하는 경우에 더욱 유용하게 사용가능합니다.

 

이부분은 그냥 흥미삼아 찾아본 부분이지만 n에 길이를 배정하는 방법은 차후에도 유용하게 사용될 거 같습니다.