티스토리

AR삽질러
검색하기

블로그 홈

AR삽질러

arang95.tistory.com/m

기록공간입니다. 질문과 가르침 감사합니다.

구독자
0
방명록 방문하기
공지 모든 공부기록 모두보기

주요 글 목록

  • React.js React.js 1. React.js란https://ko.wikipedia.org/wiki/%EB%A6%AC%EC%95%A1%ED%8A%B8_(%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8_%EB%9D%BC%EC%9D%B4%EB%B8%8C%EB%9F%AC%EB%A6%AC) 리액트 (자바스크립트 라이브러리) - 위키백과, 우리 모두의 백과사전위키백과, 우리 모두의 백과사전. 리액트(React, React.js 또는 ReactJS)는 자바스크립트 라이브러리의 하나로서[2] 사용자 인터페이스를 만들기 위해 사용된다. 페이스북과 개별 개발자 및 기업들 공ko.wikipedia.org  - Meta(Facebook)에서 개발한 오픈소스 JavaScript라이브.. 공감수 3 댓글수 2 2024. 8. 28.
  • JavaScript - 동기와 비동기(19) JavaScript - 동기와 비동기(19) 1. 동기(Synchronous)와 비동기(Asynchronous) - 동기와 비동기는 코드가 실행되는 방식을 설명하며 실행 흐름과 처리방식에 영향을 미치게된다.console.log(1);setTimeout(() => { console.log(2);}, 3000);console.log(3);동기 - console.log(2), console.log(3)은 순서대로 실행되는 동기작업비동기 - setTimeout(() => { console.log(2); }, 3000); 는 비동기 함수로 JavaScript엔진에 의해서 호출된 후 내부적으로 타이머가 설정된다. 2. 동기(Synchronous) - 동기 방식에서는 코드가 순차적으로 실행된다. - 하나의 작업이.. 공감수 0 댓글수 0 2024. 8. 25.
  • JavaScript - Date객체와 날짜(18) JavaScript - Date객체와 날짜(18) 1. Date객체와 날짜 - Date객체는 날짜와 시간을 다룰 수 있는 도구로 Date객체를 사용하면 현재 날짜와 시간, 특정 날짜와 시간을 생성하거나 날짜간의 차리를 계산하는 등의 작업이 가능하다. 1-1. 기본 생성let now = new Date();console.log(now); 1-2. 특정날짜로 생성 - month는 0부터 시작 - year는 4자리 숫자로 지정 - 나머지 매개변수는 생략가능하며 생략시 값은 0이 된다.let date1 = new Date();let date2 = new Date("2024/08/22");let date2 = new Date("2024,08,22,12,00,00");console.log(date1);console.. 공감수 0 댓글수 0 2024. 8. 23.
  • JavaScript - 배열 메서드(17) JavaScript - 배열 메서드(17) 1. 배열 - 여러개의 값을 순서대로 저장할 수 있는 자료구조로 각 값에는 index로 접근할 수 있다. - 배열의 각 요소는 어떤 타입이든 될수 있다.(숫자, 문자열, 객체 등) 배열의 특징 - 순서가 있는 데이터 - 다양한 자료형 - 가변길이let arr = [1, 2, 3];console.log(arr.length);console.log(arr[0]);console.log(arr[1]);console.log(arr[2]); 2. 배열 - 요소 조작push메서드 - 배열의 끝에 요소를 추가한다.let arr1 = [1, 2, 3];const newLength = arr1.push(4, 5, 6, 7);console.log(newLength);console.l.. 공감수 0 댓글수 0 2024. 8. 22.
  • JavaScript - 원시타입과 객체타입(16) JavaScript -  원시타입과 객체타입(16) 1. 원시타입(Primitive Type)과 객체타입(Object Type)자료형 원시타입 : Number, String, Boolean, Null, Undefind 객체타입 : Object(Array, Function, RegexExp) - JavaScript에서 값은 두가지로 나뉘며 두 타입은 메모리에서 값이 어떻게 저장되고 처리되는지에 차이가 있다. 2. 원시타입(Primitive Type) - 원시타입은 변경할 수 없는 값을 나타내며, 메모리에 직접 저장되어 값 자체로써 변수에 저장되고 복사된다. - 불변값으로 메모리 값 수정이 불가능let a = 10;let b = a;b = 20;console.log(a);console.log(b); 3. 객.. 공감수 0 댓글수 0 2024. 8. 22.
  • JavaScript - Spread연산자와 Rest매개변수 (15) Spread연산자와 Rest매개변수 1. JavaScript - Spread연산자와 Rest매개변수란 - 문법적으로 동일한 ...을 사용하지만 목적과 용도가 다르다. 2. Spread연산자 - 배열이나 객체의 요소들을 개별적으로 펼쳐서 다른 배열이나 객체에 복사하거나 함수의 인수로 전달할 때 사용된다.let arr1 = [1, 2, 3];let arr2 = [4, ...arr1, 5, 6];console.log(arr2);...arr1는 arr1배열의 요소들인 [1, 2, 3]을 개별 요소로 펼친다.배열 arr2의 다른 요소들과 결합되어 [4, 1, 2, 3, 5, 6]이라는 새로운 배열이 생성된다. let obj1 = { a: 1, b: 2 };let obj2 = { ...obj1, c: 3, c:.. 공감수 0 댓글수 0 2024. 8. 20.
  • JavaScript - 구조분해할당(Destructuring Assignment) (14) JavaScript - 구조분해할당(Destructuring Assignment) 1. 구조분해할당(Destructuring Assignment)란? - 배열이나 객체 등 복합적인 데이터 구조에서 개별 요소를 추출해 변수에 쉽게 할당하는 방법이다.let ary = [1, 2, 3];let [one, two, three, four = 4] = ary;console.log(one, two, three);console.log(one, two);console.log(one, two, three, four); - 구조분해할당을 사용해 배열의 각 요소를 개별 변수로 추출할 수 있다. - 배열에 없는 네 번쨰 요소는 기본값인 4가 할당되고 기본값이 설정되지 않은 요소는 undefined가 추출된다.  2. 객체의 구.. 공감수 0 댓글수 0 2024. 8. 20.
  • JavaScript - 단락평가(Short-circuit Evaluation) (13) 단락평가(Short-circuit Evaluation) 1. 단락평가(Short-circuit Evaluation)란 - 논리연산자 &&, || 가 평가 도중에 불필요한 연산을 생락하는 것으로 성능을 최적화하고 코드를 간결하게 작성하는데 유용하다. - 논지연산자가 좌항의 값만으로 결과를 결정할 수 있을 경우 우항의 표현식은 평가하지 않고 결과를 반환하는 것을 의미한다.let varA = false;let varB = true;console.log(varA && varB);console.log(varA || varB); varA && varBvarA가 false이기 때문에 varB는 평가되지 않고 결과는 false가 된다.varA || varBvarA가 false이기 때문에 varB가 평가되고 결과는 tr.. 공감수 0 댓글수 0 2024. 8. 20.
  • JavaScript - Truthy와 Falsy (12) JavaScript - Truthy와 Falsy (12) 1. Truthy & Falsy란 - JavaScript에서 값이 Boolean일때 어떻게 평가되는지 나타내며 참이나 거짓을 의미하지 않는 값이라도 조건문 내에서 참이나 거짓으로 평가하는 특징 2. Falsy한 값- Falsy값은 불리언 문맥에서 false로 평가되는 값으로 if조건문이나 논리 연산에서 false처럼 동작한다.falseboolean""빈 문자열0숫자 0null값이 없음-0음수undefined정의되지 않음0nBigint 0NaNNot-a-Number // 1. Falsy한 값let f1 = undefined;let f2 = null;let f3 = 0;let f4 = -0;let f5 = NaN;let f6 = "";let f7 =.. 공감수 0 댓글수 0 2024. 8. 15.
  • 초파 로봇 1, 2, 3, 4, 5호 (36) 초파 로봇 1, 2, 3, 4, 5호 (36) 초파 로봇 1, 2, 3, 4, 5호조립시간 : 약 1시간가격  : 1, 2, 3, 4, 5호 9,600원 * 5  1. 초파 로봇 1호 쵸파 탱크 2. 초파 로봇 2호 쵸파 윙 3. 초파 로봇 3호 쵸파 잠수함  4. 초파 로봇 4호  5. 초파 로봇 5호 쵸파 드릴  쵸파 로봇 완성 공감수 0 댓글수 0 2024. 7. 30.
  • JavaScript - 배열 (11) JavaScript - 배열 (11) 1. 배열 - 여러개의 값을 순차적으로 담을 수 있는 자료형으로 배열의 각 요소는 index로 식별된다. - index는 0에서 부터 시작하고 값의 리스트를 저장하고 조작하거나 접근하는데 유용하다. 2. 배열의 생성 // 1. 배열 생성let arr1 = new Array(); // 배열 생성자let arr2 = [];let arr3 = [1, 2, 3, true, "Hi", null, undefined, () => {}, {}, []];console.log(arr3);배열 생성자(Array Constructor) : new Array() 구문으로 배열을 생성할 수 있다.배열 리터럴(Array Literal) : [ ] 를 사용해 배열을 생성할 수 있다.배열은 num.. 공감수 0 댓글수 0 2024. 6. 30.
  • JavaScript - 객체 (10) JavaScript - 객체 (10) 1. 객체(Object) - 원시 타입이 아닌 객체 타입의 자료형으로 여러가지 값을 동시에 저장할 수 있는 자료형을 의미한다. 자료형(DataType) 원시자료형(Primitive Data Types)   - Number, String, Boolean, null, undefined, Symbol 객체타입(Object Data Types)   - Object, Array, Function, Date, Map, Set 2. 객체생성 - 객체는 key - value쌍의 컬렉션으로 키는 문자열 또는 심볼, 값은 어떠한 데이터 타입도 올 수 있다.let obj1 = new Object(); // 객체 생성자let obj2 = {}; // 객체 리터럴 3. 객체 속성let pe.. 공감수 0 댓글수 0 2024. 6. 30.
  • JavaScript - 스코프 (9) JavaScript - 스코프 (9) 스코프(Scope) - 범위를 뜻하며 변수나 함수에 접근하거나 호출할 수 있는 범위를 말한다. - 전역 스코프(Global Scope) 와 지역 스코프(Local Scope)로 나눌 수 있다. 1. 전역스코프(Global Scope) - 전역 스코프는 어디에서나 전체 영역에서 접근 가능한 범위로 함수나 블록 밖에서 선언된다.let a = 1; // 전역 스코프 2. 지역 스코프(Local Scope) - 지역 스코프는 특정 영역에서만 접근 가능한 범위로 함수 안에서 선언된 변수는 함수 외부에서 접근할 수 없다.function funcA() { let b = 2; console.log(a); // 지역 스코프 function funcB() {}}funcA();fu.. 공감수 0 댓글수 0 2024. 6. 30.
  • JavaScript - 콜백함수 (8) JavaScript - 콜백함수 (8) 콜백함수 - 자신이 아닌 다른 함수의 인수로 전달되어 실행되는 함수를 의미하며 해당 함수 내부에서 호출되는 함수로 주로 비동기 작업(이벤트처리, 타이머, 네트워크 요청 등)과 배열에서 자주 사용된다.function main(value){}function sub(){ console.log("sub");} 콜백함수의 활용function repeat(count, callback) { for (let idx = 1; idx { console.log(idx);});repeat(5, (idx) => { console.log(idx * 2);});repeat(5, (idx) => { console.log(idx * 3);}); repeat함수는 count, callba.. 공감수 0 댓글수 0 2024. 6. 30.
  • JavaScript - 함수표현식과 화살표함수 (7) JavaScript - 함수표현식과 화살표함수 (7) 1. 함수표현식 - 함수 표현식은 함수 선언과 다르게 함수의 이름을 생략하고 변수에 익명함수를 할당하는 방식이다.// 1. 함수표현식function funcA() { console.log("funcA");}let varA = funcA;varA(); 2. 익명함수 - 이름이 없는 함수로 주로 함수 표현식에서 사용된다.let varB = function(){ console.log("funcB");}  3. 화살표 함수 (Arrow Function) - 화살표 함수는 ES6에서 도입된 간결한 함수 표현식으로 일반 함수표현식보다 짥은 문법을 제공한다.// 2. 화살표 함수let varC = (value) => value + 1;console.log(var.. 공감수 0 댓글수 0 2024. 6. 27.
  • JavaScript - 함수 (6) JavaScript - 함수 (6) 함수 - 함수는 특정 작업을 수행하는 코드 블록으로 함수를 사용하면 코드의 재사용성을 높이고 가독성을 향상시킬 수 있다. 1. 함수 호출// 함수선언function greeting() { console.log("안녕하세요");}console.log("함수 호출 전");greeting();console.log("함수 호출 후");  2. 직사각형의 넓이를 구하는 함수 - 매개변수와 반환값function getArea(width, height) {// 매개변수 function hello() { // 중첩함수 console.log("함수호출"); } hello(); let area = width * height; return area; // 반환값}let a.. 공감수 0 댓글수 0 2024. 6. 27.
  • JavaScript - 반복문 (5) JavaScript - 반복문 (5) 반복문(Loop, Iteration) - 어떠한 동작을 반복해서 수행할 수 있도록 만들어주는 문법으로 조건이 참일때 코드를 반복적으로 실행한다. 1. for - 반복 횟수가 명확할 때 주로 사용된다.// 1. 반복문for (let idx = 1; idx = 5) { break; }} 2. while - 주어진 조건이 참인 동안 코드를 반복해서 실행한다. 조건이 거짓이 될경우 반복을 종료한다.// 2. whilelet i = 1;while (i let i = 1 : 초기화while(i i++ : 반복이 끝날 때마다 i를 1씩 증가 3. do while - 조건이 거짓이더라도 코드 블록은 최소 한번이상 실행된다.let j = 1;do { console.log(j.. 공감수 0 댓글수 0 2024. 6. 27.
  • JavaScript - 조건문 (4) JavaScript - 조건문 (4) 조건문 - 특정 조건을 만족했을 때 실행되는 코드를 작성하기 위한 문법으로 if, switch 조건문이 대표적이다. 1. if - if 조건문은 주어진 조건이 참일때 특정코드를 실행하며 else if, else 를 사용해 여러 조건을 처리할 수 있다.// 1. if 조건문let num = 1;if(num >= 10){ console.log("num은 10 이상입니다.");}else{ console.log("num은 10 이하입니다.");} // 1. if 조건문let num = 6;if(num >= 10){ console.log("num은 10 이상입니다.");}else if(num >= 5){ console.log("num은 5이상입니다.");.. 공감수 0 댓글수 0 2024. 6. 27.
  • JavaScript - 연산자 (3) JavaScript - 연산자 (3) 연산자(Operator)  - 프로그래밍에서 다양한 연산을 위한 기호, 키워드(+, -, * , /, %) 1. 대입연산자 - 변수에 값을 할당하는데 사용된다.// 1. 대입연산자let var1 = 1; 2. 산술연산자 - 숫자간의 산술 연산을 수행let num1 = 5 + 2;let num2 = 5 + 2;// * / % 는 + - 보다 우선순위가 높다.let num3 = 5 * 2;let num4 = 5 / 2;let num5 = 5 % 2;let num6 = 5 + 2 * 10;console.log(num6); 3. 복합대입연산자 - 연산과 할당을 동시에 수행// 3. 복합 대입 연산자let num7 = 10;num7 += 20;num7 -= 20;num7 *=.. 공감수 0 댓글수 0 2024. 6. 27.
  • JavaScript - 형변환 (2) JavaScript - 형변환 (2) 1. 형 변환(Type Casting)  - 어떤 값의 타입을 다른 타입으로 변경하는 과정으로 형변환은 묵지적 형변환과 명시적 형변환이 있다. 묵시적 형 변환(암묵적 형변환)  - 개발자가 직접 설정하지 않아도 자바스크립트 엔진이 형변환을 하는것// 1. 묵시적 형 변환// 자바스크립트 엔진이 형 변환을 하는것let num = 10;let str = "20";const result = num + str;console.log(result); 명시적 형 변환  - 개발자가 직접 함수 등을 이용해서 형 변환을 한다.// 2. 명시적 형 변환// 개발자가 내장함수 등을 사용해 직접 형 변환을 명시한다.let str1 = "10";let strNum = Number(str1).. 공감수 0 댓글수 0 2024. 6. 27.
  • JavaScript - 자료형Type (1) JavaScript - 자료형Type (1) 1. 원시 타입(Primitive Types) 숫자형(Number)  - 정수 및 실수 형태의 숫자를 포함한다.// 원시타입(Primitive Types)// 1. Number Typelet num1 = 30;let num2 = 3.5;let num3 = -20;console.log(num1 + num2);console.log(num1 - num2);console.log(num1 * num2);console.log(num1 / num2);console.log(num1 % num2);  문자형(String)  - 텍스트 데이터를 포함하며 '', "", ``으로 감싸서 표현한다.let name = "arang";let age = '29';// 템플릿 리터럴let .. 공감수 0 댓글수 0 2024. 6. 27.
  • JavaScript - 변수와 상수 (0) JavaScript - 변수와 상수 (0) 1. 변수 var, letlet 동일한 변수 이름은 다시 선언할 수 없다.// 1. 변수 letlet age = 29;console.log(age);age = 30;console.log(age); var 동일한 변수 이름을 다시 선언할 수 있다.// 2. 변수 varvar name = "Arang";console.log(name);var name = "AR";console.log(name);2. 상수 const  - 상수는 선언과 동시에 초기화를 해줘야한다.// 3. 상수const number = 3;number = 5; 3. 변수 네이밍 규칙 1. camelCase  - 변수명은 소문자로 시작하고 단어의 첫글자는 대문자로 사용한다.  - 의미 있는 변수명 사용.. 공감수 0 댓글수 0 2024. 6. 27.
  • Flutter 기초 - Theme (25) Flutter 기초 - Theme (25) 1. Theme - 테마를 사용해 App전체에 일관된 시각적 스타일을 적용하여 사용자경험 UX를 향상시킬 수 있다. 2. ThemeData - MaterialApp의 theme속성에서 제공되고 앱 전체에서 공통 스타일을 적용한다.void main(){ MaterialApp( theme: ThemeData( primary: Colors.indigo, secondary: Colors.green, teriary: Colors.yellow ), );} primaryColor앱의 기본색상으로 툴바, 탭바 등accentColor버튼, 액션 버튼, 체크박스 등 사용자와 상호작용하는 요소에서 사용되는 색상brightness앱의 전체적인.. 공감수 0 댓글수 0 2024. 5. 24.
  • Flutter 기초 - 페이지이동2 (24) Flutter 기초 - 페이지이동2 (24) 1. 페이지 이동 및 네비게이션 - Navigator Widget을 사용해 Navigator 앱 내에서 페이지 간의 이동을 관리한다.Navigator.push새로운 화면을 현재의 네비게이션 스택에 푸쉬한다.Navigator.pop스택의 가장 위에 있는 라우트를 제거하여 이전 페이지로 돌아간다. 2. MaterialPageRoute - 디자인의 페이지 전환 애니메이션을 제공하는 라우트로 페이지 이동 시 표준적인 머티어리얼 디자인 애니메이션을 제공한다. 3. 새로운 페이지로 이동Navigator.push( context, MaterialPageRoute(builder: (context) => const NewPage()),); 4. 이전 페이지로 이동 Nav.. 공감수 0 댓글수 0 2024. 5. 24.
  • Flutter 기초 - Callback (22) Flutter 기초 - Callback (22) 1. Callback - 함수나 메서드를 다른 함수나 메서드의 인자로 전달하는 기법으로 특정 이벤트나 조건이 만족되었을때 지정한 코드를 실행할 수 있다. 2. Gesture - 사용자의 터치입력으로 GestureDetector 위젯을 사용해 탭, 더블탭, 드래그, 핀치 등의 이벤트를 처리할 수 있다.  import 'package:flutter/cupertino.dart';import 'package:flutter/material.dart';void main() { runApp(const MaterialApp(home: HomeWidget()));}class HomeWidget extends StatelessWidget { const HomeWidge.. 공감수 0 댓글수 0 2024. 5. 23.
  • Flutter 기초 - 페이지이동1 (23) Flutter 기초 - 페이지이동1 (23)  class _HomeWidgetState extends State { late int index; @override void initState() { super.initState(); index = 0; } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text('App Bar'), ), body: homeBody(), bottomNavigationBar: BottomNavigationBar( items: const [ BottomNa.. 공감수 0 댓글수 0 2024. 5. 23.
  • Flutter 기초 - PopupMenu (21) Flutter 기초 - PopupMenu  (21) 1. PopupMenu - itemBuilder속성을 통해서 메뉴 항목을 생성한다. 각 메뉴 항목에서 PopupMenuItem Widget을 사용해 정의하고 onSelected콜백에서 처리된다. class TestPopupMenu extends StatefulWidget { const TestPopupMenu({super.key}); @override State createState() => _TestPopupMenuState();}class _TestPopupMenuState extends State { TestRadioValue selectValue = TestRadioValue.test1; @override Widget build(B.. 공감수 0 댓글수 0 2024. 5. 22.
  • Flutter 기초 - Switch (20) Flutter 기초 - Switch  (20) 1. Switch - 사용자가 토클할 수 있는 스위치 컨트롤러를 제공해 설정을 키고 끄는 상태를 전활할때 사용도니다. 2. Switch Widget 기본 사용법value스위치의 현재 상태를 나타낸다.(true, false)onChanged스위치의 값이 변경될 때 호출되는 콜백 함수로 스위치를 토글할 때마다 함수에 새로운 상태가 전달된다.  class TestSwitch extends StatefulWidget { const TestSwitch({super.key}); @override State createState() => _TestSwitchState();}class _TestSwitchState extends State { bool value.. 공감수 0 댓글수 0 2024. 5. 22.
  • Flutter 기초 - Slider (19) Flutter 기초 - Slider  (19) 1. Slider - Slider Widget은 사용자에게 시각적인 피드백을 제공하면서 값의 범위를 조정할 수 있는 인터페이스를 제공한다. value현재의 슬라이더 값으로 min, max의 사이어야 한다.onChanged슬라이더를 움직일때 호출되는 콜백함수로 조작시 현재 슬라이더 값이 전달된다.min, max슬라이더의 최소값, 최대값divisions사용자가 선택할 수 있는 값의 수로 값을 설정하므로써 눈금표시와 특정 눈금에 위치시킬 수 있다.label사용자가 슬라이더를 조작할 때 보여줄 수 있는 텍스트 레이블로 현재 값을 표시하는데 사용된다. class TestSlider extends StatefulWidget { const TestSlider({su.. 공감수 0 댓글수 0 2024. 5. 22.
  • Flutter 기초 - RadioButton (18) Flutter 기초 - RadioButton (18) 1. Radio버튼 - 사용자에게 옵션들중 하나만 선택할 수 있게하는 위젯으로 라디오 버튼은 서로 연관된 그룹안에서 단 하나의 항목만을 선택할 수 있도록 제한하기 때문에 설정 혹은 조정 에서 여러 옵션중 하나를 선택해야할때 유용하게 사용할 수 있다. 2. Radio버튼 기본구조value라디오 버튼의 고유한 값으로 열거형(enum)을 사용해 각 옵션을 명시한다.groupValue현재 그룹에서 선택된 값을 나타내며 value값과 같을 경우 해당 라디오 버튼이 선택된 것으로 표시된다.onChanged라디오 버튼의 값이 변경될때 실행할 콜백함수로 사용자가 라디오 버튼중 하나를 탭할 때 마다 호출된다. 3. RadioButton동작방식oValue { tes.. 공감수 0 댓글수 0 2024. 5. 22.
    문의안내
    • 티스토리
    • 로그인
    • 고객센터

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

    © Kakao Corp.