moonStory

슬라이드 배너를 만들 때 보통 swiper API를 많이 사용하는데 프로젝트를 진행하던 중 오류를 발견했다. 배너의 각 슬라이드를 클릭하면 url 이동을 해야 하는데 autoplay loop로 스와이퍼가 돌 경우 첫번 째 슬라이드로 이동하면 딱 그 첫번 째 슬라이드만 url 이동이 되지 않는다. HTML에 클릭 이벤트를 주어 이동하도록 하였다. 서치를 해보니까 스와이퍼 깃허브 오류에 해당 오류가 많이 공유되고 있음을 확인했다. 하지만 명확한 해결 방안이 없었다. 내가 해결한 방법은 스와이퍼 내부의 click이벤트를 사용하는 것이다. swiperOptions = { slidesPerView: 1, spaceBetween: 16, autoplay: { delay: 3000, disableOnInteracti..

안녕하세요? 잘 부탁드립니다!! 안녕하세요? 잘 부탁드립니다!! .slide-text-wrapper { .slide-container { overflow: hidden; .slide-wrapper { display: flex; flex-wrap: nowrap; } .slide { display: flex; align-items: center; flex-wrap: nowrap; position: relative; &.original { animation: 18s linear infinite normal none running infiniteAnimation1; } &.clone { animation: 18s linear infinite infiniteAnimation2; } li { margin: 0 1...

백엔드가 따로 없고 firebase를 사용한다면 Firebase Database만으로 앱/웹을 구현하기 힘든 상황이 있다. firebase에서는 functions를 제공하는데 이는 백엔드 코드를 작성하고 트리거할 수 있도록 해주는 프레임워크이다. functions를 사용하기 위해서는 blaze로 요금 업그레이드를 해야한다. https://firebase.google.com/docs/functions?authuser=0&hl=ko Firebase용 Cloud Functions | Cloud Functions for Firebase Firebase용 Cloud Functions는 Firebase 기능과 HTTPS 요청에 의해 트리거되는 이벤트에 응답하여 백엔드 코드를 자동으로 실행할 수 있는 서버리스 프레임..

네이버 맵을 사용하려다가 네이버는 이제 장소 검색 API를 제공하지 않아서 카카오 맵으로 변경했다. 카카오 API를 사용하기 위해서는 먼저 kakao Devalopers에서 앱 키를 발급받아야 한다. 앱 키 발급 방법은 아래 링크에 정리해 두었다. https://ans3094.tistory.com/6 카카오 디벨로퍼(kakao developer) API key 발급받기 https://developers.kakao.com/ Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. developers.kakao.com 카카오 d ans3094.tistory.com 장소 검색 API를 사용하려면 ..

https://developers.kakao.com/ Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. developers.kakao.com 카카오 developer에 들어가서 [시작하기]를 클릭하면 내 애플리케이션을 추가할 수 있는 페이지로 이동된다. [애플리케이션 추가하기] 클릭 ! 앱 이름과 사업자명을 입력한 후에 체크박스 체크하고 저장하면 애플리케이션이 추가된다. 추가된 애플리케이션을 누르면 이렇게 앱키가 발급된 것을 볼 수 있다. 발급된 앱 키를 가지고 카카오에서 제공하는 API들을 사용할 수 있다.

회사에서 약 한달 간 리액트 스터디 겸 앱/웹 프로젝트를 만들기로 하였다. (Angular를 사용하고 있는 우리...) 그래서! 앵귤러에서 라이프사이클을 사용하는 것처럼 react에서 사용하는 훅들을 정리해보려고 한다. 기본 HookuseStateconst [state, setState] = useState(initialState);상태 관리를 위한 훅으로 상태 유지 값과 그 값을 갱신하는 함수를 반환한다. setState함수는 state를 갱신할 때 사용하는 함수 useEffectuseEffect(function, deps);라이프 사이클 관련 작업을 처리하는 훅. 컴포넌트가 렌더링 될 때마다 함수를 실행한다. 컴포넌트가 마운트되었을 때, 업데이트되었을 때, 언마운트되었을 때 등의 상황에서 원하는 동작..

웹프로젝트 작업을 진행하던 중 데이터를 저장할 때 한 페이지에서 완료 버튼을 눌러 저장하는 방식이 아닌 [다음] -> [다음] -> [다음] 버튼을 눌러서 데이터를 작성하고 마지막 페이지에서 [저장] 하는 방식의 기획이 있었다. 그런 방식의 문제점이 사용자가 뒤로가기를 할 경우에 이전 페이지에서 input에 입력했던 데이터가 사라진다는 것이였다. 특정 프로세스를 진행 중이거나 보기에 저장되지 않은 변경 사항이 있을 때 다른 페이지로 이동을 할 때 이동하기 전에 진행 중인 프로세스가 취소되거나 진행할 경우 변경 사항이 삭제된다는 사실을 사용자에게 알려야 한다. 이 문제를 해결하기 위해 뒤로가기 이벤트가 발생할 경우 '이 페이지를 나갈 경우에 입력한 데이터가 삭제되고 첫 페이지로 이동합니다.' 라는 안내 메..

이전에 퍼블리싱 취업 준비를 할 때 카페24로 호스팅했던 반응형 웹사이트가 호스팅 만료가 돼서 무료로 호스팅을 할 수 있는 Github pages로 호스팅을 해보려고 한다. 먼저, 깃허브에 새 리포지토리를 생성해서 작업한 내용을 push해준다. 배포를 할 리포지토리에 들어가서 settings -> pages에 들어간다.Branch main으로 변경하고 Save를 해준다. 배포된 url 형식은 '깃허브 아이디'.github.io/'Repository 이름' 으로 생성이 된다. url로 들어가면 작업한 내용의 사이트가 배포된 것을 확인할 수 있다.