- HTML에서 엔터 키 입력 시 특정 함수 실행하기HTML에서 키보드 이벤트를 처리하고자 할 때, 일반적으로 JavaScript를 사용하여 이벤트를 처리하며 onkeyup 이벤트 핸들러를 사용하여 엔터 키가 눌렸을 때 동작하도록 할 수 있다.아래는 해당 기능을 구현한 예시다. - 테스트 코드 " data-ke-type="html">HTML 삽입미리보기할 수 없는 소스

- 식당 메뉴판 만들기 (feat. CORS의 늪에 빠지다.) 회사 근처에는 '밥플러스'라는 한식뷔페가 있다. 정말 맛있다. 이 곳은 약 6개의 지점을 운영하는데 블로그에 메뉴판을 게시하기에 그 메뉴판을 한 곳에 모으는 페이지를 만들어보려고 했다..🥲 밥플러스 2호점(메타모르포점) 오늘의 메뉴 밥플러스 2호점(메타모르포점) 석식은 운영하지 않습니다. 메타모르포점 셀프도시락은 종료되었습니다. | ... blog.naver.com - axios를 활용한 스크랩핑 온전히 Web에서만 동작하도록 만들려고 했었다. 이에 JavaScript의 axios를 사용했다. 처음엔 매우 순조로웠다. 그러나.. // 지정된 ID를 가진 유저에 대한 요청 axios.get('http://naver.com') .then(func..

- 긴 문자열을 6자리 해시로 변환하기 JavaScript에서 긴 문자열을 6자리 해시로 변환하는 방법 중 하나는 SHA-256 등의 안전한 해시 알고리즘을 사용하고 그 결과를 base64 또는 다른 방법으로 인코딩하는 것이다. 하지만 SHA-256은 256비트의 해시 값을 생성하기 때문에 6자리 해시를 얻기 위해서는 이를 잘라야 하고, 이는 보안에 취약할 수 있다. 이번 글에서는 CRC32라는 테이블을 만들어 긴 문자열을 6자리 해시로 줄여볼 것이다. 그러나 이는 충돌 가능성이 있으며 보안적으로 안전하진 않아 간단한 문자열 체크섬 또는 일부 문자열 검증 용도로 사용하면 좋다. // CRC32 테이블 생성 const crcTable = new Uint32Array(256); for (let i = 0; ..

- 자바스크립트로 복사하기 버튼 만들기 아래 코드는 버튼을 클릭하면 입력된 텍스트를 클립보드에 복사하는 예제이다. 이 코드를 사용하면 'textToCopy'라는 ID를 가진 요소 안에 있는 텍스트를 복사한다. 클립보드에 복사된 후에는 경고 창으로 "Text copied to clipboard"와 함께 복사된 텍스트가 표시된다. - index.html Copy Text - copyButton.js // 버튼 요소 가져오기 const copyButton = document.getElementById('copyButton'); // 버튼에 클릭 이벤트 리스너 추가 copyButton.addEventListener('click', function() { // 복사할 텍스트를 가져오기 const textToCop..

- 도서 서평 도서 서평 내용 이 책은 SPA와 REST API 서버를 개발하는 과정을 실제 실무 코드와 함께 다루어, 프런트엔드 개발자로써 필수적인 기술을 습득할 수 있도록 도와준다. 타입스크립트 기반의 리액트 프로그래밍은 현대적인 웹 개발에서 매우 중요한 위치를 차지하고 있는데, 이 책은 그러한 추세를 반영하여 타입스크립트와 리액트를 함께 학습할 수 있는 효과적인 방법을 제시한다. 리액트 훅, 리덕스, 라우팅 등의 핵심 개념부터 테일윈드CSS를 활용한 스타일링까지 포괄적으로 다루면서, 초보자부터 숙련자까지 모두가 이해하기 쉽도록 설명되어 있다. 뿐만 아니라, 오류를 방지하고 성능을 향상시키는 최적화 기법과 타입스크립트의 글로벌 수준 코드 패턴에 대한 이해도 높일 수 있었고 이러한 내용을 토대로 프로젝..