타입스크립트 사용 중 declare에 대해 숙지가 잘 되지 않아 정리하게 되었다.declaredeclare란 컴파일러에게 declare로 선언된 변수 또는 함수들을 이미 존재한다고 알리는 것이다. (타입 재 정의도 가능하다.) 컴파일러는 해당 선언문을 다른 코드의 정적 타입 확인을 위해 사용할 뿐 javascript로 컴파일 하지 않는다. 기본 사용법declare var foo: number; 사용 예시//age.jslet age = 20;//index.tsdeclare let age:number;console.log(age)   참고 Documentation - Declaration ReferenceHow to create a d.ts file for a modulewww.typescriptlang.org

Next.js로 프로젝트를 진행하다 보면 next.config.js의 설정을 바꿔야 할 때가 있다.자주 사용하는 설정에 대해 정리하고자 한다. reactStrictModeapplication 내에서 문제가 일어날 수 있는 부분에 대한 경고를 알려주는 기능이다.Nextjs 문서에서는 strict mode를 활성화하는 것을 추천한다./** @type {import('next').NextConfig} */const nextConfig = { reactStrictMode: true,};module.exports = nextConfig; swcMiniftyswcMinifty이란 Terser와 비슷한 역할을 한다. 필요 없는 공백이나, 주석을 삭제하여 용량을 줄이고, 해당 스크립트를 해석할 수 없도록 암호화 하는..

사내 프로젝트 진행 중 로그인한 user session에 값을 추가적으로 가져와야되서 next-auth의 callbacks에 대해 알아보았다. 일반적으로 클라이언트 페이지에서 useSession()을 활용해 data를 가져오면 expires와 user의 eamil, name 만 가져온다. 그래서 만약 그 외의 데이터가 필요하면 callbacks중 Session callback 을 활용해 데이터를 추가하면 된다. 세션 콜백은 세션이 확인될 때마다 호출된다. session의 email과 token의 email이 같으면 session user 객체에 추가할 속성과 값을추가한다. (아래코드에서는 region을 추가했다.)// api/auth/[...nextauth].tsdeclare module "next-au..

프로젝트 페이지에서 보여주는 썸네일 이미지는 AWS S3에서 가져오고 있다. 해당 방법에 대해 정리하기 전에 S3에 접근하지 위해서는 IAM을 통하여 Key값을 발급 받아야하기 때문에 IAM설정에 대해 먼저 정리 해보았다.IAMIAM(AWS Identity and Access Management)은 AWS에서 제공하는 서비스에 대한 엑세스를 안전하게 제어하는 서비스로 권한을 부여 혹은 제한하여 리소스의 안전성을 높인다.IAM설정엑세스 관리의 사용자에 들어가 사용자를 생성한다.사용자 이름을 작성 후 넘어간다. S3 권한 설정을 위해 직접 정책 연결을 선택 후 S3를 검색하면 나오는 리스트 S3FullAccess를 선택후 다음을 눌러 생성한다. 생성된 사용자를 선택 후 보안 자격 증명 메뉴로 이동하면 하단에..

개인 블로그 이력서 페이지에서 이력서를 pdf로 다운 받을 수 있는 기능을 추가 하기 위해 file-saver라는 라이브러리를 사용했다. (지금은 비활성화시킴 ) file-savernpm file-saverAn HTML5 saveAs() FileSaver implementation. Latest version: 2.0.5, last published: 4 years ago. Start using file-saver in your project by running `npm i file-saver`. There are 5083 other projects in the npm registry using file-saver.www.npmjs.com 설치npm i file-saver 다운로드 방법fetch("/re..

프로그래머스 코딩테스트 하던 중 자주 쓰지 않았던 fill()메서드를 활용한 경우가 많아 익숙하지 않은 메서드를 학습해보고자 fill()메서드에 대해 정리해보았다.fill()fill(value, start, end)배열의 start index 부터 end index 전까지(end index는 미 포함) value값으로 채워주는 함수이다.value : 배열에 넣을 값 start : value 값을 채울 배열의 시작 index (기본 값 : 0) end : value 값을 채울 배열의 종료 index로 end는 포함하지 않습니다.  (기본 값 : 배열의 길이) 예시const array = ['a', 'b', 'c', 'd'];array.fill('A', 1, 3); // ['a', 'A', 'A', 'd']..

진행한 프로젝트 중 광고 영상이 재생되고 영상이 끝나면 링크 이동하는 페이지가 있었다.여기서 더 발전해 광고 영상 재생 중 해당 광고 관련 회사 qr코드와 영상 재생 중간 쯤 영상을 스킵하는 버튼이 등장하는 것을 추가하기로 해 비디오와 관련된 이벤트를 알아보았다. 해당 기능을 위해 필요한 정보전체 영상 길이영상 길이의 중간 지점현재 재생 지점전체 영상 길이와 중간 지점은 "loadedmetadata”, “duration” 를 활용한다.loadedmetadata는 미디어의 현재 재생 위치에 있는 프레임이 로드를 완료한 경우에 실행되는 이벤트로 duration 속성을 활용해 전체 영상 길이를 반환한다.Video.addEventListener('loadedmetadata', () => { videoElemen..

특정 문자 포함 여부를 확인하는 정규식 규칙(리터럴)을 매번 헷갈려 정리해보았다.정규식 메서드test()test() 메서드를 활용해 주어진 문자열이 정규 표현식을 만족하는지 판별하고, 그 여부를 true 또는 false로 반환한다.const regex = /coffee/;const txt = "I love coffee";console.log(regex.test(txt));// truematch()문자열에서 정규 표현식에 매칭 되는 항목들을 배열로 반환한다.const regex = /coffee/;const txt = "I love coffee";console.log(txt.match(regex));//["coffee"]replace()정규 표현식에 매칭되는 항목을 대체 문자열로 반환한다.console.l..

현재 AWS 프리티어 기간이 얼마 남지 않아 티스토리로 이전을 준비 중이지만, 직접 블로그를 만들어 보고 싶어서 Next.js와 Notion API를 활용해 AWS EC2에 배포한 개인 블로그를 구현한 경험을 정리했습니다. 📌 프로젝트 깃허브, 배포 링크 현재 운영 중입니다. 한 번 구경해 보세요!개인 블로그 주소 : https://minsunblog.com/프로젝트 깃허브 : https://github.com/pminsun/MinsunBlogQ. 프로젝트 소개이 프로젝트는 기술 블로그를 운영하고 싶다는 마음에서 시작했습니다. 고민 끝에 Notion API를 알게 되었고, 이를 Next.js와 AWS EC2를 활용해 블로그로 구현하게 되었습니다. 구현 과정에서 여러 챌린지와 이슈가 있었습니다:1. No..

매번 헷갈리는 알파벳 배열만드는 방법에 대해 기록해보았다. 알파벳 배열아스키코드를 활용하는 방법으로 ‘A’ 문자가 65번으로 1씩 더해 26글자를 배열화 시킨 방법이다.const arr = Array.from({ length: 26 }, (v, i) => String.fromCharCode(i + 65));console.log(arr)/*[ 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']*/// 대문자 알파벳 배열const upperCaseAlphabets = Array.from({ length: 26 }, (_,..