왈왈이의 기술블로그

단축평가란 왼쪽부터 오른쪽으로 평가를 진행하여, 논리연산자 &&와 || 에 따라 다른 결과를 반환한다. &&는 and, || 는 or를 의미한다. 아래의 에러 핸들러에서 || 연산자가 사용되었다. const globalErrorHandler = (err, req, res, next) => { console.error(err); err.statusCode = err.statusCode || 500; res.status(err.statusCode).json({ message: err.message }); }; 단축평가는 왼쪽부터 평가되기 때문에 || 연산자의 경우 왼쪽 값이 true라면 그 값을 반환하고, false라면 오른쪽 값을 반환한다. 위 코드에서 err.statusCode에 값이 있다면 truthy..

JavaScript에서는 JSON.parse() 함수를 사용하여 큰따옴표로 묶인 문자열을 파싱하여 배열로 변환할 수 있다. const str = '[1, 2, 3]'; const arr = JSON.parse(str); console.log(arr); // [1, 2, 3] JSON.parse() 함수는 JSON 형식의 문자열을 파싱하여 자바스크립트 객체나 배열로 변환해준다. 위 경우는 문자열 "[1, 2, 3]"을 배열 [1, 2, 3]으로 변환하였다. JSON.parse() 함수를 사용할 때 주의할 점은 입력된 문자열이 올바른 JSON 형식을 따라야 한다는 점을 주의하자. 예를 들어, 문자열 내에 작은따옴표(')가 사용되어 있거나, JSON 형식이 올바르지 않은 경우에는 오류가 발생할 수 있다.

JavaScript에서 '구조 분해(destructuring)'는 객체나 배열에서 필요한 값을 추출하여 변수에 할당하는 것을 말한다. 이를 통해 코드를 간결하고 가독성이 좋게 작성할 수 있다. 객체 구조 분해 객체 구조 분해는 객체에서 필요한 값을 중괄호({}) 안에 변수명으로 선언하면 된다. const person = { name: "John", age: 30, city: "New York" }; const { name, age } = person; console.log(name); // 출력값: "John" console.log(age); // 출력값: 30 위 예시에서는 person 객체에서 name과 age 프로퍼티 값을 추출하여 변수에 할당했다. 이후에는 name과 age 변수를 사용하여 다른 ..

module.export = { 'function1 이름', 'function2 이름' }; module.exports = 'funciton 이름'; module에서 함수를 export하는 방식은 위의 두 가지가 있는데 둘은 사용하는 방식에 차이가 있다. 예를 들어 아래와 같이 객체 안에 함수를 담아 export 한 경우, //dataSource.js const function1 = ()=> {} module.exports = { function1, function2, } 사용할 때에 아래와 같이 object의 key를 불러오는 메서드 방식으로 사용해야 한다. const dataSource = rquire('./dataSource') dataSource.function1() 그러나 아래와 같이 하나의 함..

정규표현식이란 문자열을 다룰 때, 문자열의 일정한 패턴을 표현하기 위하여 사용하는 '형식 언어'이다. JavaScript에서는 정규 표현식도 객체로서, RegExp의 exec()와 test() 메서드를 사용할 수 있다. String의 match(), matchAll() (en-US), replace(), replaceAll(), search(), split() 메서드와도 함께 사용할 수 있다. 자바스크립트에서 정규 표현식은 두 가지 방법으로 만들 수 있다. 1. 정규 표현식 리터럴 슬래시로 패턴을 감싸서 작성. const re = /ab+c/ 정규 표현식 리터럴은 스크립트를 불러올 때 컴파일된다. 바뀔 일이 없는 패턴인 경우에 효율적이다. 2. RegExp 객체의 생성자 호출 RegExp - JavaSc..

자바스크립트의 기본적인 처리 방식은 비동기 방식이다. 비동기 방식이란 코드가 위에서 아래로 순차적으로 실행되지 않고, 동시에 시작되어 빨리 끝나는 코드가 먼저 실행 완료 될 수 있도록 하는 방식이다. https://walwaldev.tistory.com/33 [개념 정리] 자바스크립트에서 동기 / 비동기란 무엇일까? 자바스크립트에서 동기(synchronous)와 비동기(asynchronous)는 코드의 실행 방식을 설명하는 용어입니다. 코드의 실행 방식의 두 종류 동기 비동기 코드 순차 실행 코드가 순차적으로 실행되지 않음 walwaldev.tistory.com 비동기 방식은 효율적이지만, 코드 실행에 선후 관계가 필요한 경우가 있다. 예를 들어 아래와 같은 경우 countFruit 함수 정의 후 con..

프로젝트를 시작할 때 해야하는 초기 환경 세팅들이 있다. 메인이 될 app.js 파일에 기본적인 초기 설정 코드들 입력해두기 .env 파일 대신 github에 올릴 .env.sample 파일 작성하기 팀원들과 코드의 서식 (code format) 통일시킬 .prettierrc 파일 세팅하기 오늘은 이 세가지에 대해 알아보자. app.js app.js의 초기세팅에서 해야하는 일은 아래와 같은 것들이 있다. - 필요한 모듈/라이브러리들 package에서 불러오기(require) - 모듈들 실행시키기 - 데이터 연결하기 - 서버 열기 아래는 초기 세팅한 app.js의 예시 코드이다. //'dotenv' 불러오기는 데이터베이스와 연결하기 전에 반드시 선행되어야 한다. require('dotenv').config..

자바스크립트에서 삼항 연산자(ternary operator)는 조건 연산자(conditional operator)라고도 불리며, 간단한 조건문을 작성할 때 사용됩니다. 삼항 연산자는 condition ? exprIfTrue : exprIfFalse 형식으로 작성됩니다. 이때 condition은 참 또는 거짓을 평가할 조건식이며, exprIfTrue는 condition이 참일 경우 실행되는 식(expression)이고, exprIfFalse는 condition이 거짓일 경우 실행되는 식입니다. 예를 들어, 다음과 같은 코드는 age 변수가 18 이상일 경우에는 console.log('성인입니다.')를 실행하고, 그렇지 않은 경우에는 console.log('미성년자입니다.')를 실행합니다. let age =..

자바스크립트에서 동기(synchronous)와 비동기(asynchronous)는 코드의 실행 방식을 설명하는 용어이다. 코드의 실행 방식의 두 종류 동기 비동기 코드 순차 실행 코드가 순차적으로 실행되지 않음 기다리지 않고 다른 작업을 수행할 수 있도록 비동기적으로 처리 작업이 완료되면, 결과를 처리하기 위한 콜백 함수 호출 동기적으로 코드를 실행하면, 코드는 순차적으로 실행된다. 코드 라인을 읽고 그 다음 라인을 실행하며, 한 라인이 실행될 때까지 다음 라인으로 넘어가지 않는다. 반면에 비동기적으로 코드를 실행하면, 코드는 순차적으로 실행되지 않는다. 코드가 실행되는 동안 이벤트 루프(event loop)가 다음 코드를 실행하도록 대기한다. 동기와 비동기의 차이점을 이해하기 위해서는 콜백 함수(call..

JavaScript의 filter() 메서드는 배열의 각 요소를 순회하면서 특정 조건에 해당하는 요소들로만 구성된 새로운 배열을 반환한다. 원본 배열을 변경하지 않고 새로운 배열을 반환한다는 점을 주의하자. 문법은 아래와 같다. arr.filter(callback(element[, index[, array]])[, thisArg]) (* 코드 내 [] 안의 내용은 메서드 동작에 필수적이지 않으며, 실제 코드 입력 시 []는 생략함) 배열의 각 요소를 순회하며 callback함수를 실행한다. callback 함수는 다음과 같은 인자들을 받을 수 있다. index와 array 선택사항이다. 1. element: 배열 요소 2. index: 배열 요소의 인덱스 3. array: 필터 메서드를 호출한 배열 주의..