성코 개발일지

2024.06.20 - [분류 전체보기] - [React-native] 검색기능 구현1 (UI 구현)2024.06.21 - [Fronted] - [React-native] 검색기능 구현2 (키보드 위 배너 잘림 현상 수정하기 - KeyboardAvoidingView)구현과정1. 상위컴포넌트에서 검색어 필터처리와 상태관리를 위해 작업2. 하위컴포넌트에서는 로직을 사용하기 위해 파라미터로 함수를 전달했고검색어가 변경되거나, 검색어를 지우면 함수를 호출하도록 연결 작업을 했다1. 상위컴포넌트 생성자에 검색어를 담는 search와 검색결과 리스트를 담는 searchList를 추가한다constructor(props) { // 생성자 super(props); this.focus = React.cre..

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

❏ 기능개선 개요- 기기가 많이 등록되어 있는 계정에서 기기 찾기가 어렵다는 요구사항이 있어 기능개선을 위해 작업.검색 기능 구현을 하기 위해 전체 리스트를 서버에서 처음 한번만 받은 후, 클라이언트 단에서 텍스트 입력시에 필터링하는 방법을 사용했다.  결과적으론 업데이트에 반영되진 못했다...테스트 과정에서 대규모 트래픽에서 실제로 기능개선을 하긴 어렵다는 판단에 퇴사 전 마지막 배포에 반영하지 못헀다.요구사항에 적합한 기능개선 방법은 페이징처리도 함께 이루어지는게 필요했다. 팀과 상부와의 소통의 중요성을 느끼게 되는 계기가 되었다 ..  ❏ 구현작업을 위한 프로젝트 설명- 기기의 상태와 등록기기가 보이는 메인 화면을 담당하는 Homeview (상위컴포넌트)가 있다.최종적으로 검색결과가 반영되어야 한다..

회사 프로젝트와 예전 외부 프로젝트 소스를 분석하면서 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는 바로바로 실행되기 때문에(동기적처리) 특정 시간 또는 특정 ..