반응형 분류 전체보기50 [ React Native ] react-navigation을 이용한 리액트 네이티브 화면 이동(1) - 개요 및 설치 React Native Docs Navigator? 모바일 앱은 대부분 단일 화면으로 구성되지 않는다. 웹에서는 화면이동을 태그를 사용하지만 리액트 네이티브에서는 navigation을 사용한다. Navigator를 이용해 여러 화면을 이동하는 작업을 관리한다. react-navigation 패키지를 이용해 쉽게 사용할 수 있다. * 종류 Stack : 새로운 화면이 기존 화면위에 겹겹이 쌓이는 화면 Drawer : 화면에 우측으로 미는 제스쳐를 통해 좌측에 열리는 화면 BottomTab : 화면 하단에 아이콘을 통해 경로를 전환 MaterialBottomTab : 머티리얼 디자인을 사용한 BottomTab MaterialTopTab : 머티리얼 디자인을 사용한 상단 탭 바 => 각각의 네비게이션은 추가적.. 2020. 4. 8. [ React Native ] 윈도우에서 리액트 네이티브 개발 환경 구성 - Expo-cli 1. expo-cli 설치 1.1 명령 프롬프트 실행(관리자 권한) 1.2 설치 > npm install expo-cli -global 2. 프로젝트 생성 2.1 프로젝트 생성(생성할 폴더로 이동한 뒤) > expo init [ 프로젝트명 ] 2.2 생성된 프로젝트 폴더로 이동 > cd [ 프로젝트명 ] 2.3 실행 > expo start 3. 실행 3.1 모바일에서 Expo 어플 설치 3.2 개발 PC와 모바일 기기 같은 네트워크로 잡기 3.3 QR 코드를 촬영하면 설치한 Expo 앱으로 연결된다. * VS Code로 Expo 프로젝트 연결 1) 비쥬얼스튜디오 코드 > 상단 File > Open Folder 2) 생성한 폴더 선택 3) VS Code 터미널창 열기 4) expo start ** 3번과 .. 2020. 4. 3. [ React Native ] 윈도우에서 리액트 네이티브 개발 환경 구성 - React Native CLI 리액트 네이티브 공식문서 React Native 개발환경? Expo CLI와 React Native CLI 두가지가 있음. => React Native CLI를 사용할 것! Expo CLI가 가장 쉽게 시작할 수 있는 방법으로 React Native 기반으로 구축된 도구 모음을 많이 포함하고 있지만 필요없는 기능까지 설치되기 때문에 무거움 Expo CLI는 Node.js만 있으면 사용할 수 있지만 React Native CLI는 Xcode 또는 Android Studio가 필요함 설치 목록 Node.js React Native CLI Python2(* Python3를 사용해도 괜찮지만 공식문서에서는 Python2를 설치하라고 나옴) JDK Android Studio Chocolatey Chocolatey.. 2020. 3. 31. [ Shell Script ] 쉘스크립트 파일 생성 및 실행 Shell? 유닉스 계열의 시스템에서 사용하는 대화형 인터페이스 사용자와 커널 사이에서 사용자가 입력한 명령을 해석하여 커널에 전달한 뒤 결과를 사용자에게 반환 종류 : Bash(배쉬쉘), Tcsh(C쉘), Korn shell(콘쉘), Zsh(Z쉘), Fish(Friendly Interactive SHell) 등 Shell script? 쉘을 이용한 프로그래밍 서버 작업을 자동화할 수 있음 일반적인 프로그래밍 언어보다 간단하고 쉽게 응용할 수 있다. 파일 만들기 > vi [ 파일명 ].sh - 파일 맨 윗줄에 추가 #!/bin/bash 파일 실행 > bash [ 파일명 ].sh (실행 권한이 없는 경우 권한 부여 후 실행) > chmod +x [ 파일명 ].sh 2020. 3. 26. [ CentOS ] ifconfig : command not found 오류 문제상황 1. CentOS 7 최소 설치 후 ifconfig 명령어가 없는 오류 발생 2. 네트워크는 정상 작동 해결 > yum install -y net-tools 확인 2020. 3. 25. [ Windows10 ] 윈도우 디펜더 끄기 1. 윈도우 검색 > gpedit.msc 2. 컴퓨터 구성 > 관리 템플릿 > Windows 구성 요소 > Windows Defender 바이러스 백신 3. [ Windows Defender 바이러스 백신 사용 안 함 ] 파일 열기 > 좌측 상단 사용 후 확인 4. 확인 2020. 3. 24. [ React.js ] VS Code에서 React 개발 환경 구성 create-react-app? 리액트 개발에 필요한 필수 모듈들을 한줄의 코드로 구성해준다. 비쥬얼스튜디오 코드의 터미널에서 npm으로 설치 후 사용 참고 설치 > npm install -g create-react-app 만들기 > create-react-app [생성할 디렉터리명] (시간이 꽤 걸린다..) 테스트 > cd [위에서 만든 디렉터리명] > npm start (localhost:3000) VS Code에서 불러오기 * 필요없는 파일 삭제 src/App.css src/index.js src/logo.svg public/favicon.ico public/manifest.json * 삭제한 파일과 연결된 부분 지우기 src/App.js src/index.js public/index.html He.. 2020. 3. 23. [PowerShell] VS Code에서 이 시스템에서 스크립트를 실행할 수 없으므로 * 비쥬얼스튜디오 코드의 터미널에서 create-react-app을 사용하려는데 에러가 발생 윈도우 파워쉘(Power Shell) 권한 설정으로 해결 1. Windows Power Shell 관리자 권한으로 실행 2. 권한 변경 > Set-ExecutionPolicy RemoteSigned > [A] 모두 예 3. 변경된 권한 확인 > Get-ExecutionPolicy RemoteSigned 2020. 3. 23. [ VS Code + Node.js ] 개발 환경 구성 1. VS Code 설치 다운로드 Visual Studio Code - Code Editing. Redefined Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. code.visualstudio.com 이클립스는 통합 개발환경으로 비쥬얼스튜디오 코드가 상대적으로 가볍다. 사용자 OS에 맞게 설치 2. Node.js 설치(LTS) 다운로드 Node.js Node.js® .. 2020. 3. 23. 이전 1 2 3 4 5 6 다음 반응형
