JavaScript를 이용해 코딩테스트를 풀다 보면 문자열을 배열로 변환해야 하는 경우가 존재한다.예를 들어 'javascript'라는 문자열을 ['j', 'a', 'v', 'a', 's', 'c', 'r', 'i', 'p', 't']로 변환하는 것처럼이다.이 과정에서 사용할 수 있는 방법은 크게 3가지가 있다. 이번 포스팅에서는 문자열을 배열로 변환하는 방법을 알아보고 코딩테스트를 풀 때 어떤 방법이 가장 효율적인지에 대해 알아보고자 한다. 01. 문자열에서 배열 변환하는 방법 3가지1️⃣ split 메서드'string'.split(''); 2️⃣ 스프레드 연산자[...'string']; 3️⃣ Array.from 메서드Array.from('string'); 02. 3가지 방법 속도 비교 : 스프레..
json-server json-server는 직접 DB를 만들고 서버를 구축할 필요 없이 json 파일을 이용해 REST API 서버를 구축해주는 라이브러리를 말한다. JSON Server는 단일 JSON 파일로부터 RESTful API를 생성하여, 개발자는 JSON 파일에 데이터를 정의하고 JSON Server는 이를 기반으로 API 엔드포인트를 자동으로 생성한다. 이렇게 생성된 API를 통해 클라이언트는 데이터를 요청하고 응답 받을 수 있다. JSON Server를 이용하면 서버를 구축하고 DB를 설정하는 복잡한 과정 없이도 가상의 REST API를 생성할 수 있다. 이를 통해 프론트엔드 개발자는 실제 백엔드와 통신하는 대신 JSON Server를 이용해 더욱 효과적으로 어플리케이션을 개발할 수 있다..
async / await Promise를 더욱 쉽게 사용할 수 있도록 해주는 문법이다. 함수 앞 부분에 async 키워드를 추가하고, 해당 함수 내부 Promise 앞부분에는 await 키워드를 사용한다. async / await는 Promise 객체를 반환하고, 이는 Promise 객체에서 사용하는 then을 대체해서 사용할 수 있는 것이다. 또한 async / awiat를 사용하면 비동기 코드를 마치 동기 코드처럼 보이게 작성할 수 있다. const 함수명 = async() => { await 비동기 처리 메서드 명(); } ▶ async : Promise를 반환하고, Promise가 아닌 것은 Promise로 감싸 반환한다. : 함수를 Promise로 return 하는 함수를 만든다. ▶ await..
앞서 콜백 지옥이라는 콜백 함수를 중첩해서 사용하여 가독성과 유지 보수성이 떨어지는 문제점이 발생하였다. 이 문제를 해결하기 위 Promise를 사용하여 콜백 지옥을 해결하며, 비동기 처리도 간결하게 작성할 수 있다. Promise 콜백 지옥을 해결하기 위한 방안으로 ES6에 도입된 기능이다. 우선 Promise를 사용하기 위해 Promise 객체를 생성해야 한다. const promise = new Promise((resolve, reject) => { ... }); Promise는 new 키워드와 같이 생성자를 이용하여 생성한다. 이때 new Promise를 하는 순간 이곳에 할당된 비동기 작업은 바로 시작되게 된다. 이 생성자는 executor라는 실행함수를 인자로 받으며, executer 함수에는..
앞서 비동기 처리의 동작 원리와 동기적 처리 과정의 단점을 어떻게 해결하는지 알아보았었다. 하지만, 비동기 처리는 시간 낭비 없이 동시에 여러 기능을 수행할 수 있게 하지만, 실행 결과의 순서가 보장되지 않는 문제점이 있었다. 이를 해결하기 위한 방법 중 하나로 콜백 함수에 대해 알아보겠다. 콜백 함수 (Callback) 콜백 함수란 다른 하수에 인수 혹은 매개변수로 넘겨지는 함수이다. 함수의 실행이 끝나면 지정한 콜백 함수를 실행해주도록 함수에 요청할 때 사용한다. 즉, 이벤트가 발생하거나 특정 시점에 실행되는 함수를 말한다. function example(callback, ...){ callback(); } example(call, ...); 위 코드는 callback함수의 매우 기초적인 사용 예시이..
동기와 비동기 차이 동기(Synchronous) 우선 자바스크립트는 동기식 언어라고 할 수 있다. 이때 동기란 한 작업이 실행되는 동안 다른 작업은 멈춘 상태를 유지하고 자신의 차례를 기다리는 것을 말한다. 한 번에 하나의 작업만 처리하기 때문에 동기는 단일 스레드(싱글 스레드)라고도 부른다. - 자바스크립트 V8 엔진 자바스크립트의 동기의 동작 원리를 이해하기 위해서, 자바스크립트 엔진의 주요 구성 요소를 보면 이해가 쉽다. 우선 자바스크립트 엔진 Memory Heap과 Call Stack으로 구성되어 있다. ▶ Memory Heap : 변수와 객체의 메모리 할당을 담당하는 곳 ▶ Call Stack : 함수가 호출 되면 쌓이는 곳 자바스크립트의 함수가 호출되면 Call Stack에 ..
리액트 강의를 보던 중 '...' 형태의 문법을 많이 사용하는 것을 보고 관련 문법을 정리하고자 한다. '...'는 자바스크립트 ES6에서 추가된 문법이다. 스프레드 연산자, 전개 구문, 펼침 연산자라고도 불리며 배열, 함수, 객체를 다룰 때 매우 편리한 기능을 제공한다고 한다. Spread 연산자(...) 스프레드 연산자는 배열이나 객체의 전체나 일부를 빠르게 복사할 수 있게 한다. ...연산자는 연결, 복사 등의 용도로 활용도가 높다. const a = [1, 2, 3]; const b = [...a, 4, 5, 6]; console.log(b);// [ 1, 2, 3, 4, 5, 6 ] 배열에서 spread 연산자 사용 두 개의 배열 결합하기 위해 기존에는 concat 메서드를 사용했지만 ...연산..
map() 함수는 모든 배열의 값에 특정 함수를 실행하고자 할 때 사용하는 메소드이다. const colors = ["red", "orange", "yellow", "green", "blue"]; 예를 들어 colors 라는 배열의 변수가 있다고 하자. 이 배열의 모든 값에 특정 문자를 추가하고자 한다. 이때 우리는 map() 함수를 이용할 수 있다. map() 함수를 이용하여 모든 배열의 값에 특정 함수를 실행하고, 이 함수에서 나온 값을 저장해 새로운 배열을 만든다. 즉 map() 함수는 요약하면 배열의 모든 인덱스에 접근해 함수를 실행하고 이 결과를 가지고 새로운 배열을 만들어내는 것이다. const showColors = colors.map(color => console.log(color)); c..
JS에서 class를 추가하는 방식이 있다. 바로 className과 classList를 사용하는 것이다. className과 classList를 사용하여 class를 추가하여 특정 class에 대한 스타일을 지정할 수 있다. className : 해당 요소에 지정된 class 값 : className에 값을 대입하면 class 이름 전체가 바뀌어버린다. const h1 = document.querySelector("div.hello:first-child h1"); function handleTitleClick(){ if(h1.className === "active"){ h1.className = ""; } else{ h1.className = "active"; } } h1.addEventListener..
자바스크립트 함수 함수란? : 특별한 목적의 작업을 수행하도록 설계된 독립적인 블록 : 함수는 필요할 때마다 호출하여 해당 작업 반복해서 수행 가능 JS에서 함수는 하나의 타입이다. 함수를 변수에 대입하거나 함수에 프로퍼티 지정하는 것 가능 다른 함수 내에서 중첩되어 정의될 수 있다. 함수 정의 function 함수이름(매개변수1, 매개변수2 ...){ 실행코드; } 함수이름(인자); 함수이름: 함수를 구분하는 식별자 매개변수: 함수를 호출할 때 인수로 전달된 값을 함수 내부에서 사용할 수 있게 해주는 변수 함수이름(); 으로 함수 실행할 수 있다. 인수(argument)는 함수를 실행하는 동안 전달하고자 하는 정보를 함수에 보낼 수 있는 방법으로 함수 이름(인자)로 소괄호 안에 위치한다. 객체 안에서 ..
Front-End/JavaScript 2024. 11. 23. 22:25
JavaScript를 이용해 코딩테스트를 풀다 보면 문자열을 배열로 변환해야 하는 경우가 존재한다.예를 들어 'javascript'라는 문자열을 ['j', 'a', 'v', 'a', 's', 'c', 'r', 'i', 'p', 't']로 변환하는 것처럼이다.이 과정에서 사용할 수 있는 방법은 크게 3가지가 있다. 이번 포스팅에서는 문자열을 배열로 변환하는 방법을 알아보고 코딩테스트를 풀 때 어떤 방법이 가장 효율적인지에 대해 알아보고자 한다. 01. 문자열에서 배열 변환하는 방법 3가지1️⃣ split 메서드'string'.split(''); 2️⃣ 스프레드 연산자[...'string']; 3️⃣ Array.from 메서드Array.from('string'); 02. 3가지 방법 속도 비교 : 스프레..
Front-End/JavaScript 2023. 5. 25. 14:26
json-server json-server는 직접 DB를 만들고 서버를 구축할 필요 없이 json 파일을 이용해 REST API 서버를 구축해주는 라이브러리를 말한다. JSON Server는 단일 JSON 파일로부터 RESTful API를 생성하여, 개발자는 JSON 파일에 데이터를 정의하고 JSON Server는 이를 기반으로 API 엔드포인트를 자동으로 생성한다. 이렇게 생성된 API를 통해 클라이언트는 데이터를 요청하고 응답 받을 수 있다. JSON Server를 이용하면 서버를 구축하고 DB를 설정하는 복잡한 과정 없이도 가상의 REST API를 생성할 수 있다. 이를 통해 프론트엔드 개발자는 실제 백엔드와 통신하는 대신 JSON Server를 이용해 더욱 효과적으로 어플리케이션을 개발할 수 있다..
Front-End/JavaScript 2023. 2. 23. 16:58
async / await Promise를 더욱 쉽게 사용할 수 있도록 해주는 문법이다. 함수 앞 부분에 async 키워드를 추가하고, 해당 함수 내부 Promise 앞부분에는 await 키워드를 사용한다. async / await는 Promise 객체를 반환하고, 이는 Promise 객체에서 사용하는 then을 대체해서 사용할 수 있는 것이다. 또한 async / awiat를 사용하면 비동기 코드를 마치 동기 코드처럼 보이게 작성할 수 있다. const 함수명 = async() => { await 비동기 처리 메서드 명(); } ▶ async : Promise를 반환하고, Promise가 아닌 것은 Promise로 감싸 반환한다. : 함수를 Promise로 return 하는 함수를 만든다. ▶ await..
Front-End/JavaScript 2023. 2. 23. 01:28
앞서 콜백 지옥이라는 콜백 함수를 중첩해서 사용하여 가독성과 유지 보수성이 떨어지는 문제점이 발생하였다. 이 문제를 해결하기 위 Promise를 사용하여 콜백 지옥을 해결하며, 비동기 처리도 간결하게 작성할 수 있다. Promise 콜백 지옥을 해결하기 위한 방안으로 ES6에 도입된 기능이다. 우선 Promise를 사용하기 위해 Promise 객체를 생성해야 한다. const promise = new Promise((resolve, reject) => { ... }); Promise는 new 키워드와 같이 생성자를 이용하여 생성한다. 이때 new Promise를 하는 순간 이곳에 할당된 비동기 작업은 바로 시작되게 된다. 이 생성자는 executor라는 실행함수를 인자로 받으며, executer 함수에는..
Front-End/JavaScript 2023. 2. 22. 23:18
앞서 비동기 처리의 동작 원리와 동기적 처리 과정의 단점을 어떻게 해결하는지 알아보았었다. 하지만, 비동기 처리는 시간 낭비 없이 동시에 여러 기능을 수행할 수 있게 하지만, 실행 결과의 순서가 보장되지 않는 문제점이 있었다. 이를 해결하기 위한 방법 중 하나로 콜백 함수에 대해 알아보겠다. 콜백 함수 (Callback) 콜백 함수란 다른 하수에 인수 혹은 매개변수로 넘겨지는 함수이다. 함수의 실행이 끝나면 지정한 콜백 함수를 실행해주도록 함수에 요청할 때 사용한다. 즉, 이벤트가 발생하거나 특정 시점에 실행되는 함수를 말한다. function example(callback, ...){ callback(); } example(call, ...); 위 코드는 callback함수의 매우 기초적인 사용 예시이..
Front-End/JavaScript 2023. 2. 21. 16:23
동기와 비동기 차이 동기(Synchronous) 우선 자바스크립트는 동기식 언어라고 할 수 있다. 이때 동기란 한 작업이 실행되는 동안 다른 작업은 멈춘 상태를 유지하고 자신의 차례를 기다리는 것을 말한다. 한 번에 하나의 작업만 처리하기 때문에 동기는 단일 스레드(싱글 스레드)라고도 부른다. - 자바스크립트 V8 엔진 자바스크립트의 동기의 동작 원리를 이해하기 위해서, 자바스크립트 엔진의 주요 구성 요소를 보면 이해가 쉽다. 우선 자바스크립트 엔진 Memory Heap과 Call Stack으로 구성되어 있다. ▶ Memory Heap : 변수와 객체의 메모리 할당을 담당하는 곳 ▶ Call Stack : 함수가 호출 되면 쌓이는 곳 자바스크립트의 함수가 호출되면 Call Stack에 ..
Front-End/JavaScript 2023. 1. 31. 12:24
리액트 강의를 보던 중 '...' 형태의 문법을 많이 사용하는 것을 보고 관련 문법을 정리하고자 한다. '...'는 자바스크립트 ES6에서 추가된 문법이다. 스프레드 연산자, 전개 구문, 펼침 연산자라고도 불리며 배열, 함수, 객체를 다룰 때 매우 편리한 기능을 제공한다고 한다. Spread 연산자(...) 스프레드 연산자는 배열이나 객체의 전체나 일부를 빠르게 복사할 수 있게 한다. ...연산자는 연결, 복사 등의 용도로 활용도가 높다. const a = [1, 2, 3]; const b = [...a, 4, 5, 6]; console.log(b);// [ 1, 2, 3, 4, 5, 6 ] 배열에서 spread 연산자 사용 두 개의 배열 결합하기 위해 기존에는 concat 메서드를 사용했지만 ...연산..
Front-End/JavaScript 2023. 1. 23. 01:02
map() 함수는 모든 배열의 값에 특정 함수를 실행하고자 할 때 사용하는 메소드이다. const colors = ["red", "orange", "yellow", "green", "blue"]; 예를 들어 colors 라는 배열의 변수가 있다고 하자. 이 배열의 모든 값에 특정 문자를 추가하고자 한다. 이때 우리는 map() 함수를 이용할 수 있다. map() 함수를 이용하여 모든 배열의 값에 특정 함수를 실행하고, 이 함수에서 나온 값을 저장해 새로운 배열을 만든다. 즉 map() 함수는 요약하면 배열의 모든 인덱스에 접근해 함수를 실행하고 이 결과를 가지고 새로운 배열을 만들어내는 것이다. const showColors = colors.map(color => console.log(color)); c..
Front-End/JavaScript 2022. 12. 1. 17:55
JS에서 class를 추가하는 방식이 있다. 바로 className과 classList를 사용하는 것이다. className과 classList를 사용하여 class를 추가하여 특정 class에 대한 스타일을 지정할 수 있다. className : 해당 요소에 지정된 class 값 : className에 값을 대입하면 class 이름 전체가 바뀌어버린다. const h1 = document.querySelector("div.hello:first-child h1"); function handleTitleClick(){ if(h1.className === "active"){ h1.className = ""; } else{ h1.className = "active"; } } h1.addEventListener..
Front-End/JavaScript 2022. 12. 1. 00:02
자바스크립트 함수 함수란? : 특별한 목적의 작업을 수행하도록 설계된 독립적인 블록 : 함수는 필요할 때마다 호출하여 해당 작업 반복해서 수행 가능 JS에서 함수는 하나의 타입이다. 함수를 변수에 대입하거나 함수에 프로퍼티 지정하는 것 가능 다른 함수 내에서 중첩되어 정의될 수 있다. 함수 정의 function 함수이름(매개변수1, 매개변수2 ...){ 실행코드; } 함수이름(인자); 함수이름: 함수를 구분하는 식별자 매개변수: 함수를 호출할 때 인수로 전달된 값을 함수 내부에서 사용할 수 있게 해주는 변수 함수이름(); 으로 함수 실행할 수 있다. 인수(argument)는 함수를 실행하는 동안 전달하고자 하는 정보를 함수에 보낼 수 있는 방법으로 함수 이름(인자)로 소괄호 안에 위치한다. 객체 안에서 ..