왈왈이의 기술블로그

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: 필터 메서드를 호출한 배열 주의..

API 작성 프로젝트 시작 단계에서 필요한 기본 세팅들 1. npm 시작 작업 중인 프로젝트 폴더에서 npm init -y 명령어 입력 후 아래 프레임워크/라이브러리 설치 npm init -y를 입력하면 package.json 파일이 설치된다. npm init -y 2. nodemon global (-g)로 설치하기 npm install -g nodemon 파일 저장하면 자동으로 서버가 재시작되도록 하는 nodemon을 global로 설치하여 모든 프로젝트 진행 시 사용할 수 있도록 한다. package.json 파일의 script에 nodemon으로 쉽게 서버를 시작할 수 있는 명령어를 추가해 두면 편하다. 아래와 같이 추가해두면 npm start 명령어 만으로도 nodemon으로 app.js를 실행할..