AWS IAM 사용자 추가하기
AWS IAM 사용자 추가하기 목적은 IAM 사용자를 추가하고 해당 사용자를 기존 EC2에 연결이 가능하도록 하는 것입니다. 바로 시작하죠. IAM 사용자 추가 IAM 에서 사용자로 이동합니다. 여기서 우측 상단에 있는 사용자 생성 버튼을 클릭합니다. 다음과 같이 설정을 하겠습니다. 사용자 이름과 사용자 지정 암호는 실제로 사용하실 것으로 변경을 해주세요. 이후 다음을 누릅니다. 권한 설정을 할 것입니다. 기존에 […]
AWS CluoudFormation 템플릿 수정하기
AWS CluoudFormation 템플릿 수정하기 AWS 에서 CloudFormation 에서 템플릿을 어떤 방법으로 수정하면 좋은지 보겠습니다. CloudFormation 템플릿 확인하기 우선은 상단의 검색창에서 CloudFormation 으로 이동합니다. 이동 화면 좌측 대쉬보드에서 “스택” 을 클릭합니다. 그럼 중앙에는 다음과 같이 이미 내가 만든 스택이 나타납니다. 스택 이름을 클릭해줍시다. 그럼 오른쪽으로 다음과 같이 상세 페이지가 펼쳐집니다. 여기에서 “스택 ID” 부분을 클릭해주세요. 상단에 […]
React Native App을 플레이스토어 등록하기
React Native App 플레이스토어 등록하기 오늘은 React Native 으로 만든 App을 구글 플레이스토어에 등록하는 작업을 해보겠습니다. 모든 작업은 Chat GPT의 도움을 통해서 진행했습니다. 그럼 바로 시작하죠. Google Play Store 콘솔 계정 생성하기 플레이 스토어 콘솔로 이동하기 위 버튼을 통해서 플레이 스토어 콘솔창으로 이동합시다. 계정이 현재 생성된 상태가 아니라면 위와 같은 페이지가 나타날 것입니다. 해당 구글 […]
React Native cli 세팅하기
React Native cli 세팅하기 React Native CLi 를 이용한 강의 환경과 똑같은 환경을 만드는 것이 목적입니다. 제가 듣는 React Native 강의는 버전 0.70 버전으로 하더군요. 그래서 해당 버전으로 윈도우 세팅을 하는 것을 목적으로 글을 정리합니다. 설치 단계 @”%SystemRoot%System32WindowsPowerShellv1.0powershell.exe” -NoProfile -InputFormat None -ExecutionPolicy Bypass -Command “[System.Net.ServicePointManager]::SecurityProtocol = 3072; iex ((New-Object System.Net.WebClient).DownloadString(‘https://community.chocolatey.org/install.ps1’))” && SET “PATH=%PATH%;%ALLUSERSPROFILE%chocolateybin” 우선은 CMD […]
React Native App.js 기반으로 프로젝트 만들기
React Native 프로젝트 생성시 App.js 로 시작하기 React Native 공부를 위해서 강의를 보는데, 강사의 화면에서는 자료 구조가 App.js 형태로 되어 있더군요. 그런데 어째서인지 따라서 똑같이 만든 프로젝트는 App.tsx 를 기반으로 되어 있었습니다. 찾아보니 간단한 오류였습니다. 대부분의 강의에서는 0.71 이전 버전을 사용하고 있던 거였죠. 비교적 최근에 공부를 시작하는 사람들은 모두 0.71 이상 버전으로 다운로드가 되니까 세팅 […]
WatchMan Too Many open files 에러 해결하기
Npx Expo Start 했을 때 발생하는 오류 해결 요즘은 React Native 에 대해서 공부를 하고 있습니다. 웹 개발과 함께 앱 개발이 가능한 유용한 녀석이죠. 이 친구를 통해서 앱 개발을 처음 할 때, 보통 개념을 공부하기 위해 npx expo start 위와 같은 명령어를 사용하게 될 겁니다. expo 방법을 통해서 앱을 개발하는 건데요. 자세한 건 저도 잘 […]
백엔드 파일이 실행되다가 자꾸 꺼지는 에러
백엔드 파일이 실행되다가 자꾸 꺼지는 에러 사이트를 운영할 때, 백엔드를 위한 파일을 따로 둡니다. 이때, 해당 파일을 node backend.js 위와 같은 명령어로 실행을 할 수 있습니다. 문제는 이런 명령어로 실행한 세션이 닫힌다고 가정할까요? 저는 Putty 를 통해서 EC2 에 접근하고, 그곳에서 백엔드 파일을 실행하는데 이렇게 실행한 백엔드 파일을 컨트롤+C로 끄거나, 세션을 닫으면 사이트의 백엔드 로직은 […]
[2024년 버전]React AWS S3로 파일 업로드하는 창 만들기
AWS S3 으로 파일을 업로드 하는 페이지 제작 AWS S3으로 파일을 업로드 하는 페이지를 만드려고 합니다. 바로 시작하겠습니다. 설계 및 작동 위와 같이 저는 버킷 내부에 “test” 라는 폴더를 만들었습니다. 이 폴더 내부에 “animal” 이라는 폴더를 한 번 더 만들고, 그 하위에는 “cat” 과 “dog” 라는 2개의 폴더가 있습니다. 목적은 cat 폴더에 고양이 사진을, dog […]
[2024년 버전]AWS S3에서 이미지 파일 가져오기
AWS S3에서 이미지 파일 불러오기 목적은 AWS S3 특정 디렉토리 아래에 저장한 png, jpg 등 이미지 파일을 내 웹사이트에 불러오는 방법입니다. 우선은 하나를 불러와서 잘 나타나는지 확인을 하고, 그 다음은 디렉토리 내부에 있는 모든 이미지 파일을 순서대로 불러올 수 있도록 해보겠습니다. 사이트는 React 로 구성을 할 것이기에, React 코드를 함께 사용하겠습니다. 바로 시작을 해보겠습니다. 이미지 […]
리액트 프로그레스바 코드와 디자인
React Progress Bar 코드와 디자인 리액트 프로그레스 바를 어떤 식으로 작동 시키고, 또 어떤 식으로 디자인을 하면 좋을지 알아보겠습니다. 최종적으로 ProgressBar 컴포넌트와 이 컴포넌트를 상위 컴포넌트에서 어떻게 사용하면 되는지 정리하겠습니다. ProgressBar 컴포넌트 코드 const ProgressButton = ({ pageInfo, setCurrentPage, currentpage }) => { return ( {Object.entries(pageInfo).map(([pageNumber, pageName]) => ( setCurrentPage(parseInt(pageNumber))} > {pageName} ))} ); }; […]