Per ardua ad astra.

FlatList들어가며리액트 네이티브(React Native)의 FlatList 컴포넌트에 대해 정리해본다. FlatList개념효율적으로 대량의 스크롤 가능한 항목을 렌더링하기 위해 사용되는 컴포넌트최적화된 가상 스크롤링 기능을 제공하여 성능 문제를 줄이고, 스크롤 시 필요한 항목만 렌더링한다.ScrollView 컴포넌트와의 차이점 주요 속성속성설명data- 렌더링할 데이터 배열(Array)을 전달- 배열의 각 요소는 렌더링될 항목의 데이터renderItem- 데이터를 어떻게 렌더링할지 정의하는 함수- 매개변수로 { item, index } 형태의 객체를 받는다.keyExtractor- 각 항목의 고유 키를 반환하는 함수- 기본적으로 item.key 또는 item.id를 사용..

Contentful들어가며Headless CMS 중 하나인 Contentful 서비스에 대하여 정리해본다. Contentful개념2013년 독일 베를린에서 만들어진  Headless CMS(Content Management System, 컨텐츠 관리 시스템) 서비스현재 Spotify, Red Bull, IKEA 등 굵직한 글로벌 기업들이 이 서비스를 이용하고 있다.프론트엔드와 백엔드(컨텐츠 저장 및 관리)가 결합된 구조와 달리, 프론트엔드와 백엔드가 분리된 형태의 컨텐츠 관리 시스템이다. Content that takes you everywhereBusiness moves faster when teams producing content have a platform that empowers them to ..

EmailJS 라이브러리들어가며간편하게 회원가입으로 무료로 월 200건까지 이메일을 보낼 수 있도록 도와주는 EmailJS 라이브러리에 대해 정리해본다. EmailJS개념사용자가 서버 없이 자바스크립트만으로 이메일을 보낼 수 있도록 도와주는 서비스사용자는 백엔드 설정 없이 클라이언트 사이드에서 이메일을 전송할 수 있다.SMTP 서버를 활용하여 이메일을 전송하며, Gmail, Outlook 등의 이메일 서비스를 지원한다. 주요 특징클라이언트 사이드에서 직접 이메일을 전송할 수 있어 백엔드가 필요없다.Gmail, Yahoo, Outlook 등 여러 서비스와 호환된다.사용자 정의 템플릿을 만들어 동적으로 데이터를 전달할 수 있다.전송 데이터를 암호화하며 API 키를 사용하여 인증을 처리한다.몇 줄의 코드만으로..

FusionCharts 라이브러리들어가며자바스크립트(JavaScript)의 FusionCharts 라이브러리에 대해 정리해본다. FusionCharts개념웹 기반 대시보드와 데이터 시각화를 위한 자바스크립트(JavaScript) 차트 라이브러리개발자와 기업이 다양한 형태의 데이터를 차트, 그래프, 게이지(Gauge), 지도 등으로 시각화 할 수 있다.무료 및 유료 플랜이 있어 프로젝트의 필요에 따라 선택 가능하다.공식 홈페이지 : JavaScript charts for web & mobile | FusionCharts 특징선 차트, 파이 차트, 게이지, 히트맵 등 100개 이상의 차트 유형 지원복잡한 비즈니스 대시보드나 보고서를 쉽게 만들 수 있다.모든 차트는 반응형 디자인이 적용되어 모바일, 태블릿, ..

Moment.js 라이브러리들어가며자바스크립트(JavaScript)에서 날짜와 시간을 처리하기 위해 많이 사용되는 Moment.js 라이브러리에 대해 정리해본다. moment.js개념자바스크립트에서 날짜와 시간을 처리하기 위해 사용되는 인기 있는 라이브러리날짜 및 시간 계산, 형식화, 파싱, 시간대 변환, 상대적인 시간 표현 등을 쉽게 처리할 수 있도록 도와준다.자바스크립트의 기본 Date 객체와 비교하여 훨씬 더 직관적이고 강력한 기능을 제공한다.2020년부터 Moment.js는 유지보수 전용 모드로 전환되었고, 새로운 프로젝트에서는 Day.js나 Luxon, Date-fns과 같은 다른 라이브러리를 대신 사용하도록 권장되고 있다. (하지만 여전히 많은 프로젝트에서 사용되고 있다.)Day.jsMom..

Faker.js 라이브러리들어가며Faker.js 라이브러리에 대해 정리해본다. Faker.js개념다양한 유형의 가짜 데이터를 쉽게 생성할 수 있도록 도와주는 자바스크립트 라이브러리애플리케이션 개발, 테스트, 데모용 데이터를 빠르게 생성할 때 유용하다.이름, 주소, 전화번호, 이메일, 날짜, 이미지 URL 등을 무작위로 생성할 수 있다.관리 문제로 2021년에 개발이 중단되었고, 이후 커뮤니티에서 ＠faker-js/faker라는 이름으로 포크(Fork)하여 유지보수하고 있다.기존의 faker.js는 더 이상 유지보수되지 않는다.자세한 내용은 이 글을 참고한다. 따라서 커뮤니티에 의해 관리되고 있는 ＠faker-js/faker를 사용한다.Faker로 생성한 데이터는 무작위이며 실제 데이터가 아니므..

프리즈마(Prisma)들어가며ORM(Object-Relational Mapping) 도구 중 하나인 프리즈마(Prisma)에 대해 정리해본다. 프리즈마(Prisma)개념ORM(Object-Relational Mapping) 도구데이터베이스와 애플리케이션 간의 인터페이스를 간편하게 만들어주는 개발 도구주로 Node.js와 TypeScript 환경에서 사용된다.SQL 쿼리를 직접 작성할 필요 없이 안전한 타입의 코드를 통해 데이터베이스와 상호작용할 수 있도록 도와준다. ORM(Object-Relational Mapping)객체 지향 프로그래밍 언어에서 사용하는 객체(Object)와 관계형 데이터베이스(Relational Database)의 테이블 간의 매핑을 자동화하는 기술데이터베이스의 데이터를 SQL이 아..

전개 연산자 (Spread Operator, ...)들어가며자바스크립트(JavaScript)에서 사용할 수 있는 전개 연산자(Spread Operator, ...)에 대해 정리해본다. 전개 연산자(Spread Operator, ...)개념배열(Array)이나 객체(Object)를 쉽게 확장하거나 복사할 수 있는 기능배열, 객체, 함수 호출에서 다양하게 사용할 수 있다.배열의 병합 & 복사객체의 병합 & 복사함수 호출 시 인수 확장전개 연산자를 사용할 때, 얕은 복사(Shallow Copy)가 이루어진다.ES6(ECMAScript 2015)부터 사용할 수 있다. 얕은 복사는 객체나 배열의 최상위 수준만 복사한다. (중첩된 객체나 배열은 원본 데이터에 대한 '참조'를 유지한다.) 따라서 전개 연산자를..

for 문 정리 (for, for...in, for...of, forEach, for await...of)들어가며자바스크립트(JavaScript)에서 사용할 수 있는 for 문(for, for...in, for...of, forEach, for await...of)에 대해 간단하게 정리해본다. 종류① for 문특정 횟수만큼 반복할 때 사용한다.for (initialization; condition; increment) { // 반복할 코드} 예제 코드for (let i = 0; i  ② for...in 문객체의 열거 가능한 속성을 반복할 때 사용한다.배열(Array)에서도 인덱스를 반복할 수 있지만, 일반적으로 객체(Object)에 사용된다.for (const key in ob..

JSON(JavaScript Object Notation) 다루기들어가며웹 서버 뿐만 아니라 다양한 곳에서 데이터를 교환할 때 사용되는 파일 형식인 JSON(JavaScript Object Notation)에 대해 정리해본다. JSON(JavaScript Object Notation)개념데이터 교환 형식으로 널리 사용되며, 문자열로 인코딩된 객체를 포함한 구조화된 데이터를 표현한다.자바스크립트는 JSON 데이터를 다루기 위해 JSON 객체를 제공한다. 주요 메서드JSON 객체의 주요 메서드로는 JSON.stringify()와 JSON.parse()가 있다. ① JSON.stringfy()자바스크립트 객체({ prop: value, ... })나 배열([value1, ..., valueN])..

React Router의 loader 속성들어가며리액트 라우터(react-router-dom)의 loader 속성에 대해 정리해본다. React Router의 loader 속성React Router Version 6 부터 사용할 수 있다.컴포넌트가 랜더링되기 전에 데이터를 가져올 수 있다.로더 함수에서 반환된 데이터는 자동으로 해당 컴포넌트에서 사용할 수 있게 된다.로더는 함수로 정의되며, 해당 함수에서 데이터를 가져와 컴포넌트에 전달한다.로더 함수를 사용하면 컴포넌트가 렌더링되기 전에 데이터를 가져올 수 있어, 컴포넌트가 초기 로딩 상태를 표시하지 않고 바로 데이터를 렌더링할 수 있다.따라서 더 나은 사용자 경험을 제공할 수 있다. 예제 코드import { RouterProvider, cre..

요소에서 제출(Submit) 버튼 사용 시 기본 동작 막는 방법들어가며 요소 안에 type이 submit인 버튼을 두고, 클릭할 때, 폼 제출 효과가 발생한다.해당 버튼을 클릭할 때 폼 데이터가 서버로 전송되면서 페이지가 새로고침 되는데, 이것은 폼의 기본 동작이다. // ... 제출 이때 폼 제출 효과 막을 수 있는 방법을 정리해본다. 방법방법 1 : 요소의 type 속성을 button으로 지정하기 요소의 type 속성을 submit이 아닌 button으로 지정하는 방법이다.function handleSubmit() { console.log("Submitted!");} 로그인  방법 2 : 요소의 onClick 이벤트 함수에 event...

Intl.NumberFormat 객체들어가며자바스크립트(JavaScript)의 Intl.NumberFormat 객체에 대해 알아보자.Intl.NumberFormat 객체를 사용하면 숫자를 특정 로케일과 옵션에 맞춰 포맷팅(Formatting) 할 수 있다. Intl.NumberFormat 객체개념에크마스크립트(ECMAScript) 국제화 API의 일부로, 숫자의 형식을 지정하는 데 사용된다.로케일(Locale)과 옵션(Option)을 사용하여 숫자의 형식을 세부적으로 지정할 수 있다. 주로 통화, 소수점 자리수, 숫자 그룹화 등의 형식을 지정하는데 사용된다. 사용 방법new Intl.NumberFormat(locales, options) locales로케일 지정로케일(Locale)컴퓨터 프로그..

map 함수를 사용할 때 중괄호({})와 소괄호(())들어가며리액트(React)에서 중괄호 {}와 소괄호 ()는 주로 JSX 안에서 사용되며, 특히 map() 메서드와 함께 사용될 때 주의해야 할 점이 몇가지 있다.map 함수를 사용할 때 중괄호({})와 소괄호(())를 사용하는 경우의 차이에 대해 알아보자. 중괄호({})자바스크립트 표현식(Expression)을 감싸기 위해 사용된다.중괄호를 사용할 때는 반드시 반환값이 있어야 하며, 명시적으로 return 키워드를 사용해서 값을 반환해야 한다.여러 줄의 코드가 필요하거나 조건문 등 복잡한 로직을 작성해야 할 때 사용한다.const items = ['Apple', 'Banana', 'Cherry'];const listItem..

실시간으로 특정 요소의 길이값 가져오기들어가며리액트애서 실시간으로 특정 요소의 길이값을 가져오는 방법을 알아보자. 방법우선 useRef를 이용하여 실시간으로 길이값을 가져올 요소를 지정해준다.import {useRef} from 'react';// ...const horiRef = useRef(null);// ...return ( {/* ... */} ); 다음과 같이 useEffect와 ResizeObserver를 이용하여 해당 요소의 사이즈값을 실시간으로 가져올 수 있다.import { useEffect } from 'react';useEffect(() => { const resizeObserver = new ResizeObserver((entries) => ..

마우스 호버 효과를 적용하기 위한 커스텀 훅 만들기 (useHover.js) 들어가며 요소 위에 마우스 커서를 호버 시, 효과가 작동할 수 있도록 커스텀 훅을 만들어보자. 방법 기존의 방법 커스텀 훅을 사용하지 않을 경우, mouseover, mouseout에 대한 각각의 이벤트 핸들러 함수를 만들어서 마우스 호버 효과를 적용시키고 싶은 대상에 연결해 주는 방식으로 구현할 수 있었다. import React, { useState } from react; const MyComponent = () => { const [isHovered, setIsHovered] = useState(false); const handleMouseOver = () => { setShowPopup(true); }; cons..

자바스크립트 비동기 프로그래밍(Asynchronous Programming) 들어가며 자바스크립트의 비동기 프로그래밍(Asynchronous Programming)에 대해 공부했던 내용을 정리해본다. 비동기 프로그래밍(Asynchronous Programming) 개념 자바스크립트에서 서버와 통신을 하다 보면 어떤 자료를 요청하고 받는지에 따라, 또는 네트워크 속도에 따라 조금씩 처리 시간이 달라진다. 그리고 시간 차이가 나는 처리 결과를 받아서 순서대로 처리해야 하는데, 이러한 처리 방식을 '비동기 처리 방식'이라고 한다. 자바스크립트 프로그램은 많은 함수들이 모여서 하나의 기능을 만든다. 그런데 이들 함수의 실행 시간이 서로 다르므로 특정 작업이 끝나면 다른 작업을 하고, 그 작업이 끝나면 이어서 또..

변수 재선언과 재할당 (var, let, const) 들어가며 자바스크립트의 변수(var, let, const)의 재선언과 재할당에 대하여 알아보자. 재선언과 재할당 ① var 재선언 및 재할당이 모두 가능하다. var sum = add(10, 20); console.log(sum); // 30 var sum = 100; // 재선언 (가능) console.log(sum); // 100 sum = 200; // 재할당 (가능) console.log(sum); // 200 하지만 var을 사용할 경우, 다음과 같이 호이스팅(Hoisting)이 발생할 수 있다. var x = 10; var sum = x + y; // y 변수가 선언되기 전에 실행 var y = 20; console.log..

스프레드 연산자(Spread Operator) 들어가며 자바스크립트(JavaScript) ES6에 추가된 스프레드 연산자(Spread Operator)에 대해 알아보자. 스프레드 연산자(Spread Operator) 개념 스프레드 연산자(...)는 자바스크립트에서 배열(Array)이나 객체(Object)를 확장하거나 펼치는데 사용된다. 이 연산자를 사용하면 배열이나 객체의 요소를 추출하거나 복제하여 다른 배열이나 객체에 포함시킬 수 있다. 스프레드 연산자는 코드를 더 간결하게 만들고 배열이나 객체를 조작하거나 복제할 때 유용하게 사용된다. 활용 방법 ① 배열(Array)에서의 스프레드 연산자 활용 배열에서 스프레드 연산자는 다음과 같이 사용될 수 있다. const numbers = [1, 2, 3];..

클래스 컴포넌트(Class Components)와 함수형 컴포넌트(Functional Components) 들어가며 리액트(React)는 기본적으로 클래스 컴포넌트(Class Components)와 함수형 컴포넌트(Functional Components) 2가지 유형의 컴포넌트를 제공한다. 최신 리액트 버전에서는 함수형 컴포넌트와 훅스(Hooks)를 사용하는 것이 권장되며, 상태 관리나 라이프사이클 이벤트 처리를 더 간단하게 할 수 있는 장점이 있다. 그러나 이미 클래스 컴포넌트로 작성된 코드가 많다면, 따로 변경할 필요는 없다. 클래스 컴포넌트와 함수형 컴포넌트에 대해 알아보자. 클래스 컴포넌트(Class Components) ES6의 클래스 문법을 사용하여 생성된다. class 키워드를 사용하여 ..

디스트럭처링(Destructuring) 들어가며 자바스크립트 ES6에 추가된 디스트럭처링(Destructuring) 기능에 대해 알아보자. 디스트럭처링(Destructuring) 개념 ECMAScript 2015(ES6)에서 도입된 기능 중 하나 ES6에서 배열(Array)과 객체(Object)의 요소들을 해체(Destructuring)하여 변수에 할당(Assign)하는 방법으로 등장했다. 이전에는 요소들을 하나씩 변수에 할당하는 번거로운 작업을 해야했는데, 디스트럭처링은 이를 보다 간단하고 직관적으로 처리할 수 있게 해준다. 이를 통해 코드의 가독성과 유지보수성을 높일 수 있게 되었다. 종류 및 사용 방법 디스트럭처링은 변수 이름과 객체 또는 배열의 속성 이름이나 순서가 일치해야 한다. const an..

훅(Hook)들어가며리액트(React)에서 사용되는 기본적인 훅(Hook)들에 대해 알아보자. 훅(Hook)개념함수 컴포넌트에서 상태(State)나 생명주기 기능 등을 사용할 수 있도록 도와주는 기능클래스 컴포넌트의 기능을 함수 컴포넌트에서도 사용할 수 있게 해준다.가장 널리 사용되는 훅으로는 useState, useEffect, useContext 등이 있다.각각의 훅을 활용하면 함수 컴포넌트에서 상태 관리, 부수 효과 처리, 전역적인 데이터 공유 등을 편리하게 할 수 있다.이 외에도 많은 다양한 훅이 있으며, 직접 커스텀 훅을 만들어 사용할 수도 있다.훅을 사용하면 함수 컴포넌트에서 상태를 관리하고, 생명주기 메서드를 이용할 수 있어 훨씬 간결하고 유연한 코드를 작성할 수 있게 된다. 종류..

Map / Filter / Reduce / Find / FindIndex / IndexOf / Includes 들어가며 자바스크립트 ES6의 Map, Filter, Reduce, Find, FindIndex, IndexOf, Includes 함수에 대해 알아보자. 이 함수들은 배열을 다양한 방식으로 조작하고 필터링하며, 배열 요소를 가공하여 필요한 결과를 얻을 때 유용하게 사용된다. 설명 ① Map Map 함수는 배열의 각 요소에 대해 주어진 함수를 호출하고, 그 함수가 반환하는 값을 모아 새로운 배열을 생성한다. 기존 배열의 각 요소를 변환하여 새로운 배열을 만들 때 주로 사용된다. 예를 들어, 모든 요소를 2배로 만드는 경우와 같이 각 요소를 수정하고 새로운 배열을 생성하는 ..

리액트(React.js) 개발 환경 구축하기 (Windows) 들어가며 윈도우(Windows)에서 리액트(React.js) 개발 환경을 구축해보자. 방법 ① Node.js 설치하기 Node.js 프로그램을 컴퓨터에 설치해준다. Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org ② 비주얼 스튜디오 코드(VS Code) 설치 및 확장 프로그램 설치 비주얼 스튜디오 코드(VS Code)를 설치하고, VS Code에 아래의 확장 프로그램을 설치한다. Babel JavaScript vscode-icons JS JSX Snippets ③ 리액트 앱 생성하기 my-app 이라는 프로젝트를 생성하려면 ..

모듈 시스템 (import/export) 들어가며 ES6에서 도입된 모듈 시스템(Module System)에 대해서 알아보자. 모듈 시스템 개념 ES6에서 도입된 모듈 시스템은 자바스크립트 코드를 여러 파일로 나누고 재사용 가능한 모듈로 구성하는 기능을 제공한다. 이 기능은 import와 export 키워드를 사용하여 모듈을 가져오고 내보내는 것으로 이루어진다. 내보내기(Export) 모듈에서 특정한 기능, 변수, 함수, 클래스 등을 다른 파일에서 사용할 수 있도록 내보내려면 export 키워드를 사용한다. ① Named Export 내보내려는 대상에 이름을 붙여서 내보내는 방법이다. // 변수, 함수, 클래스 등을 내보내기 export const myVariable = 10; export f..

리액트(React)에서 HTML 요소의 클래스를 지정할 때 class가 아닌 className을 사용하는 이유? 들어가며 리액트(React)에서 HTML 요소의 클래스를 지정할 때 class가 아닌 className을 지정하는 이유를 알아보자. 이유 리액트(React)에서 HTML 요소의 클래스를 지정할 때, 다음과 같이 class가 아닌 className을 지정한다. 그 이유는 자바스크립트(JavaScript)와의 충돌을 피하기 위해서이다. 리액트는 자바스크립트와 JSX를 사용하여 UI를 작성한다. JSX는 자바스크립트의 확장 문법이다. JSX는 HTML과 유사하게 보이지만, 자바스크립트의 일부이다. 자바스크립트에는 class라는 키워드(Keyword)가 있기 때문에 리액트에서 HTM..

splice 메서드, slice 메서드, split 메서드 비교 들어가며 자바스크립트의 splice 메서드와 slice 메서드, split 메서드를 비교해보고 차이점을 알아보자. splice 메서드 설명 배열의 요소를 제거하거나 삽입할 수 있다. 사용법 array.splice(start, deleteCount[, item1, item2, ...]) start : 변경을 시작할 인덱스 deleteCount : 제거할 요소의 개수 item1, item2, ... : 추가할 요소 [선택 사항] 사용 예 let array = [1, 2, 3, 4, 5]; array.splice(2, 1); // 인덱스 2에서 1개의 요소 제거 -> [1, 2, 4, 5] array.splice(1, 0..

화살표 함수(Arrow Function)들어가며자바스크립트(JavaScript)의 화살표 함수(Arrow Function)에 대해 알아보자.  화살표 함수(Arrow Function)개념ES6(ECMAScript 2015)에서 도입된 자바스크립트의 새로운 함수 선언 방식일반 함수 선언보다 간결하고 짧은 문법을 제공하여 코드를 더 읽기 쉽고 간결하게 만들어준다.화살표 함수는 간결하고 콜백 함수를 사용할 때 유용한데, 특히 반복적인 코드 작성을 줄여주는데 도움을 준다.그러나 모든 상황에서 사용해야 하는 것은 아니며, 특히 메서드 함수에서는 일반 함수와의 차이점을 고려하여 사용해야 한다. 기본 문법화살표 함수는 const functionName = (parameters) => { function body }..

Axios 라이브러리들어가며Axios 라이브러리에 대해 알아보자. Axios개념Node.js 및 브라우저에서 동작하는 HTTP 클라이언트 라이브러리 중 하나주로 HTTP 요청(Request)을 생성하고 응답(Response)을 처리하는 데 사용된다.Axios는 Promise 기반으로 작성되어 있어 비동기 코드를 쉽게 다룰 수 있다.동일한 코드베이스로 브라우저와 Node.js에서 실행할 수 있다.서버 단(Server-Side)에서는 네이티브 Node.js의 http 모듈을 사용하고, 클라이언트(브라우저)에서는 XMLHttpRequests를 사용한다.Axios를 사용하면 HTTP 요청을 쉽게 생성하고 응답을 처리할 수 있다.특히 비동기 프로그래밍에서 Promise를 사용하므로 코드가 더 읽기 쉽고 유..

EJS(Embedded JavaScript) 들어가며 EJS(Embedded JavaScript)에 대해 알아보자. EJS(Embedded JavaScript) 개념 JavaScript 기반의 템플릿 엔진 서버 측(Server-side)에서 동적인 웹 페이지를 생성하기 위해 사용된다. EJS를 사용하면 HTML 코드 안에 JavaScript 코드를 삽입하여 동적으로 페이지를 생성할 수 있다. 특징 ① 편리한 문법 EJS는 간단하고 직관적인 문법을 제공한다. HTML 안에 와 같은 태그를 사용하여 JavaScript 코드를 삽입할 수 있다. ② 템플릿 재사용 EJS를 사용하면 템플릿을 생성하여 코드를 재사용할 수 있다. 이것은 웹 애플리케이션에서 일관된 레이아웃을 유지하는 데 도움이 된다. ③ 변수 삽..