프론트엔드 93

[프로그래머스] 소수 만들기 (LV1 - JavaScript)

https://school.programmers.co.kr/learn/courses/30/lessons/12977 프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr 1. 문제주어진 숫자 중 3개의 수를 더했을 때 소수가 되는 경우의 개수를 구하려고 합니다. 숫자들이 들어있는 배열 nums가 매개변수로 주어질 때, nums에 있는 숫자들 중 서로 다른 3개를 골라 더했을 때 소수가 되는 경우의 개수를 return 하도록 solution 함수를 완성해 주세요. 제한사항 nums에 들어있는 숫자의 개수는 3개 이상 50개 이하입니다.nums의 각 원소는 1 이상 1,..

[프로그래머스] 기사단원의 무기 (LV1 - Javascript)

https://school.programmers.co.kr/learn/courses/30/lessons/136798 프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr 1. 문제숫자나라 기사단의 각 기사에게는 1번부터 number까지 번호가 지정되어 있습니다. 기사들은 무기점에서 무기를 구매하려고 합니다.각 기사는 자신의 기사 번호의 약수 개수에 해당하는 공격력을 가진 무기를 구매하려 합니다. 단, 이웃나라와의 협약에 의해 공격력의 제한수치를 정하고, 제한수치보다 큰 공격력을 가진 무기를 구매해야 하는 기사는 협약기관에서 정한 공격력을 가지는 무기를 구매해야 합니..

코딩 테스트 2024.09.25

[JS] Axios 오류 처리

Axios를 사용한 API 요청에서 발생할 수 있는 다양한 오류를 처리하는 방법은 매우 중요합니다. 서버나 네트워크 문제로 인해 API 요청이 실패할 수 있으며, 이러한 오류를 적절히 처리하면 사용자 경험을 개선하고 문제를 디버깅하는 데 도움이 됩니다. 이번 글에서는 Axios의 오류 처리 방식과 일반적인 방법을 소개하겠습니다.   Axios의 오류 처리목차 1. 기본 오류 처리 2. 오류 객체 3. HTTP 상태 코드에 따른 오류 처리 4. 타임아웃 처리마무리추천글 기본 오류 처리 Axios는 Promise 기반이기 때문에, 오류는 주로 .catch() 블록에서 처리됩니다. 요청이 실패하면 .catch() 블록이 실행되어 오류에 대한 정보를 처리할 수 있습니다.axios.get('https://json..

[JS] Javascript에서 Axios 사용하기

Axios는 Promise 기반의 HTTP 클라이언트로, 웹 브라우저와 Node.js를 위한 HTTP 비동기(작성된 순서대로 실행되지 않는 처리) 통신 라이브러리입니다. 특히, REST API 요청을 간편하게 처리할 수 있도록 다양한 기능을 제공해 많은 개발자들이 선호하는 라이브러리입니다. 이번 포스팅에서는 Axios의 특징과 이를 사용한 API 요청 방법을 알아보겠습니다.   JavaScript에서 Axios를 사용한 API 요청 방법 목차 1. Axios 설치 2. Axios 특징 3. Axios로 API 요청하기 4. Axios 인스턴스마무리추천글 Axios 설치npm을 통한 설치npm install axiosyarn을 통한 설치yarn add axioscdn을 통한 설치// jsdelivr// u..

[JS] fetch 함수 - API 호출하기 (GET, POST)

Fetch API는 JavaScript에서 HTTP 요청을 보낼 수 있는 현대적인 인터페이스입니다. 예전의 XMLHttpRequest보다 훨씬 더 강력하고 유연하게 서버와 데이터를 주고받을 수 있게 해 줍니다. Fetch를 사용하면 JSON, HTML 같은 리소스를 쉽게 요청하고 처리할 수 있습니다.   JavaScript의 Fetch 함수 목차 1. fetch() 기본 사용법 2. fetch() 옵션 3. fetch() - POST 요청 4. API 호출 함수 5. fetch() 오류 처리마무리추천글 fetch() 기본 사용법 fetch() 메서드는 URL을 받아 HTTP 요청을 보낸 후, 응답을 Promise로 반환합니다. 다음은 간단한 GET 요청의 예시입니다.fetch('https://jsonpl..

[JS] 자바스크립트 비동기 - Promise

JavaScript에서 비동기 작업을 처리할 때 가장 강력하고 직관적인 도구 중 하나가 Promise입니다. 과거에는 콜백(callback) 방식으로 비동기 처리를 많이 했지만, 콜백 헬(callback hell) 문제로 인해 코드가 복잡해지는 단점이 있었습니다. Promise는 이런 문제를 해결하기 위해 등장한 개념으로, 비동기 작업을 더욱 쉽게 처리할 수 있게 해 줍니다.    자바스크립트의 비동기 Promise: 이해와 활용  목차   1. Promise란? 2. Promise 사용법 3. Promise 체이닝(Chaining) 4. Promise 병렬 처리 5. async와 await 6. 오류 처리(try / catch / finally)마무리추천글 Promise란?Promise는 "미래에 완..

[JS] 자바스크립트 비동기 - 콜백(Callback)

JavaScript의 코드가 실행되는 방식은 핵심 개념입니다. JavaScript는 단일 스레드로 작동하지만, 메인 스레드를 막지 않고 비동기 작업을 처리하는 데 강점을 가지고 있습니다. 여기서 콜백과 비동기 실행이 중요한 역할을 합니다. 이번 포스팅에서는 이 개념들을 쉽게 설명해 보겠습니다!    콜백(Callback) 목차   1. 콜백이란? 2. 콜백을 이용한 비동기 처리 3. 콜백의 한계점 - 콜백 헬마무리추천글 콜백이란?콜백(callback)은 하나의 함수에 파라미터로 전달되어 특정 작업이 완료된 후에 실행되는 함수입니다. 쉽게 말해, 파라미터로 변수나 값을 전달하는 게 아니라 함수를 전달해, "이 작업이 끝나면 이 함수도 실행해 줘"라고 지시하는 방법입니다.function sayHello(na..

[JS] 자바스크립트의 this?

JavaScript에서 this 키워드는 가장 혼란스러우면서도 중요한 개념 중 하나입니다. this는 함수가 호출되는 맥락(context)에 따라 값이 달라지며, 이를 올바르게 이해하고 사용하는 것이 JavaScript 코드를 작성할 때 매우 중요합니다.이번 포스팅에서는 this가 무엇인지, 다양한 상황에서 어떻게 동작하는지, 그리고 그 사용법을 명확히 이해하기 위한 실전 예시들을 함께 알아보겠습니다.   JavaScript - this 목차 1. this란? 2. this의 다양한 동작 상황 3. 화살표 함수와 this 4. 주의 사항 - 콜백 함수에서 this 5. this의 명시적 바인딩마무리추천글위의 목차를 클릭하면 해당 글로 자동 이동 합니다. this란? this는 함수가 어디서 어떻게 호출되..

[JS] 얕은 복사, 깊은 복사

JavaScript에서 spread 구문(...)은 배열과 객체를 복사하거나 병합하는데 매우 유용한 문법입니다. 특히 간결한 코드로 데이터를 다룰 수 있어 자주 사용됩니다. 하지만, spread 구문이 항상 얕은 복사(shallow copy)를 수행한다는 점을 이해하는 것이 중요합니다. 이 글에서는 얕은 복사와 깊은 복사의 차이점을 설명하고, 어떤 경우에 spread 구문이 적합한지, 그리고 깊은 복사가 필요한 경우 어떻게 처리해야 하는지 알아보겠습니다.    자바스크립트의 얕은 복사와 깊은 복사 목차   1. 얕은 복사 2. 깊은 복사 3. 적절한 사용법 4. 얕은 복사의 위험성마무리추천글 얕은 복사얕은 복사는 객체나 배열의 참조값을 복사하는 것을 의미합니다. 즉, 배열이나 객체의 각 요소가 원시형(P..

[JS] 자바스크립트의 배열

JavaScript에서 배열(Array)은 데이터를 순서대로 저장하는 데 사용되는 매우 중요한 자료형 중 하나입니다. 배열은 숫자, 문자열, 객체 등 다양한 타입의 데이터를 저장할 수 있으며, 이를 다루기 위해 다양한 메소드(함수)를 제공합니다. 이번 포스팅에서는 JavaScript 배열과 배열을 다루는 주요 메소드들에 대해 살펴보겠습니다.    자바스크립트의 배열과 주요 메소드 목차   1. 배열이란? 2. 배열 메소드 3. 배열 메소드 사용 시 주의사항 마무리 추천글  배열배열은 객체(object)의 일종으로, 인덱스를 기반으로 여러 데이터를 저장하는 자료구조입니다. 배열의 길이는 동적으로 변하며, 배열 안에 모든 타입의 데이터를 혼합하여 저장할 수 있습니다.// 빈 배열 선언let arr = [];..