본문 바로가기

분류 전체보기

 (287)
Spring Boot | S3 Pre-Signed URL 생성 📌S3 연동 Spring Boot | S3 파일 업로드 1. gradle 설정 프로젝트 생성 후 AWS 의존성을 추가 dependencies { implementation 'org.springframework.boot:spring-boot-starter-thymeleaf' implementation 'org.springframework.boot:spring-boot-starter-.. gaemi606.tistory.com Pre-SignedURL? S3 버킷에 업로드된 컨텐츠는 기본적으로 비공개인데, 미리 서명된 URL을 사용하게 되면 설정해둔 시간동안 URL을 통해 모두 접근이 가능하도록 할 수 있다. ✔️fileName은 key와 동일 ✔️expire는 2분으로 설정해 두었음 밀리세컨단위임 ✔️am..
React Native | React Navigation을 이용한 스크린 이동 1. react-navigation 설치 npm install @react-navigation/native expo로 만든 프로젝트는 expo에도 설치 expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view 2. NavigationContainer로 감싸기 전체 앱을 NavigationContainer로 감싼다. 이제 navigation처리를 할 준비가 끝났다. // App.js import "react-native-gesture-handler"; import React from "rea..
Mac 개발환경 설정 🍺 Homebrew macOS용 패키지 관리자인 homebrew 설치 Homebrew The Missing Package Manager for macOS (or Linux). brew.sh 터미널에 아래 스크립트를 복사, 붙여넣기 하여 설치! /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" 설치 확인 brew doctor 🐱git brew install git 💻 iTerm2 brew로 설치 brew cask install iterm2 혹은 아래 링크에서 다운로드 Downloads - iTerm2 - Mac OS Terminal Replacement iTerm2 by George N..
AWS | EC2 EBS 볼륨 확장하기 (Linux | Ubuntu) 1. AWS 콘솔 로그인 AWS Management Console 11월 30일~12월 18일 및 1월 12일~14일 | 수백 개의 세션에 액세스하고, 클라우드 리더들의 이야기를 듣고, AWS의 최신 소식을 누구보다 먼저 확인하세요. aws.amazon.com 2. 콘솔에서 볼륨 크기 수정 3. 파티션 확장 lsblk명령어로 정보 확인 $ lsblk 디스크는 확장되었지만 실제 사용하는 파티션은 확장되지 않았음. 파티션 확장 필요 growpart명령어로 파티션을 확장 sudo growpart /dev/nvme0n1 1 lsblk명령으로 반영되었는지 확인 4. 파일 시스템 확장 아래의 명령어를 통해 파일 시스템 유형을 확인 $ mount|grep nvme ex4파일 시스템의 경우 resize2fs 명령으로 ..
React | SVG 사용 1. img에 src로 사용하기 일반적으로 이미지 불러오기와 방법 동일함 import heart_img from "../images/heart.svg"; 2. 컴포넌트로 불러오기 svg파일 수정 변경하고 싶은 부분의 값을 current로 바꾸기 컴포넌트로 불러와 사용 import { ReactComponent as HeartImg } from "../images/heart.svg"; props를 이용해 width값, height값, fill(색상)을 변경할 수 있음
React Native | Expo를 이용해 위치 정보 얻기 (expo-location) React Native에서도 Geolocation을 제공하고있기는 하지만, Expo를 이용해보기로 한다. 먼저 expo를 이용해 expo-location을 설치 expo install expo-location 그리고 나서는 엄청 쉽다. 일단 import해주기 import * as Location from "expo-location"; 사용자의 디바이스 위치에 접근하기 위한 동의를 구한다. 참고로 해당 함수는 promise함수로 async await을 붙여서 사용한다. (공식문서 참조) Location.requestPremissionAsynce()메서드를 통해 위치 정보를 얻기 위한 알림창이 생성된다. 사용자가 동의하면, Location.getCurrentPositionAsynce()메서드가 실행되어 사용..
React Native | Expo CLI로 프로젝트 생성 /실행하기 Expo CLI create-react-app처럼 필요한 기본 세팅을 빠르게 해줌 Expo앱을 이용하면 본인의 휴대폰에서 바로바로 앱을 테스트 해볼 수 있다! native파일들을 제어하기 힘듦 필요한 모듈들을 많이 지원하고 있음 React Native CLI native파일들에 접근할 수 있음 XCode나 Android Studio가 필요 0. Node설치 node.js가 설치되어있지 않다면 설치해주어야 하며, 버전이 12 LTS이상이어야 함 없으면 다운로드 및 설치 해주기 Download | Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 1. expo설치 -g는 글로벌하게 설치하겠다는 ..
CSS | 텍스트 말줄임 ... 처리 text-overflow: ellipsis로 처리할 수 있으나 몇 가지 조건이 있음 1. overflow: hidden과 white-space: nowrap이 함께 적용되어야 함 2. width에는 픽셀 단위로 값을 설정하거나, %단위를 사용하고 싶다면 max-width를 함께 설정해야 함 예시 .name-cell { width: 6%; max-width: 85px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }

티스토리툴바