Front-End

[Flutter] 앱 통신 방법 및 에러 처리

설정 // pubspec.yaml dependencies: http: ^0.13.4 // main.dart import 'package:http/http.dart' as http; import 'dart:convert'; // -> JSON 형태를 일반 자료형으로 변환해 주는 함수모음집 // android/app/src/main/AndroidManifest.xml 인터넷 사용 허락 코드 IOS는 필요 없다 Get 요청 void getData() async { var result = await http.get( Uri.parse('요청할url') ) print(result.body) } but… 가져온 데이터 대부분은 JSON 형태이다 서버랑 주고받는 데이터는 오직 문자만 가능 즉, 리스트나 객체 형태는 ..

[Angela Yu] Flutter Start

Flutter 강의를 듣기 시작했다. udemy에서 가장 유명한 Angela Yu님의 강의와 좀 더 쉽게 이해할려고 코딩애플 강의 2개를 들을려고 한다. 천천히 다른 언어를 배운다는게 까다롭지만 조금씩 이해하면서 하나씩 해볼려고 한다. What is Flutter? 개발자들이 다양한 화면 크기와 장치에 맞게 멋지 인터페이스를 쉽게 디자인할 수 있도록 해주는 도구 키트 앱을 쉽게 레이아웃 할 수 있도록 미리 빌드된 위젯도 함께 제공 예를들어, 앱을 행이나 열, 스택으로 배치 플러터가 하는 일은 빈 화면에 애니메이션, 상호 작용이든 변경이든 간단히 레고 블록 형태의 위젯들로 앱을 만들 수 있다 모든 디바이스와 플랫폼에 많은 위젯들을 커스터마이징 해서 쉽게 사용할 수 있다 why Flutter? 하나의 코드로..

엑셀 다운로드

이번에 회사에서 관리자 페이지를 구현하다가 요구사항이 들어왔다. 바로 목록 즉, 다양한 데이터들이 들어있는 테이블을 엑셀 파일로 다운로드 할 수 있게 구현해 달라였다. 엑셀 다운로드는 처음 구현하다 보니 방법이랑 코드를 정리해 볼려고 한다. React를 이용한 엑셀 다운로드 구현하기 라이브러리 설치 yarn add xlsx or npm i xlsx import import * as XLSX from "xlsx"; 다운로드 할 데이터 생성 // promotionAppliedData로 다운로드 하고 싶은 부분만 다시 세팅 const filterDataToDownload = useMemo(() => { return promotionAppliedData?.map((res: PromotionAttriProps) ..

[AWS] 정적 웹페이지 배포하기 ( S3 + CloudFront )

S3 배포 버킷 만들기 AWS 리전 서울로 지정 퍼블릭 엑세스 차단 해제 버킷 권한 정책 설정 권한 > 버킷 정책 수정 { "Version": "2012-10-17", "Statement": [ { "Sid": "PublicReadGetObject", "Effect": "Allow", "Principal": "*", "Action": "s3:GetObject", "Resource": "arn:aws:s3:::{ BucketName }/*" // 버킷네임 적용 } ] } 예시 배포 파일 업로드 🙏배포 파일은 루트 디렉토리 안의 내용물만 올려야한다 속성 > 정적 웹사이트 호스팅 설정 정적 웹사이트 호스팅 활성화 인덱스 문서 index.html 로 설정 설정 후 엔드포인트 생성 S3 배포 배포할 프로젝트 디렉..

[AWS] CLI

AWS CLI 설치 // with brew brew install awscli // aws version aws --version CLI 인증 설정 AWS 계정에서 발급한 IAM 사용자의 Access Key ID / Secret Access Key 필요 aws configure AWS Access Key ID [None] : [발급받은 IAM의 Access Key ID] AWS Secret Access Key [None] : [발급받은 IAM의 Secret Access Key] ap-northeast-2 = 서울 output format : json AWS Access Key ID [None]: [여기에 AWS Access Key를 입력] AWS Secret Access Key [None]: [여기에 A..

useSWR로 API 호출 재사용성 높이기

SWR란? React-Query와 비슷한 개념으로 서버에서 데이터를 가져와서 사용하는 Vercel이 개발한 React hooks이다. 더 자세한 개념이랑 사용 방법은 전 글을 참고하자 https://voyage-dev.tistory.com/158 이번에는 SWR hooks로 데이터를 프리렌더링 하며 axios를 이용해 호출 재사용성 높이는 방법을 알아보자. useSWR 함수 SWR 함수는 기본적으로 1개의 인자를 필수로 받는다. key : fetcher 함수에게 전달되는 인자 ⇒ 보통 URL을 넣는다 fetcher : 데이터를 실질적으로 fetch하는 함수이다 option : revalidate , mutate, initialData 등 옵션을 넣어줄 수 있다 사용 순서는 다음과 같다. fetcher를 ..

useSWR vs React(TanStack) Query를 비교해보자

원문 : https://codedamn.com/news/javascript/useswr-vs-react-query-differences-and-which-one-should-you-choose https://blog.logrocket.com/swr-vs-tanstack-query-react/ https://tech.madup.com/react-query-vs-swr/ https://sihyungyou.github.io/iOS-race-condition-in-swift/ 많은 라이브러리를 통해 React에서 데이터를 가져올 수 있지만 현재 가장 인기 있는 두 가지는 바로 SWR / Tanstack React Query이다. 이 두 라이브러리는 얼핏 비슷해 보일 수 있지만 몇 가지 중요한 차이점이 있다. u..

API를 호출할 때 useState 대신 useSWR을 사용해야 하는 이유

원문 : https://javascript.plainenglish.io/why-you-should-use-useswr-instead-of-usestate-when-calling-apis-8b6de5dc18fc https://velog.io/@ysg81/React-useSwr-사용하기 https://github.com/vercel/swr https://swr.vercel.app/ko/docs/revalidation SWR이란 무엇인가? SWR(State While Revalidate)은 서버에서 데이터를 가져오는 데 사용되는 React 후크이다. useState와 useEffect를 사용하지 않고 실시간 데이터를 fetch, 캐싱 또는 re-fetch 할 수 있다. SWR은 캐시에서 데이터를 제공한 다음 ..

GraphQL 이란

GraphQL은 Facebook에서 만든 Graph Query Language라는 애플리케이션 레이어 쿼리 언어이다. 즉, API를 위한 쿼리 언어이며 타입 시스템을 사용하여 쿼리를 실행하는 서버사이드 런타임이다. GraphQL은 특정한 데이터베이스나 스토리지에 귀속되어 있지 않으며 기존 코드와 데이터에 의해 대체된다. Sql은 데이터베이스 시스템에 저장된 데이터를 효율적으로 가져오는 것이 목적이지만, GraphQL은 웹 클라이언트가 데이터를 서버로 부터 효율적으로 가져오는 것이 목적이다. 또한, GraphQL은 기존에 사용하고 있는 RESTApi의 한계점을 극복하고자 나온 통신 규약으로 RESTApi를 대체할 수 있다. REST API의 한계 REST API는 모든 Resource들을 하나의 Endpo..

Asynchronous actions

이번에는 mobx에서 비동기 액션 처리를 알아보자 가장 쉬운 방법은 액션을 비동기 로직으로 만들지 말고 각각 state를 변하는 액션을 따로따로 만든 다음에 비동기 로직은 container에서 구현하고 단계별로 state를 변경하는 액션은 별도로 분리해서 호출하는 방식이 있다. 두 번째 방식은 액션 안에서 async await 로직을 실행하면서 state를 변경해야 할 때 runinaction 함수로 타이밍마다 state를 변경하는 방식이 있다. 마지막으로는 mobx에서 제공하는 generator를 사용해서 비동기 로직을 처리하는 방식이 있다. 첫 번째 방식 // UserStore 생성 import { action, makeObservable, observable } from "mobx"; export ..