진행 중인 프로젝트에서 하단으로 이동하는 버튼이 필요해 알아보았다. 하단 버튼은 페이지 총 Height인 document.body.scrollHeight를 scrollTo()함수의 top값에 넣어 주면된다. ⭐ scroll이 이루어진 영역을 기준으로 scrollTo 함수를 실행해야 작동한다.아래 코드는 스크롤이 생기는 window영역으로 기준을 잡아 window.scrollTo() 를 실행시킨다.const Area = document.querySelector(".area");const moveBtn = document.querySelector(".down-btn");moveBtn.addEventListener('click', () => { window.scrollTo({ top: document...

S3 버킷을 CloudFront와 연동하여 이미지를 제공하고자 했다.CloudFrontAWS의 CDN (Content Delivery Network) 서비스로 Client의 콘텐츠 요청으로 서버에서 받아온 콘텐츠를 캐싱하고 이후 같은 요청이 왔을 때, 그 캐싱해 둔 것을 제공하는 서비스다. 이렇게 함으로써 물리적으로 거리가 먼 곳에도 빠르게 요청을 처리할 수 있고 결과적으로 서버의 부하를 낮출 수 있다.  CDN 관련글 : https://minsun309.tistory.com/entry/CDN%EC%9D%B4%EB%9E%80 CloudFront와 S3를 연동하여 client가 S3 컨텐츠를 직접 접근하지 않을 때의 이점컨텐츠 보안유지컨텐츠 캐싱을 통한 S3 부하 감소Edge Locaion을 통한 응답속도..

개인 블로그의 프로젝트 페이지에서 쓰여질 이미지를 AWS S3(Amazon Simple Storage Service)에 저장해 이미지를 가져오는 방식을 사용하기로 정해 S3의 버킷 만드는 방법에 대해 알아보았다.S3(Simple,Storage, Service) ?AWS(Amazon Web Service)에서 제공하는 인터넷 스토리지 서비스이다.보안성이 뛰어나며 높은 내구도를 자랑하며 정보를 안전하게 저장 할 수 있다.저렴한 비용으로 사용이 가능하다.Bucket이라는 단위로 구분한다. S3 버킷 만들기버킷 만들기 클릭버킷 이름, 리전 선택 객체 소유권, 퍼블릭 설정퍼블릭 상태로 사용할 예정이어서 차단을 해제했다. 그 외에 버킷 버전 관리는 비활성화, 기본 암호화는 변경하지 않고 설정이 되어있는 상태로 버킷..

REST 란 ?“REpresentational State Transfer”의 약자로 자원을 이름(자원의 표현)으로 구분해 해당 자원의 상태(정보)를 주고 받는 모든 것을 의미한다.즉, 자원(resource)의 표현(representation)에 의한 상태 전달을 뜻한다.자원 : 해당 소프트웨어가 관리하는 모든 것 (ex. 문서, 그림, 데이터, 해당 소프트웨어 자체 등)표현 : 그 자원을 표현하기 위한 이름 (ex. DB의 학생 정보가 자원일 때, ‘students’를 자원의 표현으로 정한다.)상태 전달 : 데이터가 요청되는 시점에 자원의 상태를 전달한다. (JSON 혹은 XML을 통해 데이터를 주고 받는 것이 일반적이다.)REST는 기본적으로 웹의 기존 기술과 HTTP 프로토콜을 그대로 활용하기 때문에..

개인 블로그 프로젝트에 사용할 이미지를 가져오는 방식을 AWS S3과 CloudFront를 활용하기로 결정하면서 cdn에 대해 알아보았다.CDN?CDN(Content Delivery Network)은 지리적으로 분산된 서버들을 연결한 네트워크로서 웹 컨텐츠의 복사본을 사용자에 가까운 곳에 두거나 동적 컨텐츠(예: 라이브 비디오 피드)의 전달을 활성화하여 웹 성능 및 속도를 향상할 수 있게 합니다. CDN 사용 시 장점페이지 로드 시간 단축 : 가까운 CDN 서버를 사용하여 웹 사이트 방문자에게 더 가까운 웹 콘텐츠 배포를 가능하게 함으로써 방문자는 더 빠른 웹 페이지 로딩 시간을 경험할 수 있다.대역폭 비용 절감 : 원본 서버가 요청에 응답할 때마다 대역폭이 소모된다. CDN은 원본 서버가 제공해야 하는..

블로그 포스팅 글이 100개를 넘어가면서 0 번째부터 글들이 리스트에 없어 notion api 에 대해 다시 살펴봤다. Notion Api포스트 맨으로 api를 불러와 보니 100개 초과 일 때 와 아닐 때 값이 다른 점이 있다. results 100개 이하일 때has_more값이 false이며 next_cursor 값도 null 이다.// JSON{ "object": "list", "results": [ /// ], "next_cursor": null, "has_more": false, ...}  results 100개 초과 일 때has_more값이 true이며 next_cursor 값은 string된 값이 생긴다.// JSON{ "object": "list", "results": [ /// ]..

Notion api 로 불러오면서 하위 이미지와 같은 경고 문이 뜬다.Warning: data for page "/" is 184 kB which exceeds the threshold of 128 kB, this amount of data can reduce performance.See more info here: https://nextjs.org/docs/messages/large-page-data Large Page Data공식 문서(https://nextjs.org/docs/messages/large-page-data) 에서는 데이터 양을 줄이라는 해결책을 줬지만 내 경우에 해당하는 해결 방법이 아니어서 다른 방법을 찾아보았다. next.config.js나랑 똑같은 문제를 겪고 있는 글을 찾아보니..

useform으로 값을 넘길 때 register로 등록되지 않은 값을 추가로 넘겨야 할 때도 있다.react-hook-form 관련글 : https://minsun309.tistory.com/entry/react-hook-form-useForm userform에서 값을 최종적을 유효성 검사가 성공하면 데이터를 보내는 handleSubmit에 데이터를 인자로 받는 onSubmit함수에 데이터를 보내기 전에 특정 값을 추가해 주면 된다. 기본형 //...  데이터 추가const taemList = ["청팀", "백팀"];const [teamTxt, setTeamTxt] = useState("팀을 선택하세요");const [teamError, setTeamError] = useState(false);const..

React의 Flux 패턴에 대해 알아보았다. MVC 패턴MVC는 Model, View, Controller의 약자입니다. Model에 데이터를 저장하고, Controller를 이용하여 Model의 데이터를 관리(CRUD)합니다. Model의 데이터가 변경되면 View로 전달되어 사용자에게 보여집니다. 사용자가 View를 통해 데이터를 입력하면, Controller가 그 입력을 처리해 Model을 업데이트할 수 있습니다. 이 구조에서는 데이터 흐름이 양방향으로 일어날 수 있습니다.  문제는 애플리케이션의 규모가 커지면 아래와 같이 복잡해집니다.View가 다양한 상호작용을 위해 여러 개의 Model을 동시에 업데이트하고 Model 역시 여러 개의 View에 데이터를 전달하는 상황이 발생합니다. 규모가 커질..

자바스크립트를 활용한 계산, 숫자 관련 method 중 개인적으로 헷갈리는 위주로 정리했다.자바스크립트 사칙연산나눗셈에 대한 나머지 : %• 나눈 나머지의 값을 반환한다.let data = 5 % 2 // 결과 : data -> 1 자바스크립트 Math 메소드거듭제곱 연산Math.pow(number, number)거듭 제곱 연산자(**)첫번째 인수를 밑(base), 두번째 인수를 지수(exponent)로하여 거듭제곱을 반환한다.// Math.pow() 메서드Math.pow(2, 8); // 256// 거듭제곱 연산자(**)console.log(3 ** 3); // 27  Math.sqrt()인수의 제곱근을 반환한다.Math.sqrt(4); // 2Math.sqrt(16); // 4  Math.ra..