JavaScript

회사에서 유용하게 사용하던 bottom-sheet가 있어 이를 다른 사람들과도 공유하고 싶어 라이브러리로 만들게 되었다! 또한 npm에 올려 다른 사람들에게 소스 리뷰, 버그 등을 공유받고 싶은 마음도 있었다. 글로벌하게 사용되었으면 해서 영어로 문서화해 두었다..! + 문제점이나 개선 사항은 issue로 남겨주시면 수정해 보겠습니다 💪 bottom-sheet 관련 소스는 기존 포스팅에서 수정과 함께 typescript를 적용시켰다! @solb/bottom-sheet 순수 자바스크립트로 만든 bottom-sheet로, 모바일 웹이나 앱에서는 bottom-sheet 형태로 나타나고 웹에서는 모달 형태로 나타난다. 자세한 Demo는 여기서 확인할 수 있다 (👉 Demo) 이 컴포넌트는 web componen..

카카오, 네이버와 애플까지! 소셜 로그인 구현이 필요했다. 소셜 로그인을 구현하며 고민했던 부분들 위주로 작성해 보겠다. 소셜 로그인 구현 각 redirect uri이 있는데, 이는 소셜 로그인이 성공 후(카카오, 네이버 등에서 로그인 후) 다시 서비스 페이지로 돌아올 페이지 위치이다. 성공 후 발급된 인가코드가 포함되어서 redirect uri로 이동된다! 일반적인 로그인 구현 과정은 다른 블로그 분들이 설명을 너무 잘해주셔서 내가 고민했던 부분들 위주로 작성해 보겠다. 소셜 로그인 성공 후 이전 페이지로 어떻게 보내지? 예를 들어 서비스에서 로그인 전 상태일 경우! 구매하기 클릭 -> 로그인 화면으로 이동 -> 로그인 성공 -> 메인 페이지로 이동이 아니라 구매하기 클릭 -> 로그인 화면으로 이동 -..

처음 해보는 엑셀 다운로드다! ㅎㅎ 백앤드에서 엑셀 파일이랑 엑셀 파일명을 response에 담아서 보내주신다고 해서 프론트에서 받아서 다운로드하는 부분을 구현해 봤다 그전에! Blob (Binary Large Object) 대용량의 바이너리를 다룰 수 있는 객체로, 백앤드에서 엑셀 파일을 만들어서 프론트에 받을 때 Blob객체를 활용하면 된다 1. api 호출 axiosT.post('/test/excel-download', { ...form }, { responseType: 'blob', headers: { 'Content-Type': 'multipart/form-data', }, }, ) 2. 엑셀 다운로드 api로 호출 결과값으로 Blob 객체를 생성해 준다 a 태그를 생성해서 href에 Blob ..

내가 만들고자 하는 바텀시트는 1. pc에서는 모달형태로 나타나고 mobile에서는 아래에서 위로 올라오는 바텀시트 형태로 나타나야 한다. 2. 외부에서 열고 닫을 수 있어야 한다. 3. full(전체가 채워지도록)로 당겨질 수 있어야 한다. 4. 제목과 상단에 닫기 버튼의 여부를 attribute 형태로 전달받는다. 이런 기능을 가지고 있어야 한다. + 미리 결과를 보여주자면...! 순수한 자바스크립트로 바텀시트를 만들어봤다 바텀시트를 여러 곳에서 간편하게 쓰기 위해(함수로도 만들어보고 클래스로 해보려다가...) Web components로 만들게 되었다 ㅎㅎ 리액트나 뷰 등을 사용하지 않고 순수 자바스크립트로 컴포넌트를 만들 수 있는 방법이 있는데 바로 Web components를 사용하면 된다!! ..

상품 리스트에서 상세 상품을 본 후 뒤로 가기 시 원래 스크롤 위치를 기억했다가 보여주고 싶었다. 1. scroll 이벤트가 발생 시 해당 scrollTop의 값을 session에 저장 여기서 scroll이 발생 시마다 session에 값이 저장되는 것은 낭비이다. throttle를 이용해 마지막 이벤트가 발생하고 일정 시간(400ms)이 지나기 전까지 다시 호출되지 않도록 막아줬다. document.addEventListener('scroll', () => { if (!timer) { timer = setTimeout(() => { timer = null; const scrollValue = document.documentElement.scrollTop; sessionStorage.setItem("ma..

slice 배열의 begin부터 end까지에(end는 미포함) 대한 얕은 복사본을 새로운 배열 객체로 반환한다. 원본의 배열은 바뀌지 않는다. arr.slice([begin[, end]]) begin : 시작점 인덱스 end : 종료 지점 인덱스 (end 인덱스는 제외하고 추출) 리턴값 : 추출한 요소를 포함한 새로운 배열 const animals = ['ant', 'bison', 'camel', 'duck', 'elephant']; console.log(animals.slice(2)); // ["camel", "duck", "elephant"] console.log(animals.slice(2, 4)); // ["camel", "duck"] console.log(animals.slice(1, 5)); ..

새로운 타입 스크립트를 이용한 리액트 프로젝트를 시작했다. 타입 스크립트를 복습할 겸 기존의 JavaScript로 만들었던 프로젝트를 TypeScript로 변경해보기로 했다. TypeScript를 설치한다. yarn add typescript @types/node @types/react @types/react-dom @types/jest // 또는 npm install typescript @types/node @types/react @types/react-dom @types/jest 그다음 yarn install // 또는 npm install tsconfig.json파일이 생성된다. (혹은 생성되지 않았다면 tsconfig.json을 최상단에 추가해준다.) 아래 소스를 tsconfig.json에 추가해..

나의 경우 answer의 길이가 2자 이하라면 마지막 문자를 answer의 길이가 3이 될 때까지 반복해서 끝에 붙이기를 하기 위해 아래와 같이 구현을 했다. while (answer.length

selectedIndex에는 선택된 index들의 값들이 들어있다. 선택된 index들은 arr배열에서 삭제하고 싶었다. const arr= [ {id:1, name:'AAA'}, // 0 {id:2, name:'BBB'}, // 1 {id:3, name:'CCC'}, // 2 {id:4, name:'DDD'}, // 3 {id:5, name:'EEE'}, // 4 ] const selectedIndex= [0,2,3] 1. Object의 key들의 값을 비교해주고 key값이 다른 아이들만 담아줬다. 2. reduce로 담아진 key들에 값을 넣어줬다. 3. 2번 과정을 거치면 중간에 삭제된 곳에는 빈 값이 들어가므로 null이 아닌 값들만 리턴해준다. const filteredData = Object...