함수표현식 지금까지 우리는 함수를 선언할 때 다음과 같이 function 키워드 옆에 함수의 이름을 적는 방식으로 함수를 선언했습니다. 이러한 함수의 선언방식을 함수 선언식 이라고 부릅니다. function print() { console.log("hello world"); } 자바스크립트에서는 함수를 선언할 때 이러한 함수의 선언식 외에 함수 표현식을 이용해 함수를 만들 수 있습니다. let print = function () { console.log("hello world"); }; 코드를 보면 print라는 변수에 "hello world"를 출력하는 함수를 마치 값처럼 할당했습니다. print는 변수이지만 함수를 값으로 가지고 있어, 함수를 호출하는 것과 동일하게 print();로 호출할 수 있습니..
호이스팅 호이스팅이란, 아직 선언되지 않은 함수나 변수들을 해당 스코프의 맨 위로 끌어올려서 사용하는 것처럼 보이게하는 자바스크립트의 작동 방식을 의미합니다. 자바스크립트에는 변수 호이스팅과 함수 호이스팅이 있습니다. 함수 호이스팅 아래의 코드를 보면 print함수를 호출하면 함수가 아직 선언되지 않았지만, 오른쪽 콘솔탭에 "hello world"가 출력되었고, 함수가 오류 없이 정 상적으로 작동하는 것을 확인할 수 있습니다. 해당 코드가 정상적으로 작동하는 이유는 자바스크립트 엔진이 코드를 해석하는 과정에서 이렇게 print 호출문 보다 선언문이 먼저 작성되어있는 코드로 받아들였기 때문입니다. 아래의 코드처럼 pirnt 함수의 선언문을, print 함수가 갖는 스코프, 유효범위의 가장 위쪽으로 끌어올려..
스코프 스코프(Scope)는 직역하면 범위 라는 뜻으로, 자바스크립트에서는 우리가 변수 또는 함수를 생성할 때, 해당 변수 또는 함수가 갖게 되는 유효범위를 뜻합니다. 자바스크립트의 스코프에는 여러 종류가 있습니다. 이 중에서, 전역스코프와 지역스코프에 대한 내용 먼저 살펴보겠습니다. 전역 스코프와 지역 스코프 전역 스코프는 영어로는 Global Scope로 전역에 선언되어있어, 어디서 든지 해당 변수에 접근 할 수 있는 범위를 뜻합니다. 지역 스코프는 Local Scope로 말 그대로 해당 지역에서만 접근할 수 있는, 지역을 벗어난 곳에서는 접근할 수 없는 범위를 나타냅니다. 저번시간에 배웠던 전역변수 혹은 외부변수는 아래에 보이는 코드의 sum변수처럼 어디서나 접근가능하므로 전역스코프를 갖고, 지역변..
함수 함수는 같은 동작을 하는, 중복된 코드가 여기저기에 존재할 때, 이들을 하나로 묶어 하나의 명령으로 실행할 수 있게 해주는 기능입니다. 작성법 먼저 함수를 사용하지 않고 동일한 기능을 하는 코드를 중복해서 작성해보겠습니다. let num1 = 10; let num2 = 15; let sum = num1 + num2; console.log(sum); //25 만약 여기서 또 다른 숫자들을 더하는 연산을 추가로 실행해야한다면, let num1 = 10; let num2 = 15; let sum = num1 + num2; console.log(sum); //25 let num3 = 1; let num4 = 5; let sum2 = num3 + num4; console.log(sum2); //6 위의 코드..
아래의 메뉴화면을 구성한 후 메뉴를 클릭하였을 때 메뉴의 상세옵션이 있는 화면으로 넘어가야한다. 아래는 메뉴의 상세옵션화면이다. 즉 메인화면의 메뉴의 Id를 해당화면으로 전달하여 해당메뉴의 상세옵션을 보여줘야한다. 어떻게 전달하면 좋을까 고민을 많이했다. 바로 스크린화면으로 전달하는 과정까지는 쉬운데 스크린안에 layout이 또다른 Block으로 구성되어 있어 Block까지 값을 전달해야 함이 복잡했다. 그래서 일단 메뉴를 클릭했을때 Block이 아닌 스크린으로 메뉴의 Id를 전달하고자 하였다. 메인화면은 MenuScreen2이고 상세화면은 ex이다. 아래는 ex스크린화면의 입력매개변수와 Aggregate이다. 입력매개변수하나와 Aggregate를 불러와줬다. 그리고 메인화면에서 listitem을 더블클..
조건문 조건문은 특정 조건이 성립되었을 때 그 조건에 해당하는 코드를 실행하게 하는 문법입니다. if문 if문은, 영어 if와 같이 만약 ~ 하면 ~해라 라는 뜻으로, if문 옆에 작성하는 괄호 안에, 특정 조건문을 넣어, 해당 조건문이 성립하면 if문안의 코드를 실행하는 조건문입니다. let num = 10; if (num === 10) { //조건 console.log("num의 값은 10 입니다."); //실행 코드 } let num = 5; if (num === 10) { //조건 console.log("num의 값은 10 입니다."); //실행 코드 } if-else문 if-else문은 만약 ~ 하면 ~하고, 그렇지 안다면 ~해라 라는 뜻을 가지고 있습니다. let num = 5; if (num..
연산자 연산자는 프로그래밍 언어에서 특정 연산을 할 수 있도록 도와주는 문자입니다. let number = 25; console.log(number + 5); //30 console.log(number - 5); //20 console.log(number * 5); //125 console.log(number / 5); //5 대표적으로 사칙연산을 도와주는 덧셈, 뺄셈, 곱셈, 나눗셈이 연산자에 해당합니다. 이 외에도 다양한 연산자가 존재합니다. 산술연산자 위에서 보았던 사칙연산에 관한 기본적인 산술연산자 입니다. let num1 = 10; let num2 = 5; console.log(num1 + num2); // 15 console.log(num1 - num2); // 5 console.log(num..
이번포스팅에서는 레이아웃화면을 구성해보겠습니다. 일반 UI Flows에서 Layout을 더블클릭합니다. 아래의 사진처럼 Container의 Width를 8col로 설정하고 Margin에서 왼쪽 마진의 값을 0px로 설정합니다. 그럼 아래와 같은 사진과 같이 레이아웃이 구성됩니다. 그다음 새로운 Screen을 하나 만들어주겠습니다. 아래의 스크린에서 왼쪽 첫번째 placeholder부분에 전체 버튼을 만들고 아래의 Placeholder에는 메뉴카테고리에 해당하는 버튼을 만들어주겠습니다. 그 전에 아래의 사진처럼 각각의 Placeholder에서 Interaction\Sidebar를 delete해주겠습니다. 그리고 아래의 사진처럼 위젯을 설정해줍니다. 이제 list의 source를 설정해주겠습니다.
이번포스팅에서 메인화면을 설계해보겠습니다. 같이 협력하여 프로젝트를 진행하는 회사의 멘토분께 도움을 받아 스크롤화면을 구현할 수 있게되어 원래 ui버전으로 진행하기로 했습니다. 위의 화면을 구현하려면 첫번째로 왼쪽에 버튼을 클릭하였을 경우 가운데의 메뉴들이 업데이트 되어야 합니다. 이를 위해 먼저 버튼을 클릭할경우 메뉴를 보여주는 화면을 설계해보겠습니다. Data 설계를 위해 첫번째로 데이터를 임시로 설계해보겠습니다. Entity는 2개를 만들었습니다. 메뉴들이 담기는 Menu Entity, 메뉴의 카테고리가 있는 MenuCategory Entity가 있습니다. 속성으로는 Name 한개를 추가해주었습니다. 다음으로는 Menu입니다. 속성으로는 Name, Price를 생성해주었습니다. 다음으로 Menu E..
자료형 자바스크립트 자료형은 크게 원시타입과 비 원시 타입으로 나뉩니다. 원시타입 자료형 : 숫자형, Binint형, 문자형, Boolean형, Null, Undefined, Symbol형 비 원시타입 자료형 : 객체, 함수, 배열 원시타입 단 하나의 값만을 갖고 있는 타입 let number = 123; number = "123"; // 원시 타입 let array = [1, "2", 3]; //비원시 타입 number 변수는 값이 123이었다가 "123"으로 변경되었지만 한 번에 하나의 값만 갖고 있는 것을 볼 수 있고, array변수는 1, "2", 3 으로 한 번에 3개의 값을 가질 수 있습니다. 숫자형 숫자형(Number)은 말 그대로 정수, 소수 등의 모든 숫자를 나타냅니다. 숫자형 타입은 덧..
변수 먼저 변수란, 프로그램이 실행되는 도중에 변경되는 값을 저장하기 위한 이름을 가진 저장소입니다. 자바스크립트에서 변수를 선언할때 let이라는 키워드를 사용합니다. let뒤에는 생성할 변수의 이름을 작성하고, 그 다음 = 연산자를 통해 해당 변수에 값을 할당합니다. 아래의 코드를 보면 color라는 변수를 생성하고 = 연산자를 통해 데이터를 저장했습니다. 그리고 결과값이 출력되는 것을 볼 수 있습니다. 변수의 값은 실행도중 변경될 수 도 있습니다. 위의 예제코드에서 skyblue라는 값이 담긴 변수 color를 중간에 yellow라는 값으로 변경하는 것도 가능합니다. 변수 명명 규칙 자바스크립트에서 변수의 이름을 결정할 때 지켜야 할 규칙을 배워보겠습니다. 첫 번째 규칙은 $와 _를 제외한 기호를 사..
Aggregate는 데이터베이스에서 데이터를 가져오는 쉬운 시각적 방법을 제공하지만 때때로 Aggregate가 처리할 수 없는 더 복잡한 쿼리가 필요할 수 있습니다. 따라서 SQL 도구를 사용하여 상당히 복잡한 SQL문을 작성할 수도 있습니다. SQL Tool SQL 도구는 서버 작업 및 화면 데이터 작업과 같은 서버측 흐름에서 사용할 수 있습니다. 입력 및 출력은 미리 정의해야 하며 상단의 시각적 편집기를 사용하여 수행할 수 있습니다. 입력 및 출력은 미리 정의해야 하며 상단의 시각적 편집기를 사용하여 수행할 수 있습니다. SQL 도구 내부에서 SQL문을 작성할 수 있습니다. SQL 도구가 블랙박스와 같다는 것을 아는 것이 중요합니다. 이는 외부 범위에 직접 액세스할 수 없음을 의미합니다. 따라서 외부..
Client Variables 클라이언트 변수의 값은 기본 데이터 유형 및 엔터티 식별자로 제한됩니다. 클라이언트 브라우저는 모든 클라이언트 변수를 저장합니다. 사용자가 로그인할 때마다 클라이언트 변수 값이 유지되지만 로그아웃하면 클라이언트 변수 값이 기본값으로 재설정 클라이언트 변수는 많은 경우에 유용하며 사용자별로 다르며 클라이언트 브라우저에 로컬로 저장된다는 점을 인식하는 것이 중요 Site Properties 사이트 속성은 응용 프로그램 전체 정보를 저장하는 전역 구성 변수입니다. 글로벌이란 애플리케이션의 설정을 저장하는데 사용할 수 있으며 해당 환경의 모든 최종 사용자가 해당 값을 공유한다는 의미입니다. 사이트 속성은 서버측에만 존재합니다. 그리고 정수, 텍스트 값 및 엔터티 식별자와 같은 기본..
Scrren Events On Initialize 이벤트 핸들러가 초기화되는 시점에서 실행됩니다. 일반적으로 이벤트 핸들러에서 초기화 작업이 수행됩니다. 예를 들어 화면이 로드되었을 때 초기데이터를 가져오거나 초기 변수 값을 설정하는 등의 작업이 이 단계에서 수행됩니다. On Ready 화면이 초기화되고 요소들이 렌더링된 후 실행됩니다. 이벤트 핸들러에서는 화면 요소들에 대한 조작이나 초기화를 수행 할 수 있습니다. 예를 들어, 버튼이나 입력란과 같은 요소들의 상태를 설정하거나 초기 포커스를 설정하는 등의 작업이 이 단계에서 수행됩니다. On Render 화면 요소들이 렌더링된 후 실행됩니다. 이벤트 핸들러에서는 화면의 레이아웃이나 스타일과 관련된 작업을 수행할 수 있습니다. 예를 들어 동적으로 생성된 ..
1. 요구사항 시스템에 필요한 요구사항들을 적어보았습니다. 엑터 : 손님 손님은 주문을 할 수 있다. 손님은 매장식사 or 포장을 선택 할 수 있다. 손님은 메뉴를 선택할 수 있다. 손님은 여러개의 메뉴를 선택할 수 있다. 손님은 메뉴의 상세옵션을 결정할 수 있다. 손님은 선택한 메뉴를 삭제할 수 있다. 손님은 메뉴의 수량을 변경할 수 있다. 손님은 주문서(장바구니)를 확인할 수 있다. 손님은 결제방법을 선택할 수 있다. 손님은 결제를 할 수 있다. 손님은 주문번호를 확인할 수 있다. 엑터 : 주인 주인은 주문을 받을 수 있다. 주인은 손님의 주문서를 확인할 수 있다. 주인은 주문을 거절할 수 있다. 주인은 손님의 테이블번호를 확인할 수 있다. 주인은 주문요청시간을 확인할 수 있다. 주인은 관리자에게 메..
