코린이[코딩 어린이]

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

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

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 에뮬레이터가 문제없이 작동되었습니다.

리액트 프로젝트 생성 방법인 Expo와 React-native CLI에 대한 내용입니다.

리액트 네이티브프로젝트를 생성하는 두가지 방법

• Expo ( URL: Expo 바로가기 )
• React Native CLI ( URL: React-Native CLI 바로가기 )

Expo와 React Native의 장단점

Expo 장점

• 초기 환경 세팅이 쉬워서 빠르고 간편하게 만들수 있습니다.
• React Native의 기본 설정이 구성되어 있습니다.
• 개발하기 어려운 기능들이 탑재되어 있습니다.
• 네이티브 관련작업들을 Expo가 관리해줍니다.
• 모바일 앱 관련 개발에 친숙하지 않은 사람들에게 좋은 도구입니다.
• Apple, Google Store에 배포와 업데이트가 간단합니다.

Expo 단점

• 숨겨져 있는 네이티브 파일을 변경하기 어렵습니다.
• Expo에서 지원하지 않는 네이티브 라이브러리는 사용할 수 없습니다.
• 네이티브 기능을 완벽하게 다룰 수 없기 때문에 한계가 명확합니다.

React Native CLI 장점

• 네이티브로 어플리케이션 개발이 가능합니다.
• 다양한 라이브러리를 사용할 수 있습니다.
• 필요한 기능을 직접 만들어서 사용할 수 있습니다.

React Native CLI 장점

• Android, IOS에 대한 네이티브 지식이 필요합니다. ( 러닝커브가 높습니다. )
• 초기 환경 세팅이 어렵습니다.
• 빌드시 Android Studio, Xcode를 이용한 별도의 과정과 장비가 필요합니다.

어떤걸 선택해야 하는가 ?

Expo를 사용하게되면 결국 eject를 고민하는 순간이 옵니다.

예를들어 핸드폰 자체 기능을 사용한 기능이 거의 들어가지 않고 JS비중이 높은 간단한 어플이라면 Expo를 사용해도 무방하지만 핸드폰 자체 기능이 하나 둘씩 들어가다보면 결국 한계가 오게됩니다.

또한 이제 빌드를 하게되면 Expo는 무료를 사용하게 되면 빠르면 30분 느리면 1시간 이상 걸리는걸 확인할 수 있습니다.

결론은 정말 간단하고 핸드폰 기능이 없는 앱을 만들 경우에는 Expo를 사용하고 그 이외에는 React Native를 사용하는 것이 맞지 않을까라는 생각을 하게 되었습니다.

코딩에 필요한 수학 공식들을 적어두기 위한 공간입니다.

1. 등차수열

첫째항부터 차례대로 일정한 수( 공차 )를 더하여 만든 수열

n * (n + 1) / 2