전체 글

[JavaScript][clean-code] 전역 변수 사용 최소화

* 전역공간이 무엇일까? - 최상위 공간이 바로 전역공간이다. 브라우저에서는 Window가 최상위 공간 node에서는 Global이 최상위 공간 위 둘이 크게 다른것은 없다. * 전역공간을 너무 더럽히지 말자 - 이유는?? 어디서나 접근이 가능하게 된다. 사람이 생각하기에는 분리가 되었지만 런타임 환경에서는 분리가 되어있지않다. (위험하다) 다른 코드에도 영향을 주어 부작용을 발생시킬 수 있다. https://latte1114.tistory.com/497 (몽키패치 내용 참조) 파일을 나누어서 사용하였지만 다른 파일에서도 전역으로 설정한 변수가 읽힌다. 따라서 코드가 겹칠수도있다. 하지만 error은 발생하지 않아서 어디서 문제가 생긴건지 확인이 힘들다. - 어떤 방법이 좋은방법일까? 전역변수를 애초에 ..

[JavaScript][clean-code] var를 지양하자

* var를 사용을 지양하자. - let, const를 사용하자 * 왜 let, const를 사용해야 할까?? 1. Scope (핵심) var : 함수 스코프 let, const : 블록 스코프, Temporal Dead Zone(TDZ)속성을 가지고있음 더 안전하다. TDZ : 변수 선언 전에 변수를 호출 할경우 reference error 가 발생하는데 이때 tdz 에 걸렸다고 표현 2. 재선언, 재할당 var : 재선언, 재할당이 가능하다. 중복선언도 가능하다. 따라서 코드가 길어지면 어떤값이 선언된건지 어떤값이 호출될지 예상이 되지않는다. let : 재선언 불가능, 재할당은 가능 따라서 안전하게 사용 가능 const : 재선언 및 재할당이 되지않음 * code로 확인하는 scope의 차이 * va..

[JavaScript][clean-code] 클린코드 리뷰 지적 사항

* JavaScript - 해당 내용을 code review에서 지적받은 사항을 정리하여 놓은 내역입니다. 1. DRY(making function) DRY 원칙, 즉 “반복하지 마라(Don't Repeat Yourself)”라는 말 역시 좋은 소프트웨어 개발 습관의 근원이라 할 만하다. “모든 지식 조각은 딱 한 번만 나와야 한다" 2. Early return early return이란, return을 빨리 해버려서 뒷 코드의 구조를 단순하게 만들어주는 패턴이다. 정확히는 else를 제거하는것이 목적이다. 3. Consistency(일관성)있게 작성하기 변수명 작성 패턴 ex) camelCase 선택자 일치 ex) querySelector or getElementByClassName 4. Event d..

[JavaScript][clean-code] JavaScript의 특성을 파악해야하는 이유

* JavaScript는 몽키패치(Monkey patch)이다. 런타임 중인 프로그램의 내용이 변경되는 행동을 의미한다. 런타임 중에 property object를 직접적으로 수정하는 일련의 작업들을 말한다. (JS 기준) 몽키 패치는 일반적으로 안티 패턴 (비효율적이거나 비생산적인 패턴)으로 인식된다. 이러한 패치들은 런타임 중에 특정 시점에 적용되는 것인데도 불구하고 전역 변수로 적용이 되기 때문에 다른 코드에도 영향을 주고 부작용을 발생시킬 수밖에 없음 * code로 보는 몽키패치 var globalVar = 'global'; console.log(globalVar); // 'global' console.log(window.globalVar); // 'global'; window안에 globalVa..

[Useful_website] color tool

* color tool site https://material.io/resources/color/ 기본 UI구성을 할 수 있도록 구성되어 있다. CURRENT SCHEME에서 Primary, Secondary등을 선택하여 원하는 색상을 선택하여 Custom할 수 있다. 위의 사진처럼 색상을 클릭하여서 Custom할 수 있다. 상단에 있는 EXPORT button을 클릭하면 code를 추출할 수 있다.

[Useful_website] 랜덤이미지 사용(random image)

* 랜덤이미지 사이트-1 https://picsum.photos/ 위의 사이트에 들어가면 아래의 사진과 같은 화면이 나올것이다. /200/300은 해상도 조정이다. ex) 200 x 300 내가 사용할 해상도로 조정한뒤 img src안에 넣어주면된다. * 랜덤이미지 사이트-2 unsplash안에 있는 사진들중 랜덤으로 사진을 보내준다. 200x200은 해상도 조절이며 만약 한페이지에 여러장의 랜덤이미지가 필요하면 sig값을 1, 2, 3...변경해주면 다른 사진으로 랜덤하게 나오게 된다. https://source.unsplash.com/random/200x200?sig=1 [참고] https://stackoverflow.com/questions/60797390/generate-random-image-b..