본문 바로가기
반응형

분류 전체보기210

[Flutter] 위젯(widget) 종류, child children 매개변수 플러터 위젯 (Flutter Widget) 플러터는 화면에 그려지는 모든 요소가 위젯으로 구성되어 있다. 플러터 프레임워크는 많은 기본 위젯을 제공하며, 앱 개발자가 직접 위젯을 만들 수도 있다. 위젯은 현재 주어진 상태(State)를 기반으로 어떤 UI를 구현할 지를 정의한다. 위젯의 상태(State)가 변경되면 기존 상태의 위젯과 비교해 최소한의 변경사항을 산출해 UI를 화면에 다시 그려준다. 위와 같이 최소한의 리소스를 이용해 UI 변경을 함으로 최대 120FPS까지 높은 퍼포먼스를 산출할 수 있다. 대표적인 플러터 위젯(Widget) 자식을 하나만 받는 child 매개변수를 사용하는 위젯 Container 위젯 자식을 담는 컨테이너 역할을 하며 배경색, 너비, 높이, 테두리 등의 디자인을 설정할 .. 2023. 1. 17.
[Flutter] Hello Flutter 출력해보기 Hello Flutter 출력하기 플러터는 프로젝트를 생성하면 /lib/main.dart 파일에 자동으로 샘플 코드를 생성한다. 해당 부분을 지우고 코드를 작성하면 된다. import 'package:flutter/material.dart'; void main() { runApp( MaterialApp( home: Scaffold( body: Center( child: Text( 'HELLO FLUTTER', ), ), ), ), ); } import 'package:flutter/material.dart'; - 머터리얼 디자인 관련 기능을 불러온다. - flutter/material.dart 를 불러와야 플러터에서 제공해주는 위젯 기능을 사용할 수 있다. void main() { runApp( Mate.. 2023. 1. 17.
[Flutter] 안드로이드 스튜디오 개발 환경 세팅 / 플러터 프로젝트 생성 / 에뮬레이터 설치 / androidstudio flutter 플러터(Flutter) 개발 환경 세팅 플러터 개발을 시작하기 전에 플러터를 개발할 수 있는 환경을 구축해야 한다. 아래 글에 잘 정리되어 있으니 우선적으로 개발환경을 세팅하자. [Flutter] 플러터 개발환경 구축 및 세팅 [Flutter] 플러터 개발환경 구축 및 세팅 Flutter 개발환경 구축하기 1. 윈도우 플러터 개발 환경 구축 (1) 플러터 SDK 다운받기 아래의 플러터 홈페이지에 접속해 플러터 SDK를 다운받는다. https://docs.flutter.dev/get-started/install Install Install Flutte parkjh7764.tistory.com 플러터(Flutter) 개발 시작하기 안드로이드 스튜디오 프로젝트 생성 - New Flutter Project를 클.. 2023. 1. 17.
[Flutter] 플러터 개발환경 구축 및 세팅 / Flutter 환경변수 설정 Flutter 개발환경 구축하기 1. 윈도우 플러터 개발 환경 구축 (1) 플러터 SDK 다운받기 아래의 플러터 홈페이지에 접속해 플러터 SDK를 다운받는다. https://docs.flutter.dev/get-started/install Install Install Flutter and get started. Downloads available for Windows, macOS, Linux, and Chrome OS operating systems. docs.flutter.dev [Windoews]를 클릭한다. 아래로 내려 Get the Flutter SDK를 찾아, flutter_windows_3.7.3-stable.zip 버튼을 클릭한다. 다운로드 받은 Flutter 파일을 원하는 위치에 압축을 풀.. 2023. 1. 14.
[React Native] 리액트 네이티브란, 리액트 환경 설정 - 에디터, node.js, iOS, Android React Native (리액트 네이티브)란? 리액트 네이티브는 페이스북에서 2015년에 공개한 오픈소스 모바일 애플리케이션 프레임워크이다. JavaScript로 개발이 가능하며 하나의 프로그래밍 언어로 IOS와 안드로이드 모바일 앱을 동시에 개발할 수 있는 크로스 플랫폼으로 무려, 페이스북, 디스코드, 스카이프, 인스타그램, 핀터레스트, 월마트 등 리엑트 네이티브로 개발 되었다. 리액트 네이티브 장점 - 쉬운 접근성으로 웹 개발자가 익숙한 자바스크립트나 리액트를 이용해 모바일 앱을 개발할 수 있다는 장점이 있다. - 자바스크립트로 코딩해서 한번에 Android와 iOS를 개발할 수 있다는 것도 장점이다. - 변경된 코드를 저장하기만 해도 자동으로 변경된 내용이 적용된 화면을 확인할 수 있는 Fast R.. 2023. 1. 10.
NVM 설치하기 쉬운 설명+사진 for Windows / NVM 사용 이유 / Node.js NVM 사용법 Node.js 설치하기 Node.js란 설치하기 / Node.js란? / Node.js 사용이유 / 윈도우(window) Node.js란 ? Chrome V8 JavaScript 엔진으로 빌드 된 JavaScript 런타임으로, JavaScript로 작성된 프로그램을 일반 애플리케이션 프로그램처럼 실행시켜주는 런타임이다. 즉, Node.js를 통해 다양한 자바스크립 parkjh7764.tistory.com 위와 같이 홈페이지에서 Node.js 를 설치해도 좋지만, nvm으로 관리하는 것이 좋다. NVM이란 Node Version Manager로 Node.js의 버전을 관리하는 도구이다. 1. NVM 사용 이유 - 컴퓨터에서 다양한 버전의 Node.js를 사용할 수 있게 해준다. - 원하는 Node.js의.. 2023. 1. 10.
[JavaScript | Deep Dive] 01. 프로그래밍이란? 01. 프로그래밍 1. 프로그래밍이란? 프로그래밍은 컴퓨터에게 실행을 요구하는 일종의 커뮤니케이션으로, 0과 1밖에 알지 못 하는 컴퓨터가 실행할 수 있을 정도로 정확하고 상세하게 요구사항을 설명하는 작업이다. 요구사항을 설명하기 위해 요구사항(문제)를 이해하는 것이 우선되어야 하며 단순하게 분해하고 자료를 정리하고 구분해야 하며 순서에 맞게 배열하여야 한다. 또한 컴퓨터와 사람의 사고, 인지 방식이 다르기 때문에 컴퓨터의 관점에서 문제를 사고하고 해결 과제를 작은 단위로 분해하고 패턴화해서 추출하여야 한다. 1.2 프로그래밍 언어 문제해결의 주체인 컴퓨터가 이해할 수 있는 언어인 기계어로 명령어를 전달해야 하는데, 이런 기계어를 직접 명령하는 것은 어려우니 사람이 이해할 수 있는 약속된 구문(Synta.. 2023. 1. 9.
자바스크립트(JS) - this 키워드 this 키워드 this 키워드 메서드에 있는 객체를 가리킬 때 this 키워드를 사용한다. const cat = { name: "hwan", color: "grey", breed: "scottish fold", meow() { console.log(`${this.name} says MEOWWWW`); }, }; 위에서는 cat이라는 객체 전체를 가리킨다. 그러나 항상 this가 해당 객체를 가리키진 않는다 → this 값이 바뀔 수 있다. 사용된 함수의 호출 컨텍스트에 따라 값이 달라진다. ⇒ 함수를 호출하는 방법에 달려있다. 메서드에 **this.**특성을 쓰면 이 메서드가 정의하는 객체를 가리키게 된다. 아래의 코드에서 meow2에서 this는 cat을 가리키지 않는다. → 호출 컨텍스트의 차이 ⇒.. 2023. 1. 4.
자바스크립트(JS) - 메서드(Method) 메서드(Method) → JavaScript에서 함수는 Object 라고 한다. 메서드(methods)란? 메서드는 객체에 종속된 특성으로 함수에 포함되는 개념이다. 즉, 메서드는 객체에 속성으로 추가된 함수이다. 메서드 이름 앞에 점을 찍어 사용한다. 모든 메서드는 함수이지만 모든 함수가 메서드는 아니다. const myMath = { PI: 3.14159, sqaure: function (num) { return num * num; }, cube: function (num) { return num ** 3; }, }; 아래와 같이 function 키워드를 생략할 수 있음 const myMath = { PI: 3.14159, sqaure(num) { return num * num; }, cube(num.. 2023. 1. 4.
반응형

티스토리툴바