coding- w00se

env .eslintrc.json의 env 스크립트의 실행 환경을 명시하는 곳으로, 실행 환경에 맞는 전역 변수들을 사전에 정의할 수 있습니다. 예를 들어 아래의 예시 코드처럼 jest: true를 설정하면 jest 파일에서 describe, test, expect 등의 함수들이 no-undef 규칙에 걸리지 않는 것을 확인했습니다. env: { jest: true } env에 설정할 수 있는 옵션은 여기서 확인 가능합니다. es2021 옵션 공식 문서에 의하면 es2021: true 옵션을 사용하면 ECMAScript 2021의 전역 변수들을 사전에 정의하고 ecmaVersion parser option도 12로 설정한다고 합니다. parserOption eslint에서 사용하는 parser의 opti..

호출 스케줄링 - 함수의 실행을 예약하는 방법 타이머 함수를 이용하면 일정 시간이 지난 후 특정 함수를 실행 가능하다. 타이머 함수 javascript에서는 대표적인 타이머 함수는 setTimeout과 setInterval 가 있다. setTimeout - 일정 시간이 지난 후 콜백 함수를 한번 호출 setTimeout은 단 한번 동작하는 타이머 생성 타이머가 만료되면 전달받은 콜백 함수를 호출 MDN - setTimeout setTimeout의 반환 값은 생성한 타이머에 대한 고유 id 값 타이머 고유 id 값은 실행 환경에 따라 다르다. 반환 값에 대한 예시 코드 및 결과 const firstTimerId = setTimeout(() => { console.log('first callback 함수 호..

Javascript 에러는 어떤 것들이 있나? MDN - Erorr 대표적으로 Erorr 생성자가 있고 그 이외 주요 오류는 SyntaxError, ReferecneError, TypeError, RangeError, URIError, EvalError 등이 있다. 에러 처리를 하지 않으면? → 프로그램이 강제 종료된다. 에러를 처리한 경우 try { const arr = null; arr[0]; } catch (err) { console.log('에러: ', err); // TypeError 발생 } console.log('여기까지 실행이 되나?'); // 실행됨 에러를 처리하지 않는 경우 const arr = null; arr[0]; // 여기서 코드 실행 종료 conso..

정보 은닉을 하는 이유 모던 Javascript Deep Dive에 의하면 정보 은닉은 아래와 같은 효과가 있다. 정보 은닉은 외부에 공개할 필요가 없는 구현의 일부를 외부에 공개되지 않도록 감추어 적절치 못한 접근으로부터 객체의 상태가 변경되는 것을 방지해 정보를 보호하고, 객체 간의 상호 의존성, 즉 결합도를 낮추는 효과가 있다. - 모던 Javascript Deep Dive 24장 중 간단히 정리를 하면 아래와 같습니다. 객체의 상태를 안정적으로 관리(예상하지 못한 변화를 예방) 객체 간의 결합도를 낮춤 Javascript에서 정보 은닉을 하는 방법 javascript에서는 # 접두사를 이용해서 클래스에 private 속성을 만들 수 있습니다. 과제를 수행하면서 정보 은닉을 연습했던 예시 코드는 아..

CSS로 스타일을 지정하는 작업을 하다 보면 간혹 형제 요소들 중 하나의 요소에만 다른 스타일을 적용할 필요가 생깁니다. 이런 경우 CSS에서 :nth-child, :first-child, :last-child, :not 등의 의사 클래스를 활용하면 간단하게 형제 요소들 중 특정 요소들을 지정해서 스타일을 적용할 수 있습니다. 오늘 연습할 HTML 문서의 구조와 기본 스타일은 아래와 같습니다. HTML ⬇️ ⬇️ ⬇️ ⬇️ ⬇️ ⬇️ ⬇️ CSS(기본 스타일) #arrow-container { display: flex; flex-direction: row; margin: 50px 0; } .arrow { font-size: 32px; margin-left: 10px; } 예시 사진은 아래와 같습니다. :..

얼마 전에 Vanilla Javascript로 탭 메뉴와 탭 전환 기능을 구현할 일이 있었습니다. 구현을 할 때는 느끼지 못했지만, 돌이켜 생각을 해보니 비효율적으로 구현을 한 게 아닌가 생각이 들었습니다. 따라서 해당 기능에 대해 다시 연습을 해보았고, 이번 글에서는 탭 메뉴와 탭 전환 기능을 구현하는 방식에 대해 정리하려 합니다. 연습 예시 연습 예시 화면은 아래와 같습니다. 구현 방법 연습 화면은 위 이미지와 같습니다. 빨간색 영역: 버튼 목록 영역으로 각 버튼을 누르면 파란색 영역에 변화가 생깁니다. 파란색 영역: 탭의 내용을 나타는 영역으로, 클릭된 버튼에 따라 '탭 1 페이지', '탭 2 페이지', '탭 3 페이지'로 변하게 됩니다. 전체 코드 1. 각 button 태그에 데이터 속성으로 se..

최근 vscode에서 eslint를 사용하면서 extension이 제대로 동작하지 않는 에러를 만나 불편함을 겪었습니다. 다행히 vscode-eslint repository의 issue에서 해결 방법을 찾아 잘 해결이 됐습니다. 이번 글에서는 eslint와 prettier의 설치법과 설정, 그리고 vscode에서 eslint extension 사용 시 만났던 에러에 대해 정리를 하려 합니다. eslint와 prettier란? eslint 린트(lint)는 소스 코드에서 문제가 될 만한 점을 찾는 작업이고, 린터(linter)는 이를 도와주는 소프트웨어이다. eslint는 javascript에서 대중적으로 사용되는 linter이다. prettier code formater의 일종으로, 정해진 규칙에 따르도..

오늘 linter를 이용해서 컨벤션의 어긋난 코드를 수정하면서, Airbnb Javascript Style Guide에서 아래의 규칙을 발견했습니다. 3.6 Only quote properties that are invalid identifiers. eslint: quote-props 해당 규칙은 객체(object) 내의 프로퍼티의 이름과 관련된 규칙으로, Javascript 식별자 네이밍 규칙을 준수하는 프로퍼티 이름은 '(따옴표)를 쓰지 않아도 된다는 규칙입니다. 해당 영어 구문의 indentifiers을 보고 식별자가 매칭이 안돼서 번역기를 돌렸습니다. 따라서 'identifier === 식별자'를 각인시키는 겸, 이번 글에서는 Javscript의 용어인 식별자와 프로퍼티에 대해 정리하려 합니다. ..

얼마 전 코드 리뷰를 해주시는 팀원으로부터 '구조 분해 할당 준수 필요!'라는 내용의 피드백을 받았습니다. 덕분에 '구조 분해 할당'이라는 키워드도 알게 됐고, 이번 글에서는 '구조 분해 할당'에 대해 찾아본 내용을 정리하려 합니다. 구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 값들을 개별 변수에 저장하는 Javascript의 표현식입니다. 사용 예시 구조 분해 할당 - 배열 예시 // 구조 분해 할당 - 배열 예시 // 구조 분해 할당 - 기본 사용 예시 let arr = [1, 2, 3, 4, 5] let [ first, second, ...rest ] = arr; console.log("frist: ", first); // first: 1 console.log("second: ", sec..

데이터를 수집하고 처리하다 보면 여러 파일에 나눠져 있는 데이터를 통합할 때가 있습니다. 저는 데이터를 수집 후 여러 csv 파일에 저장한 데이터를 하나의 csv 파일로 통합할 필요가 있어서 python의 pandas 라이브러리를 이용했습니다. 코드 해당 코드의 실행 과정은 아래와 같습니다. 1. dir_path에 있는 파일 들 중 pattern에 해당되는 csv 파일을 하나로 통합한다. 2. 통합된 데이터 프레임에서 중복된 데이터를 제거한다. 3. 통합된 데이터를 total_file_name이라는 이름으로 저장한다. import os import re import pandas as pd if __name__ == "__main__": dir_path = "데이터가 있는 경로" total_file_nam..