Mong dev blog

전체 글207

JS 클린코드 <변수편>
🤔 이번 시간에는 자바스크립트 클린코드를 공부해보았다! 1. 변수 -무의미한 변수명은 지양하자 -상수를 그대로 쓰지 말고 변수에 할당하자 - 변수의 의도를 나타내자 - 문맥상 중복되는 말은 제외하자 - 매개변수에 기본값을 지정하자 (1) 무의미한 변수명은 지양하자 변수명을 지을 때, 해당 변수가 어떤 데이터를 담고 있는지 명시적으로 적어야 한다. 아래 예시는 음식리스트를 담고 있는 배열이다. 예시1처럼 변수를 선언했을 때, 다른 개발자는 이 변수가 어떤 데이터를 담고 있는지 쉽사리 알기 어렵다. // 예시1 const aa = [&#39;apple&#39;, &#39;orange&#39;, &#39;lemon&#39;] 예시2와 같이 해당 데이터를 표현할 수 있는 명시적인 이름으로 지정하자. // 예시2..
2022. 1. 15.
디자인 패턴2, 모듈 패턴이란?
☝ 이번 시간에는 JS 디자인 패턴 중 하나인, 모듈 패턴에 대해 알아보자! 1. 모듈이란? 코드의 일부를 독립된 형태로 분리한 걸 말한다. 모듈은 하나의 클래스로 구성되거나 특정 목적을 가진 복수의 함수(라이브러리 형태)로 구성된다. export, import 지시자를 사용해 모듈을 내보내거나 불러올 수 있는데, 아래는 그 예시이다. print()는 export를 사용해 외부로 내보낼 수 있다. // 📁 test.js export function print() { console.log(&#39;hello!&#39;); } export된 print()는 import를 사용해 불러올 수 있다. // 📁 main.js import { print } from &#39;./test.js&#39;; print()..
2022. 1. 12.
[css] background: none vs transparent의 차이
🏃 이번시간에는 background: none과 background: transparent의 차이에 대해 알아보자 1. 배경색을 없애는 방법 배경색이 지정된 요소에 대해 특정 경우에 배경을 없애야 할 때가 있다. 예를 들어 버튼의 배경색이 빨강이었다가 hover시 배경색을 없애거나, 라이브러리 사용시 해당 라이브러리에서 지정한 배경색이 필요치 않는 경우일 것이다. 이처럼 background의 색상을 없앨 때 우리는 none(없애기), transparent(투명)을 사용할 수 있다. 🤔 그런데 background에 none을 지정하는 것과 transparent을 지정하는 것과의 차이는 뭘까? 2. none과 transparent의 차이 none과 transparent의 차이를 알기 위해서는 우리는 back..
2022. 1. 6.
매개변수 재할당을 지양하자(no-param-reassign)
1. 매개변수(파라미터) 재할당을 지양해야 한다고? 우리는 함수에 인수를 전달하고, 전달한 매개변수값을 재할당할 수 있다. function test(value) { // value 매개변수 value = 13; // 매개변수 재할당 return value; } test(30); // 인수 전달 🤔 하지만, 매개변수 재할당은 eslint 규칙(no-param-reassign)으로 존재할만큼 지양해야하는 방법인데 왜 그런걸까? 그 이유를 알아보자! 2. 재할당의 위험성 (1) 인수와 파리미터가 달라 의도와 다른 동작이 발생한다. 파라미터는 인수를 참조하는 구조이다. 참조한다는 건, 파라미터가 인수의 주소를 가리킨다는 말인데 만약 파라미터의 값을 변경하면 어떻게 될까? 우리는 sum()에 12, 13을 인자로..
2022. 1. 4.
이중배열(2d array)에서 최고, 최저값 찾기
🤖 이번 시간에는 이중 배열의 특정 인덱스별 최고, 최저값을 구해보자 1. 시작하기 1) 이중 배열 형태 이번 코끼리반의 중간고사 시험 결과는 아래와 같다. const scores = [[100, 70],[87, 50],[45, 70],[60, 77],[55, 27]]; 순서 과목1 과목2 1 100 70 2 87 50 3 45 70 4 60 77 5 55 27 그리고 내일까지 코끼리반 선생님은 각 과목별 최고, 최저점수를 산출해야하는데, 이중 배열에서 각 과목별(index별) 최고&최저점수는 어떻게 구할 수 있을까? 한 번 알아보자 2) 전체 코드보기 🤖 getMinMax2DArr()는 첫 번째 인자로 arr, 두 번째 인자로 idx를 받아 idx별 최고, 최저값을 리턴한다. function getMi..
2022. 1. 2.
string을 정규표현식 변환하기
이번 시간에는 string 문자나 정규표현식을 정규표현식으로 변경해주는 코드를 살펴보자 1. 언제 유용할까? string 문자(’feat’) 혹은 string 타입의 정규표현식(’/feat/’)은 정규표현식 함수를 바로 쓸 수 없다. 그렇기 때문에 string타입의 문자 혹은 정규표현식을 정규표현식으로 변환해야하는데, 어떤 경우에 변환하는 코드를 쓰는 걸까? 대체로 입력값을 string 타입만 받을 수 있는 경우일 것이다. 대표적으로 github actions의 경우, 인자를 string으로만 받을 수 있기 때문에 github actions에서 입력값으로 정규표현식을 받으려면 ‘/feat/’ 형태로 써야한다. 하지만 ‘/feat/’형태로 받으면 정규표현식 함수를 쓸 수 없다. 🤔 왜 string타입의 정..
2021. 12. 29.
[JS] 호이스팅(hoisting)
1) 호이스팅이란? (1) 호이스팅 개념 변수&함수 선언만 해당 스코프의 최상단으로 끌어올려지는 걸 호이스팅이라고 한다. 아래와 같이 변수를 선언해도 상단에서 변수 참조가 가능하다. console.log(a) var a; 단, 변수의 선언만 끌어올려지므로 값을 할당해도 결과는 undefined가 된다. console.log(a) var a = 1; 2) 호이스팅이 발생하는 이유 (1) 왜 발생할까? 🏃🏻 자바스크립트 엔진에서 변수를 생성하는 단계를 먼저 살펴보자 자바스크립트 엔진에서 변수는 선언 → 초기화 → 할당을 거쳐 생성된다. 단계 설명 선언 단계 변수를 실행 컨텍스트(실행 코드에 제공할 정보 객체)의 변수 객체에 등록한다. 초기화 단계 변수 객체에 등록된 변수를 위한 메모리 공간을 확보한다. (이..
2021. 12. 21.
github actions로 버전 관리하기-릴리즈 노트편
이번 시간에는 병합된 PR의 라벨에 따라 버전을 올리고 release note를 작성해보자! 이 작업을 위해, 자동 라벨링을 해주는 labeler-action과 릴리즈 노트를 작성해주는 release drafter 쓴다. 대략적인 컨셉은 아래와 같다. pull_request가 opened됐을 때 labeler-action을 사용해 라벨링을 한다. 이때, pull_request 제목에 feat가 들어갔다면 enhancement라는 라벨을 지정해준다. pull_request가 main에 merge되었을 때 release drafter을 사용해 릴리즈 노트를 작성하도록 한다. 기본적으로 patch 버전을 올리며, 만약 라벨이 enhancement인 경우 minor 버전을 올린다. 1. labeler-actio..
2021. 12. 15.
[JS] 최대 스크롤값 구하는 법(scrollTop, scrollLeft)
이번 시간에는 scrollTop, scrollLeft에 대해 알아보고, 최대 스크롤 값을 구하는 방법을 알아보자 최대 스크롤값 구하는 방법을 알고 싶다면 2.로 바로 이동하자 1. scrollTop, scrollLeft는 무엇일까? 1) scrollTop (1) scrollTop이란? scrollTop은 요소의 수직 스크롤 바 위치를 나타낸다. element.scrollTop See the Pen scrollTop by KumJungMin (@kumjungmin) on CodePen. (2) scrollTop 변경하는 법 만약 요소의 스크롤 바 위치를 변경하고 싶다면 값을 할당하면 된다. element.scrollTop = 200; // 스크롤 바 수직 위치를 200으로 변경 아래 예시를 보면 신기한 점..
2021. 12. 13.

티스토리툴바