Utils (12) 썸네일형 리스트형 WebSocket 구현하기(feat. Spring Framework) | JAVA WebSocket 구현하기 feat. Spring Framework실시간 수신 알림, 방문자 수 등 적은 데이터를 업데이트하는데 화면 전체를 새로고침하는 것은 비효율적입니다.채팅 등 기존 데이터에 추가되는 형식의 서비스는 더더욱 그렇겠죠. WebSocket을 사용하여 실시간으로 갱신된 데이터를 조회하는 로직을 구현해봅시다.프로젝트 환경FrameworkLanguageBuild ToolSpring Framework 5.1.8.RELEASEJAVAMaven 사전 지식WebSocket 웹소켓단일 TCP 연결로 동시에 양방향 소통을 지원하는 통신 프로토콜입니다.HTTP와는 다르지만, HTTP가 사용하는 443, 80 포트에서 동작하도록 설계되어 HTTP와 호환됩니다.WebSocket handshake는 HTTP .. 엑셀에 데이터 입력하기 - DB 명세서 엑셀 자동화 (3) | Python 파이썬으로 DB 명세서 엑셀 자동화하기 (3) - 엑셀에 데이터 입력하기획득한 데이터들을 엑셀에 입력합니다.라이브러리파이썬에서 엑셀 파일에 접근하여 작업할 수 있게 해주는 라이브러리를 설치합니다.openpyxlhttps://openpyxl.readthedocs.io/pip install openpyxl엑셀 파일 생성엑셀 파일을 생성하고 작업할 시트를 선택합니다.from openpyxl import Workbookwb = Workbook() # 신규 엑셀파일 생성sheet = wb.active # 활성 시트 데이터 입력실제로 엑셀에 데이터를 입력해봅시다.데이터는 행 단위로 각 셀에 입력될 데이터를 배열로 전달합니다.이렇게 데이터를 입력한다면,테이블명테이블스페이스이렇게 배열로 전달합니다.["테이블명", ".. 테이블, 컬럼 정보 조회하기 - DB 명세서 엑셀 자동화 (2) | Python 파이썬으로 DB 명세서 엑셀 자동화하기 (2) - 테이블 정보, 컬럼 정보 조회하기 DB에 접근하여 테이블 정보, 컬럼 정보를 조회합니다.테이블명 리스트 조회테이블명 리스트를 조회하는 SQL을 작성하여 실행합니다.# MySQLsql = f"""SELECT TABLES FROM {schema}"""# Oraclesql = f""" SELECT * FROM ALL_TABLES AT LEFT JOIN ALL_TAB_COMMENTS ATC ON AT.TABLE_NAME = ATC.TABLE_NAME AND AT.OWNER = '{DbConfig.USER}' """# 쿼리 실행cursor.execute(sql)tables = cursor.fetchall() 테이블 정보 조회조회한 테이블명으.. DB 접속하기 - DB 명세서 엑셀 자동화 (1) | Python 파이썬으로 DB 명세서 엑셀 자동화하기 (1) - DB 접속하기 이미 운영되고 있는 서비스의 DB 명세서를 작성하려면 엄청난 시간이 들어갑니다 😢DB에 접속하여 테이블 정보를 검색한 뒤 엑셀로 저장하는 프로그램을 작성해봅니다.라이브러리사용하는 DBMS에 맞는 라이브러리를 사용합니다.MySQLPyMySQL https://github.com/PyMySQL/PyMySQLOraclecx_Oracle https://cx-oracle.readthedocs.io/en/latest/user_guide/installation.htmlDB 접속정보 정의class DbConfig: HOST = "192.168.xxx.xxx" PORT = 1234 USER = "user" PASSWORD = "passwor.. IntersectionObserver를 이용한 scroll detector | Javascript IntersectionObserver를 사용하여 스크롤 이동 감지기를 만들어봅니다.IntersectionObserver타겟 요소가 화면에 표시되거나 숨겨지는(뷰포트에 보이거나 사라지는) 이벤트를 감지하여 특정 동작(메소드)를 실행합니다.요소가 표시/숨겨지는 기준 비율(0.0~1.0)을 설정할 수 있습니다.0 : 1px이라도 보이면 invoke1 : 요소 전체가 보여지면 invoke 생성하기new 키워드를 사용하여 IntersectionObserver 객체를 생성합니다.const io = new IntersectionObserver(callbackFn, options); callbackFn function타겟 요소가 보이거나 숨겨질 때 실행될 동작(메소드)입니다.param1 IntersectionObser.. 랜덤 숫자 롤링 후 앞자리부터 맞추는 숫자 롤링 카운터 만들기 | HTML, Javascript, jQuery 랜덤 숫자 n번 롤링 후 앞자리부터 맞추는 숫자 롤링 카운터 만들기 - 숫자 롤링 카운터 (3) 각 자릿수가 랜덤 숫자로 n번 롤링 후 첫 번째 자리부터 맞추는 롤링을 구현해 보겠습니다. EnvironmentHTMLJavascriptThirdpartyjQuery구현▪️퍼블리싱숫자가 표시될 요소를 생성합니다. ▪️기능변수 정의사용할 변수를 정의합니다.const jqEl = $("#cnt"); // 숫자 표시할 요소const targetNum = 128374838; // 표시할 타겟 숫자const strNum = targetNum.toString(); // 타겟 숫자의 string 타입const targetNumLen = strNum.length; // 타겟 숫자 자릿수const LOOP_RANDOM_CNT.. 각 자릿수별로 1씩 증가하는 숫자 롤링 카운터 만들기 | HTML, Javascript, jQuery 각 자릿수별로 1씩 증가하는 숫자 롤링 카운터 만들기 - 숫자 롤링 카운터 (2)0부터 1씩 증가하는 롤링에 이어 각 자릿수별로 1씩 증가하는 롤링을 구현해 보겠습니다. EnvironmentHTMLJavascriptThirdpartyjquery구현▪️퍼블리싱숫자가 표시될 요소를 생성합니다. ▪️기능반복해서 사용할 데이터들을 변수 정의합니다.const jqEl = $("#cnt"); // 숫자 표시할 요소const targetNum = 10; // 표시할 최종 숫자const strNum = targetNum.toString(); // 숫자 데이터 타입 stringconst targetNumLen = strNum.length; // 숫자 자릿수 각 자리에 표시할 데이터각 자릿에 표시할 데이터를 배열로 관리합.. 0부터 1씩 증가하는 숫자 롤링 카운터 만들기 | HTML, Javascript, jQuery 0부터 1씩 증가하는 숫자 롤링 카운터 만들기 - 숫자 롤링 카운터 (1)어떤 회원수나 구매 수량 등 강조하고 싶은 숫자를 표시할 때 사용자의 시선을 사로잡기 위해 애니메이션을 사용하죠.그 중 0부터 1씩 증가하다가 표시할 최종 숫자를 보여주는 애니메이션을 구현해 보겠습니다. EnvironmentHTMLJavascriptThirdpartyjquery구현▪️퍼블리싱숫자가 표시될 요소를 생성합니다. ▪️기능본격적으로 개발하기 전, 중복하여 사용하는 데이터들은 미리 변수로 정의하는 습관을 들이면 좋겠습니다.const targetNum = 10; // 표시할 최종 숫자const jqEl = $("#cnt"); // 숫자 표시할 요소 0부터 1씩 증가0부터 최종 숫자에 도달할 때까지 1씩 증가하는 반복문을 작성합.. Timer(타이머) 구현하기 | HTML, Javascript, jQuery Timer(타이머) 구현하기EnvironmentHTMLJavascriptSCSSThirdpartyjquery구현▪️ 퍼블리싱타이머가 그려질 요소를 생성합니다. ▪️ 기능남은 시간현재 시간을 기준으로 목표 시간까지 남은 시간을 초 단위로 계산합니다.Date 객체의 valueOf() 메소드로 시간의 millisecond 값을 비교한 후 1000으로 나누어 second 단위로 변환합니다.const goal = "2024-12-25"; // 목표 시간// 목표 시간과 현재 시간의 차(초)let remain = Math.floor((new Date(goal).valueOf() - new Date().valueOf()) / 1000); 초 > 일 시 분 초(ddhhmmss) 변환구한 초 단위의 남은 시간을 일시분.. 초 단위 시간을 일시분초(ddhhmmss) 단위로 변환하기 | Javascript 초 단위의 시간을 일시분초(ddhhmmss) 단위로 변환하기 초 단위 시간 time을 nn일 nn시 nn분 nn초로 변환해 봅니다.일1일을 초 단위로 표현한다면 이렇게 표현할 수 있겠죠.1 * 60 * 60 * 24time을 1일로 나눈 몫이 nn일이 됩니다.💡 Javascript의 나눗셈 연산은 실수 나눗셈이므로 Math.floor() 메소드로 소수점 아래를 버림합니다.day = Math.floor(time / (1 * 60 * 60 * 24)) 시1시간은1 * 60 * 60time에서 위에서 구한 nn일의 초 단위 시간을 제외한 시간을 1시간으로 나눈 몫이 hh이 됩니다.hour = Math.floor((time - (day * 1 * 60 * 60 * 24)) / (1 * 60 * 60)) 분마.. Custom Tab(탭) 컴포넌트 구현하기 | HTML, Javascript, jQuery 라이브러리 없이 tab(탭) 컴포넌트 구현하기UI 라이브러리를 사용하지 않고 나만의 custom 탭 컴포넌트를 구현해 보겠습니다.EnvironmentHTMLJavascriptSCSSThirdpartyjquery설계구현할 탭의 구조는 아래 그림을 참고해 주세요.tab 컴포넌트라고 정의하여 wrap 합니다. ▪️head영역사용자가 클릭할 수 있는 tab의 제목 영역입니다.제목 요소들은 성질이 같으므로 리스트라고 생각할 수 있습니다.현재 보이고 있는 panel에 따라 head에 선택되었다는 식별자 인디케이터를 통해 구분할 수 있도록 합니다. ▪️ panel 영역tab의 내용이 구현되는 영역입니다.최초 진입 시 첫 번째 panel을 제외한 요소들은 숨김 처리합니다.사용자의 head click 동작을 통해 각 .. Custom Accordion(아코디언) 컴포넌트 구현하기 | HTML, Javascript, jQuery 라이브러리 없이 accordion(아코디언) 컴포넌트 구현하기 UI 라이브러리를 사용하지 않고 나만의 custom 아코디언 컴포넌트를 구현해 보겠습니다.EnvironmentHTMLJavascriptSCSSThirdpartyjqueryfontawesome설계 구현할 아코디언의 구조는 아래와 같습니다. accordion 컴포넌트라고 정의하여 wrap 합니다. ▪️head 영역아코디언 전체의 제목입니다. ▪️ body 영역실제 아코디언이 구현될 wrap입니다.아코디언에 포함되는 각 item은 성질이 같은 리스트의 개념으로 생각합니다.제목 영역은 항상 보이는 요소이며, 내용 영역은 기본 숨김 처리되고 사용자가 toggle 버튼을 클릭함으로써 보이거나 숨겨집니다.내용 영역은 없는 경우도 있으며, 내용 영역이 있.. 이전 1 다음
