본문 바로가기
반응형

Web Front 개발공부/Web Front 기타12

VSCODE github 연동설정 VSCODE github 연동설정 vscode를 설치 한 후, github에 만든 소스를 손쉽게 업로드하는 방법을 알아보도록 한다.  상당히 간단하다. git과 github는 서로 다른 기능의 소프트웨어란 것을 기억하길 바라고. 우선 git을 내 로컬 컴퓨터에 설치 해야 한다. 이후 github 사이트에 들어가 계정을 만들고 vscode로 연동 한다. 1. git을 로컬 컴퓨터에 설치한다. (윈도우로 예시)https://git-scm.com/download/win Git - Downloading PackageDownload for Windows Click here to download the latest (2.46.0) 32-bit version of Git for Windows. This is the .. 2024. 8. 4.
웹스퀘어 그리드 컨트롤 웹스퀘어 그리드 컨트롤이번 포스팅은 웹스퀘어 Grid 컨트롤 기능을 구현 및 알아본다. 자바스크립트 프레임워크나 라이브러리들은 대부분 그리드(grid)를 자체적으로 구현해 놓은 경우가 대다수다. 만든 이들이 다를 뿐 개념은 거의 비슷하다고 할 수 있다. 1. 공통점으로는 서버에서 가져온 데이터를 갖고 있는 객체가 있다. 2. 그리드는 html 객체다. Grid 객체가 존재한다. 3. 1과 2가 바인딩 또는 매핑 된다. 결국 서버에서 가져온 데이터 객체 + Html로 구현한 그리드 객체 두 개가 서로 매핑되어 상화보완 작용을 한다고 판단하면 된다. 이 원리를 머릿속에 이해하고 있다면 그리 어렵지 않게 제공된 API를 참고해서 일반적으로 많이 사용하는 기능을 충분히 구현할 수 있다. 이번에 구현해 볼 기능은.. 2023. 5. 14.
웹스퀘어 그리드 다이나믹콤보 SelectBox 적용해보기 웹스퀘어 그리드 다이나믹콤보 SelectBox 적용해 보기 Html Input type이 selectBox 일 경우, 간단한 프로그램일 경우는 하드코딩을 하지만, 프로젝트에서는 가능한 서버에서 code와 code_name을 읽어와서 세팅을 한다. 웹스퀘어 교육에서는 이런 거 안 알려준다. 아주 기본적인 것만 알려줄 뿐이다. 아이템 더블클릭해서 세팅하는 방법정도. 웹스퀘어 만든 회사에서 제공한 com 라이브러리에 공통코드를 다이내믹하게 가져오는 함수가 있기는 하지만, API를 통해서 구현해보려 한다. 1. 화면에 오픈될 때, 서버에서 셀렉트박스에 바인할 데이터를 통신해 온다. scwin.onpageload = function() { com.sbm.execute(sbm_dept); }; 서버 측 코드는 예제.. 2023. 5. 7.
웹스퀘어 팝업 기능 구현 websquare5 웹스퀘어 팝업 기능 구현 websquare5 이번 포스팅에서는 웹스퀘어 프레임워크에서 팝업 기능을 구현해 본다. 웹스퀘어 만든 회사에서 제공하는 com 라이브러리를 이용하면 API 예제보다는 조금 더 쉽게 구현이 가능하다. 자바스크립과 html으로 팝업을 호출하는 기능을 구현한 경험이 있다면 난이도가 그리 어렵지는 않다. 구현할 기능 1. 메인화면과 팝업 화면이 있다. 메인화면에서 텍스트 박스에서 부서명을 입력하고 팝업 버튼을 클릭하면 팝업 화면이 뜬다. 2. 팝업 화면에서는 메인화면에서 전달한 부서명 파라미터를 받아 자동으로 텍스트 박스 검색조건에 바인딩이 되고 조회 버튼을 누르면 그리드에 부서정보가 조회된다. 3. 그리드에서 원하는 부서를 더블 클릭하면 팝업이 닫히고 메인화면으로 돌아온다. 이때 팝업.. 2023. 5. 6.
웹스퀘어 그리드 부모 자식 1:N 조회 구성 웹스퀘어 그리드 부모 자식 1:N 조회 구성 부서정보가 조회되고 해당 부서에 마우스를 클릭하면 하단 사원정보 그리드에 해당 부서의 속한 사원리스트가 나오는 화면을 구성해 본다. 두 가지 방법이 존재한다. 1. 부서정보의 그리드를 클릭할 때마다 서버와 통신을 해서 사원정보를 조회하는 방법 2. 최초에 조회를 할 때, 부서정보 전체와 사원정보 전체를 모두 서버로부터 갖고 와서 사원정보를 필터 형태로 그리드에서 나타내게 하는 방법. 두 가지 방법대로 장단점이 존재하는데. 2번 방법의 경우 데이터가 많다면 문제가 된다. 데이터가 많다면 초기 로딩이 문제가 될 텐데 막상 로딩 후에는 빠르게 필터링이 된다. 1번의 경우 단점은 역시 서버와 통신이 너무 잦다는 것. 하지만 최신 정보를 가져올 수 있다. 처음에는 빠르.. 2023. 5. 5.
웹스퀘어 selectbox 바인딩 웹스퀘어 selectbox 바인딩 데이터베이스에서 사원이나 부서 정보를 읽어서 웹스퀘어 화면의 SelectBox에 바인딩하는 예제를 만들어 본다. 누군가 만들어 놓은 함수를 사용해서 빠르게 구현하는 것도 좋은 방법이다. 구현할 기능 및 구성 하지만, 이번 포스팅에서는 1. 직접 데이터 맵에 자료를 입력해서 셀렉트 박스에 바인딩하는 케이스 - 사원정보 2. 서버 통신으로 셀렉트 박스에 바인딩하는 케이스 - 부서정보 두 가지 케이스를 만들어 본다. 데이터컬렉션 셀렉트 박스에 대응될 데이터 컬렉션(맵, 리스트) 사원, 부서 객체를 두개 만든다. 두 데이터맵 리스트에 각각 하드코딩으로 사원정보, 서버에서 읽어온 부서정보 등의 정보를 담아 바인딩시킨 후 확인해 본다. 실행 결과 결과는 아래와 같다. 프로그램이 실.. 2023. 5. 5.
반응형