전체 글

react router가 동작하지 않을 때

새로운 프로젝트 생성 후 react-router-dom을 통해 라우팅 기능을 구현하려고 했는데, 의도한대로 동작하지 않는 상황이 있었다. 문제의 원인은 react-router-dom의 버전에 따라 사용방법이 상이할 수 있으므로, 버전에 맞는 방법을 사용하면 된다. 먼저 프로젝트의 package.json 파일에서 react-router-dom의 버전을 확인한다. 필자의 경우 react-router-dom": "^6.0.2 6버전의 react-router-dom을 사용하고 있었으므로, 버전에 맞는 방식으로 속성을 변경해준 후 정상적으로 작동했다. path 속성의 / 제거 component 속성을 element로 변경

자바스크립트 세미콜론에 대한 간단한 고찰

## 자바스크립트에서 세미콜론을 사용해야 할까? 자바스크립트에는 ASI (아마 Auto Semicolon Insert ? ) 기능이 있음. 언제 나온건지는 모름 ASI는 '지능'적으로 세미콜론이 위치해야할 자리에 자동으로 세미콜론을 삽입해준다. 그러나 ASI가 잘못된 위치에 세미콜론을 삽입하는 경우가 있으며, 이는 아래와 같은 예시가 될 수 있다. function foo() { return { "foo" : "foo" } } 개발자의 의도로서는 foo 함수의 반환값은 foo 라는 속성을 가진 객체를 리턴해야한다. 그러나 ASI로 인해서 아래와 같은 코드로 만들어질 수 있다. function foo() { return; { "foo" : "foo" }; } ASI로 인해 개발자가 의도한 코드와는 다르게 함..

[Android] 디버깅 중 크래시로 종료되었을 때 로그 보는법

안드로이드 앱 개발 중 JNI측에서 발생한 크래시의 경우 크래시가 발생하면서 앱이 종료되고 다시 시작되는데, 이 때 크래시가 발생한 순간의 로그를 안드로이드 스튜디오 로그캣에서 확인할 수 없을 때가 있다. 이 로그를 확인하는 방법을 간단하게 알아보자. 1. 로그를 추출할 기기가 연결하기 2. adb shell bugreport > [로그저장위치][log.txt] 텍스트파일을 확인하면 JNI측에서 발생한 로그를 확인할 수 있다.

CMake Warning at C:/cmake-3.22.0-rc3-windows-x86_64/share/cmake-3.22/Modules/FindBoost.cmake:1015 (message): Imported targets and dependency information not available for Boost version 0.0.0 (all versions older than 1.33)

vcpkg로 boost 설치 후 cmake에서 경로 찾지 못할 때 직접 경로정해주는 방법 CMake Warning at C:/cmake-3.22.0-rc3-windows-x86_64/share/cmake-3.22/Modules/FindBoost.cmake:1015 (message): Imported targets and dependency information not available for Boost version 0.0.0 (all versions older than 1.33) -DBoost_INCLUDE_DIR="VCPKG_PATH\installed\x64-windows\include" -DBoost_LIBRARY_DIR="VCPKG_PATH\installed\x64-windows\lib"

[Android Studio] 안드로이드 프로젝트 병합, 한 프로젝트에서 빌드 변형 구성(Flavor)

기존 안드로이드 프로젝트에서 free, paid Version 구성 또는 인앱 결제 모델, 구독 결제 모델을 나누는 방법으로 좋은 Flavor에 대해서 알아보겠습니다 ㅎㅅㅎ Flavor란 무엇일까? Flavor이란 Gradle에서 제공하는 옵션으로, Flavor를 통해 한 프로젝트에서 여러개의 빌드 버전을 생성할 수 있습니다. 필자는 안드로이드 개발 중 구독, 인앱 결제를 제외하고 같은 기능을 수행하는 프로젝트를 병합하기 위해 사용했습니다. Flavor를 통해 여러 빌드를 생성하는 방법 applicationIdSuffix는 프로젝트 패키지 마지막에 설정될 이름을 설정할 수 있습니다. 이 옵션을 통해 구글 플레이에 각각 다른 패키지 명으로 앱을 추가할 수 있습니다. manifestPlaceHolder는 A..

JavaScript ES6 문법 정리

JavaScript ES6 문법 정리 const and let ES6에서 추가된 변수 선언 방법입니다. 변수 재 선언 var의 경우 변수를 한번 더 선언했음에도 오류가 발생하지 않습니다. var foo = "foo" console.log(foo) // foo var foo = "pee" console.log(pee) // peelet의 경우 변수를 한번 더 선언할 경우 오류가 발생합니다. (const의 경우도 마찬가지로 오류가 발생합니다.) let foo = "foo" console.log(foo) let foo = "pee" // Uncaught SyntaxError: Identifier 'foo' has already been declared console.log(foo)const 와 ..

2021.09.11

JSX = Javascript + XML Javascript와 XML구문을 결합해 사용하는 코드를 JSX 라고한다. 자바스크립트 표준에 JSX 구문이 없지만, 포함된 것 처럼 동작할 수 있는 이유는 ESNext 자바스크립트 컴파일러인 바벨(babel)이 플러그인 구조로 동작하기 때문이다, 바벨은 ESNext 자바스크립트 코드를 만나면 파이프라인 형태로 동작하여 이해할 수 있는 구문만 컴파일하여 자바스크립트로 변환한다. 페이스북은 JSX 구문을 컴파일 하고자 @babel/plugin-trnasform-react-jsx 라는 바벨 플러그인을 제공한다. jsx 구문이 있는 타입스크랍트 코드는 .tsx 여야하며, 다음 임포트 문이 필요하다. import React from 'react' React.createE..

React Native- Failed to build IOS project. We ran "xcodebuild" command but it exited with error code 65

npm run ios 빌드오류 React Native- Failed to build IOS project. We ran "xcodebuild" command but it exited with error code 65 위와 같은 오류가 발생했고, 구글링 과정에서 ios/pods/podfile 수정을 통해 해결할 수 있다고 해서 변경했다. use_flipper ~ post_install do |installer| flipper_post_install(installer) end 이부분 삭제하고 저장. 수정 후 pod deintegrate pod install 여기까지 수행하고 오류 그대로 발생. 그러나 오류코드 하단에 nvm is not compatible with the "npm_config_prefix" ..

2021.09.09

리액트 네이티브 개발에서 사용하는 명령 npm i package.json 파일에 명시된 패키지를 node_modules 디렉터리에 설치 설치한 패키지는 android나 ios 디렉터리의 네이티브 모듈에서 동작하는 파일을 가진다. npm pod-install objc와 같은 c계열 언어는 원격 저장소에서 패키지를 내려받아 설치하는 기능이 없다. 따라서 pod 프로그램을 통해 패키지를 설치해야하므로 사용 npm start npm run android, npm run ios 명령은 네이티브 부분 앱을 빌드하여 에뮬레이터에 설치하고 자동으로 실행한다. 에뮬레이터에 설치된 앱은 처음 실행될 때 메트로 서버에서 ES5자바스크립트 코드를 내려받는다. 그러므로 위의 명령을 실행하기 전에 npm start로 메트로 서버..

2021.09.08

Git Flow 회사에서 사용하는 Git Flow 사용에 대해 오해가 있었다. 맨날 나만몰라...🥲 오늘 처음으로 팀 미팅이 있었는데, 회사의 개발 전략에 대해서 소개했었다. Git Flow에 대해 소개하는 시간이 있었는데, Origin Remote Repository와 Remote Branch의 개념이 헷갈렸었다. 하 소개하는놈이 Github 의 React Repository의 경우로 생각하면 Upstream Remote Repositry의 경우 레포지토리의 주인인 Facebook이 React Repository의 Upstream Remote Repository일 것이다. 이를 내가 fork 할 경우 내 계정에 생성된 React 레포지토리가 Origin Remote Repository가 될것이다. 여기..