프론트엔드 개발 찔찔이

들어가며영화 예매나 인터넷 쇼핑을 할 때,옵션을 선택한 상태로 결제하기를 누르면 "이미 예약한 좌석입니다" 또는 "해당 상품이 품절되었습니다." 라는 알럿창을 본적이 있을 것이다. 알럿창을 닫으면 새로고침되어 품절 상태를 업데이트하는 방법이 있고, 새로고침 없이 바로 품절 상태가 업데이트 되는 방법이 있는데그 중 새로고침 없이 바로 품절 상태가 업데이트 되는 코드를 구현해보고자 한다.내가 진행한 프로젝트에서는 그룹 1의 사은품과 사이즈, 그룹 2의 사은품과 사이즈 등등.. 여러 사은품을 골라서 결제하는 페이지 개발 작업이 있었다.즉 그룹사은품[].상품[].사이즈[] 3중 배열의 데이터를 사용해 상품을 나열했다. 이 코드를 구현하면서 가장 고민했던 부분은 버튼을 어떻게 업데이트할지에 대한 방식이었다...

들어가며코드 작업을 하다보면 ChatGPT나 Copilot 같은 AI(인공지능)를 활용할 때가 많은데, 처음부터 끝까지 AI 만을 이용해 기능을 만드는 바이브 코딩을 해보고 싶었다.바이브 코딩(Vibe Coding)이란, AI 언어 모델을 활용하여, 바이브(느낌)에 따라 코딩하는 방식을 말한다.AI가 "웹사이트에 들어갈 장바구니 기능을 만들어줘" 같은 자연어를 해석하여 코드를 생성하는 방식으로 진행된다. 가끔 구글이나 네이버에서 검색어를 입력할 때 영어로 잘못 입력해도 결과가 잘 나오는 경우가 있었다.영어->한글로 변환하여 검색하는 게 아닐까 하여 변환하는 기능만 바이브 코딩으로 구현하고자 했다.ChatGPT 프롬포트 입력(무료 버전) 자바스크립트를 이용해서 ㅎㅏㄴㄱㅡㄹ -> 한글로 변환하는 방법이 있을..

들어가며회사 프로젝트 내 dev 브랜치와 stage 브랜치의 싱크로율이 달라, stage 브랜치 기준으로 작업건을 체리픽하여 배포하는 작업이 필요했다.하여 아래처럼 한 브랜치에서 여러번 커밋 + 머지를 한 경우, 하나의 커밋으로 스쿼시하여 체리픽하면 운영 배포 관리에 유용할 수 있어 Git squash에 대해 알아봤다.💡 중요한 커밋들이 있는 브랜치라면 rebase전에 백업 브랜치를 생성하는 것을 추천  🍀 git 명령어- develop 브랜치에 머지하지 않은 브랜치 스쿼시(해당 브랜치 커밋만 스쿼시해줌)git rebase -i develop- 이미 develop 브랜치에 머지한 브랜치 스쿼시git rebase -i Head~합칠 커밋 갯수3개의 커밋을 합치고 싶다면 git rebase -i Head..

가계부 리스트를 필터링할 때, computed를 이용해서 변화값을 가져오고 필터링은 할 수 있지만새로고침하면 데이터가 다 날아가게 된다. 새로고침해도 데이터가 날아가지 않도록 검색 분류값들을 url 쿼리스트링에 저장하고, 쿼리스트링 값을 가져와서 리스트를 필터링해보려고 한다. Composition API 환경에서 router를 사용하려면 useRouter와 useRoute를 사용한다. url로 쿼리값 보내기 - router.push({query: value})  onMounted를 사용하여 새로고침해도 url의 쿼리스트링을 통해 검색이 가능하도록 한다.

router로 페이지를 이동하는 함수에는 세가지가 있다.· push  : URL 이동. 히스토리 스택에 추가된다. · replace  : URL 이동. 현재 페이지를 대체하므로 히스토리 스택에 추가되지 않는다. · go  : 히스토리 이동. 숫자만큼 앞, 뒤로 이동할 수 있다. $router.pushthis.$router.push('/') // URL로 이동this.$router.push({name: 'home'}) // /home 으로 이동this.$router.push({name: 'detail', params: {id: '001'} }) // /detail/001 로 이동this.$router.push({ path:'/list', query: { tag: 'vue' } }); // list?ta..

input type="date"를 통해 달력을 사용할 때, 사용자 경험을 향상시키기 위해 날짜 입력을 막는다.날짜 입력을 허용하면 임의로 날짜를 적용할 수 있기 때문.  그래서 input type="date"를 클릭하거나 포커스했을 때, 키보드로 바꿀 수 없고 선택만 가능하도록 해야한다. ref를 이용해 DOM에 접근하고, showPicker 메소드를 사용해 적용한다.이때 input 태그에는 click, focus 이벤트를 모두 적용한다.   결과

토글버튼으로 mute/unmute 제어하기유튜브 플레이어 API 공식문서🔈youtubePlayer01.unMute(); // 음소거 해제youtubePlayer01.mute(); // 음소거youtubePlayer01.isMute(); // 음소거 상태 확인(boolean타입)* isMute()는 사용시 오류가 있어서 사용하지 않고, 전역 변수를 만들어서 관리했다. 초기 세팅 var tag = document.createElement('script'); tag.src = "https://www.youtube.com/iframe_api"; var firstScriptTag = document.getElementsByTagName('script')[0]; ..

스크롤하다가 유튜브가 뷰포트에 들어오면 재생하는 함수 만들기 아래 유튜브 API에서 제공하는 메소드를 이용해서 재생을 제어한다. 유튜브 플레이어 API 공식문서youtubePlayer01.playVideo() //재생youtubePlayer01.pauseVideo() //정지youtubePlayer01.seekTo(8); // 8초부터 재생초기 세팅 var tag = document.createElement('script'); tag.src = "https://www.youtube.com/iframe_api"; var firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.p..

멈추지 않고 흐르는 슬라이드 만들기  💡 loopAdditionalSlides: 3 를 추가하면 마지막 슬라이드에서 버벅이거나 멈추는 현상이 방지된다. 멈추지 않고 흐르는 슬라이드 CSS.swiper-wrapper { transition-timing-function: linear !important;} 💡 해당 CSS를 반드시 넣어야 일정한 속도로 흐르게 된다.

input 태그에 정보를 적어서 넘길 때, 필수로 적어야하는 값을 아래처럼 텍스트로 표시를 해봤다. 입력할 때와 추가하기 버튼을 눌렀 때 활성화하려고 하는데 vee-validate 라이브러리를 사용했다.(vue3, composition API,  부모 컴포넌트  따로 ref로 value값을 지정해주지 않아도 value: title을 통해 v-model과 연결할 수 있다. errorMessage는 검사 함수에서 return할 문자열 메시지다. 이 메시지가 있냐 없냐 자체로 if문을 만들어 에러 메시지를 띄울 수 있다. validate 함수는 useField를 이용해서 함수명을 정하면 @blur나 콜백함수 어디에서나 불러올 수 있다. (위에선 validateTitle로 지정해봤다.)  const..