본문 바로가기
반응형

분류 전체보기147

AWS_S3 client 배포하기 AWS_S3이란? `객체 스토리지로 객체로 된 파일을 다루는 저장소` 온라인 오브젝트 스토리지 서비스로, 데이터를 온라인으로 오브젝트 형태로 저장하는 서비스를 말한다. 파일 설치는 안되고, 이미지나 동영상 파일등만 저장할 수 있다. S3자체로 정적 웹 서비스가 가능하다. 즉 HTML파일을 스토리지에 저장하고 HTML 파일에 접근가능하다. s3 저장되는 데이터는 모두 객체라고 부른다. 이제 클라이언트를 배포해보자. 먼저 내 로컬 환경에서 클라이언트 bulid를 완료 시킨다. 빌드 완료 후 버킷등록을 눌러서 업로드를 시켜야 한다. * 버킷이란? Bucket은 객체(데이터와 메타데이터 저장 단위)를 저장하고 관리하는 역할을 한다. aws s3에 저장된 객체 컨테이너로서 최상위 디렉토리이다. 단순하게 디렉토리/.. 2022. 12. 1.
타입스크립트_기본타입, interface Typescript function showTimes(arr) { arr.forEach(element => { console.log(element) }); } showTimes([1,2,3]) //1, 2, 3 showTimes(1,2,3) //error 발생 Javascript(동적언어): 실행되는 시점 (런타임)에 타입이 결정되고 오류가 있을 시 그때 처리가 가능하다. function showTimes(arr:number[]) { arr.forEach(element => { console.log(element) }); } showTimes([1,2,3]) //1, 2, 3 function showTimes(arr:string[]) { arr.forEach(element => { console.log(.. 2022. 11. 30.
useMemo를 사용해서 최적화하기 const memoStore = useMemo( () => { return }, [placesList] ) useMemo, 값의 재활용을 위해 따로 메모리를 소비해서 저장해 놓는 것을 의미한다. 함수형 컴포넌트가 렌더링이 되면 모든 component의 함수가 호출이 된다. 이때 모든 내부 변수들이 초기화 과정을 거치는데, 렌더링이 될 때마다 모든 컴포넌트가 반복적으로 움직이게 되면 비효율적이고 무거워진다. useMemo의 활용에 대해서 크게 생각이 없었지만, 내가 만들고 있는 플젝안에서도 쓸떼없이 구동되지 않아도 될 컴포넌트들이 많았다. 먼저 StoreList컴포넌트의 경우에는 main컴포넌트 내에서 검색되는 리스트를 Props로 받는다. 검색한 결과 외에는 지속적인 렌더링이 필요가 없기때문에 useMe.. 2022. 11. 22.
하나의 state에 2개의 통신을 하고 싶을때? 구현하고 싶은 기능은, map api를 통해서 장소에 대한 북마크를 했을 때 해당 data에 대한 내용을 출력하는거였다. 문제는 북마크 리스트에 출력이 되는데, 해당 data에 이미지가 없었다. 뭔가.. 디자인적으로 보기에도 이미지가 없어서 뭔가... 뭔가.. 허전하다고 생각했다. 그래서 결국은, 랜덤이미지 api를 별도로 해주기로 했다. 1. 만든 서버에서 북마크 DATA로 setList에 넣어줌 2. unsplash api를 이용해서 random이미지 setMealThumb에 받기 처음 코드는 이랬다. function Bookmark() { const [list, setList] = useState([]) const [mealThumb, setMealThumb] = useState([]) useEff.. 2022. 11. 22.
728x90
반응형