2. 데이터 입출력 구현 데이터 모델링 : 개념적 -> 논리적 -> 물리적 이상현상 : 데이터의 중복성으로 인해 테이블을 조작할 대 발생하는 비합리적인 현상(삽입,삭제,갱신) 반정규화 : 시스템의 성능 향상을 위해 정규화 원칙을 의도적으로 위배하는 행위 Index : 검색 연산의 최적화를 위해 키값과 포인터쌍으로 구성되는 데이터 구조 View : 사용자에게 허용된 정보만 보여주기 위해 하나 이상의 테이블로부터 유도된 논리적인 가상 테이블 Cluster : 데이터 접근 효율을 높이기 위해 동일한 성격의 데이터를 같은 데이터 블록에 저장하는 방법 Partitioning : 대용량 테이블이나 인덱스를 작은 논리적인 단위인 파티션으로 나누는 것(레인지,해시,컴포지트) PL/SQL(procedural Langua..
모달창이란? 화면을 개발할 때 자주 나오는 구성 요소 중 하나가 모달(Modal)창입니다. 팝업(Popup)창과 약간 혼동해서 쓰는 경향이 있는데 Modal 과 Popup는 개념이 다릅니다, 팝업(Popup)은 현재 화면에 다른 화면을 하나의창(Browser)으로 보여주는 기능이고, 모달(Modal)은 화면 위에 하나의 작은 화면을 더 만들어 부가적인 일들을 처리할 수 있게 만드는 기능입니다. 먼저 html의 body에 아래와 같이 작성해줍니다. modal창을 위한 div영역, modal창을 열고닫아줄 button을 하나 만들어줍니다. 모달창 제목 모달창 내용 Modal열기 다음으로 CSS를 작성해줍니다. 그 중에서도 먼저 .mdal을 통해 모달 창 배경화면을 덮는 스타일을 정의합니다. 즉 아래의 사진처..
미니 프로젝트 세번째 게임으로 "틀린글자찾기"에서 변형한 다른색깔찾기를 만들어보겠습니다. 게임설명 여러개의 색 중 다른 색을 찾는 게임입니다. 사용기술 html, css, javascript 게임 기능 다른 색깔 찾기 사용자는 주어진 시간 내에 다른 색을 찾아야 한다. 사용자에게는 제한된 시간(15초)이 주어진다. 색상이 2*2 -> 3*3 -> 4*4 -> 5*5 -> 6*6 순으로 나타난다. 정답을 선택한 경우 다음스테이지로 넘어간다. 오답을 클릭한 경우 처음부터 다시 시작한다. 게임종료후 결과 출력 게임은 제한된 시간이 0초가 되었을 때 종료된다. 게임 종료 시 사용자가 도달한 스테이지 정보를 출력한다. 1. 색상 1.1 색상요소생성 색깔을 생성하기 위해 js코드에서 html코드의 색깔이들어갈 영역..
저번시간의 가위바위보게임에 이어 이번에는 1인 토이프로젝트로 틀린글자찾기라는 게임을 만들어보았습니다. (https://myeongsu0257.tistory.com/143) Javascript - 미니게임 프로젝트(가위바위보) Javascript를 이용해 간단한 여러 프로젝트를 해볼려고합니다. 아직 실력이 미흡해서 프로젝트의 퀄리티가 부족할 수 있습니다. 이점 참고해주세요! 게임설명 컴퓨터와 가위바위보 할 수 있습니다 myeongsu0257.tistory.com 먼저 만든화면입니다. 아직 css 부분은 많이 공부하지 않았기도하고 이번 프로젝트의 목표가 js에 익숙해질려고 진행하였기 때문에 디자인은 별로 좋지않습니다. 이후에 js에 익숙해지고 css를 공부하여 다시 한번 더 프로젝트를 꾸밀 생각입니다! 게임..
2단원 데이터 입출력 구현 데이터베이스 : 공통으로 사용될 데이터를 중복을 배제하여 통합하고, 쉽게 접근하여 처리할 수 있도록 저장장치에 저장하여 항상 사용할 수 있도록 운영하는 운영 데이터 데이터베이스 정의 4가지 : 통합된 데이터, 저장된 데이터, 운영데이터, 공용데이터 통합된 데이터 : 자료의 중복을 배제한 데이터의 모임 저장된 데이터 : 컴퓨터가 접근할 수 있는 저장 매체에 저장된 자료 운영 데이터 : 조직의 고유한 업무를 수행하는데 반드시 필요한 자료 공용 데이터 : 여러 응용 시스템들이 공동으로 소유하고 유지하는 자료 DBMS : 사용자의 요구에 따라 정보를 생성해주고, 데이터베이스를 관리해주는 소프트웨어, 기존의 파일 시스템이 갖는 데이터의 종속성과 중복성을 해결하기 위해 제안된 소프트웨어 ..
Javascript를 이용해 간단한 여러 프로젝트를 해볼려고합니다. 아직 실력이 미흡해서 프로젝트의 퀄리티가 부족할 수 있습니다. 이점 참고해주세요! 게임설명 컴퓨터와 가위바위보 할 수 있습니다. 기능 컴퓨터와 가위바위보 대결 컴퓨터는 가위, 바위, 보 중 랜덤으로 하나를 선택한다. 사용자는 가위, 바위, 보 중 하나를 선택할 수 있다. 사용자가 하나를 선택하는 순간 컴퓨터가 선택한 값과 비교하여 결과를 출력한다. HTML html 코드는 간단하게 작성했습니다. 사용자 점수 : 0 컴퓨터 점수 : 0 CSS css는 flex를 이용하여 구현하였습니다. 모든 요소들을 가운데 정렬을 해주었고 버튼의 디자인을 간단하게 수정해주었습니다. body{ font-family: 'Lato', sans-serif; } ..
이번 글에서는 실제로 outsystesm플랫폼 안에서 키오스크를 어떻게 구현했는지 설명드리겠습니다. 진행을 하면서 어려웠던 부분이나 이슈들을 해결한 글들은 제가 이전글(프로젝트)에 포스팅했습니다. 참고해주세요. 먼저 시현영상보여드리겠습니다. https://www.youtube.com/watch?v=SUS0NIazBq4 1. 인터페이스 먼저 인터페이스입니다. 실제 인터페이스는 스크린2개 블록 4개로 구성했습니다. First Screen이 앱을 처음 실행했을때 화면이고 MainScreen이 실제로 주문을 진행하는 화면입니다. 1.1 초기화면 초기화면의 구성은 크게 2개의 컨테이너로 구성했습니다. 위의 컨테이너에는 매장을 소개하는 글과 이미지로 구성을 했습니다. 이를 위해 Adaptive/Columns2 위젯..
이글은 프로젝트를 소개하는 글입니다. 더 자세한 프로젝트 설명을 보고싶으시면 다음 링크를 참고해주세요!https://myeongsu0257.tistory.com/142 outsystems - kiosk(interface, logic, data) ㄱ myeongsu0257.tistory.com 주제 로우코드의 기반의 애플리케이션 구축 및 개선 개발자 최명수(전북대학교 컴퓨터 인공지능학부 4학년) 이현지(전북대학교 컴퓨터인공지능학부 4학년) 협업도구 Coda Slack App Langugae & Environment : Outsystems Service Studio 11 1. 추진배경 주제 : 로우코드의 기반의 애플리케이션 구축 및 개선 로우코드(Low-code)는 직접적인 코드의 개발 없이, 주어진 부품들..
이번에는 dependency기능을 이용하여 Entity를 연동해보고 GetUserId()를 사용하여 각 유저의 ID값을 넘겨주겠습니다.(넘겨주는 이유는 각각 테이블마다 주문하기 위해) 먼저 구현한 기능들입니다 서로다른앱에서 Dependency하여 Entity연동 getUserId()함수를 통해 테이블 번호 매핑 1. 서로다른앱에서 Dependency하여 Entity연동 먼저 사장님 어플에서 Manage Dependencies를 이용해 Kiosk어플의 주문 목록이 담기는 장바구니 엔터티를 Dependencies해주었습니다. 아래처럼 해당 어플을 검색하고 디펜던시할 엔터티를 선택해주면됩니다. 디펜던시를 해주면 해당 엔터티의 값들을 사용할 수 있습니다. 따라서 해당 엔터티의 데이터들을 사장님어플에서 보이게 해..
북마크리스트표시 이번에는 저번에 이어 북마크 바에 여러 아이템을 추가해보고 추가한 아이템 리스트들을 표시하는 기능까지 개발해보겠습니다. 먼저 html에서 class이름이 bookmark-bar인 요소 안에 class이름과 id값이 bookmark-item-add-btn인 div를 작성하고, 그 아래에는 새로운 북마크를 추가할 수 있는 입력폼과 추가버튼을 만들어주겠습니다. + 북마크 추가 이름 주소 취소 추가 그 다음, bookmark.js 파일을 만들어서 방금만든 최상위 div를 id를 통해 불러오겠습니다. 이 북마크도 마찬가지로, 한 번 추가한 북마크는 다음에 접속했을 때 추가된 상태여야 하기 때문에 로컬스토리지에 저장해야합니다. 배열을 하나 만들고, 만약 로컬스토리지에 이 배열의 값이 있으면 로컬스토..
6장 Javascript 1995년 넷스케이프 개발 Netscape Navigator 2.0 브라우저에 최초 탑재 웹 프로그래밍 개념 창시 특징 : HTML문서에 내장, 스크립트언어(인터프리터실행, 컴파일 필요X), 단순(C언어구조사용, 배우기쉬움) 자바스크립트의 역할 사용자의 입력 및 계산 웹 페이지 내용 및 모양의 동적제어 브라우저 제어 웹 서버와의 통신 웹 애플리케이션 작성 자바스크립트 코드의 위치 HTML 태그의 이벤트 리스너 속성에 작성 태그에 작성(head나 body 내 어디든가능) 자바스크립트 파일에 작성 URL부분에 작성 자바스크립트 HTML콘텐츠를 웹페이지에 직접삽입 document.write() document.writeln() -> 줄바꿈이아니라 빈칸 하나 출력 prompt는 취소 누..
이번에는 북마크 탭을 만들어보겠습니다. 북마크탭은 북마크를 추가하는 버튼과 추가한 북마크들을 볼 수 있는 탭입니다. 먼저 html에서bookmark-open(북마크 바가 열린상태)과 bookmark-close(북마크 바가 닫힌상태)를 만들어주고 각각 안에 btn을 하나씩 만들어줍니다. 그리고 그 아래에 boomark-bar(북마크 바)도 생성해줍니다. 북마크 닫기 북마크 열기 css 먼저 css를 설정해주겠습니다. bookmark-open의 스타일은 가로길이를 240px, padding은 위아래로 15px 양옆으로 30px 그다음 글자크기를 xsmall로 설정, 요소의 높이를 20px로 설정해줍니다. 북마크를 열고 닫는 버튼은 오른쪽 상단에 위치해야하고 class이름이 main-container인 요소의..
이번 포스팅에서는 명언 api를 사용해 명언을 나타내보겠습니다. html, API 먼저 index.html에 class와 id가 quote인 요소를 main-wrapper div의 아래에 추가해주겠습니다. 그리고 js폴더안에 quote.js 파일을 만들고 html에서 스크립트해줍니다. quote.js에는 api를 통해 받아온 명언을 나타내주어야 합니다. api주소를 상수에 할당해주고, 방금만든 div요소를 element에 할당해주겠습니다. const API_URL = "https://port-0-random-quote-4uvg2mleme84ru.sel3.cloudtype.app/"; const quoteElement = document.getElementById("quote"); getQuote 다음으로..
이번에는 구글의 검색 결과 창으로 이동하는 기능을 개발해보겠습니다. 먼저 저번시간에 작성했던 html 코드의 today-info div태그아래에 다음 코드를 추가해줍니다. 코드를 저장하고 실행해보면 화면에 "검색어를 입력하세요"라는 글자가 적힌 input폼이 나타납니다. 이전에 검색했던 기록들이 나오면 input태그에 autocomplete속성을 off로 설정해줍니다. 이제 search.js라는 파일을 하나 만들고 위의 input요소를 가져오겠습니다. const searchInput = document.getElementById("search-input"); 그 다음, 우리는 이 input 폼에 검색어를 입력하고 엔터를 누르면, 그 값을 검색한 결과 페이지로 이동시켜야하는 기능을 만들어야하기 때문에, 우..
아래의 코드처럼 index.html의 html파일을 만들어줍니다. 그 다음 clock.js라는 js파일을 만들고 위의 날짜와 요일의 클래스를 할당해주겠습니다. const dateElement = document.getElementById("date"); const timeElement = document.getElementById("time"); 날짜 먼저 dateElment에 오늘의 날짜와 요일을 계산하는 기능을 만들어보겠습니다. const dateElement = document.getElementById("date"); const timeElement = document.getElementById("time"); const getNowDate = () => { const nowDate = new D..
