분류 전체보기

이번에 구현해 볼 것은 한글 타이핑 효과이다. 영어라면 글자 타이핑 효과를 css 애니메이션과 키프레임을 통해 나타낼 수도 있지만... 한글의 경우 타이핑 할 때 자음 모음 이런 게 조합되어서 나오다 보니 조금 부자연스럽다. (다음에는 css와 키프레임을 통해 표현하는 방법도 포스팅해 보겠다..) 그래서 조금 찾아보니 한글 타이핑을 구현한 라이브러리가 있었다. 자바스크립트로 되어있었고, 이걸 리액트에서 사용하기 위해서 useEffect를 활용해 코드를 완성해 보도록 하겠다. 아래의 사이트가 제작자의 사이트이다.https://sduck4.github.io/type-hangul/ type-hangul: ⌨️ 한글 타이핑 효과 라이브러리한글 두벌식 자판에서 한 글자씩 타이핑되는 과정을 보여줄 수 있는 라이브러..

리액트 라이브러리 중 framer motion이라는 라이브러리가 있다. 화면에서 다양한 애니메이션을 만들기 위해서 쌩으로 css와 스크립트를 짜서 구현하려면 복잡하다. 그러나 framer motion만 있다면 간단하게 구현이 가능하다. 이걸로 다양한 애니메이션을 구현할 수 있는데 그 중에서 우선 나는 스크롤을 할때 화면에서 글자가 점점 나타나도록 구현해 보도록 하겠다. 1. 설치하기npm을 통해 먼저 라이브러리를 설치해준다.npm i framer-motion 아래는 공식문서이며 어떻게 사용하는지 볼 수 있다.https://www.framer.com/motion/ Documentation | Framer for DevelopersAn open source, production-ready motion lib..

일을 하다 요청이 왔는데 요구사항은 다음과 같았다. 특정 데이터베이스에서 그룹별로 묶은 다음 합계를 구하는 것이 아니라 컬럼에 있는 값을 옆으로 쭉 나열해서 나타낸 데이터를 요구하였다.예를 들어 아래의 그림처럼 이름별로 가지고 있는 자격증을 쉼표로 구분하여 묶어서 표현한 데이터가 필요하다고 하였다.  STUFF와 FOR XML PATH 함수를 조합하여 사용하거나 STRING_AGG 함수를 사용하면 편리하게 나타낼 수 있다. 주의할 점은 STRING_AGG 함수는 SQL Server 2017 버전 이상부터 지원하므로 그 이하의 버전에서는 STUFF와 FOR XML PATH 함수를 사용하면 된다. 1. STUFF, FOR XML PATH 함수 사용먼저 버전이 낮은 경우 해당 함수를 사용하면 된다. STUFF..

union은 보통 컬럼의 개수와 데이터 형식이 동일한 서로다른 두개의 테이블을 select 쿼리 할때 하나로 합쳐주는 기능을 한다. 예를 들어 select * from table1 select * from table2를 하면 질의 결과 2개의 테이블이 따로 나오게 되지만 union을 사용하게 된다면 table1과 table2가 전부 결과에 나온다. 보통 union 함수를 사용하는 경우는 2개의 테이블의 모든 데이터를 보기위해서 할때 도 있지만 합계를 맨 아래쪽에 나타내기 위해서도 사용한다. 물론 Rollup이라는 함수가 있지만 해당 함수는 그룹으로 묶어서 보여주기 때문에 그룹으로 묶어서 나타내기 싫을 경우 union을 사용하면 된다. 1. UNION 과 UNION ALLunion함수는 그냥 union과 ..

자바스크립트를 이용해서 간단하게 토스트 팝업을 구현해 보도록 하겠다. 토스트 팝업은 버튼을 클릭하거나 액션을 취하면 알림창 처럼 팝업 화면이 작게 나오는 것이다. 아래 화면을 보면 저런 식으로 나온다. 해당 기능을 직접 구현 할 수도 있으나 잘 만들어 놓은 라이브러리가 있다. 그래서 그걸로 시간을 단축해서 사용해 보도록 하겠다. 1. Toastify.js 사용하기토스트 팝업을 구현하기 위해 Toastify.js라는 라이브러리를 사용할 것 이다. 아래의 사이트에서 어떻게 사용하는지 잘 알 수 있다. https://github.com/apvarun/toastify-js GitHub - apvarun/toastify-js: Pure JavaScript library for better notification ..

내가 원하는 지역의 지도를 화면에 표현해주고 싶어 React를 사용해 카카오 API를 연동해 보도록 하겠다. 1. kakaoDeveloper 사용하기먼저 아래의 사이트에 접속하여 로그인이 필요하다.https://developers.kakao.com/ Kakao Developers카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.developers.kakao.com1-1. 프로젝트 생성 및 플랫폼 등록로그인을 한 후 내 애플리케이션에 들어가 프로젝트를 하나 생성 해 준다. 나는 toy-pj라고 미리 생성해두었다. 그런 다음 왼쪽 메뉴에서 플랫폼에 들어가 Web 부분의 플랫폼을 등록해 주면 된다. 여기서 웹플랫폼에 정확..

만약에 테이블에서 행값을 컬럼으로 주고 그것에 해당하는 값들을 집계를 구하여 표현하고 싶다면 PIVOT 함수를 사용하면 된다. 아래의 예제를 살펴보자 1. PIVOT 함수 예제NAME이라는 열의 속성들을 컬럼으로 바꾸고 그것에 해당하는 ITEM1 값들을 그룹화하여 집계를 내는 예제이다. 위의 사진 처럼 표현하기 위해서는 PIVOT함수를 사용하면 쉽게 표현 할 수 있다. 2. PIVOT 함수 사용방법PIVOT을 사용하기 위해서는 아래의 코드를 작성하면 된다.SELECT * FROM (피벗할 쿼리) AS A PIVOT (집계함수(집계컬럼) FOR 피벗컬럼 IN ([피벗컬럼값]...)) AS B 코드를 살펴보도록 하자먼저 하위쿼리에 PIVOT함수를 적용한 쿼리를 작성하면 된다.그런다음 피벗에 필요한 쿼리를 작..

쿼리를 사용하다 보면 조건에 따라 필요한 데이터를 불러와야 할 때가 많다. 만약 내가 특정 조건에 따라서 새로운 값을 반환해야 한다면 MSSQL에서 CASE문을 사용해서 원하는 데이터를 만들어 낼 수 있다. 프로그래밍에서 if 문처럼 조건절에 따라서 값을 표현해 주는 방식과 유사하다... 그러면 본격적으로 CASE문에 대해 알아보자 1. CASE문을 사용해서 SELECT 하기예를 들어 내가 점수별로 60 점 이상은 Good  60점 미만은 Bad 라고 표현할 수 있는 컬럼을 추가해 select 하고 싶다면 case문을 활용하면 된다. 아래와 같이 Item1 컬럼을 점수라고 보고 60점을 기준으로 good과 bad를 표현해 보겠다. SELECT ID,NAME,ITEM1, CASE WHEN ITEM1 >= ..

react + typescript로 D-Day 계산기가 필요해 간단하게 useEffect와 useState를 통해서 계산기 컴포넌트를 만들어 보도록 하겠다. 시간의 차이를 계산하기 위해 자바스크립트 함수를 사용하고, 이것을 통해서 계산된 날짜 차이를 매 1초마다 화면에 갱신해 주는 절차를 진행해 주면 된다.1. 날짜 값 가져오기우선 src 폴더 아래에 Day폴더를 만들어 주고 Day.tsx 파일을 하나 생성해 준다. 그런 다음 아래의 코드를 입력하여 지금 시간부터 2024년 12월 25일 10시까지를 계산해 보도록 하겠다.import { useEffect, useState } from "react";const Day = () => { const countdownday = new Date('2024-..

마지막이다. 이번에는 빌드 된 파일을 ssh를 통해서 자동으로 배포하도록 하겠다. 여기서는 jenkins 설정과 ssh 설정이 필요한데 해당 내용은 아래의 포스팅을 참고하자. 2024.08.21 - [DevOps/CI·CD] - [Jenkins] Jenkins .net 자동 빌드/배포 - MSBuild를 통한 자동 빌드 [2] [Jenkins] Jenkins .net 자동 빌드/배포 - MSBuild를 통한 자동 빌드 [2]지난번에 이어 이번에는 git으로 업로드된 파일들을 jenkins에서 가져와 자동으로 빌드해 보도록 하겠다. 아직 설정을 못했다면 이전 포스팅을 참고하자. 2024.08.14 - [DevOps/CI·CD] - [Jenkins] Jenkins .netgoddmk.tistory.com20..