웹 프론트엔드 개발 노하우/바닐라 자바스크립트 노하우(4)
-
코딩 컨벤션 2
이 글은 아래 링크의 내용을 바탕으로 작성되었습니다. https://ui.toast.com/fe-guide/ko_CODING-CONVENTION 코딩컨벤션 코딩 컨벤션은 읽고, 관리하기 쉬운 코드를 작성하기 위한 일종의 코딩 스타일 규약이다. 특히 자바스크립트는 다른 언어에 비해 유연한 문법구조(동적 타입, this 바인딩, 네이티브 객체 조작 가 ui.toast.com 저번 코딩 컨벤션 글에 이어서 이번에는 TOAST UI 에서 알려주는 코딩컨벤션을 추가로 정리해보고자 합니다. 전의 내용과 겹치는 부분은 자동으로 뺐습니다. 숫자, 문자 단수형 이름을 사용합니다. 배열 복수형 이름을 사용합니다. 반드시 리터럴로 선언합니다. 배열을 복사할 시에 전개 연산자(...)를 최대한 활용해서 가독성을 높이도록 합니..
2020.11.26 -
Intersection Observer API
Intersection Observer 는 특정 Element 들을 감시하면서 해당 요소가 이용자의 브라우저 화면 안에 들어왔음을 탐지하면, 지정된 함수가 실행되도록 만들 수 있는 객체입니다. 사용법은 다음과 같습니다. // 먼저 observer 객체를 생성합니다. const observer = new IntersectionObserver(callback, options) // 생성 후 어떤 요소를 감시할 것인지를 지정합니다. 하나가 아니라 여러개를 하나의 // 옵저버로 감시할 수도 있습니다. IntersectionObserver.observe(element) Callback Function callback 은 말할 것도 없이 Intersection 이벤트가 발생했을 때 실행될 함수입니다. 이 콜백함수는..
2020.11.25 -
자바스크립트 코딩 컨벤션
이 글은 아래의 영상 내용을 기반으로 작성되었습니다. www.youtube.com/watch?v=RMN_bkZ1KM0 정말 잘 짜여진 코드는 마치 사람의 산문처럼 읽힌다고 어느 유명 개발자가 말했습니다. 이러한 코드를 만들 수 있는 몇가지 컨벤션을 살펴봅시다. Magic Number & String 절대 그냥 숫자나 문자열을 사용하지 마십시오. 코드를 작성하는 시점의 당신은 그 숫자나 문자열이 뭘 뜻하는 것인지 잘 알겠지만, 미래의 당신, 혹은 다른 개발자는 그 숫자나 문자열이 무엇을 의미하는 것인지 알기 어려울 수 있습니다. 써야한다면 반드시 상수에 담아 사용하십시오. 이때 상수 이름은 대문자와 _(underscore) 로만 이루어지는게 일반적입니다. const SECONS_IN_A_DAY = 8640..
2020.11.24 -
IndexedDB API 와 그 사용법
www.youtube.com/watch?v=vb7fkBeblcw 특성 로컬스토리지는 오직 문자열만을 저장할 수 있지만 Indexed DB 는 객체 자체를 저장할 수 있으며 다른 무거운 파일도 넣을 수 있습니다. 같은 도메인에 접근하면 같은 데이터를 사용하게 됩니다. API 가 '비동기적'입니다. 키-밸류 페어로 동작합니다 사용법 데이터베이스를 엽니다. 데이터베이스 안에 객체 Store를 생성합니다. 성공한다면, Transaction 을 수행합니다. 작업이 끝나면 Transaction 을 끝냅니다.
2020.10.22