Javascript
자동으로 전환되는 탭 + 탭 클릭시 변경되는 이미지, 문구, a태그
클라이언트 요청사항좌측의 탭을 누르면 우측 이미지, 하단 문구, 버튼 링크가 변경되게 해주세요. ✅ 구현 화면 ✔️ 좌측 탭을 누르면 우측 이미지 / 하단 문구 / 버튼 링크가 변경된다.✔️ 7초마다 다음 탭이 active된다.✔️ 사용자가 탭을 누르면, 자동으로 전환되던 건 멈춘다. ✅ 코드 {#title} {#text_1} {#imgTag_1} {#html} {#link_1} ..
〰️ 모바일 브라우저에서 띠 배너의 내용이 길어서 잘리는 경우, 흐르는 애니메이션 추가
ASIS TOBE 🚨 문제상황상단의 띠배너 내용이 브라우저 크기보다 길어서 내용이 ...처리되는 이슈가 있었다.지하철 안내 전광판 처럼 글자가 흐르도록 하길 원한다는 클라이언트의 요청. ✅ 해결 방법 ✔️ 내부의 글자 길이가 브라우저 너비보다 긴 경우, 흐르는 애니메이션이 작동되도록 했다.✔️ 애니메이션 실행시, 글자가 반복되어야 길게 - 끊이지 않게 진행되기에 cloneNode를 활용해 문구를 복사해줬다.✔️ 브라우저 크기가 커져 애니메이션이 필요 없어지면, 복사해준 cloneNode는 지워주었다. {#title}
🎲 embed youtube 여러개 영상 이어서 + 랜덤하게 재생하기 (embed youtube playlist random play)
클라이언트 요청사항- 여러 개의 유튜브 영상이 랜덤한 순서로 연이어서 자동재생 되면 좋겠어요. ✅ 구현 화면 3개의 각각 다른 영상이 랜덤한 순서로 연이어 재생된다.손현주 아저씨 - 마시는 화이바 - 여성등장 영상 이렇게 세개의 영상이 랜덤한 규칙성을 가지고 재생된다.이때, 한차례 영상이 다 재생되고 처음으로 돌아올때 같은 영상이 또 재생되지 않도록 한다. 👩🏻💻 구현 코드
[카페24] 맨 위로 / 맨아래로 부드럽게 이동
구현화면 레이아웃 kakao 로고 스타일시트 #quick_nav .quick_nav_inner { position: fixed; right: 12px; bottom: 25px; z-index: 999; display: flex; flex-direction: column; } #quick_nav .quick_nav_inner { opacity: 0; visibility: hidden; transition: opacity 0.5s; } #quick_nav.show .quick_nav_inner { opacity: 1; visibility: visible; } #quick_nav .quick_nav_inner, #quick_nav .updown { gap: 5px; } #quick_nav .roundBtn {..
web 카카오톡 공유하기 버튼 추가 (javascript 클라이언트 키발급 가이드)
1. 카카오 디벨로퍼 접속 https://developers.kakao.com/ Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. developers.kakao.com 2. 로그인 후, 상단 > 내 애플리케이션 클릭 [애플리케이션 추가하기] 클릭 3. 모달 내용 입력 앱 아이콘과 앱 이름은 카카오톡 공유하기 채팅창에서 하단에 노출된다. 4. 생성된 애플리케이션 클릭 > 좌측 요약정보 > 하단 플랫폼 > 플랫폼 설정하기 클릭 5. web플랫폼 등록 버튼 클릭 6. 모달 작성 공유하기 기능을 테스트할 사이트를 적는다 구분은 줄바꿈으로 한다. 맨 위는 대표 주소를 적어준다. 7. Java..
[React/Redux] 🛡 immer으로 배열 내 특정 값 변경하기 (불변성 절대 지켜!)
제로초의 Nodebird 강의 중, immer 라이브러리를 사용해보았다. find 함수와 immer을 함께 사용했을때 신기한 경험을 해서 기록해둔다. immer란? reduce state 불변성을 지켜주는 편리한 라이브러리다. 목표 post.mainPosts 배열에서 특정 id를 가진 값을 찾아, post.mainPosts[index].Comments배열에 값을 추가하려고 한다. const reducer = (state = initialState, action) => produce(state, draft => { switch (action.type) { case ADD_COMMENT_SUCCESS: { const post = draft.mainPosts.find(v => v.id === action.da..
[React/antd] react-hook-form의 reset() 함수 작동하지 않을때
혹시 antd form을 사용 중이라면 이 글에서 답을 찾을 수 있다. 아니라면 다른 글로.. bye ❌ 문제 상황 게시글이 작성완료되었을때, 게시글 작성 textarea의 값이 초기화되도록 한다. 하지만, react-hook-form에서 제공하는 reset() 함수가 작동하지 않음 😅 문제 코드 import { InboxOutlined, UploadOutlined } from '@ant-design/icons'; import { Button, Form, Input, Space, Upload } from 'antd'; import { useDispatch, useSelector } from 'react-redux'; import { addPostRequest } from '../reducers/post'..
[React/Tailwind] 🌲 tailwind 변수 className로 css적용 안될 때 / 다이나믹 값 (tailwind 트리쉐이킹)
🤦♂️ 문제상황 tailwind 사용중, class를 변수로 넣었는데 class는 정상적으로 render되었지만, css가 적용되지 않았다. isUser 에 따라 top값이 다르게 계산되어 출력되길 원함 ✅ 해결 기본적으로 Tailwind는 화면에서 사용한다고 인식되는 class의 css를 랜더한다. 이것이 tailwind의 tree-shaking기능이다. (관련링크) 즉, Tailwind는 top-[117px]을 인식하지 못했다는 의미 다이나믹 class를 Tailwind가 올바르게 인식하게 하기 위해선 몇가지 규칙을 지켜야 한다. (관련 링크) 1. class명을 온전히 리턴값으로 가져야 한다. ❌ 문자열 연결을 통해 클래스를 만들지 않는다. ✅ 완전한 클래스 이름을 동적으로 만든다. 2. 임의 값..
[Javascript] 🍪 Remove Cookie not working : 쿠키가 삭제되지 않을 때
🚨 문제 상황 react url을 작성해서 접속한 페이지에서 Vanilla Javascript로 작상한 remove cookie가 작동되지 않음 그런데 또 다른데서는 문제없이 됨..🤦♂️ //useCookieStorage.ts export const useCookieStorage = { setCookie: (name: string, value: string, exp: number) => { let date = new Date(); date.setTime(date.getTime() + exp * 24 * 60 * 60 * 1000); document.cookie = name + '=' + value + ';expires=' + date.toUTCString() + ';path=/'; }, getCooki..
[React] 🧭 Router useMatch 사용법 - component에서 router path형식 비교하기
react-router-dom 버전 6에서는 matchPath 함수가 제거되었다. 대신, 매치 정보를 얻기 위해 useMatch 훅을 사용할 수 있다. useMatch 훅은 현재 경로와 지정된 경로 패턴을 비교하여 매치 여부를 확인하고, 매치된 정보를 반환한다. 사용법 import { useLocation, useMatch } from 'react-router-dom'; function MyComponent() { const location = useLocation(); const match = useMatch('/myroute'); useEffect(() => { const routePath = match ? match.path : ''; console.log(routePath); // path pro..