프론트엔드 개발 찔찔이

들어가며코드 작업을 하다보면 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..

input 태그를 컴포넌트화하여 form 섹션 안에 포함시키려고 한다.각각의 input 컴포넌트 value값을 가져와서 부모 컴포넌트에서 사용하려면 어떻게 해야할까?  원래는 자식 컴포넌트에서 emit으로 value값을 부모한테 보내고 부모는 그 value값을 가져오는 과정을 거쳐야하지만,defineModel을 이용하면 다른 함수 없이 바로 value값을 가져올 수 있다. 자식 컴포넌트#inputText.vue  부모 컴포넌트  이렇게하면 부모 컴포넌트에 있는 변수 title에 InputText 컴포넌트에서 input 태그에 입력한 value값이 저장된다.  radio나 select input도 가져올 수 있다. input[type="radio"] # inputRadio.vue {..