성코 개발일지

InputText에 텍스트 입력을 위해 키보드가 올라오면 배너 영역에 있는 SafeAreaView가 함께 올라와 해결하기 위해 KeyboardAvoidingView 사용했다.  1. KeyboardAvoidingView를 사용하기 위해 import한다import {KeyboardAvoidingView, Platform} from 'react-native'; Platform은 os별로 다르게 적용되는 부분을 위해 함께 추가했다.  2. 키보드가 올라왔을 때  사라져야 하는 부분을 KeyboardAvoidingView 컴포넌트로 감싸준다return ( { this.focus.current = true; }} onDidBlur={payload => { th..

회사 프로젝트와 예전 외부 프로젝트 소스를 분석하면서 apk 파일 만드는 방법이 달라 까먹을까봐 기록용으로 작성한다. 1. 프로젝트 하위 /android/app/build.gradle 파일에서 versionCode와 versionName 배포 버전에 맞게 수정 2. 프로젝트 단의 터미널에서 아래 명령어 실행//프로젝트 폴더에 index.js가 있는 경우에만react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/cd android//디버그 apk./..

1. VSCode - 터미널 열기2. npm 명령어로 yarn 설치하기npm install -g yarn 3. package.json의 패키지 설치yarn install [오류발생]yarn : 이 시스템에서 스크립트를 실행할 수 없으므로...권한이 없어서 이 시스템에서 스크립트를 실행할 수 없다는 에러가 발생 [해결책]1. PowerShell 관리자권한으로 실행2. Get-ExecutionPolicy 명령어 입력3. 권한이 없으면 Restricted4. Set-ExecutionPolicy RemoteSigned 입력5. Y 입력6. Get-ExecutionPolicy 명령어로 권한 확인 7. RemoteSigned 뜨면 변경된 것을 확인할 수 있다.4. 프로젝트 실행y..

1. Android SDK 설정 [Tools] - [SDK Manager] Android 10.0 (Q) Intel x86 Atom System Image Google APIs Intel x86 Atom System Image Google APIs Intel x86 Atom_64 System Image 2. AVD(안드로이드 에뮬레이터) 설정 [Tools] - [AVD Manager] 또는 [Device Manager] 3. Phone > Pixel 5 선택 및 Next Finish 누르고 장치 추가 완료 4. start 클릭하면 에뮬레이터 실행됨

1.JDK 설치 2. 안드로이드 스튜디오 설치 JDK 설치 환경변수 설정 안드로이드 스튜디오 설치 1. 홈페이지 접속 후 다운로드 ( https://developer.android.com/studio/?hl=ko ) 2. SDK 설치 위치 복사 해놓기 3. 환경변수 설정 [고급 시스템 설정 보기] - [환경변수] - [시스템변수] [사용자변수] - path 편집 - 새로만들기 - 아래 문구 추가 %ANDROID_HOME%\platform-tools 4. 설치 확인 cmd 에서 아래 명령어 adb --version

1. Chocolatey 설치 2. Node.js 설치 3. React-Native-Cli 설치 Chocolatey 설치 1. Windows PowerShell 관리자 권한으로 실행 2. 아래 명령어 복사하여 실행하면 설치 진행된다. Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://community.chocolatey.org/install.ps1'))..

1. JSX란? 2. 문법 3. 스타일링 JSX란? JSX란 JavaScript + XML로 자바스크립트 내부에 HTML을 작성하는 확장된 자바스크립트 문법이다. JSX를 사용하지 않고 를 만드는 경우 fucntion App() { return React.createElement('div', null, 'Hello World') } JSX로 작성하면 아래와 같이 태그만 작성하면 된다. function App() { return ( Hello World ) } 이후 바벨을 이용하여 우리가 아는 자바스크립트 코드로 변환된다. 바벨은 ES6 이상 혹은 JSX 같은 코드를 브라우저가 이해할 수 있는 자바스크립트 코드로 변환해주는 자바스크립트 트랜스 컴파일러이다. JSX를 사용하면 JS 코드 안에서 UI 관련 작..

1. 개요 2. Redux-Saga 개념 3. Redux-Saga 이펙트 Redux-Saga의 필요성 Redux는 순수함수여서 부수적인 효과 처리를 할 수 없다. 즉, HTTP 요청을 보내거나, 무언가를 로깅하거나, store에 접근하는 등의 사이드 이펙트(Side effects)를 수행하지 않는다. 아래 코드 실행시 바로 state를 로그인으로 바꿔버린다. {type: :LOG_IN, data: {id: 'zeroch0', password: '1234'}} 하지만 실제로 프로세스는 서버쪽에 data가 전달되고, 서버는 아이디/패스워드 data 확인 후, 로그인 성공이라는 응답을 보내고, 그걸 다시 받아서 로그인 처리해야된다. => Redux는 바로바로 실행되기 때문에(동기적처리) 특정 시간 또는 특정 ..

리덕스 적용 1. store 생성. 어디에서나 실행시킬 수 있도록 전역변수로 저장 2. 자동으로 store 안에 state 생성 3. reducer라는 함수를 만들어서 store에 state 값 주입 4. state 값을 확인하기 위해 getState 사용 5. 상태값 변경을 위해 dispatch 사용 6. reducer는 현재 state 값과 변경해야하는 action을 받아서 다음의 state 값을 return

1. 리덕스란? 2. 리덕스의 특징 3. 용어 정리 Redux 상태를 중앙에서 관리하는 상태관리 라이브러리 데이터가 예측하지 않은 데이터로 변형되지 않도록 관리해준다 Redux의 특징 1. 하나의 상태(state)를 갖는다 하나의 객체 안에 애플리케이션에서 필요한 데이터를 우겨넣는다 => 데이터를 하나의 객체로 중앙집중적으로 관리한다 복잡성을 한단계 낮춘다 2. state를 외부와 차단시켜 외부에서 데이터를 읽고 수정하는 것을 막는다 dispatch를 사용해서 인가된 함수만 작업이 가능하도록 한다 데이터를 가져갈 때도 getState를 사용해서만 가져갈 수 있다 (데이터를 외부에서 직접적으로 관리할 수 없음) state 값이 바뀔 때마다 컴포넌트에게 데이터가 수정되었다고 알려준다 용어 정리 store :..