728x90 전체 글143 Spring Boot & Vue.js 연동 및 개발환경 구축 Spring Boot & Vue.js 연동 및 개발환경 구축 개발환경 Eclipse IDE Visual Studio Code Spring Boot 2.7.5 Vue@3.2.41 Gradle 7.0 여태까지 Spring에서 권고하는 방식인 Thymeleaf + HTML 기반으로 프론트엔드단을 개발하였는데 새로운 프로젝트를 시작하면서 Vue.js로 프론트엔드를 구축해보고자 한다. IDE는 Eclipse와 VS Code 두가지 모두 사용한다. 간단한 구글링 결과 아직까지는 VS Code로 Spring Boot(Java)를 구축하는데는 불편함이 있을 것 같다는 결론을 내렸다. Spring Boot와 Vue.js를 연동하는 방법은 크게 두가지가 있는데 하나는 각각의 서버를 두고 백엔드에서 데이터만 조회하여 프론트.. 2022. 11. 2. [JavaScript] 변수 선언 var 대신 let, const를 사용해보자 [JavaScript] 변수 선언 var 대신 let, const를 사용해보자 ES5까지 변수를 선언할 수 있는 방법은 var 키워드를 사용하는 것이었다. 이는 다른 언어와는 다른 특징으로 주의를 기울이지 않으면 심각한 문제를 일으킨다. ES6부터는 let과 const 변수 키워드를 도입하였으며 var 키워드를 대체하여 사용할 수 있다. 각 변수 키워드별 사용방법 및 특징을 알아보고 앞으로는 let과 const를 어떤 상황에서 사용할지 알아보자. var 키워드 var 키워드를 선언하면 재선언과 재할당이 가능하다. 재할당은 문제가 되지 않지만 재선언 시 오류가 발생하지 않는다면 해당 변수명을 중복으로 선언하여 의도하지 않은 실수를 초래할 수 있다. 아래와 같이 var 키워드를 생략하여 사용할 수 있다. 이.. 2022. 10. 31. [JavaScript] 일반 함수(Normal Function) VS 화살표 함수(Arrow Function) [JavaScript] 일반 함수(Normal Function) VS 화살표 함수(Arrow Function) EC6 문법부터 추가된 화살표 함수(Arrow Function)를 이용하여 일반 함수(Normal function)를 대체하여 사용해보고 그 차이는 무엇인지 어느 상황에 맞춰 무엇을 선택하여 사용할지에 대해 알아보자. 일반 함수(Normal Function) 사용방법 JavaScript에서는 아래와 같이 함수를 사용할 수 있다. 함수를 선언하기도 하고 변수에다가 함수를 등호기호(=)로 넣어서 함수를 만들 수 있다. Hello JAVASCRIPT 화살표 함수 (Arrow Function) function 키워드 대신에 => 를 이용하여 아래와 같이 함수를 표현할 수 있다. var ccc = () .. 2022. 10. 25. [JavaScript] Array의 sort(), filter(), map() 사용하기 [JavaScript] Array의 sort(), filter(), map() 사용하기 문자 배열 오름차순 정렬 sort() 함수는 기본적으로 오름차순을 지원한다. var array = ['a', 'c', 'b']; array.sort(); console.log(array); 문자 배열 내림차순 정렬 sort 함수는 오름차순을 기본적으로 사용하기 때문에 내림차순을 하려면 콜백함수를 이용하여 아래와 같이 코드를 변경해야 한다. 이 콜백함수는 배열의 첫번째 값과 두번째.. 세번째 차례로 모든 값과 비교하여 위치를 조정하게 된다. 콜백함수를 사용하기 싫다면 sort() 함수 사용 후 reverse() 함수를 사용하여도 된다. var array = ['a', 'c', 'b']; array.sort(functio.. 2022. 9. 26. [JavaScript] Array와 Object 사용법과 차이 [JavaScript] Array와 Object 사용법과 차이 변수에는 임의의 값을 넣을 수 있는데 만약 변수에 여러개의 값을 넣고 싶다면 Array나 Object를 사용하면 된다. Array나 Object는 변수 하나에 여러가지 자료형 저장 가능하다. Array와 Object의 사용방법에 따라 조금의 차이가 있는데 개발방식에 따라 편한것을 선택하여 사용하면 된다. Array 변수 선언 Array는 대괄호[] 안에 값을 수정하며 각각의 변수의 위치는 인덱스를 이용하여 0번째 부터 N번째까지 값을 가져올 수 있다. Hello JAVASCRIPT Array 변수 값 수정 user1의 Array 첫번째 값을 수정한다. user1[1] = 30; console.log(""); console.log('user1 .. 2022. 9. 21. [Windows] Vue.js 설치 및 Vue 프로젝트 생성 [Windows] Vue.js 설치 및 Vue 프로젝트 생성 Vue.js는 웹 개발을 위해 개발된 대중적인 자바스크립트 프론트엔드 프레임워크로 페이지 새로고침 없이 UI변경이 가능하다. 초보자가 사용하기 편리하며, React.js나 Angular.js에 비해 배우기 쉽다. Angular는 Typescript를 강제로 써야하며, React는 javascript 문법을 많이 사용한다(Javascript에 취약하다면 힘들 수 있다.). Vue는 새로운 문법을 사용해야 하지만 간단하고 빠르게 배울수 있다. 렌더링 속도 또한 다른 프레임워크과 비교하여 뒤지지 않으며 라이브러리 지원 업데이트도 지속적으로 하는 안정적인 프레임워크다. Vue.js는 NPM(Node Package Manager)을 통해서 다운로드 가능.. 2022. 9. 19. [Jitsi Meet] 회의실 입장 시 음소거 기본 설정 Start muted [Jitsi Meet] 회의실 입장 시 음소거 기본 설정 Start muted Jitsi Meet에서 사용자들의 회의실 입장 시 컴퓨터가 마이크를 인식하고 있다면 기본적으로 오디오가 켜진채로 접속이 되기 때문에 회의 중 불필요한 노이즈를 발생시키거나 통제가 되지 않을뿐더러 방장은 사용자가 입장할 때마다 Mute all 버튼을 눌러야할 것이다. 이러한 문제 발생으로 사용자들의 입장 시 기본적으로 마이크를 음소거 설정으로 제어하고자 한다. 물론 사용자는 마이크 버튼을 다시 클릭하면 음소거를 해제하여 대화가 가능하다. 방법에는 크게 두가지 방법이 있다.첫번째로는 파라미터를 이용하여 채팅방 입장 시 기본설정을 하는 것이고 이것은 채팅방 한개에 설정할 수 있으므로 생성하는 모든 채팅방에는 적용되지 않는다. 두번째.. 2022. 9. 14. 무료 화상회의 Jitsi Meet 개발환경 구축(6) - 빌드 및 배포 무료 화상회의 Jitsi Meet 개발환경 구축(6) - 빌드 및 배포 이번시간에는 지난시간에 수정한 소스코드를 빌드하여 운영하는 서버에 배포해보고자 한다. 수정한 소스코드를 배포하려면 이미 구축된 운영서버가 있어야 한다. 운영서버는 아래 링크 가이드라인에 따라 설치가 가능하다. Self-Hosting Guide - Debian/Ubuntu server | Jitsi Meet Follow these steps for a quick Jitsi-Meet installation on a Debian-based GNU/Linux system. jitsi.github.io 배포를 위한 빌드 방법은 아주 쉽다. $ mingw32-make 아래의 코드블럭은 Makefile의 상단 부분이다. make명령어 실행 시 뒤.. 2022. 9. 13. 무료 화상회의 Jitsi Meet 개발환경 구축(5) - 프론트엔드 커스터마이징 무료 화상회의 Jitsi Meet 개발환경 구축(5) - 프론트엔드 커스터마이징 이번 시간에는 개발환경에서 소스코드를 수정해보고 프론트엔드단의 UI를 커스터마이징 해보려고 한다. Jitsi Meet에 종속된 UI를 사용하지 않고 나만의 화상회의시스템을 만들어보자. 위 이미지는 개발환경에서 구동한 웹 사이트다. 웹 서비스를 자기 환경에 맞게 구현하기 위해서는 기존의 Jitsi Meet 로고를 바꾸거나 불필요한 텍스트를 변경 제거 해야할 것이다. 예제를 위해 1번의 로고 및 링크를 바꾸고 2번의 텍스트, 3번의 불필요한 Footer의 내용을 지우고, favicon과 title까지 수정해보겠다. 1번 로고 변경 기본 Jitsi Meet 로고는 SVG 형태로 되어 있는데 아래 링크에서 아래 이미지(PNG)를 S.. 2022. 9. 13. [GitLab] 보안 업데이트 Remote Command Execution via Github import 등 14개 [GitLab] 보안 업데이트 Remote Command Execution via Github import https://about.gitlab.com/releases/2022/08/30/critical-security-release-gitlab-15-3-2-released/ GitLab Critical Security Release: 15.3.2, 15.2.4 and 15.1.6 Learn more about GitLab Critical Security Release: 15.3.2, 15.2.4 and 15.1.6 for GitLab Community Edition (CE) and Enterprise Edition (EE). about.gitlab.com Gitlab 보안 업그레이드 권고안을 확인하였다.. 2022. 9. 13. 무료 화상회의 Jitsi Meet 개발환경 구축(4) - 윈도우 환경을 위한 makefile의 수정 무료 화상회의 Jitsi Meet 개발환경 구축(4) - 윈도우 환경을 위한 makefile의 수정 지난 시간에는 의존성있는 패키지들을 설치(npm install) 하고 makefile의 dev를 실행하여 개발 웹 서비스를 구동하였다. $ mingw32-make dev makefile에 기술되어 있는 dev dev: deploy-init deploy-css deploy-rnnoise-binary deploy-tflite deploy-meet-models deploy-lib-jitsi-meet deploy-olm deploy-tf-wasm deploy-face-landmarks $(WEBPACK_DEV_SERVER) 위 명령어를 실행하면 아래 dev에 기술되어 있는 deploy-init을 찾아 내부의 쉘 .. 2022. 9. 8. 무료 화상회의 Jitsi Meet 개발환경 구축(3) - 웹 서비스 구동 무료 화상회의 Jitsi Meet 개발환경 구축(3) - 웹 서비스 구동 Terminal 변경 명령어 실행을 편하게 하기 위해 Git Bash로 터미널을 변경하여준다. 'Select Default Profile'을 클릭하여 기본 터미널로도 지정이 가능하다. npm install package.json에 포함된 의존성 패키지를 설치한다. $ npm install npm WARN deprecated uuid@3.4.0: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/mat.. 2022. 9. 6. [Windows] MinGW 설치하여 gcc, gcc+, make 사용하기 [Windows] MinGW 설치하여 gcc, gcc+, make 사용하기 MinGW는 마이크로소프트 윈도우로 포팅한 GNU 소프트웨어 도구 모음이다. MinGW는 윈도우 API를 구현할 수 있는 헤더 파일들을 가지고 있으며 이로써 개발자들이 자유롭게 쓸 수 있는 컴파일러인 gcc, gcc+, Make를 사용할 수 있다. Release MinGW Installation Manager (mingw-get) MinGW-Get Version 0.6.3-pre-20170905-1 (Beta) -... Release MinGW Installation Manager (mingw-get) MinGW-Get Version 0.6.3-pre-20170905-1 (Beta) - MinGW - Minimalist GNU f.. 2022. 9. 6. [Windows] Git-Bash에서 Make 명령어 오류 C:\Program: Interrupt/Exception caught (code = 0xc00000fd, addr = 0x4227d3) [Windows] Git-Bash에서 Make 명령어 오류 C:\Program: Interrupt/Exception caught (code = 0xc00000fd, addr = 0x4227d3) 윈도우환경에서 Git-Bash로 Make 명령어 실행 시 C:\Program: Interrupt/Exception caught (code = 0xc00000fd, addr = 0x4227d3) 오류가 발생하였다. $ make dev "C:\Program: Interrupt/Exception caught (code = 0xc00000fd, addr = 0x4227d3) SHELL=C:/Windows/System32/cmd.exe Makefile의 상단에 SHELL을 지정하면 make 명령어는 정상적으로 수행되었다... 2022. 9. 5. [Jistsi Meet] npm install 시 에러 unable to verify the first certificate [Jistsi Meet] npm install 시 에러 unable to verify the first certificate 아래 사이트에서는 Jitsi Meet 개발환경 구축에 대하여 기술되어 있다. 아래 사이트와 같이 개발환경 설정 중 npm install 시 unable to verify the first certificate 발생하였고 이에 대한 포스팅을 작성하고자 한다. Developer Guide (Web) | Jitsi Meet Welcome to the developers guide for web! This guide will help you setup a development jitsi.github.io npm install 실패 $ npm install npm ERR! code 1 np.. 2022. 9. 5. 이전 1 2 3 4 5 6 7 ··· 10 다음 728x90
