반응형 Front-End7 [ PyQt5 ] Qt Designer로 ui 파일 만들기, 연결하기 / 버튼과 함수 연결하기 Qt Designer? PyQt로 GUI 프로그래밍을 할 때 쉽게 레이아웃을 편집할 수 있도록 도와주는 편집기. 아나콘다를 설치하면 PyQt5와 함께 자동으로 설치됨 Qt Designer 없이 파이썬 코드만으로도 GUI 프로그래밍이 가능하긴함 1. Qt Designer 실행 - Anaconda Prompt 열기 - designer 입력 2. ui 파일 생성 - Main Window 선택 후 [ 생성(R) ] - 좌측 위젯 상자에서 [ Push Button ] 을 MainWindow로 드래그 앤 드롭 * 원하는 위젯을 좌측 위젯 상자에서 윈도우창에 드래그 앤 드롭으로 위젯을 추가할 수 있다. - [ PushButton ] 선택 후 우측 속성 편집기 -> objectName 변경 -> [ testBtn ] .. 2020. 6. 22. [ React Native ] react-navigation을 이용한 리액트 네이티브 화면 이동(2) - Stack으로 페이지 이동 ㅅ2020/04/08 - [Javascript/React] - [ React Native ] react-navigation을 이용한 리액트 네이티브 화면 이동(1) - 개요 및 설치 화면 간 이동 StackNavigator 설치 > npm install @react-navigation/stack 사용법 - Screen과 Navigator 두가지 속성을 필수로 return 해야한다. >> Screen의 필수 props : name, component >> 하나에 Navigator에 여러개의 Screnn이 있을 수 있으며 초기 경로를 지정하면 Navigator에 initialRouteName 옵션을 사용 - 는 모든 네비게이터 구조를 감싸며 네비게이션 트리와 상태를 관리한다. - navigation 속성을 .. 2020. 4. 16. [ 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. [ 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. [ 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 다음 반응형
