거니의 velog

3. 새 리액트 네이티브 프로젝트 만들기* 새로운 리액트 네이티브 프로젝트를 만들어 보자. 다음 명령어를 터미널에 입력해 보자.npx react-native init LearnReactNative* npx는 Node.js와 함께 설치되는 도구로, Node.js 환경에서 구동되는 CLI 도구들을 간단하게 사용할 수 있게 해 준다.* 이 명령어를 실행하면 터메널의 현재 작업 중인 디렉터리에 LearnReactNative라는 디렉터리가 만들어지며, 이 디렉터리 안에 리액트 네이티브 프로젝트 관련 파일들이 준비된다. 해당 디렉터리를 VS Code로 열고, package.json 파일을 열어 보자.* script 부분에 다음과 같이 설정된 것을 확인할 수 있다.{ "name": "LearnReactNative"..

(1) Node.js와 npm 설치하기* Node.js는 웹 브라우저가 아닌 환경에서도 자바스크립트를 실행할 수 있게 해주는 Chrome V8 Javascript 엔진으로 빌드된 런타임이다. 이를 통해 리액트 네이티브로 개발할 때 필요한 도구들을 사용할 수 있다.* npm은 자바스크립트 프로젝트를 위한 패키지를 관리하는 도구이다. npm은 Node.js를 설치할 때 자동으로 함께 설치된다. Node.js 버전은 LTS 버전을 사용해야 한다.* 윈도우 환경에서는 Node.js 공식 홈페이지에 접속해 좌측의 LTS 버전을 눌러 설치 파일을 다운로드하고 이를 실행하자.<br ..

1. 리액트 네이티브란? * 리액트 네이티브는 자바스트립트와 리액트 라이브러리를 사용해 네이티브 앱을 개발할 수 있게 해주는 기술이다. 이 기술을 사용해 만든 앱은 애플(Apple)의 iOS 환경에서도, 구글(Google)의 안드로이드(Android) 환경에서도 구동할 수 있다. 주로 모바일 앱을 개발하거나, 모바일 디바이스에 국한되지 않고, VR(가상 현실), 윈도우(Windows), TV 등의 환경에서도 사용할 수 있다. * 즉, 리액트 네이티브를 사용하면 리액트에서 사용하는 기술을 웹 브라우저에 한정시키지 않고 iOS 및 안드로이드 환경에서 구동하는 애플리케이션을 만들 수 있다는 말이다. * 리액트 네이티브를 사용하면 자바스크립트로 네이티브 앱을 만들 수 있기에 자바스크립트로 작성한 코드가 네이티브..

.scrollCover { height: 500px; overflow-x: hidden; overflow-y: auto; scrollbar-width: none;}

https://studiomeal.com/archives/197 이번에야말로 CSS Flex를 익혀보자 studiomeal.com#pond { display: flex; justify-content: flex-end; }#pond { display: flex; justify-content: center; }#pond { display: flex; justify-content: space-around; }#pond { display: flex; justify-content: space-between; }#pond { display: flex; align-items: flex-end; }#pond { display: flex; justify-content: center; align-items: center;..

https://dev-play.tistory.com/entry/Git-Git-hub-%EC%99%84%EC%A0%84-%EC%B4%88%EB%B3%B4%EC%9E%90-%EC%82%AC%EC%9A%A9%EB%B2%95-Git-bash-%ED%99%9C%EC%9A%A9 [Git] Git Hub 완전 초보자 사용법 (Git bash 활용) 1. Git 설치 및 설정 1-1 Git 설치 1-2 Git global 설정 git config --global user.name "sample" git config --global user.email "sample@naver.com" Git bash 또는 cmd 창에 입력 최초 Git 설정으로 해당 PC 에서 Git 처음 실행 시 설정 dev-play.tistory.c..

8. 리액트 애플리케이션의 배포 * 로컬 환경에서 실행한 리액트 애플리케이션이 정상적으로 동작했다면 남은 작업은 빈즈톡을 이용해서 예제 애플리케이션을 배포하는 것이다. 리액트 애플리케이션을 배포할 수 있는 방법은 S3를 이용해서 업로드하거나, Amplify 서비스를 이용해서 GitHub의 저장소를 배포하는 등의 다양한 방법이 있다. * 빈즈톡은 Node.js 기반의 코드를 업로드하면 자동으로 npm install 이나 npm start 등을 수행해 주기 때문에 간단하게 리액트 프로그램을 배포할 수 있다. * 프로젝트의 폴더 구조에서 node_modules를 제외한 파일들을 압축해서 zip 포맷의 파일로 생성한다(파일 이름은 크게 중요하지 않다). * 빈즈톡에 새로운 애플리케이션을 생성한다. 이때 플랫폼은..

7. API 서버의 S3 설정 * 설정된 S3 서비스를 이용하기 위해서는 API 서버에 라이브러리를 추가하고 설정을 추가해야만 한다. 이 설정에 대한 라이브러리는 Spring Cloud AWS 를 이용한다. https://github.com/awspring/spring-cloud-aws GitHub - awspring/spring-cloud-aws: The New Home for Spring Cloud AWS The New Home for Spring Cloud AWS. Contribute to awspring/spring-cloud-aws development by creating an account on GitHub. github.com * 스프링 부트의 버전에 따라 사용할 수 있는 라이브러리 버전이..

6. S3 업로드 처리 * AWS의 많은 서비스 중에 S3는 대용량의 파일을 업로드 하거나 서비스할 수 있는 기능을 제공하므로 이미지나 기타 파일들에 대해서 저장 및 조회 기능 구현 시에 도움이 된다. 빈즈톡을 이용하는 경우 기본적으로 S3를 이용하기 때문에 설정을 이용해서 파일 업로드 기능을 처리할 수 있다. * AWS의 메뉴에서 S3를 선택하면 빈즈톡 애플리케이션 생성 시에 만들어진 S3의 버킷(파일을 담는 공간)을 확인할 수 있다. (1) IAM을 이용한 S3 사용자 생성 * S3 버킷에 직접 파일을 업로드하는 작업은 가능하지만, 이를 프로그램을 통해서 처리하기 위해서는 사용자를 생성하고 사용자가 가지는 액세스 키(access key), 비밀 엑세스 키(secret access key) 등을 사용해..

5. 리액트 연동 확인 * 리액트는 localhost 경로를 이용해서 개발해 왔기 때문에 빈즈톡으로 배포된 API 서버를 이용하기 위해서는 API 서버를 호출하는 경로들을 수정해야만 한다. 리액트 코드에서는 localhost 경로를 최초로 사용했던 todoApi.js를 수정해서 AWS에 배포된 API 서버를 호출하도록 변경한다. import jwtAxios from "../util/jwtUtil"; // export const API_SERVER_HOST = "http://localhost:8080"; export const API_SERVER_HOST = "http://API서버도메인주소"; // 마지막에 / 를 넣지 않도록 주의! const prefix = `${API_SERVER_HOST}/api/..