본문 바로가기

[WEB] Front-End Framework & Library16

728x90
반응형
뷰(Vue.js)란 무엇이며 누가 사용하는가? 뷰는 무엇인가?뷰(Vue.js)는 프론트엔드 개발용 프레임워크이다. 뷰는 리액트와 양대 상맥을 이루는 오픈소스 프론트엔드 개발용 프레임워크이다. 뷰에서는 화면을 개발할 때 HTML와 CSS, Javascript를 조합하여 사용한다. 뷰로 개발할 때는 통합개발환경(Integrated Development Environment, IDE)으로 Visual Studio를 많이 사용하는 편이다.뷰의 특징뷰에서는 화면을 개발할 때 HTML와 CSS, Javascript를 조합하여 사용하기에 기존의 웹 개발자들이 빠르게 익힐 수 있는 특징이 있다. 뷰는 프레임워크답게 코드 재사용성이 높고 화면 배치를 위해 HTML과 CSS를 사용하기에 직관적이라 코드 생산성이 높다. 뷰는 개발 기간이 짧고 자주 수정되는 SI 업계에.. 2024. 11. 13.
[Vue.js] Visual Studio Code에서 NPM을 못 찾는 경우 Vue.js 개발 환경을 구성할 때 Visual Studio Conde의 터미널에서 NPM을 못 찾는 경우 터미널을 Git Bash 또는 PowerShell로 변경하면 NPM을 잘 찾을 수 있다.현상아래와 같은 오류 메시지가 나타나며 NPM의 버전을 못 찾는다.C:\frontend>npm -vnode:internal/modules/cjs/loader:1080 throw err; ^Error: Cannot find module 'C:\Program Files\nodejs\node_modules\npm\bin\node_modules\npm\bin\npm-cli.js' at Module._resolveFilename (node:internal/modules/cjs/loader:1077:15) a.. 2024. 8. 11.
넥사크로 14 스튜디오 라이센스 인증이 되지 않을 때 증상 넥사크로 14 스튜디오의 라이센스가 만료되면 인증을 요구하는 화면이 아래의 사진처럼 나타난다. 인증 창에 옳은 값을 입력하고 'OK' 버튼을 눌러도 아무 반응이 없는 경우 정상적인 사용이 불가능하다. 해결방법 레지스트리에 있는 넥사크로 인증 정보를 삭제하면 정상적으로 인증을 수행할 수 있다. 레지스트리 위치는 아래와 같다. 컴퓨터\HKEY_CURRENT_USER\SOFTWARE\AppDataLow\Software\nexacro\nexacrostudio 14를 포함한 하위 경로에 있는 내용을 다 지우고 넥사크로를 실행하면 정상적으로 인증이 가능하다. 2024. 3. 21.
Visual Studio Code 기반 Vue.js 개발 환경 구성하기 Vue.js 를 개발하는 환경을 구축하는 방법은 여러가지가 있다. 본 글에서는 무료로 사용가능하고 충분히 높은 생산성을 낼 수 있는 Visual Studio Code 기반 Vue.js 개발 환경을 구축하는 방법을 소개한다. 1. Visual Studio Code 설치 Visual Studio Code 설치 파일을 아래의 주소로 이동하여 다운로드 받는다. Visual Studio Code 다운로드 주소: https://code.visualstudio.com/ 다운로드된 설치파일을 실행하여 아래의 사진처럼 설치한다. 본 글에서는 윈도우 11 64비트를 기준으로 설명한다. 라이센스에 동의하고 '다음' 버튼을 클릭한다. 설치 경로를 적절하게 설정하고 '다음' 버튼을 클릭한다. 시작 메뉴 폴더명을 적절하게 설정하.. 2023. 12. 28.
PowerShell에서 Vue CLI 'UnauthorizedAccess' 오류 해결 방법 오류 현상 PowerShell에서 Vue CLI로 어떤 작업을 실행하면 아래와 같이 권한이 없어서 오류가 발생하는 경우가 있다. 이 경우에는 적절한 권한을 부여하여 문제를 해결할 수 있다. vue : 이 시스템에서 스크립트를 실행할 수 없으므로 C:\Users\user\AppData\Roaming\npm\vue.ps1 파일을 로드할 수 없습니다. 자세한 내용은 about_Execution_Policies(https://go .microsoft.com/fwlink/?LinkID=135170)를 참조하십시오. 위치 줄:1 문자:1 + vue --version + ~~~ + CategoryInfo : 보안 오류: (:) [], PSSecurityException + FullyQualifiedErrorId : .. 2023. 12. 26.
[넥사크로 14] inputtype - 입력을 허용할 문자를 설정하자 정의 'inputtype'은 입력을 허용할 문자를 설정하는 속성이다. 유사한 기능을 수행하는 'inputfilter'이 먼저 동작 후 'inputtype'이 수행된다. 화면 'inputtype'는 GUI로 설정할 수 있으며 문자열을 입력하는 컴포넌트의 속성창에 가면 아래의 사진처럼 설정하는 화면이 있다. 속성값과 문법 'inputtype'에 'normal'과 'number', 'english', 'full', 'half', 'dot', 'comma', 'sign', 'symbol', 'digit', 'alpha', 'space' 같은 속성값을 설정할 수 있으며 각 속성값별 기능은 아래 사진과 같다. 제약사항 및 지원환경 'inputtype'이 정상적으로 동작하는 환경은 아래와 같다. 참고문서 "input.. 2023. 3. 23.
[넥사크로14] inputfilter - 입력 문자를 제한하자 정의 넥사크로14의 'inputfilter'는 입력가능한 문자를 제한하는 기능이다. 웹 브라우저 사용자가 직접 입력할 때만 동작한다. 화면 'inputfilter'는 GUI로 설정할 수 있으며 문자열을 입력하는 컴포넌트의 속성창에 가면 아래의 사진처럼 설정하는 화면이 있다. 속성값과 문법 'inputfilter'에 'none'과 'dot', 'comma', 'sign', 'symbol', 'digit', 'alpha', 'space' 같은 속성값을 설정할 수 있으며 각 속성값별 기능은 아래 사진과 같다. 제약사항 및 지원환경 'inputfilter'가 정상적으로 동작하는 환경은 아래와 같다. 참고문서 "inputfilter", Nexacro 14 Reference Guide. 2023. 3. 22.
[넥사크로14] 입력을 허용할 문자의 종류를 지정하는 'inputtype' 'inputtype'를 활용하는 경우 웹 화면(프론트)을 개발하다보면 입력을 허용할 문자의 종류를 제한해야 하는 경우가 있다. 이런 경우 보통 정규식과 문자열 대체 함수를 활용하여 입력을 제한한다. 하지만 넥사크로에서는 컴포넌트 속성에 있는 'inputtype'을 활용하면 GUI(Graphical User Interface)로 간단하게 설정할 수 있다. 'inputtype' 설정 방법 컴포넌트를 클릭하면 아래의 사진처럼 inputtype 설정을 볼 수 있다. 입력을 허용할 문자 유형을 선택하면 입력가능한 문자가 제한된다. 각 옵션별 의미는 아래의 표와 같다. normal 처리하지 않음 number 숫자와 .,- 만 입력 english 영어만 입력 full 전각문자만 입력 (반각문자 제외) half 반각문.. 2023. 2. 7.
[넥사크로14] 그리드(Grid) 컴포넌트의 선택된 행을 확인할 수 있는 'currentrow' 변수 용도 넥사크로 14에서 현재 그리드(Grid) 컴포넌트의 어떤 행이 선택되었지를 확인하는 방법은 그리드 컴포넌트의 currentrow 변수값을 읽어오는 것이다. 사용 방법 아래와 같이 코딩하면 'currentrow' 값을 읽을 수 있다. 목록이 없는 경우에는 'currentrow'에 '-9' 값이 들어있고 그리드의 헤더(header)가 선택된 경우에는 '-1'이 들어가 있다. 목록이 있는 경우 'currentrow'의 기본값은 '0'이다. this.grid.currentrow; 참고문서 "Grid_Property_currentrow", 넥사크로 14 레퍼런스 가이드. 2023. 2. 6.
[넥사크로 14] Spin 컴포넌트의 'canchange' 이벤트 Spin 컴포넌트에서 'canchange' 이벤트를 활용하면 커서가 컴포넌트에 'enter' 또는 'focusout' 동작할 때 기존 'value'와 현재 'value'가 다른 경우 함수를 호출할 수 있다. 'value' 가 변하면 동작해야 하는 기능을 구현할 때 활용한다. 2023. 1. 12.
[넥사크로14] insertTabpage 수행 시간이 오래 걸리는 현상 발생 문제 정의 넥사크로에는 GUI(Graphical User Interface) 요소(Element)로 탭(Tab) 컴포넌트(Component)가 있다. 최근에 프로젝트를 수행하는데 탭 컴포넌트의 함수 중 'insertTabpage'가 특정 상황에서 일정 갯수가 넘어가면 수행 시간이 오래 걸려서 사용성이 급격히 떨이지는 문제가 발생했다. 해결 방법 당장 해결하기에는 시간이 부족해서 일정 갯수가 넘지 않도록 탭을 조절하는 것으로 문제를 회피했다. 근본적으로 문제를 해결하기 위해서 코드 수준으로 분석이 필요한데 추후에 넥사크로 커뮤니티에서 문의하면서 해결하고자 한다. 문제가 해결이 되면 해결 방법을 게재하겠다. /* * 파일경로: /nexacro14lib/component/ComComp/Tab.js */ _pT.. 2023. 1. 10.
넥사크로 스튜디오 14 탐색창이 안 보일 때 조치 방법 '탐색창이 왜 안보여?'라고 생각할 수 있지만 지금 내가 쓰는 넥사크로 14 버전은 탐색창이 종종 실종된다. 더블 모니터에다가 서로 다른 화면 배율 떄문에 그런 현상이 나타나는 것인지는 모르겠다. 특히 눈에 보이지는 않는데 탬색창을 사용할 수 있는 상태인 것이 특징인데 아마 이상한 크기로 생성되었거나 모니터 밖의 좌표에 놓아져 있는 것이 아닐까 나는 추측한다. 넥사크로 14 탐색창이 안 보일 때 탐색창을 찾는 방법은 간단하다. 넥사크로 스튜디오 14를 두 개 이상 열고 마지막에 연 넥사크로 스튜디오에서 탐색창을 열면 탐색창이 나타난다. 2022. 11. 1.
넥사크로 14 테마 임시 폴더에서 이미지 가져오기 넥사크로(Nexacro) 14에서 테마에 있는 사진과 같은 파일을 가져오고 싶다면 넥사크로 14 테마(Theme)가 수정 상태일 때 생기는 임시 폴더를 활용하는 방법이 있다. 넥사크로 14 테마 임시 폴더 주소 넥사크로 14의 버전과 운영체제에 따라 아래의 사진처럼 테마를 열었을때 생성되는 임시 폴더(Folder, Directory)의 주소가 다른데 보통 아래와 같이 4가지 안에서 찾을 수 있다. C:\Users\사용자명\OneDrive\문서\nexacro\14\TEMPORARY C:\Program Files (x86)\nexacro\14\TEMPORARY C:\Program Files\nexacro\14\TEMPORARY C:\Program Files (x86)\nexacro\TEMPORARY 넥사크로.. 2022. 10. 4.
[넥사크로14] 서비스 추가 방법 자바의 패키지명처럼 화면을 구분하는 단위를 넥사크로에서는 서비스라고 한다. 넥사크로에서 서비스를 추가하는 방법은 2가지가 있으며 프로젝트 서비스 파일을 텍스트 에디터로 직접 열어서 수정하는 방법과 GUI(Graphical User Interface)를 활용해서 서비스를 추가하는 방법이 있다. 1. 텍스트 에디터로 서비스 추가 먼저 넥사크로 스튜디오를 닫는다. 넥사크로 프로젝트 루트 경로에 가면 'default_typedef.xml'가 있다. 이 파일을 텍스트 에디터로 'Services' 요소(Element)를 아래의 사진처럼 찾고 적절하게 'Service' 요소를 생성하고 저장한다. 2. GUI로 서비스 추가 'Project Explorer'에서 프로젝트의 'TypeDefinition'을 더블클릭하면 '.. 2022. 8. 19.
[넥사크로 14] 내장 웹 브라우저에서 글자가 깨지는 경우 넥사크로 기반 기존 프로젝트를 활용해서 신규 프로젝트를 개발 중인데 내장 웹 브라우저에서 글자가 깨지는 경우를 발견했다. 크롬 등의 다른 웹 브라우저로 확인하면 글자가 깨지지 않았는데 확인해보니 font 관련 문법 오류가 있어서 발생하는 문제였다. (타업체에서 오래 전부터 사용한 라이브러리를 제공 받은거라 CSS 문법 오류는 없겠지 싶었는데 오산이었다) 넥사크로 개발자 가이드의 CSS 문법 문서를 참고해서 아래처럼 설정하니 내장 웹 브라우저는 물론 외부 웹 브라우저(크롬 등)에서도 잘 동작했다. font:bold antialias,11,Malgun Gothic; 참고문서 [1] "7.2.4 CSS Class의 적용", 넥사크로플랫폼 14 개발자 가이드 14.0.1.3900, 투비소프트. @원문보기 2022. 8. 19.
넥사크로(Nexacro)란 무엇이며 누가 사용하는가? 유튜브 동영상 - [IT 용어] 넥사크로(Nexacro) 넥사크로란 무엇인가? 넥사크로(Nexacro)는 프론트엔드 개발용 프레임워크이다. 넥사크로는 자바스크립트 기반 라이브러리를 묶은 프레임워크는 물론 넥사크로 스튜디오(Nexacro Studio)라는 통합개발환경(Integrated Development Environment, IDE)까지 제공한다. 넥사크로는 화면 구성을 클릭과 드래그앤드랍 같은 GUI(Graphical User Interface)로 구성할 수 있으며 동적으로 처리할 각종 이벤트를 자바스크립트로 코딩할 수 있다. 넥사크로로 개발한 프로그램은 배포가능한 형태로 자동으로 빌드된다. 넥사크로의 특징 넥사크로는 넥사크로에 익숙한 개발자의 경우 화면 관련 생산성이 매우 높다. 특히 공정 단계 .. 2022. 7. 29.

티스토리툴바