728x90 🧠 지식창고/기능84 [React-Toastify] 토스트 기능 구현해보기 사이드 프로젝트 Linkey를 진행하면서 토스트 기능을 React + Typescript에서 구현해보았고, 그 과정을 정리해보았습니다! 라이브러리 선택 과정 React Bootstrap과 react-toastify라는 두 가지 선택지 중에서 최종적으로는 React-Toasitify 라이브러리를 선택하였는 데, 현재 개발 중인 사이드 프로젝트가 디자이너나 기획자가 없는 상태에서 프론트 1명과 백엔드 1명이 진행하는 프로젝트이다 보니 UI적으로 임펙트가 부족하다는 느낌이 들어 React Bootstrap에 애니메이션을 추가해서 구현하는 것보다는 빠른 개발을 위해 Node.js 패키지 (React-Toasitify)를 선택하게 되었다. React Bootstrap > Toasts Toasts | React B.. 2023. 9. 26. [AWS] S3에 이미지 추가/삭제/복사(이동) 및 설정하는 방법 입사한 지 1년 3개월 만에 드디어 AWS S3의 추가/삭제/복사 기능을 구현했다. 팀장님 계실 때도 못했던 걸... ChatGTP와 팀원분과의 합동으로 해결해 냈다. 무한한 감사를... 이 글이 AWS S3에 늪에서 헤매고 있는 개발자분들에게 도움이 되기를 바라며... AWS S3 설정하는 방법 next/image src에 AWS S3 이미지 삽입하는 방법 이미지 추가 이미지 삭제 이미지 복사 AWS S3 설정하는 방법 이 부분은 다른 블로그에도 설명이 잘 되어 있어서 간결하게 넘어갑니다 AWS 접속 후 로그인하고 S3에 버킷에 들어간다. 무료 클라우드 컴퓨팅 서비스 - AWS 프리 티어 Q: AWS 프리 티어란 무엇입니까? AWS 프리 티어는 고객에게 서비스별로 지정된 한도 내에서 무료로 AWS 서비.. 2023. 7. 13. axios 여러 개 요청하기 (multiple request) 프로젝트 리뉴얼 과정에서 한 컴포넌트에 5개의 get api를 요청해야 해서 단순하게 생각했을 때는 useEffect에 api를 넣으면 된다고 생각했었지만 실제로 테스트해보았을 때 몇 가지 문제가 발생했었다. 불러온 값이 없다는 error 발생 순차적으로 불러오려니 시간이 오래 걸려 로딩이 느림 유지보수가 용이하지 않음 한꺼번에 api를 요청하는 방법은 없을까 찾아보니 axios.all을 사용하는 방법이 있다는 걸 알게 되었다. 기존에 axios와 크게 다르지는 않아서 좋았다. import axios from "axios" import { useEffect } from "react" const Test = () => { const getAHandler = () => { return axios.get("/.. 2023. 3. 30. document scroll event 대신 new IntersectionObserver 사용해보기 new IntersectionObserver 무한 스크롤이나 스크롤 내릴 때 애니메이션을 넣고 싶은 경우에 document scroll event를 사용해 왔었는 데 구현하고자 하는 기능에 document scroll event를 사용했을 때는 한계가 있다고 느껴져 '코딩애플'님이 올려주신 new IntersectionObserver를 사용하기 전 실현 가능성을 체크하고자 테스트해보았다. 알기 쉽게 설명해 주셔서 따라 하기 어렵지 않았고 영상에서는 HTML/JS/CSS를 사용하셨고 내가 테스트할 때는 Next.js를 사용하여서 코드를 프레임워크에 맞춰 변형하는 과정에서 새롭게 알게 된 부분을 정리하려고 한다. 새롭게 알게 된 부분 useRef()에 자식들을 선택하는 방법 (이전까지는 사용할 일이 없어서 .. 2023. 3. 13. [react-datepicker] 달력 구현 및 주말/양력 휴일/음력 휴일 비활성화 하기 Next.js에서 react-datepicker를 사용하여 달력을 구현했었고 [React] 달력 만들기(react-datePicker)_v2 [React] 달력 만들기(react-datePicker)_v1 - 참고 블로그 더보기 - 라이브러리 추천 React에서 활용 가능한 DatePicker Library 정리 datepicker library 사용 후기 velog.io - react-datePicker 커스텀 && , || : 네이버 블로그 eundol1113.tistory.com 추가로 주말/공휴일 때 날짜 선택 비활성화 하는 기능을 구현하였다. 원래도 기능 구현 끝나면 정리를 하는 편이지만 이번에는 React 버전 예제가 너무 없어서 더더욱 정리하게 되었다.. JS datepicker와 React.. 2023. 1. 20. 반응형 footer 하단 고정하기 반응형 footer를 content 높이 상관없이 항상 하단에 고정하는 기능을 구현했다. "footer 하단 고정"이라고 구글링 해보면 많은 예제가 나오긴 하는 데 다 footer 높이가 고정된 상태에서 하단에 고정시키는 기능이라서 다른 블로그 css 참고 + js를 첨가하여 기능을 구현했다. (아래 블로그에서 css 부분 참고함) footer 하단 고정 항상 html 작성할때마다 footer가 날 괴롭힌다. 이상하게 구글링을 할때마다 자료들이 2% 아니한 50% 이상 모자라다. 조금더 완벽하고 컴팩트한 방법이 있어 작성한다. 구글링으로 나오는 자료들은 velog.io 과정을 요약하자면 아래와 같다. 1. Header, Content, Footer UI를 만들어 준다. (Header는 고정적, Conte.. 2023. 1. 17. [Next.js] 주소 입력 → 위/경도 출력 → 지도 출력 (카카오 geocoder/지도 api) 구현하려고 한 기능은 사용자가 주소 입력 시 위/경도를 계산해서 지도에 출력하는 기능이었다. 구글링을 해봐도 카카오/구글 developer로 이동해서 Html/Js/Css로 나오고 React 관련되어서 나오길래 여러 블로그를 테스트 해보다가 Next.js에 적용했던 과정을 기록했다. Next.js..... kakao 지도 관련 글이 어떻게 이렇게 없지😢 1. 카카오 지도 Api Key 발급 받기 주소를 위/경도로 변환해주는 기능을 Geocoding, Geocoder라고 한다. 구글링할 때 카카오 geocoder라고 치면 나온다. 카카오지도 API 키 발급 받는 방법 1. 카카오 개발자 사이트에 접속 https://developers.kakao.com/ 카카오 개발 사이트에서 “시작하기” 혹은 “로그인” .. 2023. 1. 10. css 전역화 시키기 2️⃣ (ver. :root) 사용자 지정 CSS 속성 사용하기 (변수) - CSS: Cascading Style Sheets | MDN 사용자 지정 속성(CSS 변수, 종속 변수)은 CSS 저작자가 정의하는 개체로, 문서 전반적으로 재사용할 임의의 값을 담습니다. 사용자 지정 속성은 전용 표기법을 사용해 정의하고, (--main-color: black;) developer.mozilla.org css 전역화 시키기 1️⃣ (ver. ThemeProvider) [styled-components] ThemeProvider로 공통 스타일 속성 관리하기. 지난 사촌 누나에게 피아노 연습실 페이지 마련해주기 프로젝트를 수행하면서 가장 크게 느꼈던 점은 바로 css에서의 통일성이 없다 라 eundol1113.tistory.com 이 글이 왜 .. 2023. 1. 6. css 전역화 시키기 1️⃣ (ver. ThemeProvider) [styled-components] ThemeProvider로 공통 스타일 속성 관리하기. 지난 사촌 누나에게 피아노 연습실 페이지 마련해주기 프로젝트를 수행하면서 가장 크게 느꼈던 점은 바로 css에서의 통일성이 없다 라는 것이었다. 약 15개의 컴포넌트와 12개의 섹션과 3개의 페 wonit.tistory.com 프로젝트 중간 리팩토링 과정에서 css 전역화를 하고 싶어졌다. 현재 CSS 관련해서는. css, styled-component, props로 넘기는 3가지 방식을 사용하고 있었기 때문에 첫 번째 시도에는 아래와 같은 방식으로 3가지 파트에서 전역화 시키려고 했었다. . css → className화 styled-component → ThemeProvider props → Object 상태에.. 2023. 1. 6. 이전 1 2 3 4 5 ··· 10 다음 728x90
