홈페이지를 방문하다 보면 왼쪽이나 오른쪽에 따라다니는 배너 등을 볼 수 있습니다. 예전에는 제이쿼리(jquery)로 많이 구현했는데 이번에 한번 순수 자바스크립트로 바꿔 보겠습니다. Top Home Login Join html, css는 컴퓨터에 모아둔 코드 조금 수정해서 적었습니다. 이 부분이 jquery 스크롤 플로팅 배너 코드입니다. 이렇게 화면에서 스크롤을 움직이면 저 오른쪽에 있는 메뉴들이 따라다니는 기능입니다. 이 코드를 순수 자바스크립트로 바꿔보겠습니다. const quick_scroll = (function() { const quickmenu_sub = document.getElementById('quickmenu_sub'); const current_position = quickmenu_..

제이쿼리(jquery)로 작성된 코드를 바닐라 자바스크립트(vanilla javascript)로 바꿔보기입니다. 바닐라 자바스크립트는 프레임워크 또는 라이브러리가 적용되지 않은 순수 자바스크립트를 말합니다. 아래처럼 제이쿼리로 작성한 클릭 토글 코드가 있습니다. 해당 예시는 다국어 홈페이지 언어 클릭 시 나라별 메뉴가 보이고, 다시 클릭했을 때 안 보이게 하는 예시입니다. 이 코드를 아래처럼 순수 자바스크립트로 바꿔봤습니다. 변수명은 습관이니 이해해 주시기 바랍니다. 코드 안에 주석으로 설명 적어 놨습니다. 사실 코드는 제이쿼리가 짧고 워낙 익숙해진 터라 더 편하지만, 예전처럼 크로스 브라우징 이슈가 적어지고 무겁다는 이유 등으로 지양하는 추세입니다. 몇 개월 전 프로젝트 작업할 때 제이쿼리 사용 안 하..

시놀로지(Synology) 나스에 웹스테이션으로 계정 생성 방법입니다. 이미 웹 호스팅 운영을 위한 세팅이 완료된 상태에서 이 글을 읽어주세요. 먼저 파일스테이션을 클릭 후 web 폴더로 이동합니다. web 폴더에 생성할 계정 폴더를 만들고 해당 폴더 안에 www 또는 public_html 폴더를 생성합니다. ssh를 통한 계정 백업이 필요 없다면 www, public_html 폴더 생성 안 해도 됩니다. 폴더 생성 후 웹스테이션을 실행합니다. 왼쪽 메뉴 중 웹 포털을 클릭 한 다음 포털 유형으로 웹 서비스 포털 선택 새 웹 서비스 만들기 클릭 후 원하는 서비스 유형을 선택하면 됩니다. 저는 기본 스크립트 언어 웹사이트로 하고 먼저 설치해 둔 php 버전을 선택했습니다. 그다음 화면에서 이름, 설명 적은..

꽤 오래전에 구입한 도서를 참고해서 만들고 사용한 코드인데, 책 제목은 생각이 안 나네요. 몇 해 전부터 jquery 같은 JS 플러그인 보단 순정(바닐라) javascript 가 인기를 끌고 있지만, 케케묵은 코드 공개해 봅니다. 실무에 여러 번 사용했던 코드지만 검증해 보고 사용해 보세요. 1. css style입니다. 2. html 부분입니다. lt_tab_01 lt_tab_02 asdfas 121212 3. 자바스크립트 - jquery 부분입니다. 문서 상단에 jquery js를 불러와야 정상 작동됩니다. tabs 함수는 탭 형태로 만들어 주고, tabs_rolling 함수는 탭 자동 롤링 기능입니다. 표기법(네이밍)은 프로그래밍 언어 다양하게 공부하다 보니 짬뽕으로 되어 있네요~;; 요즘은 그냥..

웹 관련 작업을 하다 보면 특정 단어를 포함하는 파일 찾을 경우가 생깁니다. 파일 탐색기 설정을 변경하면 검색이 가능하지만 사용해 본 결과 많이 느렸고, 방법을 생각해 보다가 비주얼스튜디오(VSCODE)에 터미널이 있지!라고 생각났습니다. VSCODE 터미널은 ssh로 서버에 접속할 일만 있어서 생각지 못했답니다. 터미널을 열어봅니다. 이미지는 리눅스에 설치된 VSCODE 터미널입니다. 집에는 리눅스만 사용하기에 grep에 익숙해져 있습니다. 윈도우에서 터미널을 실행한 다음, grep 이 너무 익숙해서 너무도 당당하게 grep -r "test" ./* 를 입력해보니.. 당연히 될 리가 없습니다. findstr /n /s "찾을단어" ./* 로 해보니 되는데 파일 내용에 한글이 있으면 에러가 뜹니다. ut..

얼마 전 대관 신청 프로그램을 만들어야 했는데, 때마침 인공지능(AI) 챗봇에 관심 생겨 이것저것 찾아보는 중이었습니다. 대관 시간대 선택에 따라 금액이 곱하기 2가 되는 것이 아니고, 특정 구간은 반값 추가 그리고 또 다른 조건일 경우 기본 금액이 추가되는 등 조금 복잡한 코드를 짜야 되는데 호기심에 한번 챗봇에 기대어 보기로 했습니다. ChatGPT 3.5는 작년부터 사용했고, 구글 제미니(Gemini), 모니카(Monica) 등을 사용해 봤습니다. 먼저, ChatGPT 3.5는 제대로 된 코드를 얻기 어려웠고, 모니카 역시 아쉬운 점이 많았습니다. 그다음으로 제미니를 사용해 봤습니다. 처음 질문의 답변이 부족해서 조금씩 질문을 고치고, 수정해서 물어봤습니다. 별도 페이지에서 실행해 보니 대략 맞는 ..