✅ Widget이란?

1. 독립적으로 실행되는 작은 프로그램
2. 주로 바탕화면, 앱 화면 등에서 날씨·뉴스·생활정보 등을 보여줌
3. 그래픽이나 데이터 요소를 처리하는 함수를 가짐

👉 일반적으로 말하는 위젯은 작은 프로그램이지만,
Flutter에서의 위젯은 더 넓은 개념을 가집니다.

✅ Flutter의 위젯

1. UI를 만들고 구성하는 모든 기본 단위 요소
2. 보이지 않는 레이아웃 요소까지도 위젯
3. 즉, Flutter의 모든 것은 위젯

✅ Flutter 위젯의 종류

• Stateless Widget
  • 상태가 없는 정적인 위젯
  • 이전 상호작용의 값을 저장하지 않음
  • 예: 텍스트, 아이콘, 이미지
• Stateful Widget
  • 상태(state)를 추적하고 보존하는 위젯
  • 사용자의 입력이나 데이터 변화에 따라 모양 변화
  • 예: 버튼 클릭, 텍스트 입력, 데이터 로딩 상태
• Inherited Widget
  • 위젯 트리 전체에 데이터를 전달하는 특수한 위젯
  • 주로 상태 관리에 활용

✅ Stateless 위젯 특징

1. 화면에 존재만 할 뿐 변화 없음
2. 실시간 데이터 저장 불가
3. 변화(모양·상태)를 유발하는 value 값 없음

✅ Stateful 위젯 특징

1. 사용자의 상호작용(클릭, 입력 등)에 따라 모양이 변함
2. 데이터를 받으면 UI가 다시 그려짐

✅ Flutter 위젯 트리 (Widget Tree)

위젯들은 트리(tree) 구조로 정리됩니다.
부모 위젯(Parent) 안에 자식 위젯(Child)을 포함할 수 있으며, 이를 Widget Tree라고 합니다.

예시 구조:
MyApp
└─ MaterialApp
└─ MyHomePage
└─ Scaffold
├─ AppBar
└─ Center
└─ Column
├─ Text
├─ Image
└─ Button

✅ 간단 예시 코드

1) Stateless Widget

import 'package:flutter/material.dart';

class MyStatelessWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return const Text(
      '안녕하세요! 저는 Stateless Widget 입니다.',
      style: TextStyle(fontSize: 20),
    );
  }
}



import 'package:flutter/material.dart';

class MyStatefulWidget extends StatefulWidget {
  @override
  _MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  int _count = 0;

  void _increment() {
    setState(() {
      _count++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Text('버튼 클릭 횟수: $_count', style: const TextStyle(fontSize: 20)),
        ElevatedButton(
          onPressed: _increment,
          child: const Text('클릭'),
        ),
      ],
    );
  }
}

📌 정리 (Summary)
Flutter의 모든 것은 위젯이다.
변화가 없는 UI → Stateless Widget
모양·상태가 바뀌는 UI → Stateful Widget
위젯은 항상 트리 구조로 구성된다.

업비트에서 바이낸스( 국내에서 해외로 코인 전송 )로 출금하는 방법입니다.

업비트 로그인 / 바이낸스 로그인 이후 내용입니다.

1. 검색창에 원하는 코인을 입력하고 클릭합니다.

2. 시장가를 클릭하고 주문총액을 입력한 후 매수를 클릭합니다.

3. 입출금을 클릭한 후, 매수한 코인 이름을 검색한 다음 출금을 누르고 출금수량을 최대로 한다음 아래 출금신청을 클릭합니다.

4. 받는사람 주소를 입력하는 창이 열리게 됩니다. ( 현재 창은 그대로 두고, 바이낸스로 넘어갑니다. )

5. 우측 상단에 Deposit을 클릭합니다.

6. 하단에 암호화폐 입금 ( Deposit Crypto )를 클릭합니다.

7. 매수한 코인을 선택하고 네트워크도 선택해줍니다. ( 트론의 메인 네트워크는 TRC20입니다. ) 그리고 Address를 복사합니다.

8. 다시 업비트로 돌아와서 복사한 주소를 붙여넣고 아래 출금신청을 클릭합니다. 출금 전 잠깐이라는 내용이 나오는데, 아니요를 클릭하시면 됩니다.

9. 카카오톡 인증을 진행합니다.

10. 출금을 완료하면 출금 진행중이라는 문구가 뜨고, 1 ~ 2분 정도 기다리면 출금 완료가 됩니다.

11. 우측 상단에 지갑모양을 클릭하고 Spot을 클릭하면 매수한 코인이 보이며, Convert를 클릭해서 매수한 코인을 USDT로 옮기면 작업은 완료 됩니다.

전송 네트워크만 잘 확인하시면, 다른 코인으로도 방법은 같습니다. 

부 - 자 되세요~

Java JDK를 설치하는 방법입니다.

java JDK 다운로드

위 오라클 사이트에서 DMG로 받았습니다.

받은 dmg파일을 열어 .pkg파일을 실행해서 설치를 해줍니다.

설치 확인하기

$ java -version

설치한 java JDK 확인하기

$ /usr/libexec/java_home -V

java JDK 기본 설정 변경하기

.zshrc

.zshrc파일에 아래 내용을 추가하고 터미널을 다시 실행시킨다음 java -version을 확인하면 21버전으로 변경된 것을 확인 할 수 있습니다.

$ export JAVA_HOME=$(/usr/libexec/java_home -v 21.0.2)

java JDK 삭제하기

경로는 본인이 설치한 위치에 따라 조금 다를 수 있습니다.

$ cd /Library/Java/JavaVirtualMachines 

$ sudo rm -rf openjdk-17.0.9

아파치 톰캣 ( Apache Tomcat )을 설치하는 방법입니다.

brew

$ brew install tomcat

위처럼 설치방법은 굉장히 간단합니다.

설치 확인

$ cd /opt/homebrew ~
$ cd bin

// 톰캣 실행
$ ./catalina start

// 톰캣 종료
$ ./catalina stop

실행후에 http://localhost:8080로 이동했을 때 아래처럼 톰캣 페이지가 보이게됩니다.

stop은 말그대로 종료입니다.

brew 설치하는 방법

React를 새로 생성했을 때 발생했던 에러입니다.

One of your dependencies, babel-preset-react-app, is importing the "@babel/plugin-proposal-private-property-in-object" package without declaring it in its dependencies. This is currently working because "@babel/plugin-proposal-private-property-in-object" is already in your node_modules folder for unrelated reasons, but it may break at any time. babel-preset-react-app is part of the create-react-app project, which is not maintianed anymore. It is thus unlikely that this bug will ever be fixed. Add "@babel/plugin-proposal-private-property-in-object" to your devDependencies to work around this error. This will make this message go away.

처음에는 Stack overflow에 나와있는 방법으로 해결을 했었습니다.

$ npm install --save-dev @babel/plugin-proposal-private-property-in-object

그런데 계속해서 뜨는게 거슬려서 확실하게 하고자 뭐가 문제인지 더 찾아봤습니다.

해결방법

여러 글들을 찾아다니다보니 npm과 create-react-app의 버전 호환 충돌일 가능성이 있다는 내용들이 있었습니다.

그래서 npm을 최신버전으로 올려주었더니 오류가 사라지는걸 확인할 수 있었습니다.

$ npm install -g npm@latest

react-native-vector-icons 사용하는 방법입니다.

Mac 기준입니다.

( icon 하나 사용하는데 하루가 걸린 기분이 듭니다... )

npm

$ npm install react-native-vector-icons
$ npm install -D @types/react-native-vector-icons

저는 typescript를 사용하고 있기 때문에 @types 부분도 추가했습니다.

iOS에서 아이콘 추가하기

1. 프로젝트를 열고 터미널을 열어줍니다.

$ cd ios
$ pod install

ios로 들어간다음 pod install을 해줍니다.

2. 프로젝트 폴더에서 ios -> project-name.xcworkspace를 열어줍니다. ( 대기 ! )

3. 다시 프로젝트 폴더에서 node_modules -> react-native-vector-icons -> Fonts 폴더를 복사합니다.

4. 아까 대기시켜둔 workspace에 project-name 폴더 아래에 복사한 Fonts폴더를 추가해줍니다.

추가할 때 아래 창이 뜨면 이렇게 해주면 됩니다.

아래처럼 추가된 모습을 볼 수 있습니다.

5. Fonts폴더를 추가시키고 아래를 보면 Info파일이 있습니다.

Info로 들어가서 아래처럼 내용들을 추가해줍니다.

Informations Property List
 - Fonts provided by application
   - item 0 ~ item 18 ( value에 폰트 내용을 추가합니다. )

Informations Property List 옆에 +를 누르고 Fonts provided by application을 추가합니다. ( 자동완성 )

Fonts provided by application 옆에 +를 누르고 item들을 추가시킨다음 Fonts내부에 ttf파일들 이름을 추가시켜줍니다.

추가를 하고난다음 Info를 닫고 프로젝트에서 ios -> project-name -> Info.plist파일을 열어보면 아래처럼 추가된 내용을 확인 할 수 있습니다.

workspace에서 project-name 폴더에 Build Phases -> Copy Bundle Resources를 확인해보면 여기도 Fonts가 추가된 것을 확인 할 수 있습니다.

이렇게 완료하고 ios를 재시작하면 icon이 들어오는 것을 확인 할 수 있습니다.

( 아이콘 추가방법을 가장 아래 추가해 두었습니다. )

Android에서 아이콘 추가하기

1. android/app/build.gradle 파일로 이동해서 아래 내용을 추가해줍니다.

apply from: file("../../node_modules/react-native-vector-icons/fonts.gradle")

2. android/settings.gradle 파일로 이동해서 아래 내용을 추가해줍니다.

include ':react-native-vector-icons'
project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android')

3. 다시한번 android/app/build.gradle 파일로 이동해서 아래 내용을 추가해줍니다.

dependencies {
    implementation project(':react-native-vector-icons')
    ...
}

dependencies 내부에 추가해줍니다.

4. gradlew clean를 실행합니다.

$ cd android
$ ./gradlew clean

pod install 한것과 같습니다.

이렇게 iOS, 안드로이드 모두 아이콘을 추가할 준비가 됐습니다.

아이콘 추가하기

react-native-vector-icons 바로가기

위 사이트에 접속하면 아래처럼 빨간배경에 제목과 아이콘 이름들을 확인 할 수 있습니다.

제목은 import할 때 사용하고 아이콘 이름은 아이콘을 추가할 때 사용하는 이름입니다.

아이콘 추가하는 방법 1

import { StyleSheet, Text, View } from "react-native";
import AntDesign from 'react-native-vector-icons/AntDesign';

const Headers = () => {
    return (
        <View>
            <Text>Header</Text>
            <AntDesign size={35} name="creditcard" color="#000000" />
        </View>
    );
}


export default Headers;

아이콘 추가하는 방법 2

import { StyleSheet, Text, View } from "react-native";
import Icon from 'react-native-vector-icons/FontAwesome';

const myIcon = <Icon name="rocket" size={30} color="red" />;

const Headers = () => {
    return (
        <View>
            <Text>Header</Text>
            {myIcon}
        </View>
    );
}

export default Headers;

확인해보면 아래처럼 아이콘이 추가된 것을 확인 할 수 있습니다.

React Native... 쉽지 않습니다..

React 프로젝트를 진행할 때 ../../../ 와 같은 상대경로가 아닌 @components/, @pages/ 와 같은 절대경로는 설정하는 방법입니다.

프로젝트를 진행할 때 간단한 페이지면 문제가 없는데, redux같은 상태관리를 사용하거나 component가 늘어나면 ../../../component/ 이런식으로 깊어질 때가 있습니다.

이럴때 절대경로를 통해서 최상위부터 시작하는 방법으로 저는 craco를 사용했습니다.

Craco

Craco는 Create-React-App Configuration Override의 약자입니다.

CRA를 사용할 때 webpack을 설정하려면 오버라이딩을 해야하는데 이 webpack을 직접 설정하려면 eject를 해야합니다.

하지만 그렇게하게되면 CRA의 장점들이 사라지게 됩니다. ( 트랜스파일링, 번들링 등 )

그래서 이때 Craco 라이브러리를 사용해서 eject를 하지 않고 webpack 설정을 변경해줍니다.

npm

$ npm install @craco/craco

package.json

  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
  },

scripts부분에 react-scripts부분을 craco로 변경해주었습니다.

craco.config.js

const path = require('path');

module.exports = {
  webpack: {
    alias: {
      '@components': path.resolve(__dirname, 'src/components'),
      '@pages': path.resolve(__dirname, 'src/pages'),
      '@styles': path.resolve(__dirname, 'src/styles'),
      '@json': path.resolve(__dirname, 'src/json'),
      '@items': path.resolve(__dirname, 'src/items'),
    },
    "compilerOptions": {
      "baseUrl": "src"
    },
    "include": [
        "src"
    ]
  },
};

최상위 경로에 craco.config.js파일을 생성해서 위처럼 오버라이딩 할 설정을 해줍니다.

이후 저같은 경우 babel-preset-react-app, is importing the "@babel/plugin-proposal-private-property-in-object" package without declaring it in its dependencies 이런 경고창이 보였습니다.

저같은 경우는 stack overflow를 따라 아래처럼 해결했습니다.

stack overflow 바로가기

$ npm install --save-dev @babel/plugin-proposal-private-property-in-object

NuxtJS 정적 사이트 배포하는 방법입니다.

:: Nuxt2 입니다.

:: Nuxt3 github pages 배포하기 바로가기

npm

$ npm install push-dir --save-dev

push-dir, github actions, Travis CI 등 방법은 여러가지 있습니다. ( 여기서는 push-dir을 사용했습니다. )

nuxt.config.js

export default {
  target: "static",
  router: {
    base: "/깃허브 레포지토리 이름/"
  },
}

github에서 Repository name에 적었던 이름입니다.

전제조건

• github Repository
• nuxt.config.js의 ssr값이 false

package.json

  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "deploy": "push-dir --dir=dist --branch=gh-pages --cleanup",
    "test": "jest"
  },

사실 deploy 한 줄 추가됐습니다.

배포파일 생성하기

$ npm run generate

저는 정적파일 배포를 하려고 했기 때문에 generate를 해주었습니다.

dist파일이 생성된 모습입니다.

github pages 브랜치에 업로드하기

$ npm run deploy

정상적으로 업로드가 완료되었다면 gh-pages 브랜치가 생성되고 내부에 dist 파일들이 업로드 되어있을 것입니다.

사이트 접속하기

https://shiro21.github.io/repository-name/

자신의 github.io에 repository-name을 붙여주면 배포한 사이트에 접속할 수 있습니다.

React Native 프로젝트 생성하고 앱을 실행하는 방법입니다.

xcode와 Android Studio가 설치된 이후에 시작하는 내용입니다.

brew install

$ brew install node
$ brew install watchman

node version은 18이상으로 설치해줍니다.

watchman은 파일 시스템의 변경 사항을 감시하기 위한 도구입니다.

:: watchman 설치 에러가 일어날 때

python@3.11: the bottle needs the Apple Command Line Tools to be installed. You can install them, if desired, with: xcode-select --install

위와같은 에러가 나오면 아래 내용을 입력해줍니다.

$ xcode-select --install

react native cli 생성하기전에 이전에 글로벌로 react-native-cli를 설치한적이 있다면 제거해줍니다.

:: 이전에 글로벌로 설치한 경우 문제가 발생할 수 있다고 합니다.

$ npm uninstall -g react-native-cli @react-native-community/cli

프로젝트 생성하기

생성할 때, cocoaPods추가 내용이 나왔을 때 y 해주었습니다. ( 종속성 관리 시스템입니다. )

$ npx react-native@latest init AwesomeProject

특정 버전으로 새 프로젝트를 시작할 때

$ npx react-native@X.XX.X init AwesomeProject --version X.XX.X

프로젝트 실행하기

$ npm start

위처럼 실행하면 문제없이 바로 실행이 되는줄 알았습니다...

에뮬레이터 작동안되는 문제..

Could not determine the dependencies of task ':app:compileDebugJavaWithJavac'

> err...

문제내용

• JDK 버전
• Android 환경변수

먼저 java 버전을 확인해줍니다.

$ java --version

첫번째 문제가, 자바 버전이 11이였기에 문제가 일어났었습니다. 그래서 일단 버전을 17로 올려주었습니다.

JDK 17버전 설치하기

$ brew install openjdk@17

이후 .zshrc 파일에 경로를 추가해주었습니다.

$ export PATH="/opt/homebrew/opt/openjdk@17/bin:$PATH"

터미널에서 추가하기

위처럼 vi로 적용하거나, 아래처럼 입력하면 .zshrc에 추가하고 변경사항을 저장해줍니다.

$ echo 'export PATH="/opt/homebrew/opt/openjdk@17/bin:$PATH"' >> ~/.zshrc
$ source ~/.zshrc

두번째 문제는 안드로이드 환경변수가 설정되어 있지 않아서 발생했습니다.

먼저 Android SDK Tools(Obsolete)를 체크해주었습니다.

Android SDK Tools체크하러 가기

1. Android Studio에서 SDK Manager로 들어갑니다.

2. Android SDK -> SDK Tools -> Hide Obsolete Packages 해제 -> Android SDK Tools (Obsolete ) 체크

ANDROID_HOME 환경변수 추가하기

.zshrc 파일에 아래 내용을 추가합니다.

ANDROID_HOME에 있는 경로는 위 이미지에 Android SDK Location의 경로입니다.

$ export ANDROID_HOME=/Users/junhyeok/Library/Android/sdk
$ export PATH=$PATH:$ANDROID_HOME
$ export PATH=$PATH:$ANDROID_HOME/emulator
$ export PATH=$PATH:$ANDROID_HOME/tools
$ export PATH=$PATH:$ANDROID_HOME/tools/bin
$ export PATH=$PATH:$ANDROID_HOME/platform-toolsexport PATH="/opt/homebrew/opt/openjdk@17/bin:$PATH"

위 내용들을 실행하고 난 후에 Android와 iOS 에뮬레이터가 문제없이 작동되었습니다.