javascript37

• 

  [Javascript] 'try...catch'와 에러 핸들링 'try...catch'와 에러 핸들링 보통의 스크립트에서 에러가 발생하면 스크립트가 죽고(즉시 중단되고), 콘솔에 에러가 출력됩니다. 그러나 try...catch문법을 사용하면 스크립트가 죽는 걸 방지하고, 에러를 잡아서(catch) 더 합당한 무언가를 할 수 있게 됩니다. 'try...catch' 문법 try{ // 코드 }catch (err){ // 에러 핸들링 } try...catch 동작 알고리즘은 다음과 같습니다. 먼저, try{...} 안의 코드가 실행됩니다. 에러가 없다면, try 안의 마지막 줄까지 실행되고, catch 블록은 건너뜁니다. 에러가 있다면, try 안 코드의 실행이 중단되고, catch(err) 블록으로 제어 흐름이 넘어갑니다. 변수 err(아무이름이나 사용 가능)는 무슨 .. javascript 2022. 1. 11.

• 

  [Javascript] label(레이블) 구문 레이블 구문은 break 나 continue 구문과 함께 사용할 수 있습니다. 원하는 식별자로 구문 앞에 레이블을을 추가할 수 있습니다. 문법 label : statement label : 자바스크립트에서 사용할 수 있는 식별자면 모두 가능합니다. statement : 구문. break는 모든 레이블 구문에서 사용될 수 있으며, continue는 반복 레이블 구문에서만 사용할 수 있습니다. 반복문에 레이블을 붙이고, break나 continue 구문을 사용해 반복문의 어느 위치에서 작업을 멈추고 어느 위치에서 다시 수행할지를 알려줄 수 있습니다. 자바스크립트에는 goto문이 없다는 것에 주의해야 하며, break나 continue에서만 레이블을 사용할 수 있습니다. strict mode코드에서 "let".. javascript 2022. 1. 11.

• 

  [Javascript] JSON stringify 사용법, parse 사용법(JSON과 메서드) JSON(JavaScript Object Notation)은 값이나 객체를 나타내주는 범용 포맷으로, RFC 4627 표준에 정의되어 있습니다. JSON은 본래 자바스크립트에서 사용할 목적으로 만들어진 포맷입니다. 그런데 라이브러리를 사용하면 자바스크립트가 아닌 언어에서도 JSON을 충분히 다룰 수 있어서, JSON을 데이터 교환 목적으로 사용하는 경우가 많습니다. 자바스크립트가 제공하는 JSON 관련 메서드는 다음과 같습니다. JSON.stringify - 객체를 JSON으로 바꿔줍니다. JSON.parse - JSON을 객체로 바꿔줍니다. JSON.stringify let student = { name:'John', age: 30, isAdmin: false, courses: ['html','css'.. javascript 2022. 1. 10.

• 

  [Javascript] ... 사용 방법 [구조 분해 할당 (배열, 객체 분해하기)] 객체와 배열은 자바스크립트에서 가장 많이 쓰이는 자료 구조입니다. 함수에 객체나 배열을 전달해야 하는 경우가 생기곤 합니다. 가끔은 객체나 배열에 저장된 데이터 전체가 아닌 일부만 필요한 경우가 있습니다. 이럴 때 객체나 배열을 변수로 '분해' 하는 특별한 문법인 구조 분해 할당 (destructiong assignment)을 사용 할 수 있습니다. 이 외에도 함수의 매개변수가 많거나 매개변수 기본값이 필요한 경우 등에서 구조 분해는 그 진가를 발휘합니다. 배열 분해하기 // 이름과 성을 요소로 가진 배열 let arr = ["sewon", "jang"]; // 구조 분해 할당을 이용해 firstName엔 arr[0]을, surName엔 arr[1]을 할당하였습니다. let [firstName, surN.. javascript 2022. 1. 10.

• 

  [javascript] 화살표 함수 (()=>, Arrow Function) 화살표 함수? this를 가지지 않습니다. arguments를 지원하지 않습니다. new와 함께 호출할 수 없습니다. super가 없습니다. 화살표 함수(Arrow function)는 function 키워드 대신 화살표(=>) 를 사용하여 보다 간략한 방법으로 함수를 선언할 수 있습니다. 하지만 모든 경우 화살표 함수를 사용할 수 있는 것은 아닙니다. // 매개변수 지정 방법 () => { ... } // 매개변수가 없을 경우 x => { ... } // 매개변수가 한 개인 경우, 소괄호를 생략할 수 있다. (x, y) => { ... } // 매개변수가 여러 개인 경우, 소괄호를 생략할 수 없다. // 함수 몸체 지정 방법 x => { return x * x } // single line block x.. javascript 2022. 1. 9.

• 

  [javascript] Symbol Symbol은 ES6에서 샐옵게 추가된 7번째 타입으로 변경 불가능한 원시 타입의 값입니다. 심볼은 주로 이름의 충돌 위험이 없는 유일한 객체의 프로퍼티 키(property key)를 만들기 ㅜ이해 사용합니다. Symbol의 생성 Symbol은 Symbol()함수로 생성됩니다. Symbol() 함수는 호출될 때 마다 Symbol 값을 생성합니다. 이 때 생성된 Symbol은 객체가 아니라 변경 불가능한 원시 타입의 값입니다. // 심볼 mySymbol은 이름의 충돌 위험이 없는 유일한 프로퍼티 키 let mySymbol = Symbol(); console.log(mySymbol); // Symbol() console.log(typeof mySymbol); //'symbol' Symbol() 함수는 Str.. javascript 2022. 1. 8.

• 

  [javascript] 옵셔널 체이닝 '?.' 옵셔널 체이닝(optional chaining) ?. 을 사용하면 프로퍼티가 없는 중첩 객체를 에러 없이 안전하게 접근할 수 있습니다. 옵셔널 체이닝이 필요한 이유 먼저, 옵셔널 체이닝이 등장했는지 몇가지의 예시가 있습니다. 사용자가 여러 명 있는데 그 중 몇명은 주소 정보를 가지고 있지 않다고 가정해봅시다. 이럴 때 user.address.street를 사용해 주소 정보에 접근하면 에러가 발생할 수 있습니다. let user = {}; // 주소 정보가 없는 사용자 alert(user.address.street); // TypeError: Cannot read property 'street' of undefined 또 다른 사례로는 브라우저에서 동작하는 코드를 개발할 때 발생할 수 있는 문제가 있습니다.. javascript 2022. 1. 7.

• 

  [javascript] 자바스크립트의 값 / truthy,falsy 자바스크립트에서 값은 이상합니다. 타입을 가지고 있지 않지만 필요에 따라 타입이 변환되기도 하고, [] == 0 이 true 이고, 심지어 if([]) console.log('aa'); 도 정상적으로 동작합니다. 도대체 자바스크립트의 값은 어떻게 동작하기에 이렇게 될 수 있을까요? [] == 0 // true if([]) { console.log('어, 이게 왜 되지?'); // 출력 O } if(0) { console.log('어, 이게 왜 안되지?'); // 출력 X } 모든것은 연산자에 따른 형변환의 값이 truthy, falsy 구분에 의한 현상입니다. 값의 종류 자바스크립트에는 두 가지 종류의 값이 있습니다. 하나는 Primitive Value(원시 값) 이고, 다른 하나는 Reference V.. javascript 2022. 1. 6.

• 

  [javascript] nullish 병합 연산자 '??' nullish 병합 연산자(nulish coalescing operator) ?? 를 사용하면 짧은 문법으로 여러 피연산자 중 그 값이 '확정되어있는' 변수를 찾을 수 있습니다. a ?? b 의 결과는 다음과 같습니다. a 가 null 도 아니고 undefined도 아니면 a 그 외의 경우는 b nullish 병합 연산자 ?? 없이 x = a ?? b 와 동일한 동작을 하는 코드를 작성하면 다음과 같습니다. x = (a !== null && a != undefined ) ? a : b ; '??'와 '||' 의 차이 nullish 병합 연산자는 OR 연산자 || 와 상당히 유사해 보입니다. 그러나, 두 연산자 사이에는 중요한 차이점이 잇습니다. ||는 첫 번째 truthy값을 반환합니다. ??는 첫 번째.. javascript 2022. 1. 6.

• 

  [javascript] padStart(), padEnd() (lpad(), rpad()) padStart() mdn : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String/padStart String.prototype.padStart() - JavaScript | MDN padStart() 메서드는 현재 문자열의 시작을 다른 문자열로 채워, 주어진 길이를 만족하는 새로운 문자열을 반환합니다. 채워넣기는 대상 문자열의 시작(좌측)부터 적용됩니다. developer.mozilla.org padStart() 메서드는 현재 문자열의 시작을 다른 문자열로 채워, 주어진 길이를 만족하는 새로운 문자열을 반환합니다. 채워넣기는 대상 문자열의 시작(좌측)부터 적용됩니다. const str1 = '5'; co.. javascript 2022. 1. 5.

• 

  [Javascript] 비동기(async) 처리와 콜백(callback) 함수 비동기 처리? 자바스크립트의 비동기 처리란 특정 코드의 연산이 끝날 때 까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 자바스크립트의 특성을 의미합니다. 비동기 처리의 예시 1 - ajax ajax는 제이쿼리의 비동기 처리입니다. 제이쿼리로 웹 서비스를 제공할 때 ajax를 빼 놓을 수 없습니다. 보통 화면에 표시할 이미지나 데이터를 서버에서 불러와 표시해야 하는데 이때 ajax통신으로 해당 데이터를 서버로부터 가져올 수 있습니다. function getData(){ var response = {}; $.get('http://domain/products/1', function(response){ response = response; }); return response; } console.log.. javascript 2021. 12. 28.

• json-server (2) : 조건문 사용하기 https://sewonzzang.tistory.com/3 json-server 사용하기 json-server는 아주 짧은 시간에 REST API를 구축해주는 라이브러리입니다. 하지만, REST API 서버의 기본적인 기능을 대부분 갖추고 있습니다만, 프로덕션 전용은 아닙니다. 저는 프론트앤드 공부하는 sewonzzang.tistory.com 설정과 기본 문법은 위 게시글에서 쉽게 따라할 수 있습니다. 1. Sort _sort와 _order를 이용한 오름,내림차순 검색입니다. GET /tableName?_sort=column&_order=asc column을 오름차순으로 검색하는 방법입니다. sort를 조건으로 오름(asc), 내림(desc)차순으로 정렬할 수 있습니다. 만약, 조건이 여러가지라면 ",".. javascript 2021. 12. 24.