728x90

Settings > Developer Settings

메뉴에서

 

Personal access tokens > Tokens (elascic) 을 선택

Generate new token

 

git pull과 action을 사용하기 위해선 workflow만 선택하면 된다.

 

실서버에서 다음과 같이 pull을 받으면 된다.

git pull https://<계정명>:ghp_test6efghNantoKaNantoKaKUtYa1234Vx3Y0@github.com/test/test.git <branch이름>

 

728x90

Template

 <tr
    v-for="(diary, idx) in f_rec_diary_list"
    :key="idx"
    draggable="true"
    @dragstart="drag_area(idx, 'M')"
    @dragend="drag_end_area"
    @dragover.prevent
    @dragenter="drag_enter_area(idx)"
    @drop="drop_area(idx, f_rec_diary_list)"
>

 

Data

data() {
        return {            
            dragged_area_index: null,
            hover_area_index: null,
            dragged_item_index: null,
            hover_item_index: null,
            dragged_type: null,
        };
},

 

Methods

drag_area(index, type) {
    console.log("drag_area -> index", index, "type", type);
    this.dragged_area_index = index;
    this.dragged_type = type;
},
drag_enter_area(index) {
    this.hover_area_index = index;
},
drag_end_area() {
    this.hover_area_index = null;
},
async drop_area(drop_index, parent) {
    if (this.dragged_type !== "M") {
        return;
    }

    const dragged_item = parent.splice(this.dragged_area_index, 1)[0];
    parent.splice(drop_index, 0, dragged_item);

    console.log('parent', parent);

    // Update seq_no values after reordering
    for (let i = 0; i < parent.length; i++) {
        parent[i].seq_no = i + 1;
    }

    console.log("dragged_item", dragged_item);

    this.dragged_area_index = null;
    this.hover_area_index = null;
    this.dragged_type = null;
},
drag_item(index, type) {
    this.dragged_item_index = index;
    this.dragged_type = type;
},
drag_enter_item(index) {
    this.hover_item_index = index;
},
drag_end_item() {
    this.hover_item_index = null;
},
728x90

MathJax는 웹 브라우저에 수학 표기법을 표시하기 위한 JS Library이며 아래와 같은 형식을 따른다.

\(-{1 \over {500}}x + 212\)

 

프론트엔드에서 위 MathJax 수식을 올바르게 보여주기 위해 아래 과정이 필요하다.

 

1. nuxt.config.js의 head에 스크립트 코드 추가

 // Global page headers: https://go.nuxtjs.dev/config-head
    head: {
         ( ... ) 
        script: [
            {
              src: 'https://polyfill.io/v3/polyfill.min.js?features=es6',
              type: 'text/javascript',
              body: true
            },
            {
              src: 'https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js',
              type: 'text/javascript',
              body: true
            }
        ]
    },

 

2. 프론트 페이지의 mounted에 아래 코드 추가

async mounted() {
    // mathjax 수식 렌더링 적용
    if (window.MathJax) {
        window.MathJax.typeset();
    }
}

 

그러면 아래와 같은 html 요소가 있을 때 수식이 제대로 보여지게 된다.

<p v-html="math_exp"></p>
 
data() {
	return {
		math_exp : "<div class="math">&nbsp;<p>The graph of \(y = 3x - 5\) in the \(xy\)-plane is a line. What is the slope of the line?</p></div>"
}

728x90

수많은 확장을 다 사용안함 하거나 지워야되나했는데 
 vscode-styled-components extension 비활성화(Disable)하니 해결되었다.

 

아마도 vscode나 확장기능이 업데이트하면서 생긴 문제인듯하다.

728x90

개요

node에서 oracle client를 연동하기 위해서는 node-oracledb 라는 라이브러리가 필요하다. 이 글에서는 라이브러리 설치 및 환경변수 설정, 노드 백엔드에서의 간단한 연동법을 소개한다.

설치 및 환경변수 설정

💡 실행 환경 : linux arm64, m1 mac

 

  1. 다운로드
  • 아래 링크에서 Basic Light Package (ZIP)을 내려받는다

https://www.oracle.com/database/technologies/instant-client/linux-arm-aarch64-downloads.html

instantclient-basiclite-linux.arm64-19.10.0.0.0dbru (1).zip

  1. opt/oracle 폴더로 이동하여 압축해제
  • 경로이동

cd ~/../../opt/

/opt/oracle/instantclient_19_8 과 같이 라이브러리가 위치하도록한다.

  1. bash_profile 수정
  • vi ~/.bash_profile

DYLD_LIBRARY_PATH=/opt/oracle

(리눅스는 LD_LIBRARY_PATH)

  • source ~/.bash_profile
  1. 백엔드 실행 시 아래와 같은 오류가 없다면 정상적으로 연동된 것이다. 오류가 난다면 환경변수의 경로가 옳게 설정되었는지 다시 확인해본다.

Error: DPI-1047: Cannot locate a 64-bit Oracle Client library

사용법

  • 초기화 (라이브러리 경로 : libDir 을 확인)
const oracledb = require('oracledb');
const os = require('os');

switch (os.type().toLowerCase()) {
    case 'windows_nt':
        oracledb.initOracleClient({libDir: 'C:/EXTERNAL_LIBRARY/instantclient_21_8'});
        break;
    case 'darwin':
        oracledb.initOracleClient({libDir: '/opt/oracle/instantclient_19_8'});
        break;
    case 'linux':
        oracledb.initOracleClient({libDir: '/opt/oracle/instantclient_21_9'});
        break;
}

// 쿼리 아웃풋을 객체로 받을지 배열로 받을지 옵션 설정 (배열의 경우엔 .OUT_FORMAT_ARRAY)
oracledb.outFormat = oracledb.OUT_FORMAT_OBJECT;
  • 오라클 class 및 메소드 정의
class Oracle {
    constructor() {
    }
		// 접속 초기화
    async init() {
        const _this = this;
        return new Promise((resolve, reject) => {
            oracledb.getConnection({
                user: process.env.ORACLE_USER,
                password: process.env.ORACLE_PASS,
                connectString: process.env.ORACLE_HOST
            }, function (error, connection) {
                if (error) {
                    return reject(error);
                }
                _this.connection = connection;
                return resolve();
            });
        });
    }
		// 쿼리 실행
    execute(sql, params = []) {
        const _this = this;
        return new Promise((resolve, reject) => {
            _this.connection.execute(sql, params, function (error, result) {
                if (error) {
                    return reject(error);
                }
                return resolve(result.rows);
            });
        });
    }
		// 쿼리 커밋
    commit() {
        const _this = this;
        return new Promise((resolve, reject) => {
            if (_this.connection) {
                _this.connection.commit(error => {
                    _this.release();
                    if (error) {
                        return reject(error);
                    }
                    return resolve();
                });
            } else {
                return resolve();
            }
        });
    }
		// 롤백
    rollback() {
        const _this = this;
        return new Promise((resolve, reject) => {
            if (_this.connection) {
                _this.connection.rollback(error => {
                    _this.release();
                    if (error) {
                        return reject(error);
                    }
                    return resolve();
                });
            } else {
                return resolve();
            }
        });
    }
		// 접속 해제 (commit, rollback시 반드시 수행)
    release() {
        this.connection.release();
    }
}
  • 노드 백엔드의 객체 초기화 및 쿼리 실행 예제
const oracledb = new Oracle();
await oracledb.init();

( ... )
try {
	const [max_no] = await oracledb.execute(`SELECT MAX("NO") AS value FROM INTF_JJ.INTF_ES_ORDER WHERE REQ_DT = TO_CHAR(SYSDATE, 'YYYYMMDD')`);
	await oracledb.commit();
} catch (e) {
  await oracledb.rollback();
  return next(e);
}

참고

http://oracle.github.io/node-oracledb/

728x90

분명 아카이브가 잘되고 앱스토어 커넥트에 업로드가 성공했다고 나오는데,

실제로 앱스토어 커넥트에 빌드 란을 보면 아무 항목도 나오지 않을 때가 있다.

 

이 경우에는 개발자 계정에 연결된 메일을 확인해본다.

아래와 같이 사유를 안내해주면 Learn more를 눌러 관련 조치를 해준 후 다시 업로드를 하면 정상적으로 등록이 되는 걸 볼 수 있다.

 

내 경우엔 문제가 되는 UIWebView 관련 코드를 모두 주석처리하니 해결되었다. (RNWebview를 쓰고 있어서 해당 코드없이도 앱 실행에 문제 없었음)

 

ITMS-90809: Deprecated API Usage - App updates that use UIWebView will no longer be accepted as of December 2020. Instead, use WKWebView for improved security and reliability. Learn more (https://developer.apple.com/documentation/uikit/uiwebview).

728x90

앱 소스가 아닌 프론트엔드 소스 코드를 아래와 같이 수정 ( #t=0.001 추가)

 

<video controls  preload="metadata" src="~/assets/img/video.mp4#t=0.001">
728x90

1. Images에 로고 이미지 추가 

2. LaunchScreen > View항목 선택 후 우상단의 + 눌러 Image View 추가

3. 레이아웃 제약 조건 설정

  • 반드시 Layout의 Inferred (간접) 오토리사이징 마스크를 선택한다

  • 제약 조건을 추가 하여 상하좌우 등의 항목을 설정 (간격핀 안 쪽 영역을 클릭하여 빨강으로 보이게 설정한 후 Add. x Constraints를 누른다)

728x90

Showing All Messages

Command PhaseScriptExecution failed with a nonzero exit code

 

PhaseScriptExecution [CP-User]\ Generate\ Specs /Users/(...)/Build/Intermediates.noindex/Pods.build/Release-iphoneos/FBReactNativeSpec.build/Script-46EB2E0001B930.sh (in target 'FBReactNativeSpec' from project 'Pods')

 

와 같은 오류가 뜰 때

 

clean build나 pod 재설치로도 해결이 안된다면 

node 문제일 수 있다.

 

- 임시적인 해결법

sudo vi node_modules/react-native/scripts/find-node.sh

 

다음줄 주석처리 ( --no-use 뒤부터와 그 다음 줄)

# Source nvm with '--no-use' and then `nvm use` to respect .nvmrc
# See: https://github.com/nvm-sh/nvm/issues/2053
if [[ -s "$HOME/.nvm/nvm.sh" ]]; then
  # shellcheck source=/dev/null
  . "$HOME/.nvm/nvm.sh" #--no-use
  #nvm use 2> /dev/null || nvm use default
elif [[ -x "$(command -v brew)" && -s "$(brew --prefix nvm)/nvm.sh" ]]; then
  # shellcheck source=/dev/null
  . "$(brew --prefix nvm)/nvm.sh" #--no-use
  #nvm use 2> /dev/null || nvm use default
fi

 

참고

https://stackoverflow.com/questions/66742033/phasescriptexecution-cp-user-error-in-react-native

 

PhaseScriptExecution [CP-User] error in React Native

Nowadays everytime I create a new project react-native init ProjectName and after it is created I do npx pod-install and then react-native run-ios it gives me error. It happens with every project t...

stackoverflow.com

 

하지만 위 임시적인 해결법으로는 패키지 변경 후 재설치마다 find-node.sh파일이 바뀌기 때문에

nvm과 node 제거 후 클린설치를 하는 것이 좋다.

 

이후 빌드 시의 노드 버전과 which node로 node 경로를 확인하고 환경변수가 잘 설정되어있는지 확인 후에 재빌드하면 될 것이다.

728x90

라디오박스라면 하나만 체크되니 css 를 수정해서 체크박스처럼 보일 수도 있겠지만

체크박스로 이미 퍼블이 된 상태에서 수정할 필요가 있어 직접 코드를 짜보았다.

 

템플릿내 코드 

 <input type="checkbox" v-model="pay_method.card" name="chkbox" id="card"
 @change="check_one( {type:'card' })" >
                            
<input type="checkbox" v-model="pay_method.bank" name="chkbox"  @change="check_one( {type:'bank' })"
 id="noBankBook">

 

data 정의

data(){
        return{            
            pay_method: { card: true, bank: false },
        }
    },

method 정의

methods: {
	check_one(element) {
      console.log('checkbox check : ', element.type)
      let obj = this.pay_method

      if (element.type) {
        for(const [key, value] of Object.entries(obj)) {          
          console.log(`${key}: ${value}`);

          if (key == element.type) {
            obj[key] = true
          } else {
            obj[key] = false
          }
        }

        const check = document.getElementById(`${element.type}`);
        
        if (check && check.checked != undefined) {
          check.checked = true;
        }
        console.log('checked', check.checked)
      } 

      console.log('type', JSON.stringify(this.search_type))

    },
}

+ Recent posts