눈으로 개발하는 블로그

이어서 Carousel(캐러셀)의 설정을 변경하고 컨트롤 기능을 추가하여 커스터마이징을 하겠습니다. ​ ​ 슬라이드 페이드(fade) 처리 ​ Carousel(캐러셀)는 오른쪽에서 왼쪽으로 슬라이드가 됩니다. 슬라이드 대신에 페이드(fade)로 처리되길 원하신다면 class에 .carousel-fade를 추가하면 슬라이드가 페이드(fade)로 처리됩니다. 슬라이드 연속 진행 설정 ​ Carousel(캐러셀) 안으로 마우스를 들어오면(mouseenter) 슬라이드가 멈추(pause sliding)고 Carousel(캐러셀) 밖으로 마우스 나가면(mouseleave) 슬라이드가 다시 슬라이드가 진행(resume sliding) 됩니다. ​ 마우스의 이벤트(mouseenter, mouseleave)와 상관없이..

JavaScript에서 날짜와 시간을 얻거나 생성할 때 Date 객체를 사용합니다. ​ ​ Date 객체 생성 ​ 오늘 날짜를 얻기 위해서는 생성자로 Date 객체를 호출합니다. 그러면 새로운 Date 객체가 반환됩니다. var today = new Date(); 생성된 Date 객체를 console.log로 출력하면 현재 날짜와 시간이 그리니치 표준시(GMT - Greenwich Mean Time)로 출력됩니다. Date 객체를 console.log로 출력하면 Date 객체의 toString() 메서드가 자동으로 호출됩니다. console.log(today); --> Wed Mar 13 2022 15:23:37 GMT+0900 (한국 표준시) console.log(today.toString()); --..

메인 페이지의 상단 영역을 Bootstrap의 Carousel(캐러셀)을 사용하여 가로로 슬라이드 시켜 여러 개의 상단 영역이 반복해서 나타나게 구성하겠습니다. ​ Bootstrap의 Carousel(캐러셀)은 CSS3과 JavaScript로 이미지나 텍스트 또는 콘텐츠 영역을 슬라이드 시키고 이전과 다음으로 이동시키기 위한 컨트롤과 위치를 표시하기 위해 Indicator(인디게이터)를 지원합니다. ​ Bootstrap의 Carousel(캐러셀) 구성은 다음과 같습니다. First Slide Second Slide .carousel class와 .slide class가 적용된 태그는 Carousel(캐러셀)의 전체 영역입니다. 그리고 data-bs-ride 속성을 통해 Bootstrap에 포함된 Java..

이어서 메인 페이지 기본 상단 영역에 비디오를 추가해 보겠습니다. 우선 비디오를 추가하기 위해 사이트에서 무료 비디오를 다운로드합니다. ​ ​ 무료 비디오 다운로드 받기 ​ 저는 비디오를 어도비 스톡(Adobe Stock)에서 무료 라이선스로 다운로드했습니다. 이미지/비디오 무료 다운로드(https://carrotweb.tistory.com/150)를 참고하세요. ​ 다운로드한 비디오는 MOV 파일입니다. 태그에서 실행되게 하기 위해 MOV 파일을 MP4 파일로 변환해야 합니다. ​ ​ 비디오 MOV 파일을 MP4 파일로 변환 ​ 저는 다운로드한 비디오 파일을 어도비 크리에이티브 클라우드 익스프레스(Adobe Creative Cloud Express)를 사용하여 무료로 MP4 파일로 변환하였습니다. ​ ..

이어서 메인 페이지 기본 상단 영역의 오른쪽에 이미지를 추가해 보겠습니다. 우선 이미지를 추가하기 위해 사이트에서 무료 이미지를 다운로드하고 이미지의 배경을 제거합니다. ​ ​ 무료 이미지 다운로드 받기 ​ 저는 이미지를 어도비 스톡(Adobe Stock)에서 무료 라이선스로 다운로드했습니다. 이미지/비디오 무료 다운로드(https://carrotweb.tistory.com/150)를 참고하세요. 다운로드한 이미지는 JPG 파일입니다. JPG 파일은 이미지의 배경을 제거할 수 없습니다. 그래서 이미지 배경을 제거하고 JPG 파일을 PNG 파일로 변환해야 합니다. ​ ​ 이미지 배경 제거 ​ 저는 이미지 배경을 제거하고 PNG 파일로 변환하여 다운로드할 수 있는 Remove.bg를 사용하였습니다. 이미지 ..

Adobe Creative Cloud Express - mp4 / mov-to-mp4 ​ 어도비 크리에이티브 클라우드 익스프레스 - MP4로 변환 (https://www.adobe.com/kr/express/feature/video/convert/mp4)에서 무료로 다양한 비디오 파일을 MP4 파일로 변환하여 다운로드할 수 있습니다. 다운로드하기 위해서는 어도비 계정이 있어야 합니다. 기능 메뉴를 보면 "MOV를 MP4로 변환"이 있는데 "MP4로 변환"과 동일합니다. 다음은 "MOV를 MP4로 변환" 페이지입니다. 둘 다 기능은 동일합니다. ​ ​ MOV 파일을 MP4 파일로 변환하기 ​ 1. 변환 페이지에서 비디오 파일을 드래그 앤드 드롭(Drag-and-drop - 끌어서 놓기) 합니다. 또는 "내..

Remove.bg ​ Remove.bg (https://www.remove.bg/ko)에서 무료로 이미지 배경을 제거하여 배경이 투명한 PNG 파일로 다운로드할 수 있습니다. 사용자 등록 없이 무료로 사용할 수 있습니다. 이미지 배경 자동 제거 ​ 1. 메인 페이지에 있는 "이미지 업로드"를 클릭하여 배경을 제거할 이미지를 업로드합니다. 또는 이미지 파일을 드래그 앤드 드롭(Drag-and-drop - 끌어서 놓기) 합니다. 파일이 업로드된 후 자동으로 배경이 제거된 이미지가 나타납니다. 2. 자동으로 배경이 제거된 이미지는 "다운로드" 클릭이나 이미지를 클릭하면 배경이 투명한 PNG 파일로 다운로드할 수 있습니다. 이미지 배경 제거 편집 ​ 배경이 자동으로 제거되다 보니 잘 못 처리되거나 처리되지 않는..

어도비 스톡 (https://stock.adobe.com/kr/)에서 무료로 이미지나 비디오를 받을 수 있습니다. 다운로드하기 위해서는 어도비 스톡 계정이 있어야 합니다. 상단 메뉴에서 "무료"를 클릭합니다. 무료 이미지(사진, 일러스트레이션, 벡터), 비디오, 템플릿(Photoshop, Illustrator, InDesign, Premiere Pro, Premiere Rush), 3D(모델, 조명, 자료)를 키워드로 검색하거나 범주별로 검색할 수 있습니다. ​ ​ 무료 이미지(사진, 일러스트레이션, 벡터) 검색 및 다운로드 ​ 1. 무료 스톡 에셋에서 무료 사진이나 무료 벡터를 클릭합니다. 에셋(Asset)이란 자산, 자원이란 뜻으로 어도비 스톡에서 라이선스가 적용되어 관리되는 자산을 말합니다. ​ 2..

메인 페이지 확인 ​ Vue 라우터인 C:\workspaces\nodeserver\testvue\src\router\index.js 파일을 오픈하여 기본 웹 경로('/')를 보면 Home 컴포넌트와 연결되어 있습니다. Vue Router 설치 시 기본으로 설치되는 컴포넌트입니다. import Home from '../views/Home.vue' const routes = [ { path: '/', name: 'Home', component: Home } ] Home 컴포넌트를 수정하여 메인 페이지 화면을 만들도록 하겠습니다. ​ 먼저 콘솔을 실행하고 Vue 프로젝트가 있는 C:\workspaces\nodeserver\testvue 폴더로 이동합니다. 그리고 콘솔에서 npm run 명령어를 실행합니다. n..

이어서 로그인 영역을 내비게이션 바로 이동시키겠습니다. ​ 1. C:\workspaces\nodeserver\testvue\src\App.vue 파일을 오픈합니다. 태그 안에 있는 class가 .headmenu인 태그를 태그 안에 있는 class가 .navbar-collapse가 태그 안으로 이동시킵니다. 그리고 태그 안에 있는 태그를 삭제합니다. {{this.$store.state.loginStore.memberId}}님, 안녕하세요. 로그아웃 로그인 다음처럼 변경됩니다. Home About Board Score {{this.$store.state.loginStore.memberId}}님, 안녕하세요. 로그아웃 로그인 2. 이동한 태그의 class를 .headmenu에서 .navbar-info으로 변경..

이어서 모바일에서는 내비게이션 바를 감추고 보여주는 Toggle(토글) 버튼(3개의 선으로 되어 있어 이미지로 햄버거 버튼이라고도 합니다.)을 생성하겠습니다. ​ 1. C:\workspaces\nodeserver\testvue\src\App.vue 파일을 오픈합니다. 내비게이션 바에 brand(브랜드)인 다음에 태그를 추가합니다. 태그의 class에 .navbar-toggler가 추가되어야 합니다. 태그의 class에 있는 navbar-expand{-sm|-md|-lg|-xl|-xxl}를 기준으로 웹 브라우저의 가로 화면 크기가 설정된 크기보다 작으면 태그가 노출되고 크면 태그가 비노출됩니다. 즉, 모바일 사이즈에서만 태그가 노출됩니다. ​ 태그의 class인 .navbar-toggler-icon은 SV..

Bootstrap(부트스크랩)을 사용하여 웹 페이지에 내비게이션 바(메뉴 바)를 생성하겠습니다. ​ 1. C:\workspaces\nodeserver\testvue\src\App.vue 파일을 오픈합니다. 먼저 Semantic(시맨틱) HTML의 문서 구조가 되도록 기존 소스에 , , 태그를 추가하겠습니다. 기존 소스는 태그 안에 넣습니다. 이전 Bootstrap(부트스크랩)이 적용되었는지 확인하기 위해 추가한 버튼은 삭제하였습니다. {{this.$store.state.loginStore.memberId}}님, 안녕하세요. 로그아웃 로그인 Home | About | Board | Score 2. 태그 안에 내비게이션 바를 생성하기 위해 태그를 추가합니다. 내비게이션 바를 생성하기 위해서는 태그의 clas..

Semantic(시맨틱)이란 "의미론적"이란 뜻으로 특정한 것에 의미를 부여하는 겁니다. 그래서 HTML에서 Semantic(시맨틱)이란 태그에 의미를 부여한 것입니다. ​ HTML에서 Semantic Element(시맨틱 요소)는 웹 브라우저와 개발자 모두에게 의미를 명확하게 설명해 주는 요소를 말합니다. 즉 태그에 의미를 부여하여 웹 페이지의 가독성을 높여줍니다. ​ HTML에서 태그나 태그는 내용에 대해 아무것도 알려주지 않는 의미 없는 요소입니다. 그러나 ~ 태그는 heading(제목, 표제)이란 의미로 사용되는 태그이고 태그는 연락처 정보의 의미로 사용되는 태그로 의미 있는 요소입니다. ​ 이처럼 HTML5에서는 웹 페이지의 문서 구조를 정의하는 의미 있는 태그들이 있습니다. 예제들은 태그를 설..

웹 사이트를 보다 보면 다양한 아이콘들이 버튼이나 메뉴, 폼에 적용되는 것을 보았을 겁니다. ​ Bootstrap(부트스크랩)에서는 무료로 고품질의 오픈 소스 아이콘 라이브러리로 1,500개 이상의 아이콘들을 제공하고 있습니다. ​ 자세한 내용은 Bootstrap Icons 사이트(https://icons.getbootstrap.com)에서 확인하세요. 검색하여 적용하는 방법 ​ 1. 검색란에서 사용할 아이콘을 검색합니다. 그리고 검색된 아이콘을 클릭합니다. 2. 아이콘은 SVG 파일로 다운로드하거나 태그의 class 속성(아이콘 폰트를 이용 )으로 적용하거나 SVG 태그를 복사하여 적용할 수 있습니다. 태그의 class 속성으로 사용하려면 뷰 프로젝트에 설치가 되어 있어야 합니다. ​ 설치 없이 CDN..

Bootstrap(부트스크랩)은 웹 사이트를 빠르고 쉽게 반응형으로 만들 수 있게 도와주는 HTML, CSS, JS 프레임워크입니다. ​ 자세한 내용은 Bootstrap 사이트(https://getbootstrap.com)에서 확인하세요. Bootstrap 5 설치하기 ​ 콘솔을 실행하고 Vue 프로젝트가 있는 C:\workspaces\nodeserver\testvue 폴더로 이동합니다. Vue 프로젝트에 Bootstrap를 설치하기 위해 콘솔에서 npm install 명령어를 실행합니다. npm install --save bootstrap 또는 버전 적용 npm install --save bootstrap@5.1.3 npm install에 옵션으로 --save를 추가하면 자동으로 package.json..

4자리 숫자 7-세그먼트 (7-Segment)는 1자리 숫자 7-세그먼트 (7-Segment)를 4개를 결합한 것입니다. 28개의 세그먼트와 4개 도트로 구성되어 숫자(0부터 9999까지)나 문자를 표시할 수 있는 디지털 출력 모듈입니다. ​ 1자리 숫자 7-세그먼트과 동일하게 양극(VCC)을 공통 핀으로 갖는 에노드형(Common Anode type)과 음극(GND)을 공통 핀으로 갖는 게소드형(Common Cathode Type)등 2가지 타입이 있습니다. ​ 제가 가지고 있는 4자리 숫자 7-세그먼트는 음극(GND)을 공통 핀으로 갖는 게소드형(Common Cathode type)입니다. 1자리 숫자 7-세그먼트는 도트를 포함하여 8개의 숫자 핀(a, b, c, d, e, f, g, dp)과 2개의..

세 번째로 Vuex PersistedState를 사용하는 방법을 알아보도록 하겠습니다. ​ Vuex PersistedState는 Local Storage(로컬 스토리지)를 사용하여 state를 저장하고 유지합니다. ​ ​ Vuex PersistedState 설치하기 ​ 콘솔을 실행하고 Vue 프로젝트가 있는 C:\workspaces\nodeserver\testvue 폴더로 이동합니다. Vue 프로젝트에 vuex-persistedstate를 설치하기 위해 콘솔에서 npm install 명령어를 실행합니다. npm install --save vuex-persistedstate 또는 버전 적용 npm install --save vuex-persistedstate@4.1.0 npm install에 옵션으로 --..

두 번째로 Cookie(쿠키)를 사용하는 방법을 알아보도록 하겠습니다. ​ Cookie(쿠키)는 웹 브라우저에 데이터가 저장됩니다. ​ Vue 3에서 Cookie(쿠키)를 사용하기 위해서는 vue3-cookies 라이브러리를 설치해야 합니다. ​ ​ Vue Cookies 설치하기 ​ 콘솔을 실행하고 Vue 프로젝트가 있는 C:\workspaces\nodeserver\testvue 폴더로 이동합니다. Vue 프로젝트에 vue3-cookies를 설치하기 위해 콘솔에서 npm install 명령어를 실행합니다. npm install --save vue3-cookies 또는 버전 적용 npm install --save vue3-cookies@1.0.6 npm install에 옵션으로 --save를 추가하면 자동..

웹 브라우저에서 새로고침(F5)을 하면 Vue가 초기화되면서 Vuex store의 state가 초기화됩니다. ​ ​ 페이지 새로고침 후 Vuex store의 state 초기화 ​ 1. Node.js 레스트 API 서버를 먼저 실행시킵니다. 콘솔을 실행하고 Node.js 레스트 API 서버 프로젝트가 있는 C:\workspaces\nodeserver\testrestapi 폴더로 이동합니다. 그리고 npm run 명령어를 실행합니다. npm run start 2. Vue를 실행시킵니다. 콘솔을 실행하고 Vue 프로젝트가 있는 C:\workspaces\nodeserver\testvue 폴더로 이동합니다. 그리고 콘솔에서 npm run 명령어를 실행합니다. npm run serve 그리고 로그인을 합니다. 3...

Interrupt(인터럽트) - 시리얼 통신 입력 ​ 1. 이전 소스에 시리얼 통신을 테스트하기 위해 setup()함수에서 Serial.begin()함수를 설정하고 serialEvent()함수를 추가하여 컴파일하고 업로드합니다. void setup() { for (int pinIndex = 0; pinIndex < pinCount; pinIndex++) { pinMode(ledPins[pinIndex], OUTPUT); } Serial.begin(9600); while (!Serial) { } Serial.println("Serial Port Connected."); } void serialEvent() { int readByte = Serial.read(); Serial.println(readByte)..

7-세그먼트 (7-Segment)는 7개의 세그먼트와 도트로 구성되어 숫자(0부터 9까지)나 문자를 표시할 수 있는 디지털 출력 모듈입니다. 문자는 대문자 A, 소문자 b, 대문자 C, 소문자 d, 대문자 E, 대문자 F등 7개의 세그먼트로 이용하여 표시할 수 있습니다. 자세한 설명은 아래에서 알려드리겠습니다. ​ 7-세그먼트는 양극(VCC)을 공통 핀으로 갖는 에노드형(Common Anode type)과 음극(GND)을 공통 핀으로 갖는 게소드형(Common Cathode Type)등 2가지 타입이 있습니다. ​ 제가 가지고 있는 7-세그먼트는 음극(GND)을 공통 핀으로 갖는 게소드형(Common Cathode type)입니다. ​ 다른 7-세그먼트와 다르게 상하로 핀이 있는게 아니고 좌우로 핀이 나..

이번에는 axios(액시오스)의 인터셉터(interceptor) 중 응답(response)으로 처리해 보겠습니다. ​ Node.js 레스트 API 서버를 먼저 실행시킵니다. 콘솔을 실행하고 Node.js 레스트 API 서버 프로젝트가 있는 C:\workspaces\nodeserver\testrestapi 폴더로 이동합니다. 그리고 npm run 명령어를 실행합니다. npm run start axios(액시오스)의 인터셉터(interceptor) 응답(response) 추가하기 ​ 1. C:\workspaces\nodeserver\testvue\src\axios\index.js 파일에서 기존 axios.interceptors의 request로 처리한 부분을 주석 처리하거나 삭제합니다. 그리고 axios.i..

레스트 API 서버로 요청을 보내기 전에 Access-Token이 만료되면 재발급되도록 처리가 되었습니다. 그런데 모든 Vue의 메서드에서 레스트 API 서버로 요청을 보내기 전에 Access-Token이 만료되었는지 확인해야 할까요? 그렇지 않습니다. ​ axios(액시오스)의 인터셉터(interceptor)를 이용하면 레스트 API 서버로 요청(request)을 보내기 전과 응답(response) 받고 처리 전에 공통으로 처리할 수 있습니다. ​ 다음은 axios(액시오스)의 인터셉터(interceptor) 기본 구조입니다. // Add a request interceptor // 요청 인터셉터 추가 axios.interceptors.request.use(function (config) { // Do..

이전 Node.js 레스트 API 서버에서 Refresh-Token으로 Access-Token이 재발급되게 처리하였습니다. ​ 이번에는 Vue에서 레스트 API 서버로 요청을 보내기 전에 Access-Token이 만료되었는지 확인을 하여 Access-Token이 만료되었다면 레스트 API 서버로 "/refresh"를 요청하여 Access-Token이 재발급되도록 처리하겠습니다. ​ Node.js 레스트 API 서버를 먼저 실행시킵니다. 콘솔을 실행하고 Node.js 레스트 API 서버 프로젝트가 있는 C:\workspaces\nodeserver\testrestapi 폴더로 이동합니다. 그리고 npm run 명령어를 실행합니다. npm run start Login Store 모듈에 토큰 재발급 추가하기 ​..

이전에 개발한 신호등 소스를 배열을 이용하여 반복적으로 처리 코딩을 줄여 보겠습니다. ​ 배열 - Array ​ 배열 선언 int ledPins[6]; int ledPins[] = {2, 7, 4, 6, 5, 3}; int ledPins[6] = {2, 7, 4, 6, 5, 3}; 첫번째 배열 처럼 데이터를 초기화 하지 않고 배열을 선언할 수 있습니다. 그러나 배열을 읽기전에 배열의 데이터를 추가해줘야 합니다. 두번쩨 배열 처럼 배열의 크기를 설정하지 않고 배열에 데이터를 선언할 수 있습니다. 그러면 컴파일러는 배열의 요소를 세어 배열의 크기를 설정합니다. 세번째 배열 처럼 배열의 크기와 설정하고 배열에 데이터를 선얼할 수 있습니다. ​ 두번째 방법으로 배열을 사용하는 것이 오류도 적고 좋습니다. ​ 배..

아두이노 우노 보드에는 0번부터 13번까지 14개의 디지털 핀이 있습니다. 디지털 핀과 센서들을 연결하여 데이터를 입력 받아 처리하고 LED, 스피커, LCD로 데이터를 출력할 수 있습니다. ​ 디지털 핀은 전류의 흐름을 제어하여 LOW와 HIGH로 전기적 신호를 구분합니다. LOW로 0V, HIGH로 5V의 전류를 흐르게 합니다. 그래서 디지털 신호로 LOW는 0으로 HIGH는 1이 됩니다. 디지털 핀 출력 제어 - LED 불 켜기/끄기 ​ 1. 디지털 핀을 입력/출력으로 제어하기 위해서는 디지털 핀을 입력 모드나 출력 모드로 설정해햐 합니다. 12번 디지털 핀을 출력 모드로 제어하기 위해서는 pinMode()함수를 사용합니다. pinMode()함수의 첫번째 파라미터는 디지털 핀 번호이고, 두번째 파리..

Serial.readString()함수나 Serial.readStringUntil()함수는 항상 시리얼 타임아웃에 영향을 받기 때문에 전송되는 데이터가 네트워크 문제로 지연이 되는 경우 중간에 끊어져 정상적인 문자열을 받아 처리할 수 없습니다. 그래서 아두이노 우노 보드에서는 시리얼 통신을 통해 시리얼 버퍼에 데이터가 들어오면 serialEvent()함수를 자동으로 호출해줍니다. serialEvent()함수를 이용하여 시리얼 통신을 해보겠습니다. ​ ​ PC 시리얼 통신 - 시리얼 이벤트 ​ 1. serialEvent()함수를 선언합니다. serialEvent()함수에서는 Serial.read()함수를 사용하여 1바이트씩 데이터를 읽어 처리합니다. void serialEvent() { Serial.pri..

개발 후 환경에 따라 연동 프로그램이 아닌 일반 터미널 클라이언트를 사용해야 하는 상황이 있을 수 있습니다. 그래서 터미널 클라이언트인 PuTTY(퍼티)를 사용하여 아두이노 보드와 시리얼 통신을 해보겠습니다. ​ ​ PuTTY(퍼티)로 시리얼 통신 연결하기 ​ PuTTY(퍼티)가 설치되어 있지 않으면 아래의 PuTTY 설치하기를 참조하여 설치하기시 바랍니다. ​ 1. PuTTY를 실행합니다. 2. Connection Type에서 Serial를 선택하고 아두이노 보드와 연결된 시리얼 포트 명을 Serial line에 입력하고 Speed에 시리얼 통신 속도를 입력합니다. 기본적으로 Serial line에 COM1이 Speed에는 9600으로 되어있습니다. 저는 시리얼 포트가 COM3이고 Baud Rate(보..

아두이노(Arduino)의 프로그램 언어는 C/C++를 사용합니다. 작성된 프로그램을 스케치(Sketches)라고 하고 파일은 .ino로 저장됩니다. ​ 스케치(Sketches)는 setup()과 loop() 함수로 구조가 단순하게 구성되어 있습니다. void setup() { } void loop() { } setup() 함수 아두이노(Arduino) 보드가 실행되면 처음에 한번만 실행되는 함수입니다. 그리고 리셋 버튼이 눌러지면 동일하게 한반만 실행됩니다. 라이브러리 설정, 핀모드 설정, 변수 설정등 초기화 하는 셋업 코드를 작성합니다. ​ loop() 함수 setup()함수가 실행된 후 반복되는 함수입니다. 보드의 디지털 핀과 연결된 센서로 부터 정보를 가져오거나 연산을 한 후 결과를 출력하는 코드..

아두이노(Arduino) IDE 툴 ​ 자동 포맷 : 편집 영역에 있는 코드들을 정리하고 자동으로 들여 쓰기가 되도록 처리합니다. 메뉴 : 툴 > 자동포맷(Ctrl+T) ​ 자동 포맷 실행 전 void setup() {Serial.begin(9600);} void loop() { // put your main code here, to run repeatedly: } 자동 포맷 실행 후 void setup() { Serial.begin(9600); } void loop() { // put your main code here, to run repeatedly: } 스케치 보관하기 : 현재 편집 영역에 있는 스케치의 파일이 있는 폴더를 zip 파일로 압축하여 저장합니다. 메뉴 : 툴 > 스케치 보관하기 인코딩..