본문 바로가기

전체 글153

Nginx + React : Nginx를 이용하여 서브디렉토리에 React 프로젝트 여러개 배포하기 개요 React와 같은 Single Page 앱을 Nginx를 통해 배포할 때 해줘야 하는 설정들이 있습니다. 예를 들어, React에서 BrowserRouter를 사용할 때에는 Nginx의 try_files와 같은 설정을 해주어야 합니다. 하지만 여러 개의 React 앱을 하나의 Nginx로 배포할 때에는 추가적인 설정이 필요할 수가 있습니다. 오늘은 여러개의 React 프로젝트를 하나의 Nginx를 통해 배포하는 방법에 대해 알아보도록 하겠습니다. React 앱을 설정 없이 Nginx로 배포했을 때 발생하는 문제 빌드된 React 앱을 단순하게 Nginx의 웹루트로 배포해도 처음에는 잘 동작됩니다. react-router를 쓰지 않는 React 앱일 경우에는 크게 문제가 없이 페이지전환도 잘 됩니다... 2023. 6. 19.
React Native : Animated, Interpolation를 이용하여 Loading Spinner 만들기 React Native를 공부하던 중 Loading Spinner가 필요하여서 구현 방법에 대해 조사를 해보았습니다. React Native에서는 기본적으로 제공하는 Loading Spinner인 ActivityIndicator라는 컴포넌트가 있기는 합니다. ActivityIndicator · React Native Displays a circular loading indicator. reactnative.dev 하지만 React Native에서도 간단한 애니메이션을 구현해보고 이해해 보기 위해서 React Native에서 제공하는 Animated를 이용하여 한번 Loading Spinner를 만들어보도록 하겠습니다. 먼저 간단하게 React Native의 Animated에 대해 알아보도록 하겠습니다. .. 2023. 5. 1.
AWS : 정적 사이트 배포 하는 4가지 방법 (feat: cloudfront / nginx /amplify / netlify) 웹사이트를 배포하는 방법에는 여러 가지 방법들이 있는 것 같습니다. 저도 회사를 다니면서 다양한 방법들로 웹사이트를 배포해 보았는데요, 오늘은 AWS, 및 여러 도구들을 활용하여 정적사이트를 배포하는 방법들과 각각의 장단점에 대해서 한번 정리해 보았습니다. 목차 AWS - EC2 + WebServer(Nginx) 를 활용한 배포 AWS - CloudFront + S3를 활용한 배포 AWS - Amplify를 활용한 배포 Netlify를 활용한 배포 위에서 설명드린 배포방법 4가지에 대해서 개념 및 장단점에 대해 설명드리겠습니다. EC2 + WebServer (Nginx)를 활용한 배포 ✏️ AWS EC2 인스턴스 위에 Nginx 웹서버를 이용하여 서버 호스팅을 진행하는 방법입니다. EC2는 하나의 작은 .. 2023. 4. 25.
React Native : 빈 화면 터치시 Keyboard 숨기기 React Native를 개발하던 중에 TextInput을 활용하여 Keyboard로 유저의 입력을 받는 부분을 구현하였습니다. 그런데, Keyboard를 띄우고 난 뒤에 빈 화면을 눌렀을때 Keyboard를 숨기게 하는 방법을 몰라서 조금 검색을 해보았는데요, 이에 대해서 오늘은 유저가 빈 화면을 터치시 Keyboard를 숨기는 방법에 대해 간단히 알아보도록 하겠습니다. TouchableWidhtoutFeedback 해결법은 TouchableWithoutFeedback 이라는 React Native에서 제공하는 Component를 사용하면 쉽게 해결할 수 있습니다. TouchableWithoutFeedback · React Native If you're looking for a more extensi.. 2023. 4. 19.
React Native : Custom Font 설정하기 사이드 프로젝트를 개발하던 중에 기본적으로 제공하는 Font가 아닌 Custom Font를 적용해야 할 일이 생겼습니다. 한번 이번 기회에 까먹지 않기 위해서 React Native 에서 Custom Font를 설정하는 방법에 대해서 정리해 보도록 하겠습니다. Android에서 설정하기 안드로이드에서 설정은 생각보다 간단합니다. 1) android/app/src/main/assets/fonts 폴더를 생성합니다. 2) 생성한 폴더에 폰트파일들을 추가합니다. 3) 이후 안드로이드를 다시 빌드합니다. (npx react-native run-android) IOS에서 설정하기 1) ios 폴더에 fonts 폴더를 생성합니다. 이후 해당 폴더에 폴더에 폰트 파일들을 저장해놓습니다. 2) xcode상에서는 fon.. 2023. 3. 23.
알고리즘 : 좌표 정렬 (sort 함수를 사용한 정렬 응용) 인프런 JS 알고리즘 강좌 문제를 한번 풀이해보겠습니다. 강좌는 아래 인프런 강좌를 참고해주시면 됩니다. 강좌 바로가기 문제 설명 N개의 평면상의 좌표(x, y)가 주어지면 모든 좌표를 오름차순으로 정렬하는 프로그램을 작성하세요. 정렬기준은 먼저 x값의 의해서 정렬하고, x값이 같을 경우 y값에 의해 정렬합니다. 입력 설명 첫째 줄에 좌표의 개수인 N(3 { if (a[0] === b[0]) { return a[1] - b[1] } }) return answer; } 좌표의 x를 비교하여 배열을 정렬한다. 정렬된 배열을 다시 비교한다. 이때 좌표의 x가 같으면 y를 기준으로 정렬한다. 인프런 해답 function solution(arr){ let answer=arr; arr.sort((a, b)=>{ i.. 2023. 3. 21.
SQLite : Sqlite DB 테이블 Json으로 변환하기 (+ SQLite 개념) 개요 최근에 사이드 프로젝트를 진행하던 도중 SQLite의 DB를 firebase의 firestore DB로 옮겨야 하는 상황이 발생하였습니다. firestore에 DB를 이전하기 위해서는 SQLite로 되어있는 DB를 Json 파일로 변환해야 하는 일이 생겼습니다. 웹에서 여러 SQLite => JSON 변환사이트도 돌려보았지만 에러가 계속 나서 방법을 찾던 중 가장 간단한 방법이 있어서 한번 공유드립니다. (실패한 변환 사이트 => https://mygeodata.cloud/converter/sqlite-to-json) SQLite란? 먼저 SQLite란 무엇인지 간단하게 살펴보겠습니다. SQLite는 서버가 아닌 응용프로그램에 넣어 사용하는 비교적 가벼운 데이터 베이스입니다. PostgreSQL이나.. 2023. 3. 13.
AWS : EBS란? EBS 요금 분석 서론 AWS 웹 서비스를 구축하다 보면, EBS항목으로 요금이 청구될 때가 있습니다. 보통 EBS는 EC2 인스턴스를 생성할 때 자동으로 생성이 되는 저장소라고만 알고 있었는데요, 오늘은 EBS가 무엇인지 알아보고 요금은 어떻게 정산되는지 한번 정리를 해보도록 하겠습니다. EBS란? EBS란 Elastic Block Store의 약자로 일종의 하드디스크라고 생각하시면 됩니다. 보통 EC2와 비교해서 생각하면 EC2는 메모리, 그래픽카드 등 하드 디스크를 제외한 컴퓨터의 모든 부분이라고 생각하면 되며, EBS는 컴퓨터의 하드디스크라고 생각하면 됩니다. EBS의 약자에서 Block Store라는 의미를 이해하시려면, Object Storage와 비교하시면 이해가 쉽습니다. S3와 같은 Object Stora.. 2023. 3. 3.
알고리즘 : 공주구하기 (인프런, 큐를 이용한 문제) 인프런 JS 알고리즘 강좌 문제를 한번 풀이해보겠습니다. 강좌는 아래 인프런 강좌를 참고해주시면 됩니다. 강좌 바로가기 문제 설명 정보 왕국의 이웃 나라 외동딸 공주가 숲속의 괴물에게 잡혀갔습니다. 정보 왕국에는 왕자가 N명이 있는데 서로 공주를 구하러 가겠다고 합니다. 정보왕국의 왕은 다음과 같은 방법으로 공주를 구하러 갈 왕자를 결정하기로 했습니다. 왕은 왕자들을 나이 순으로 1번부터 N번까지 차례로 번호를 매긴다. 그리고 1번 왕자부터 N 번 왕자까지 순서대로 시계 방향으로 돌아가며 동그랗게 앉게 한다. 그리고 1번 왕자부터 시 계방향으로 돌아가며 1부터 시작하여 번호를 외치게 한다. 한 왕자가 K(특정숫자)를 외치면 그 왕자는 공주를 구하러 가는데서 제외되고 원 밖으로 나오게 된다. 그리고 다음 .. 2023. 3. 1.
알고리즘 : 후위식 연산 문제 풀이 (인프런 강좌) 문제 인프런 JS 알고리즘 강좌 문제를 한번 풀이해보겠습니다. 강좌 바로가기 문제 해석 해당 문제는 스택을 이용한 풀이 문제입니다. 후위식 연산이란 연산자가 피연산자 뒤에 있는 표기식입니다. 예를 들어 중위표기식이 3+5*2 를 후위표기식으로 표현하면 352*+ 로 표현됩니다. 만약 다음과 같이 연산 최우선인 괄호가 표현된 식이라면 (3+5)*2 이면 35+2* 로 바꾸어야 합니다. 노트 메모 (끄적) 내 해답 function mySolution(s){ const stackNumber = []; let result = -1; for (let i of s) { if (isNaN(i)) { let a, b, op; op = i; if (result === -1) { a = stackNumber.pop(); .. 2023. 2. 14.

티스토리툴바