insu90 님의 블로그

이 글에서는 Axios와 jQuery를 사용하여 REST API에서 데이터를 가져오고, 국가 이름과 국기 이미지를 웹 페이지에 출력하는 방법을 단계별로 설명합니다. 추가적으로 검색 기능을 구현하여 특정 국가만 필터링해 출력할 수도 있습니다.사전 준비1. JSON Formatter 크롬 확장 설치REST API 데이터를 보기 쉽게 포맷해주는 JSON Formatter 크롬 확장을 설치하세요.https://chromewebstore.google.com/detail/json-formatter/bcjindcccaagfpapjjmafapmmgkkhgoa?hl=ko&pli=12. REST API 활용REST API를 통해 국가별 정보 데이터를 가져옵니다.URL: https://restcountries.com/v3...

JavaScript에서 배열은 자주 사용되는 자료구조입니다. 이 배열을 처리하는 데 유용한 다양한 메서드들이 존재하는데, 그 중 map(), filter(), reduce() 메서드는 매우 중요한 역할을 합니다. 각 메서드는 배열을 변환하거나, 조건에 맞는 요소를 추출하거나, 배열을 하나의 값으로 축소하는 등의 작업을 손쉽게 할 수 있게 도와줍니다.이번 글에서는 map(), filter(), reduce() 메서드의 사용법과 예제를 살펴보겠습니다. 1. map() 메서드map() 메서드는 배열의 각 요소에 대해 주어진 함수를 실행하고, 그 결과로 새 배열을 생성합니다. 원본 배열을 변경하지 않고, 변환된 새로운 배열을 반환합니다.기본 구문const newArray = array.map((currentVa..

전개 연산자 (Spread Operator)전개 연자는 배열이나 객체의 요소들을 개별 항목으로 분리할 때 사용됩니다. 배열이나 객체를 펼쳐서 값을 복사하거나 결합하는 등의 작업을 간단하게 할 수 있습니다.1. 배열의 요소 펼치기배열에서 Math.max()처럼 인수로 배열을 직접 전달하면 제대로 동작하지 않지만, 전개 연자를 사용하면 배열 요소를 펼쳐서 전달할 수 있습니다.//이하는 전개 연자로 배열요소를 전달하는 방법입니다.const numbers = [20, 2, 9, 22];console.log(Math.max(...numbers)); // 22 //이하는 전개 연자 없이 apply로 배열 요소를 전달하는 방법입니다.const numbers = [20, 2, 9, 22];// apply() 메서드로..

1. 서버로부터 받은 문자열 데이터를 JSON으로 변환서버에서 받은 데이터는 보통 문자열 형식으로 전달됩니다. 이 문자열 데이터를 JSON 형식으로 변환하여 객체처럼 다루어야 할 때가 많습니다.let scores = [];// 서버로부터 받은 문자열 데이터 - 서버로 부터 받아온 데이터는 아래와 같은 형식입니다.const dataFromServer = ` [ { "name": "홍길동", "korean": 80, "math": 90, "english": 90 }, { "name": "고길동", "korean": 90, "math": 80, "english": 80 }, { "name": "신길동", "korean": 70, "math": 80, "english"..

지금까지 포스팅한 내용과 검색을 기반으로 작성하겠습니다. 문제는 아래와 같습니다. // 학생별 점수를 아래 형식에 맞춰서 콘솔에 출력 let scores = [];/* ### 학생별 점수 데이터 0: {name: '홍길동', korean: 80, math: 90, english: 90} 1: {name: '고길동', korean: 90, math: 80, english: 80} 2: {name: '신길동', korean: 70, math: 80, english: 70} ### 출력 형식 ----------- --------- --------- --------- --------- --------- 학생이름 국어 영어 수학 합계..

자바스크립트는 함수를 정의하고 호출하는 다양한 방법을 제공합니다. 함수는 코드 재사용과 가독성을 높이는 중요한 요소입니다. 이 글에서는 자바스크립트에서 함수를 정의하는 방법과 그 사용법에 대해 자세히 살펴보겠습니다.1. 함수 선언문 (Function Declaration)함수 선언문은 자바스크립트에서 가장 기본적인 함수 정의 방법입니다. 이 방식에서는 반드시 함수 이름을 정의해야 하며, 함수는 프로그램 어디서든 호출할 수 있습니다.구문:let 함수이름 = function(매개변수1, 매개변수2, ...) { // 함수 본문 return 값; // 필요시 반환값};예시:let add = function(x, y) { return x + y;};console.log(add(10, 20)); ..

자바스크립트(JavaScript)는 웹 개발에서 가장 중요한 프로그래밍 언어 중 하나입니다. 이 글에서는 자바스크립트의 기초적인 개념인 변수, 자료형, 연산자, 호이스팅 등을 다룰 것입니다. 자바스크립트를 처음 배우는 사람도 쉽게 이해할 수 있도록 간단하고 상세하게 설명하겠습니다.1. 표현식과 문장, 키워드표현식(Expression)표현식은 값을 생성하는 코드 단위입니다. 예를 들어, 5 + 3은 8을 생성하는 표현식입니다. 표현식은 다른 표현식이나 문장에서 사용될 수 있습니다.문장(Statement)문장은 작업을 수행하는 코드 단위입니다. 대부분의 문장은 하나 이상의 표현식으로 구성됩니다. 예를 들어, let x = 5 + 3;는 표현식 5 + 3을 사용하여 x에 값을 할당하는 문장입니다. 문장은 세미..

1. Node.js 설치Node.js는 JavaScript를 서버 사이드에서 실행할 수 있게 해주는 런타임 환경입니다. 웹 개발에서는 클라이언트 사이드(JavaScript)와 서버 사이드(Node.js)를 모두 사용하는 경우가 많기 때문에, Node.js는 필수적으로 설치해야 할 도구입니다.Node.js 설치 절차Node.js 공식 웹사이트 방문:Node.js 공식 웹사이트에 접속합니다.설치 파일 다운로드:홈페이지에서 LTS(Long Term Support) 버전과 Current 버전이 제공됩니다. 처음 사용하는 경우에는 안정적인 LTS 버전을 선택하는 것이 좋습니다.설치 파일 실행:다운로드한 설치 파일을 실행합니다. 설치 과정에서 특별한 설정 없이 Next를 클릭하며 진행하면 됩니다.설치 확인:설치가 ..