try...catch 에러 핸들링

보통의 스크립트에서 에러가 발생하면 스크립트가 즉시 중단되고, 콘솔에 에러가 출력됩니다. 그러나 try...catch문을 사용하면 스크립트가 죽는 걸 방지하고, 에러를 잡아서(catch) 더 합당한 무언가를 할 수 있게 됩니다. try...catch try { // code throw new Error('에러 발생'); } catch (e) { // error handling } finally { // code } try...catch의 알고리즘 1. 먼저, try{...} 안의 코드가 실행됩니다. 2. 에러가 없다면 try 안의 마지막 줄까지 실행되고, catch 블록은 건너뜁니다. 3. 에러가 있다면 try 안 코드의 실행이 중단되고, catch(e) 블록으로 제어 흐름이 넘어갑니다. 변수 e는 무슨..

2023.12.22

Javascript 네이밍(Naming)과 클린 코드(Clean Code)

1. Naming Convention 1-1. 기본사항 변수명은 자체 설명적이어야 함 JavaScript에서는 camelCase, PascalCase를 사용 // bad const value = 'Robin'; const val = 'Robin'; // good const firstName = 'Robin'; 1-2. Components, Class, 생성자 함수 컴포넌트, 클래스, 생성자 함수는 PascalCase를 사용 class UserProfile{ ... } function UserProfile(name, year){ this.name = name; this.year = year; } 1-3. Arrays 변수 이름에 복수, 단수 표현하기 // bad const fruit = ['apple', ..

2023.12.22

Spread Operator

Spread Operator 마침표를 연달아 3개(...)를 찍는 문법을 스프레드 오퍼레이터(Spread Operator)라고 합니다. Spread의 뜻은 (펼치다, 퍼트리다) 이며, 한글로는 '펼침연산자' 라고도 합니다. 이 문법을 사용하면 객체 혹은 배열을 펼칠 수 있습니다. Spread Operator는 대괄호, 중괄호, 소괄호 안에서만 사용 가능하며 외부에서 사용할 경우, 에러가 발생합니다. JavaScript Spread 연산자(...)를 사용하면 기존 배열이나 객체의 전체 또는 일부를 다른 배열이나 객체로 빠르게 복사할 수 있습니다. 1. Sperad Operator 기본 문법 스프레드 연산자를 사용하면 배열, 문자열, 객체 등 반복 가능한 객체 (Iterable Object)를 개별 요소로 ..

2023.12.22

slick slider

Settings $('.slider-items').slick({ rows: 1, //이미지를 몇 줄로 표시할지 개수 dots: false, //슬라이더 아래에 도트 네비게이션 버튼 표시 여부(true or false) ▶기본값 false appendDots: $('selector'), //네비게이션 버튼 변경 dotsClass: 'custom-dots', //네비게이션 버튼 클래스 변경 infinite: true, //무한반복(true or false) 기본값 true slidesToShow: 4, //한번에 보여줄 슬라이드 아이템 개수 slidesToScroll: 4, //한번에 넘길 슬라이드 아이템 개수 slidesPerRow: 1, //보여질 행의 수 (한 줄, 두 줄 ... ) autoplay: ..

2023.11.03

Media Queries Breakpoints For Responsive Design In 2023

Using min-width // Small devices (landscape phones, 576px and up) @media (min-width: 576px) { ... } // Medium devices (tablets, 768px and up) @media (min-width: 768px) { ... } // Large devices (desktops, 992px and up) @media (min-width: 992px) { ... } // Extra large devices (large desktops, 1200px and up) @media (min-width: 1200px) { ... } Using max-width @media (max-width: 575.98px) { ... } // ..

2023.11.01

LocalStorage, SessionStorage, Cookie의 차이점

Web Storage HTML5에는 웹의 데이터를 클라이언트에 저장할 수 있는 새로운 자료구조인 Web Storage 스펙이 포함되어 있다. Web Storage의 개념은 키/값 쌍으로 데이터를 저장하고 키를 기반으로 데이터를 조회하는 패턴이다. 그리고 영구저장소(LocalStorage)와 임시저장소(SessionStorage)를 따로 두어 데이터의 지속성을 구분할 수 있어 응용 환경에 맞는 선택이 가능하다. Web Storage는 기존 웹 환경의 쿠키(Cookie)와 매우 유사한 개념이다. 사실 거의 차이가 없지만 몇 가지 쿠키의 단점을 극복하는 개선점이 도입되었다. 그러나 쿠키는 여전히 유효하고 꽤 적절한 클라이언트 저장 도구임에 틀림없다. HTML5에서 Web Storage 스펙을 새로 추가했지만 ..

2023.10.13