본문 바로가기

전체 글

React Native로 PDF Viewer 앱 만들기; 7. React Navigation 화면 이동 React Native로 PDF Viewer 앱 만들기1. React Native 개발 환경 설치2. react-native-pdf 테스트 앱3. 화면 개발 - JSX 컴포넌트4. 화면 개발 - Context API5. 화면 개발- 팝업 창 (Modal)6. TypeScript 전환, Jest 추가7. React Navigation 화면 이동 지금까지 앱은 화면이 PDF를 보는 화면 하나만 있었다. 이제 내 핸드폰에 저장되어 있는 PDF 파일을 보는 기능을 추가하면서첫 화면이 "파일 목록을 보는 화면"이고두 번째 화면이 "PDF 파일을 보는 화면"으로 나눌 것이다. 그래서 첫 번째 화면에서 파일을 선택하면 두 번째 화면에서 PDF를 보여주기 위해, 첫 번째 화면에서 두 번째 화면으로 이동하는 것이 필요하.. 더보기
Joplin; 크로스 플랫폼 무료 노트, 메모 관리 프로그램 한 동안 에버노트(Evernote)에 메모나 웹 스크랩 기록을 남기던 때도 있었다. 그때는 에버노트를 어떻게 쓰는가에 대해 강의도 하고 했던 것 같다. 요즘은 노션(Notion)이 대세인 것 같다. 노션은 데이터베이스 기능을 기반으로 일정관리부터 프로젝트 관리에 이르기까지 많은 정보를 템플릿으로 쉽게 관리할 수 있는 화면을 만들어 준다. 하지만, 에버노트에서 다른 앱으로 옮겨가면서 느꼈던 불편함이 노션에도 그대로 존재한다. 바로 모든 내용이 서버에 저장된다는 점이다.  회사에서 관리하는 정보는 노션과 같은 클라우드 기반의 소프트웨어를 사용하는 것이 좋을 수 있다. 직원들이 공유하는 모든 정보가 회사 계정의 클라우드 서버에 쌓이기 때문이다. 하지만, 단점으로는 정보가 일단 축적이 되면 다른 서비스로 이동하.. 더보기
React Native로 PDF Viewer 앱 만들기; 6. TypeScript 전환, Jest 추가 React Native로 PDF Viewer 앱 만들기1. React Native 개발 환경 설치2. react-native-pdf 테스트 앱3. 화면 개발 - JSX 컴포넌트4. 화면 개발 - Context API5. 화면 개발- 팝업 창 (Modal)6. TypeScript 전환, Jest 추가7. React Navigation 화면 이동 처음 PDF Viewer를 시작할 때는 React Native를 사용하는 방법을 알려 줄 목적으로 만든 예제였는데, 우리 딸이 자기가 원하는 기능을 넣어서 사용할 수 있는 앱으로 만들어 달라고 요구하는 바람에 정식으로 앱을 만들어서 스토어에 무료 앱으로 등록하는 것으로 목적을 바꾸었다. 그래서 이제부터는 일반적인 프로젝트에서 개발하듯이 유지보수할 수 있게 TypeS.. 더보기
윈도우 쿠버네티스 개발환경 ; 2. MySQL 배포하기 윈도우 쿠버네티스 개발환경1. PostgreSQL 배포하기2. MySQL 배포하기 아직도 가장 많이 사용되는 오픈소트 데이터베이스는 통계에서 보듯 MySQL이다. PostgreSQL이 많이 따라잡긴 했지만, 처음 사용하기에는 MySQL 워크벤치와 같은 편리한 도구를 제공하는 무료 소프트웨어인 MySQL이 아무래도 가장 사용하기 편할 뿐 아니라 성능면에서도 뒤지지 않는다. 그래서 이전에 PostgreSQL에서 했던 것처럼 Helm Chart를 사용하지 않고 MySQL을 쿠버네티스 환경에 설치하는 작업을 순서대로 진행해 봤다. PostgreSQL와 MySQL의 Helm Chart다 다음번에 같이 만들어서 올리는 글을 작성할 예정이다. Docker에 MySQL을 설치하는 방법은 이전에 글을 참고하면 된다. 윈.. 더보기
ImageMagick; 강력한 무료 이미지 변환, 편집 기능 무료로 사용할 수 있는 이미지 편집 프로그램으로 가장 잘 사용하고 있는 프로그램은 당연히 GIMP이다. 간단한 이미지 변환 작업부터 색상이나 채도를 높이는 작업, 또는 필요한 부분을 자르거나, 테두리를 넣는 작업은 아도비와 같은 유료 프로그램을 사용하지 않고 GIMP만 사용해도 불편함이 없이 사용할 수 있다. 하지만, 많은 이미지의 썸네일을 만드는 작업과 같은 작업에는 적합하지 않다. 이전에 우분투 데스크탑을 사용하면서 GIMP 못지않게 편리한 편리하게 사용했던 프로그램이 ImageMagick이다. GIMP와 달리 ImageMagick는 GUI기반이 아니고 CLI기반이어서 처음 사용하는 사람들은 다소 불편함을 느낄 수도 있지만, 많은 이미지에 대한 반복되는 변환작업, 편집작업은 ImageMagick을 사.. 더보기
React Native로 PDF Viewer 앱 만들기; 5. 화면 개발 - 팝업 창 (Modal) React Native로 PDF Viewer 앱 만들기1. React Native 개발 환경 설치2. react-native-pdf 테스트 앱3. 화면 개발 - JSX 컴포넌트4. 화면 개발 - Context API5. 화면 개발- 팝업 창 (Modal) 6. TypeScript 전환, Jest 추가 7. React Navigation 화면 이동 9. Modal; 팝업 (Popup) 창 만들기이제 PDF가 잘 보이는 것도 확인했고, 최상위에 Bar를 만들어 앱 이름과 페이지 정보도 표시해 봤으니, 다른 PDF도 읽을 수 있도록 입력을 받을 수 있는 팝업 창을 하나 만들어 보자. 디자이너는 아니라서... 대충 이런 느낌으로 만들려면, 팝업 창 컴포넌트, Input 컴포넌트, Open과 Close 버튼(Bu.. 더보기
React Native로 PDF Viewer 앱 만들기; 4. 화면 개발 - Context API React Native로 PDF Viewer 앱 만들기1. React Native 개발 환경 설치2. react-native-pdf 테스트 앱3. 화면 개발 - JSX 컴포넌트4. 화면 개발 - Context API 5. 화면 개발- 팝업 창 (Modal) 6. TypeScript 전환, Jest 추가7. React Navigation 화면 이동  8. Context ; 컴포넌트 간 정보 전달 방법React은 (React Native를 포함해서) 하향식 단방향 정보전달만 가능하다. 그래서 상하관계가 아닌 컴포넌트가 서로 정보를 전달하기 위해서는 상하관계를 이용해서 두 컴포넌트가 속해있는 상위 컴포넌트의 상태(정보)를 바꾸거나컴포넌트 위치에 관계없이 정보를 전달할 수 있는 방법을 사용해야 한다.부모 컴포넌.. 더보기
React Native로 PDF Viewer 앱 만들기; 3. 화면 개발 - JSX 컴포넌트 React Native로 PDF Viewer 앱 만들기1. React Native 개발 환경 설치2. react-native-pdf 테스트 앱3. 화면 개발 - JSX 컴포넌트4. 화면 개발 - Context API5. 화면 개발- 팝업 창 (Modal) 6. TypeScript 전환, Jest 추가 7. React Navigation 화면 이동  6. React Native를 사용하기 전에 알면 좋은 정보React Native는 React과 동일하게 JSX (JavaScript XML)로 화면을 정의하고, JavaScript로 로직을 구현하고, 컴포넌트의 Property를 통해 최상위 컴포넌트에서 하위 컴포넌트로 상태 정보(매개변수)를 업데이트(전달)하는 방식을 원칙으로 프로그램을 개발한다. Reac.. 더보기

티스토리툴바