티스토리

나쵸캣

검색하기

블로그 홈

나쵸캣

nachocat.tistory.com/m

나쵸는 고양이입니다

구독자: 1

방명록 방문하기

주요 글 목록

React 개발자로서 알아야 할 SOLID 원칙 프론트엔드 개발을 하다 보면 컴포넌트가 점점 커지고, 재사용도 어려워지고, 유지보수는 지옥이 되어가는 경험... 한 번쯤 해보셨죠?이럴 때 도움이 되는 게 바로 SOLID 원칙입니다.SOLID는 객체 지향 설계 원칙이지만, 함수형과 컴포넌트 기반 개발에도 충분히 적용할 수 있어요.오늘은 React 코드 예시를 통해 SOLID를 쉽게 풀어보겠습니다!✅ 1. SRP - 단일 책임 원칙 (Single Responsibility Principle)한 컴포넌트는 하나의 일만 해야 한다.❌ 잘못된 예시const UserProfile = ({ user }) => { const [editing, setEditing] = useState(false); const saveUser = async (userData) =>.. 공감수 0 댓글수 0 2025. 4. 6.
AWS Amplify로 Astro 배포하기 Astro 프로젝트와 AWS 계정이 있다면 쉽게 서비스를 호스팅 할 수 있습니다.Astro 프로젝트 만들기yarn create astro@latest my-astro-app한 줄로 손 쉽게 Astro 프로젝트를 생성할 수 있습니다.도구가 다 도와줍니다.생성된 프로젝트에 astro-aws-amplify를 설치해줍니다.astro-aws-amplify는 Server-side Astro를 amplify로 배포할 수 있게 도와주는 어댑터입니다.# Using Yarnyarn add astro-aws-amplifyAstro Config에 어댑터를 추가해줍니다.// astro.config.mjsimport { defineConfig } from "astro/config";import awsAmplify from "as.. 공감수 0 댓글수 0 2025. 3. 31.
Astro.js vs Next.js 및 다른 프론트엔드 프레임워크 비교 Astro.js란?Astro.js는 정적 사이트 생성(SSG)과 멀티 프레임워크 지원을 핵심으로 하는 최신 프론트엔드 프레임워크입니다. HTML 우선 접근 방식과 클라이언트 사이드 JavaScript 최소화를 통해 빠른 성능을 제공하는 것이 특징입니다.Astro.js와 Next.js 비교비교 항목Astro.jsNext.js렌더링 방식정적 사이트 생성(SSG) 중심, 서버 사이드 렌더링(SSR) 가능SSG, SSR, ISR, CSR 지원퍼포먼스HTML 우선 접근 방식으로 JavaScript 로딩 최소화동적인 데이터 처리를 위해 일부 클라이언트 JavaScript 필요멀티 프레임워크 지원React, Vue, Svelte, Solid 등 다양한 UI 라이브러리 지원React 기반코드 스플리팅기본적으로 필요 없.. 공감수 1 댓글수 0 2025. 2. 4.
JavaScript의 for...in과 for...of 반복문 비교하기 JavaScript에는 배열이나 객체를 순회할 때 사용되는 다양한 반복문이 있습니다. 이 중 for...in과 for...of는 각각의 고유한 사용 사례와 특징을 가지고 있습니다. 이번 글에서는 이 두 반복문이 어떻게 다른지, 그리고 언제 사용해야 하는지를 예제와 함께 알아보겠습니다.for...in 반복문for...in 반복문은 객체의 열거 가능한 속성(enumerable properties)을 순회할 때 사용됩니다. 즉, 객체의 키(key)들을 순회합니다.문법:for (key in object) { // 실행할 코드}특징:객체의 속성 이름을 순회합니다.배열에도 사용할 수 있지만, 배열의 인덱스를 순회합니다.프로토타입 체인에 있는 속성도 포함될 수 있습니다.예제:const person = { name.. 공감수 1 댓글수 0 2025. 1. 10.
Flutter의 CodePush, ShoreBird Flutter CodePush 솔루션, Shorebird 소개Flutter는 매력적인 UI와 크로스 플랫폼 개발 기능으로 개발자들 사이에서 널리 사용되고 있습니다. 하지만 Flutter 앱 배포의 가장 큰 제한 중 하나는 OTA(Over-the-Air) 업데이트 기능이 부족하다는 점입니다. 네이티브 코드 변경 없이 UI나 로직을 업데이트하는 기능은 React Native의 CodePush와 같은 기술에서 많이 활용됩니다. 이러한 기능이 Flutter 생태계에서 부족했지만, Shorebird는 이를 해결하기 위해 등장한 도구입니다.Flutter와 CodePush의 필요성Flutter로 개발한 앱은 사용자에게 배포된 후에도 지속적으로 업데이트가 필요합니다. 특히, 긴급한 버그 수정이나 작은 기능 추가는 앱 .. 공감수 1 댓글수 0 2024. 12. 8.
Next.js와 Svelte 비교 Svelte 5와 Next.js 15 비교웹 개발의 세계는 빠르게 변화하고 있으며, 새로운 프레임워크와 라이브러리가 지속적으로 등장하고 있습니다. 그 중에서도 Svelte 5와 Next.js 15는 많은 개발자들 사이에서 주목받고 있는 두 가지 프레임워크입니다. 이번 포스트에서는 이 두 프레임워크의 주요 기능, 성능, 사용자 경험, 커뮤니티와 생태계 등을 비교해 보겠습니다.Svelte는 컴파일러 기반의 프레임워크로, 개발자가 작성한 코드를 최적화하여 빠른 성능을 제공합니다. Svelte 5는 이전 버전보다 더욱 향상된 기능과 성능을 자랑합니다. 반면, Next.js는 React 기반의 프레임워크로, 서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG) 기능을 통해 SEO와 성능을 극대화합니다. Nex.. 공감수 1 댓글수 1 2024. 12. 8.
Next.js 15 업데이트 및 변경점 Next.js 15의 정식 버전이 드디어 출시되었습니다. 이번 업데이트는 많은 개발자들에게 기대를 모으고 있으며, 다양한 새로운 기능과 개선 사항이 포함되어 있습니다. Next.js는 React 기반의 프레임워크로, 서버 사이드 렌더링과 정적 웹사이트 생성을 지원하여 많은 인기를 끌고 있습니다. 이번 포스트에서는 Next.js 15의 주요 업데이트 내용을 자세히 살펴보겠습니다.주요 업데이트 내용주요 업데이트 사항React 19 통합Next.js 15는 React 19와 통합되어 서버 액션과 같은 새로운 기능을 지원합니다. 이는 상태 관리와 UI 업데이트를 개선하며, React 18과의 호환성도 유지합니다. 다만, React 18과 React 19를 혼합하여 사용하는 것은 추천되지 않습니다Partial .. 공감수 0 댓글수 0 2024. 12. 8.
React.js 19 정식 버전 출시, 업데이트 내용 React 19는 최근에 발표된 리액트의 최신 버전으로, 많은 개발자들이 기대하고 있는 업데이트입니다. 이번 버전은 여러 가지 새로운 기능과 성능 개선 사항을 포함하고 있어, 개발자들에게 더 나은 개발 환경을 제공할 것으로 보입니다. 이번 포스트에서는 React 19의 주요 업데이트 사항과 그 의미에 대해 자세히 살펴보겠습니다.React는 페이스북에서 개발한 자바스크립트 라이브러리로, 사용자 인터페이스를 구축하는 데 사용됩니다. React 19는 이러한 React의 발전을 이어가는 중요한 버전으로, 많은 기능이 추가되었습니다. 특히, 이번 업데이트는 개발자들이 더 효율적으로 작업할 수 있도록 돕는 다양한 도구와 기능을 제공합니다.이미지 출처주요 업데이트 사항서버 컴포넌트(Server Components).. 공감수 1 댓글수 1 2024. 12. 8.
Next.js Static Rendering(정적 렌더링)과 Dynamic Rendering(동적 렌더링) Next.js 13 이상에서는 App Router를 도입하며 정적 렌더링(Static Rendering)과 동적 렌더링(Dynamic Rendering)을 보다 유연하고 선언적으로 사용할 수 있게 되었습니다. 아래는 App Router에서 각각의 렌더링 방식을 구현하는 예시입니다.1. Static Rendering (정적 렌더링)정적 렌더링은 빌드 시점에 페이지를 생성하여 클라이언트 요청 시 미리 준비된 HTML을 제공하는 방식입니다. App Router에서 정적 렌더링은 기본 설정이며, 데이터를 가져오지 않거나 fetch를 사용하여 빌드 타임에 데이터를 가져옵니다.구현 예시async function fetchPost(id) { const res = await fetch(`https://api.exam.. 공감수 0 댓글수 0 2024. 12. 8.
Bun.js란? Node.js와의 차이점 Bun.js vs Node.js: 차이점과 선택 기준JavaScript와 TypeScript 기반의 서버 사이드 개발에서 Node.js는 오랫동안 널리 사용되어 온 플랫폼입니다. 하지만 최근 Bun.js라는 새로운 런타임이 등장하면서 많은 개발자들이 주목하고 있습니다. 두 런타임은 각기 다른 철학과 기능을 가지고 있으며, 성능과 개발 경험 측면에서도 차이를 보입니다. 이 글에서는 Bun.js와 Node.js를 비교하고, 각각의 장단점 및 선택 기준에 대해 설명하겠습니다.1. Node.js란 무엇인가?Node.js는 2009년에 Ryan Dahl에 의해 개발된 Chrome V8 JavaScript 엔진 기반의 JavaScript 런타임입니다. 이를 통해 JavaScript는 브라우저 외에서도 실행될 수 있.. 공감수 3 댓글수 0 2024. 10. 18.
Flutter / Supabse를 활용한 리얼타임 데이터 (web socket) Flutter와 Supabase를 활용한 리얼타임 데이터 기능 구현은, 애플리케이션에 실시간 업데이트를 쉽게 추가할 수 있는 방법 중 하나입니다. Supabase는 Firebase와 유사한 오픈소스 백엔드 서비스로, 실시간 데이터베이스 기능을 지원합니다. 이 블로그 글에서는 Flutter와 Supabase를 연동하여 실시간 데이터 업데이트를 처리하는 방법을 설명하겠습니다.### 1. Supabase 프로젝트 설정우선, Supabase에서 프로젝트를 설정해야 합니다.1. [Supabase](https://supabase.io) 웹사이트에 접속하여 로그인 후 프로젝트를 생성합니다.2. 프로젝트가 생성되면 **API URL**과 **Anon Key**를 복사해 둡니다. 이 정보는 Flutter 애플리케이션에서.. 공감수 1 댓글수 2 2024. 10. 18.
Flutter와 Supabase Flutter와 Supabase를 연동하는 방법에 대해 안내해드리겠습니다. Supabase는 PostgreSQL을 기반으로 한 오픈 소스 Firebase 대안입니다. Flutter는 모바일, 웹, 데스크톱 애플리케이션을 개발할 수 있는 프레임워크입니다. 두 기술을 결합하여 애플리케이션의 백엔드를 구현할 수 있습니다.1. Flutter 프로젝트 설정먼저, Flutter 프로젝트를 생성합니다. 이미 프로젝트가 있다면 이 단계를 건너뛰셔도 됩니다.flutter create my_supabase_appcd my_supabase_app2. Dependencies 추가pubspec.yaml 파일에 Supabase 패키지를 추가합니다.dependencies: flutter: sdk: flutter supa.. 공감수 0 댓글수 0 2024. 8. 5.
Supabase: Firebase의 대안 Supabase: Firebase의 오픈 소스 대안최근 몇 년간 클라우드 기반 백엔드 서비스의 인기가 급증하면서 개발자들은 다양한 선택지를 마주하게 되었습니다. 그 중에서도 Firebase는 기능성과 사용 편의성 덕분에 많은 사랑을 받았지만, 오픈 소스 커뮤니티에서는 더 많은 자유도와 투명성을 제공하는 대안을 찾는 움직임이 있었습니다. 그 결과로 탄생한 것이 바로 Supabase입니다.Supabase란 무엇인가?Supabase는 Firebase의 오픈 소스 대안으로, Postgres 데이터베이스를 기반으로 한 백엔드 서비스입니다. 주요 기능으로는 실시간 데이터베이스, 인증, 스토리지, 그리고 서버리스 함수 등을 제공합니다. Supabase의 목표는 Firebase와 유사한 개발자 경험을 제공하면서도, 오.. 공감수 0 댓글수 0 2024. 8. 5.
Flutter 인기 라이브러리 - Hive 데이터베이스 Flutter Hive는 Flutter 앱에서 로컬 데이터베이스를 관리하기 위한 빠르고 간편한 방법을 제공하는 패키지입니다. Hive는 데이터를 키-값 쌍으로 저장하고 검색할 수 있는 가벼운 데이터베이스로, Flutter 애플리케이션의 로컬 상태를 유지하거나 오프라인 모드에서 작동하는 애플리케이션을 개발하는 데 사용됩니다.Hive는 빠른 성능과 간편한 사용을 제공하기 위해 고안되었습니다. 그것은 단순한 API와 직렬화 라이브러리를 통해 데이터를 저장하고 검색할 수 있습니다. 또한 빠른 데이터 읽기와 쓰기를 지원하며, 앱이 메모리나 디스크에 대규모 데이터를 저장할 때도 높은 성능을 유지합니다.Hive는 오프라인 데이터 저장, 사용자 설정, 캐시 등 다양한 용도로 사용될 수 있습니다. 또한 Flutter의 .. 공감수 0 댓글수 0 2024. 5. 8.
[Flutter] Provider로 상태관리 Flutter Provider란 무엇인가요? Flutter Provider는 상태 관리를 위한 라이브러리로서, 특히 Flutter 애플리케이션의 복잡한 상태 관리를 단순하게 만들어줍니다. 이 패키지를 사용하면 위젯 트리 전체에 걸쳐서 데이터를 전달할 필요 없이 필요한 곳에서 데이터에 접근할 수 있습니다. Provider의 핵심 개념 ChangeNotifier: Provider 패키지의 핵심 클래스 중 하나입니다. 이 클래스를 상속하면 상태 변경을 알릴 수 있습니다. 즉, 데이터가 변경될 때 UI를 업데이트할 수 있습니다. Provider: 데이터를 제공하는 클래스입니다. Provider를 사용하여 데이터를 생성하고, 필요한 위젯에서 데이터에 접근할 수 있습니다. Consumer: Provider 패키지에.. 공감수 0 댓글수 0 2024. 4. 2.
Dart / Flutter 에러 핸들링 예외(exception) 예외는 예상하지 못한 일이 발생했다는 것을 의미하는 에러입니다. 예외가 캐치되지 않았다면, 예외를 발생시키는 isolate가 지연된 상태이고 보통 해당 isolate나 프로그램이 종료됩니다. Dart는 미리 정의된 다양한 서브타입과 함께 Exception과 Error 타입을 제공합니다. 원하는 예외를 정의하는 것도 가능합니다. 그러나 Dart 프로그램은 Exception이나 Error 객체 이외에도 모든 non-null 객체를 예외로 발생할 수 있습니다. throw 예외를 throwing 또는 raising합니다. throw FormatException('Expected at least 1 section'); // 임의의 객체도 throw 할 수 있습니다. throw 'Out o.. 공감수 0 댓글수 1 2023. 6. 6.
Dart / Flutter 조건문 (Branches/분기) 1. if Dart는 선택적 else 절이 있는 if 문을 지원합니다. if 뒤의 괄호 안 조건은 부울로 평가되는 표현식이어야 합니다. if (isRaining()) { you.bringRainCoat(); } else if (isSnowing()) { you.wearJacket(); } else { car.putTopDown(); } 2. if-case Dart if문은 패턴이 뒤따르는 case 절을 지원합니다. 패턴이 값과 일치하면 실행됩니다. 만족하지 않으면 else 분기로 진행합니다. if (pair case [int x, int y]) { print('Was coordinate array $x,$y'); } else { throw FormatException('Invalid coordinates.. 공감수 0 댓글수 0 2023. 6. 3.
Dart / Flutter 반복문 (Loops) 1. for 반복문 다음과 같은 방법으로 기본적인 반복문을 실행할 수 있습니다. var message = StringBuffer('Dart is fun'); for (var i = 0; i print(i)); } for (final c in callbacks) { c(); } // 0 // 1 Dart에서는 기대한대로 0과 1을 출력합니다. 반대로 ja.. 공감수 0 댓글수 0 2023. 6. 3.
Flutter 시작하기 1. Flutter 설치하기 Flutter 설치 페이지에서 Flutter를 다운로드! 해당 페이지의 안내대로 Flutter를 설치하면 됩니다. Flutter를 잘 설치했는지 확인하기 위해 cmd 또는 terminal에서 flutter doctor 를 입력해봅시다! 만약 문제가 발생했다면 해결하고 진행하는 것이 좋습니다. 2. IDE 설치하기 Flutter를 개발할 에디터를 설치합니다. 보통 Visual Studio Code 또는 Android Studio를 사용합니다. Visual Studio Code 설치 Android Studio 설치 Visual Studio Code를 사용한다면 extension에서 Flutter와 Dart를 설치해줍니다. Android Studio를 사용한다면 Plugins에서 .. 공감수 0 댓글수 0 2023. 6. 3.
Dart / Flutter 기본 문법 (타입) Dart는 Type safe한 언어라 변수 선언 시 타입을 지정할 수 있다. 타입 체크 int a = 10; print(a is int)// true; print(a is Sting)// false; Dart 타입 Numbers (int, double) Strings (String) Booleans (bool) Lists (List, arrays로도 부름) Sets (Set) 유니크한 항목들로 이루어진 정렬되지 않은 컬렉션 Maps (Map) key와 value로 구성된 객체 Runes (Runes; 때로 characters API로 대체) 문자열의 유니코드 코드 포인트 Symbols (Symbol) Dart 프로그램에 선언된 연산자나 식별자를 나타냄. Symbol 리터럴은 #뒤에 식별자를 위치시면 됨(.. 공감수 0 댓글수 0 2023. 3. 5.
Dart / Flutter 기본 문법 (변수) 기본 변수 dart는 Type safe한 언어지만 타입 추론이 가능하여 명시적 타입을 지정하지 않아도 된다. var year = '2023'; var friuts = ['apple', 'banana', 'cherry']; print(year is String);// true print(friuts is Object);// true 만약 타입이 예상되지 않는다고 명시적으로 표현할 때에는 dynamic 키워드를 사용한다. (Typescript의 any 같은 역할) var year = '2023'; year = 100; //Error: A value of type 'int' can't be assigned to a variable of type 'String' dynamic year = '2023'; year.. 공감수 0 댓글수 0 2023. 3. 1.
Dart / Flutter 소개 1. 소개 구글이 2011년에 웹 프론트엔드 개발을 위해 만든 언어이다. 하지만 지금은 멀티플랫폼 개발이 가능한 언어이다. 클라이언트 개발에 조금 더 적합하게 개발되었으며 C언어와 유사한 문법을 가지고 있다. 그렇지만 백엔드 개발도 가능하다. serverpod이라는 dart로 된 opensource backend framework가 1.0 릴리즈되었다. Flutter의 인기와 더불어 인기 상승 중!! 2023년 1월 PYPL 18위!! 2. 특징 객체 지향 언어 (Object-oriented Language) 모든 것이 Object이다. 선택적 타입 dart는 type safe한 언어라서 String word = 'word'; 와 같이 타입을 명시하지만 var word='workd'; 와 같이 자유도도 .. 공감수 0 댓글수 0 2023. 3. 1.
Javascript에서 SOLID 법칙 적용하기 SOLID 원칙 객체지향설계(Object Oriented Design)의 5가지 원칙 단일 책임 원칙(Single responsibility principle) 개방 폐쇄 원칙(Open/closed principle) 리스코프 치환 원칙(Liskov substitution principle) 인터페이스 분리 원칙(Interface segregation principle) 의존관계 역전 원칙(Dependency inversion principle) 장점 클린 코드(시간이 지나도 유지 보수와 확장이 쉬운 시스템) 단일 책임 원칙(Single responsibility principle) 클래스는 하나의 작업만 있어야 한다. 함수형에서는? -> 함수는 하나의 작업만 있어야한다. 장점 요구사항 변경 발생 시 하.. 공감수 0 댓글수 0 2023. 2. 12.
Javascript 일급 객체(First-class object) javascript에서 함수(Function)는 일급 객체(First-class object)이다. 일급 객체(First-class object)란? javascript에서 다음을 만족하여야 한다. 무명의 literal로 생성이 가능하다. 변수나 자료구조(배열(Array), 객체(Object) 등)에 할당이 가능하다. 다른 함수의 parameter로 전달이 가능하다. 다른 함수의 return으로 사용이 가능하다. Function이 일급 객체인 이유 javascript에서 Function은 다음과 같이 가능하다. 무명의 literal로 생성이 가능하다. var helloAlert = function(name){ (name + "님 환영합니다."); } helloAlert("world"); 변수나 자료구조(.. 공감수 0 댓글수 0 2023. 1. 24.
React Hook Memoization(메모이제이션) useCallback/useMemo React에서는 컴포넌트의 state 또는 부모에게서 받은 props 값이 변경될 때 마다 리렌더링합니다. 그리고 리렌더링될 때마다 컴포넌트의 변수와 함수들이 매번 재생성됩니다. 때문에 반복적이고 쓸데없는 리렌더링은 성능에 영향을 줍니다. 예시로 부모에게서 props로 {a, b}를 넘겨받았다면 props.a만 변경되어도 props.b관련 함수,변수도 다시 호출하여 실행합니다. 이런 불필요한 동작을 피하고자 메모이제이션을 적용한 useCallback 와 useMemo함수를 사용합니다. useCallback uesCallback은 메모이제이션된 콜백을 반환합니다. useCallback(fn, deps)와 같이 사용합니다. fn: 메모이제이션할 콜백 함수 deps: 콜백의 의존성 배열, 콜백의 의존성 배열이.. 공감수 0 댓글수 0 2022. 12. 30.
Node.js package.json이란 package.json이란? Node.js 프로젝트에 관한 정보와 Package manager(npm, yarn 등)을 통해 설치한 모듈들의 의존성(Dependecies)을 관리하는 파일. package.json 주요 구성 보통 package.json에 포함되는 fields 프로젝트에 관한 정보 name : 패키지 또는 프로젝트의 이름 *필수 fields version : 패키지 또는 프로젝트의 이름 *필수 fields semantic versioning guidelines를 따른다. Major.Minor.Patch의 형태(1.2.3) description : 패키지 또는 프로젝트에 대한 설명 author / contributor : 패키지 또는 프로젝트의 한 사람의 저자 (author) / 다수의 저자.. 공감수 1 댓글수 2 2022. 12. 25.
Flutter StatefulWidget의 lifecycle(생명주기) StatefulWidget의 lifecycle은 다음 단계를 따른다. createState() initState() didChangeDependecies() build() didUpdateWidget() setState() deactivate() dispose() 1. createState() : statefulWidget이 빌드되었을 때, createState()를 즉시 호출한다. 이 메소드는 반드시 존재해야 한다. class HomeScreen extends StatefulWidget { HomeScreen({Key key}): super(Key: key); @override HomeScreenState createState() => HomeScreen(); } 2. initState() : 각 st.. 공감수 0 댓글수 0 2022. 12. 25.
Flutter StatelessWidget과 StatefulWidget의 차이 Flutter에서 State란? : 화면(UI)에 영향을 미치는 데이터 StatelessWidget이란? : State가 없는 Widget. 즉, 화면(UI)에 영향을 미치는 데이터가 없는 위젯. 데이터에 의해 화면(UI)가 변경될 일이 없다. StatefulWidget이란? : State가 있는 Widget. 즉, 화면(UI)에 영향을 미치는 데이터가 있는 위젯. 데이터에 의해 화면(UI)가 변경될 수 있다. StatefulWidget을 사용할 경우에는 StatefulWidget의 lifecycle을 알아둘 필요가 있다. 공감수 0 댓글수 0 2022. 12. 25.
Javascript Currying(커링) Currying은 함수형 프로그래밍에서 기초개념이다. Currying은 다음과 같이 정의되고 있다. 다중 인수를 갖는 함수를 단일 인수를 갖는 함수들의 함수열로 바꾸는 것을 말한다. 간단하게 말해서 함수를 리턴하는 함수라고 생각하면 편할 듯 하다. f(a, b, c)의 인자가 3개인 함수를 f(a)(b)(c)와 같이 사용할 수 있다. const curry = (fn) => (a) => (b) =>fn(a,b); const add = (a, b) =>a + b; console.log(curry(add)("Hello")("Wolrd")); // result: HelloWorld Currying은 뒷 부분의 파라미터를 나중에 실행할 수 있다. f(a)(b)를 실행 후 (c)는 나중에 실행 가능하다. const.. 공감수 0 댓글수 0 2022. 12. 20.
Javascript 배열(1차원/2차원) 초기화 하기 1. 1차원 배열 1. Array() 생성자 Array() 생성자는 Array 객체를 생성한다. new Array(element1, element2, ...elementN) // [element1, element2, ... elementN] new Array(ArrayLength) // [undefined, ...] ArrayLength만큼 2. Array.prototype.fill() fill() 메서드는 배열의 시작 인덱스 부터 끝 인덱스의 이전까지 정적인 값 하나로 채운다. arr.fill(value[, start[, end]]) value: 배열을 채울 값 start: 시작 인덱스. 기본값은 0 end: 끝 인덱스. 기본값은 this.length const arr = [1,2,3,4] consol.. 공감수 0 댓글수 0 2022. 12. 17.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.