All

엑셀 다운로드

이번에 회사에서 관리자 페이지를 구현하다가 요구사항이 들어왔다. 바로 목록 즉, 다양한 데이터들이 들어있는 테이블을 엑셀 파일로 다운로드 할 수 있게 구현해 달라였다. 엑셀 다운로드는 처음 구현하다 보니 방법이랑 코드를 정리해 볼려고 한다. 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를 ..

8장 람다 라이브러리

이번 장은 람다라는 이름의 유명한 함수형 유틸리티 라이브러리의 기능을 알아보자. 9-1 람다 라이브러리 소개 람다 패키지는 8장에서 소개한 compose나 pipe를 사용하는 함수 조합을 쉽게 할 수 있게 설계된 오픈소스 자바스크립트 라이브러리로서 다음과 같은 특징이 있다. 타입스크립트 언어와 100% 호환 compose와 pipe 함수 제공 자동 커리 기능 제공 포인트가 없는 고차 도움 함수 제공 조합 논리(combinatory logic) 함수 일부 제공 하스켈 렌즈 라이브러리 기능 일부 제공 자바스크립트 표준 모나드 규격과 호환 실습 프로젝트 구성 npm init -y npm i -D typescript ts-node @types/node mkdir src // ramda package npm i ..

[개발자 취업 회고] 부트캠프 수료후 7개월 만에 취업

2021년부터 2022년까지 사업을 준비하기 위해 달려왔던 삶에서 국비지원으로 개발자가 되고 싶어했던 꿈을 포기못해 다시 커리어를 전환하기 위해 도전하고 끝내(드디어!!) 취업에 성공한 나만의 회고록을 써볼려고 합니다. 지극히 개인적인 내용이지만, 개발자를 꿈꾸는 사람들 혹은 부트캠프를 수료한 사람들에게 조금이라도 도움이 되었으면 좋겠습니다. 국비지원이냐 부트캠프냐 무엇이 옳은 선택일까? 저는 2020년에 자바 풀스택 국비지원을 통해 6개월간의 교육과 작년 3월부터 3개월 동안 위코드 부트캠프를 통해 프론트엔드 과정을 수료 했습니다. 지금 시점에서 개발자가 되고 싶은 사람들한테 어디갈지 추천을 하자면 국비지원을 지원하는 부트캠프를 가라고 추천드리고 싶습니다. 물론, 그 전에 SSAFY 혹은 42 서울 같..

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은 캐시에서 데이터를 제공한 다음 ..

8장 함수 조합의 원리와 응용

함수 조합은 작은 기능을 하는 여러 함수를 pipe나 compose라는 이름의 함수로 조합하여 조금씩 더 의미 있는 함수로 만들어 가는 코드 설계 기법이다. 이번 장은 함수 조합의 토대가 되는 고차 함수와 커리, 그리고 이들을 이용한 함수 조합에 간해 살펴보자. 8-1 함수형 프로그래밍이란? 함수형 프로그래밍은 순수 함수와 선언형 프로그래밍의 토대 위에 함수 조합과 모나드 조합으로 코드를 설계하고 구현하는 기법이다. 함수형 프로그래밍은 다음 세 가지 수학 이론에 기반을 두고 있다. 람다 수학(ramda calculus) : 조합 논리와 카테고리 이론의 토대가 되는 논리 수학 조합 논리(combinatory logic) : 함수 조합의 이론적 배경 카테고리 이론(category theory) : 모나드 조..

7장 비동기 콜백 함수

이번 장은 비동기 API를 사용하는 코드를 쉽게 작성하게 하는 Promise 클래스와 async/await 구문에 대해 살펴보자 7-1 비동기 콜백 함수 이번 장은 노드제이에스가 제공하는 readFile과 같은 비동기 API를 예로 들고 있기 때문에 tsconfig.json 파일에 별도의 설정이 필요하다. // tsconfig.json { "compilerOptions": { "module": "commonjs", "esModuleInterop": true, "target": "es2015", "moduleResolution": "node", "outDir": "dist", "baseUrl": ".", "sourceMap": true, "downlevelIteration": true, // 이 부분을 t..