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

정규식, 정규 표현식 regExp

웹 개발을 하다보면 유저가 입력한 텍스트에 대해 검증해야 하는 경우가 있습니다. 대표적인 예시로 회원 가입시 비밀번호 입력을 들 수 있습니다. ‘영문 대문자, 소문자, 특수기호로 이뤄져야 한다.’ 등의 검증 로직을 정규식을 활용하여 구현할 수 있다. 정규식 정규 표현식, 또는 정규식은 문자열에서 특정 문자 조합을 찾기 위한 패턴입니다. JavaScript에서는 정규 표현식도 객체로서, RegExp의 exec()와 test() 메서드를 사용할 수 있습니다. String의 match(), matchAll() (en-US), replace(), replaceAll(), search(), split() 메서드와도 함께 사용할 수 있습니다. 정규 표현식 만들기 정규 표현식 객체를 생성하려면 정규 표현식 리터럴이나..

2023.05.31

웹, 앱 체크 navigator.userAgent

navigator.userAgent user agent는 HTTP 요청을 보내는 디바이스와 브라우저 등 사용자 소프트웨어의 식별 정보를 담고 있는 request header의 한 종류이다. 지금 사용하고 있는 브라우저의 navigator.userAgent를 콘솔에 찍어보면 아래와 같이 나온다. 사용하고 있는 OS의 종류, 브라우저의 정보를 담고있다. 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/112.0.0.0 Safari/537.36' 하이브리드 앱을 제작할때 web view의 RRL이 로드되기 전에 userAgent를 수정하여 특정 문자열을 삽입하는 방법으로 웹인지 앱인지 구분..

2023.04.06

ios mobile fix item + keypad 이슈

ios mobile에 키패드 이슈 모바일 기기에서 input에 focus 되었을 때 가상 키패드가 올라오게되는데, OS에 따라 키패드가 올라왔을때의 영역이 다르게 동작해서 크로스브라우징 이슈가 있었다. ios에서 상단 fixed 헤더가 위로 밀려버리는 문제가 발생했다. 헤더가 위로 밀려버리는 현상 자체를 해결할순 없었고, 키패드가 올라왔을때 스크롤이 되지않게 input blur를 해주는 방향으로 작업되었다. 우선 모바일일 때 body에 mobile 클래스를 넣어준 후 키보드가 올라올만한 input에 focus 시 keyboard-on 클래스를 body에 추가해줬다. 그리고 그 상태에서 input이 아닌 다른곳을 터치하게 되면 input에 focus를 blur처리해줬다. 모달팝업 내에 가상키패드도 문제였기..

2023.04.06