insu90 님의 블로그

리액트(React)는 SPA(Single-Page Application) 개발을 손쉽게 도와주는 JavaScript 라이브러리입니다. UI를 컴포넌트 단위로 개발하며, 웹 애플리케이션뿐만 아니라 네이티브 앱 개발에도 사용됩니다.이 글에서는 SPA와 MPA의 차이, 리액트를 이용한 기본 앱 개발, 그리고 프로젝트 초기화를 도와주는 도구인 CRA(Create-React-App) 및 Next.js를 활용한 앱 제작 방법을 소개합니다.MPA와 SPA: 차이점 및 장단점 MPA (Multi-Page Application)특징MPA는 요청마다 새로운 HTML 페이지를 서버에서 로드하는 전통적인 웹 애플리케이션 방식입니다.장점SEO(검색엔진 최적화)에 유리초기 로딩 속도가 빠름기능이 독립적이고, 다양한 툴과 쉽게 연..

이 글에서는 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. RDS (Relational Database Service)RDS는 AWS에서 제공하는 관리형 관계형 데이터베이스 서비스로, 데이터베이스 관리의 복잡함을 줄여주고, 성능, 보안, 내구성 등 데이터베이스 운영에 필요한 다양한 기능을 자동화합니다. RDS를 사용하면 운영체제 관리나 데이터베이스 소프트웨어 설치 및 유지보수에 대한 부담을 줄일 수 있습니다.주요 특징:다양한 데이터베이스 엔진 지원: MySQL, PostgreSQL, MariaDB, Oracle, Microsoft SQL Server 등 여러 관계형 데이터베이스 엔진을 지원합니다.자동화된 백업: RDS는 백업을 자동으로 관리하며, 장애 복구 및 장애 조치를 빠르게 처리할 수 있습니다.확장성: 데이터를 빠르게 읽고 쓸 수 있도록 여러 가용영역..

S3(Simple Storage Service)란?AWS의 S3는 무제한의 스토리지 용량을 제공하는 클라우드 스토리지 서비스입니다. S3는 데이터를 자동으로 최소 3개의 가용 영역(AZ)에 분산 저장하여, 성능, 확장성, 가용성, 내구성을 극대화합니다. 또한, S3는 비용 효율적이고, 높은 내구성을 자랑하는 파일 저장 및 관리 서비스를 제공합니다.S3의 주요 사용 사례백업 및 복원: 중요한 데이터를 안전하게 보관하고, 필요시 복원할 수 있음.재해 복구(DR): 서버나 시스템의 장애 시 빠르게 복구할 수 있는 환경 구축.아카이브: 장기 저장이 필요한 데이터 보관.클라우드 스토리지: 다양한 파일의 안전한 클라우드 보관소.정적 웹 사이트 호스팅: 별도의 웹 서버 없이 HTML, CSS, JS 등의 파일을 이용..