프론트엔드 개발 찔찔이

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

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

들어가며담당하고 있는 홈페이지에서 사용하고 있는 폰트가 한자를 호환하지 않는 오류가 있었다.한자를 사용하면 빈칸으로 나오거나 ?로 나오는 오류를 수정해보자. 먼저 한자를 추출하고, 다른 폰트 스타일이 적용된 span태그로 묶을 것이다. 이때 무엇인가 추출하는 메서드에 match와 includes가 있다. match 메서드정규 표현식을 사용하여 복잡한 패턴을 찾을 때 사용한다.찾은 패턴이 있으면 일치하는 배열을 반환하고, 없으면 null을 반환한다.includes 메서드문자열이 포함되어 있는지 간단히 확인할 때 사용한다.문자열이 표함되어 있으면 true, 없으면 false를 반환한다. includes 메서드는 정확하게 어떤 한자를 쓸지를 적어야하지만 match 메서드는 정규 표현식을 사용해서 어디에 뭐가 ..