본문 바로가기

프레임워크19

728x90
반응형
뷰(Vue.js)란 무엇이며 누가 사용하는가? 뷰는 무엇인가?뷰(Vue.js)는 프론트엔드 개발용 프레임워크이다. 뷰는 리액트와 양대 상맥을 이루는 오픈소스 프론트엔드 개발용 프레임워크이다. 뷰에서는 화면을 개발할 때 HTML와 CSS, Javascript를 조합하여 사용한다. 뷰로 개발할 때는 통합개발환경(Integrated Development Environment, IDE)으로 Visual Studio를 많이 사용하는 편이다.뷰의 특징뷰에서는 화면을 개발할 때 HTML와 CSS, Javascript를 조합하여 사용하기에 기존의 웹 개발자들이 빠르게 익힐 수 있는 특징이 있다. 뷰는 프레임워크답게 코드 재사용성이 높고 화면 배치를 위해 HTML과 CSS를 사용하기에 직관적이라 코드 생산성이 높다. 뷰는 개발 기간이 짧고 자주 수정되는 SI 업계에.. 2024. 11. 13.
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.
[넥사크로 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] Spin 컴포넌트의 'canchange' 이벤트 Spin 컴포넌트에서 'canchange' 이벤트를 활용하면 커서가 컴포넌트에 'enter' 또는 'focusout' 동작할 때 기존 'value'와 현재 'value'가 다른 경우 함수를 호출할 수 있다. 'value' 가 변하면 동작해야 하는 기능을 구현할 때 활용한다. 2023. 1. 12.
[스프링] DataSource 스프링 빈을 자바 코드로 생성하기 값을 읽어오는 방식 등의 이유로 DataSource 스프링 빈을 자바 코드로 생성해야하는 경우가 있다. 그런 경우 아래와 같은 소스 코드로 자바 빈을 생성할 수 있다. 예제 소스 연결하고자 하는 데이터베이스 맞춰서 드라이버와 주소, 계정 정보를 수정하여 사용한다. 아래 소스 코드는 스프링 프레임워크 4.0.9에서 동작하는 것을 확인했다. @Bean public DataSource dataSource() { SimpleDriverDataSource dataSourceVideo = new SimpleDriverDataSource(); dataSourceVideo.setDriverClass(org.mariadb.jdbc.Driver.class); dataSourceVideo.setUrl("jdbc:mariad.. 2022. 11. 23.
마이바티스에서 프로시저를 호출하는 방법 본 글에서는 티베로(오라클)의 데이터베이스를 사용하는 마이바티스 프로젝트에서 프로시저를 호출하는 것과 프로시저에 값을 전달하고 받는 방법을 소스 코드와 함께 설명한다. 프로시저 작성 예제 아래의 SQL(Structured Query Language)처럼 프로시저를 작성한다. CREATE OR REPLACE PROCEDURE EXAMPLE_PROCEDURE( IN_DATA IN VARCHAR2, OUT_ERROR_CODE OUT NUMBER, OUT_ERROR_MESSAGE OUT VARCHAR2 ) IS BEGIN INSERT INTO EXAMPLE_TABLE(COLUMN) VALUES(IN_DATA); OUT_ERROR_CODE := 0; OUT_ERROR_MESSAGE := '성공'; EXCEPTIO.. 2022. 11. 8.
[CentOS 7] Express 방화벽 허용 Node.js의 웹 개발 프레임워크인 Express의 포트를 확인하고 방화벽 설정을 해두어야 본인이 원하는 위치에서 원활하게 접속이 가능하다. CentOS 기준으로 Express 프로젝트가 사용하는 포트를 확인하고 적절한 포트를 아래의 사진처럼 입력하면 방화벽 규칙이 추가된다. firewall-cmd --permanent --zone=public --add-port=포트번호/프로토콜 아래의 명령어를 입력하여 CentOS 방화벽 규칙을 적용한다. firewall-cmd --reload 아래의 명령어를 입력하여 적용된 CentOS 방화벽 규칙을 확인한다. firewall-cmd --list-all 다시 웹브라우저로 실행한 Express 프로그램에 접속하면 아래처럼 잘 나타나는 것을 확인할 수 있다. 2022. 9. 22.
[넥사크로14] 서비스 추가 방법 자바의 패키지명처럼 화면을 구분하는 단위를 넥사크로에서는 서비스라고 한다. 넥사크로에서 서비스를 추가하는 방법은 2가지가 있으며 프로젝트 서비스 파일을 텍스트 에디터로 직접 열어서 수정하는 방법과 GUI(Graphical User Interface)를 활용해서 서비스를 추가하는 방법이 있다. 1. 텍스트 에디터로 서비스 추가 먼저 넥사크로 스튜디오를 닫는다. 넥사크로 프로젝트 루트 경로에 가면 'default_typedef.xml'가 있다. 이 파일을 텍스트 에디터로 'Services' 요소(Element)를 아래의 사진처럼 찾고 적절하게 'Service' 요소를 생성하고 저장한다. 2. GUI로 서비스 추가 'Project Explorer'에서 프로젝트의 'TypeDefinition'을 더블클릭하면 '.. 2022. 8. 19.
[CentOS 7] Express 4.16.1 설치 Node.js의 Express는 웹 개발용 프레임워크이다. 본 글에서는 Express를 설치하고 기본 예제를 실행해보는 것을 진행한다. Node.js가 없다면 아래의 글에서 설치하는 법을 확인할 수 있다. 2022.08.01 - [소프트웨어 개발/Node.js] - [CentOS 7] Node.js 16.15 설치하고 웹 서버 프로그램을 작성하여 실행해보자 [CentOS 7] Node.js 16.15 설치하고 웹 서버 프로그램을 작성하여 실행해보자 Node.js 16 버전을 설치하고 웹 서버 프로그램을 작성 및 실행하는 방법은 아래와 같다. 설치를 진행한 운영체제는 CentOS 7.8이다. YUM 저장소 목록 확인 아래의 명령어를 입력하여 Node.js 패키지 설치 engineeringcode.tisto.. 2022. 8. 3.
넥사크로(Nexacro)란 무엇이며 누가 사용하는가? 유튜브 동영상 - [IT 용어] 넥사크로(Nexacro) 넥사크로란 무엇인가? 넥사크로(Nexacro)는 프론트엔드 개발용 프레임워크이다. 넥사크로는 자바스크립트 기반 라이브러리를 묶은 프레임워크는 물론 넥사크로 스튜디오(Nexacro Studio)라는 통합개발환경(Integrated Development Environment, IDE)까지 제공한다. 넥사크로는 화면 구성을 클릭과 드래그앤드랍 같은 GUI(Graphical User Interface)로 구성할 수 있으며 동적으로 처리할 각종 이벤트를 자바스크립트로 코딩할 수 있다. 넥사크로로 개발한 프로그램은 배포가능한 형태로 자동으로 빌드된다. 넥사크로의 특징 넥사크로는 넥사크로에 익숙한 개발자의 경우 화면 관련 생산성이 매우 높다. 특히 공정 단계 .. 2022. 7. 29.
[CentOS 8] 라라벨(Laravel) 8 설치하고 PHP 내장 웹서버에서 실행하는 방법 꽤나 많은 착오가 있었기에 라라벨(Laravel) 8을 CentOS 8에 설치하는 방법을 정리한다. 라라벨을 설치하는 것 까지는 동일한데 설치된 라라벨을 실행하는 웹서버로 여러가지를 사용할 수 있어서 비슷한 내용으로 여러번 포스팅할 것 같다. 본 글에서는 가장 간단한 방법인 PHP 내장 웹서버로 라라벨 8 프로젝트를 실행하는 것을 소개한다. 설치환경은 아래와 같은데 혹시 PHP를 설치하지 않았다면 아래의 '[CentOS 8] PHP 7.4 버전 설치하는 법'를 참고하여 설치하면 된다. 설치환경 : CentOS 8.5.2111, PHP 7.4.19 2021.12.23 - [개발/리눅스] - [CentOS 8] PHP 7.4 버전 설치하는 법 1. PHP-JSON 모듈 설치 아래의 명령어를 입력하여 php-.. 2021. 12. 28.
라라벨 8 시간/타임존 변경 PHP 설정과 DB 설정에 가서 타임존을 변경하였는데도 시간이 의도와 달리 나온다면 라라벨 8의 자체 타임존을 확인해볼 필요가 있다. 라라벨 8 설정 변경 아래의 명령어처럼 라라벨 8 설정 파일을 텍스트 에디터로 연다. vi config/app.php 그러면 아래와 같은 화면이 나타나는데 timezone을 찾아보자. timezone 설정을 찾았다면 UTC로 되어 있는 것을 원하는 시간으로 수정한다. 필자의 경우 우리나라(대한민국) 표준시인 서울로 설정하였다. 'timezone' => 'Asia/Seoul' 설정파일을 저장하면 바로 적용된다. 정상적으로 반영되었는지 테스트 해본다. 2021. 11. 12.
[C#] 프로젝트 프레임워크를 .NET 5.0으로 변경하기 여러가지 이유로 .NET 5.0으로 C# 프로그램을 개발해야할 때가 있다. 나는 C# 프로그램을 개발할 때 Visual Studio 2019를 사용하고 있는데 예전에 설치한 버전이라서 5.0 런타임을 설치하고 다른 종속성 패키지들도 업데이트할 필요가 있었다. 하지만 설치 및 업데이트 후에도 '프로젝트 속성'-'애플리케이션'-'대상 프레임워크'에서 .NET 5.0이 아래처럼 설정 목록에 없었다. 이 경우는 텍스트 에디터로 프로젝트 설정을 바꿔주면 된다고 MSDN(Microsoft Developer Network) 문서에 있었기에 아래처럼 내용을 확인하고 바꾸니 .NET 5.0으로 잘 설정되었다. 프로젝트 설정 파일은 프로젝트 폴더로 가서 '프로젝트명.csproj'으로된 파일이다. 이 파일을 메모장이나 자신.. 2021. 4. 3.
스프링 프레임워크에서 트랜잭션을 설정할 때 주의해야할 것 스프링 프레임워크에서 트랜잭션을 설정하는 것은 인터넷에 잘 나와있다. 하지만 몇 가지 중요한 포인트를 놓쳐서 하루 종일 시간을 날렸다. 트랜잭션 어노테이션 혹은 트랜잭션을 위한 AOP를 설정할 때는 서블릿 컨텍스트 설정 파일(servlet-context)에다가 해당 내용을 기입해야한다는 것이었다. "설정 값만 보면 정상인데 왜 이게 동작을 안 하지?"라는 생각을 하며 있었는데 참 허탈하다. 이거 외에도 컨트롤러가 아닌 @Component, @Service, @Repository 유형의 클래스 또는 그 클래스의 메서드에다가 트랜잭션을 설정한다는 점과 트랜잭션을 위해서는 인터페이스가 필요하다는 것을 알았다. 아직은 어떤 이유로 이렇게 써야하는 건지를 모르겠다. 나중에 알게 되면 내용을 추가하겠다. [참고] .. 2020. 9. 7.
파이썬 웹 개발 환경 구축 4 - 파이참(PyCharm)에서 장고(Django) 개발 환경 설정하기 파이참이 설치되었고 잘 실행된다면 이제는 파이참(PyCharm)에서 장고(Django) 개발 환경을 구성하는 일이 남았다. 장고 개발 환경 구축은 장고 패키지 설치부터 시작하여 장고 프로젝트 생성, 장고 실행 설정을 통해 구축이 완료된다. Create New Project를 클릭하여 새로운 프로젝트를 생성한다. 새로운 프로젝트 설정은 위와 같이한다. File - Settings 를 클릭하여 파이참 설정으로 간다. Project: 프로젝트명 - Project Interpreter 에 가서 우측 상단의 + 를 클릭하여 패키지를 설치한다. Django를 검색하여 Install Package를 눌러서 설치한다. 장고 패키지 설치가 완료되면 Package 'Django' installed successfully .. 2019. 3. 25.
파이썬 웹 개발 환경 구축 3 - 파이참(PyCharm) 통합개발환경(IDE) 설치하기 콘솔과 텍스트에디터로 개발하는 것은 빌드와 실행 등의 반복(노가다) 작업을 수행해야하고 패키지 정보를 쉽게 찾는 등의 생산성을 향상시킬 수 있는 편의기능이 없으므로 파이썬을 지원하는 통합개발환경(IDE, Integrated Development Environment)을 활용하여 생산성을 확보하는 것이 좋다. 쉽게 설명하면 자바를 배울 때 이클립스를 사용하는 것과 C/C++를 배울 때 비주얼 스튜디오를 사용하는 것과 같다. 파이참 에디션(라이센스)별 제공 기능 비교 : https://www.jetbrains.com/pycharm/features/editions_comparison_matrix.html 파이썬의 통합개발환경은 파이참(PyCharm)이 대표적이다. 파이참 에디션(라이센스)은 프로페셔널(유료)과.. 2019. 3. 25.
파이썬 웹 개발 환경 구축 2 -파이썬에 장고(Django) 프레임워크 설치하기 필자는 파이썬으로 웹 개발을 하는 것이 목표이기 때문에 장고(Django) 프레임워크(Framework)를 사용할 수 있는 개발환경을 구축해야 했다. 본 글에서는 장고 프레임워크를 설치하고 예제 프로젝트를 생성하여 실행해서 정상적으로 장고 프레임워크가 설치되었는지를 확인한다. 파이썬을 설치했고 환경 변수 중 Path를 설정했다면 'pip -V'를 입력하면 PIP(패키지 매니저, Package manager)가 설치되어 있음을 알 수 있다. 이 패키지 매니저로 장고 프레임워크를 간단한 명령어 입력만으로 설치할 수 있다. 'pip install django'를 입력하여 장고 프레임워크 설치를 시작한다. 정상적으로 설치되었다면 'Successfully installed django'이 나올 것이다. ※ 삭제는.. 2019. 2. 24.

티스토리툴바