이번에는 메인화면에서 오른쪽 장바구니 부분의 메뉴를 표시하는데 세부옵션에서 선택한옵션들까지 표시하는 기능을 구현해보겠습니다. 사진상으로는 표시한 부분에 메뉴와 선택한 옵션이 나옵니다. 먼저 내가 선택한 메뉴는 다음과 같이 나옵니다. 옵션이 표시되지가 않습니다. 필수옵션 먼저 필수옵션먼저 표시해보도록 하겠습니다. 필수옵션은 1가지값만 표시하면되어 간단하게 표시할 수 있습니다. 먼저 이전시간에 MustOptionLabel이라는 곳에 필수옵션에서 선택한 값을 담아 화면에 표시해줬습니다. (https://myeongsu0257.tistory.com/111) outsystems - 5.5 필수옵션 문제점 아래의 사진처럼 상세옵션스크린을 보면 필수옵션이라는 항목이 있습니다. 필수옵션 항목은 하나의 옵션만 선택 가능..
동기 동기란 하나의 작업이 실행되는 동안은 다른 작업을 수행하지 않는 방식으로, 다시 말해 하나의 작업이 종료될 때 까지 다른 작업을 실행하지 못하고, 앞선 작업이 끝나야 다음 작업을 할 수 있는 순차적인 방식을 말합니다. 아래는 동기적인 코드의 예시입니다. console.log("a"); console.log("b"); console.log("c"); 결과를 보면 작성된 순서대로 실행결과 a,b,c가 출력됩니다. 이유가 바로 자바스크립트 코드가 동기적으로 처리 되었기 때문입니다. workA, workB, workC 3가지 함수가 실행 후 종료되기 까지 걸리는 시간이 각각 5초, 3초, 10초 라고 가정해보겠습니다. const workA = ()=>{ //5초 console.log("workA"); } ..
spread spread는 직역하면 확산, 퍼짐, 전파라는 뜻으로, 실제로 특정 배열의 요소나 객체의 프로퍼티 값들을 펼치는 역할을 합니다. 객체 spread에 대해 알아보기 위해 toy라는 객체를 선언 const toy = { type: "bear", price: 15000, }; 이번에는 color라는 키값을 갖는 프로퍼티를 추가해서 두 개의 객체를 생성 const blueToy = { type: "bear", price: 15000, color: "blue", }; const yellowToy = { type: "bear", price: 15000, color: "yellow", }; 작성한 객체들을 보면, 새로 추가한 객체들과 toy객체의 프로퍼티 중 type과 price값이 동일한 것을 볼 수 ..
구조 분해 할당 구조분해할당이란 배열이나 객체의 요소 및 프로퍼티들을 분해해서 그 값들을 각각의 변수에 할당하는 자바스크립트의 표현식입니다. 배열의 구조 분해 할당 기본 변수 할당 let colors = ["green", "blue", "purple"]; 위 배열의 요소들을 각각의 변수에 할당해 출력해보겠습니다. let colors = ["green", "blue", "purple"]; let c1 = colors[0]; // "green" let c2 = colors[1]; // "blue" let c3 = colors[2]; // "purple" console.log(c1); // "green" console.log(c2); // "blue" console.log(c3); // "purple" 위의 ..
concat concat은 두개의 배열을 이어 붙일 수 있습니다. let array1 = ["green", "blue"]; let array2 = ["purple", "yellow"]; console.log(array1.concat(array2)); join join도 concat과 마찬가지로 배열을 하나로 합쳐주는데 concat과 다른점은 join 메서드는 하나의 배열에서 배열 요소들의 값들을 문자열로 이어주는 메서드라는 것입니다. let colors = ["green", "blue", "purple"]; console.log(colors.join()); console.log(colors.join(" ")); 이 join 메서드 내부에 들어가는 매개변수는 구분자로, 요소들을 합칠 때 사이에 어떤 문자를..
forEach 우리는 배열의 모든 요소들에 접근하기 위해 for문을 사용했었습니다. let arr = [1, 2, 3, 4, 5]; for (let i = 0; i < arr.length; i++) { console.log(arr[i]); } 이렇게 배열의 요소들에 접근하기 위해서는 for문을 사용할 수도 있지만, 자바스크립트에서는 배열의 내장함수를 이용해 더 간단하게 배열 요소에 접근할 수 있습니다. forEach라는 배열 내장함수를 사용해보겠습니다. forEach는 배열의 내장함수, 메서드이기 때문에 배열의 이름인 arr의 뒤에 점을 찍고 forEach()를 작성해줍니다. 그리고 매개변수로 함수를 전달할 수 있는데, 이 함수를 콜백함수라고 합니다. forEach의 괄호 안에 콜백함수를 화살표형 함수로..
반복문 반복문은 특정 작업을 반복적으로 수행 할 때 사용되는 구문으로, 프로그래밍을 할 때 아주 유용하게 자주 쓰이는 중요한 개념입니다. for문 for문은 가장 기본적인 반복문으로, 조건에 따라 일정 횟수 만큼 같은 코드를 반복 실행해야 할 때 사용됩니다. for문을 이용하면 아래의 코드를 쉽게 작성할 수 있습니다. console.log(1); console.log(2); console.log(3); console.log(4); console.log(5); for (let i = 1; i < 6; i++) { console.log(i); } while문 while문은 특정 조건이 참이라면, 특정 코드를 반복 수행하는 반복문입니다. 위의 코드를 while문으로 작성해보겠습니다. let i = 1; whi..
문제점 아래의 사진처럼 상세옵션스크린을 보면 필수옵션이라는 항목이 있습니다. 필수옵션 항목은 하나의 옵션만 선택 가능해야합니다. 저번에 이 필수옵션을 https://myeongsu0257.tistory.com/106 outsystems - 5.2 해당메뉴의 필수옵션(radio widget) 위는 저번시간까지 구현한 상세옵션화면이다. 선택사항옵션만 구현한 상태이다(선택사항옵션은 체크박스로구현). 이번에는 필수옵션을 구현해보겠다. 필수옵션은 해당메뉴를 클릭하였을때 필 myeongsu0257.tistory.com 위의 포스팅에서처럼 List에 Radio group을 구성하는 방식으로 진행했었는데 위의 방식은 필수옵션의 여러가지 항목을 선택하는 오류가 발생했습니다. 구성을 보면 List - > Radio gro..
배열 객체가 한 번에 여래개의 데이터 값들을 저장할 수 있는 자료형 이었다면, 배열은 순서가 있는 요소들의 집합, 여러개의 항목들이 모여 있는 리스트라고 할 수 있습니다. 배열생성 배열생성은 배열 생성자,배열리터럴로 생성할 수 있다. 배열생성자 배열 또한 생성자를 통해 배열을 생성할 수 있습니다, new라는 키워드를 사용해야합니다. let arr = new Array(); console로 확인해보면 배열은 []가 출력되는 것을 확인할 수 있습니다.(객체는 {}) 이번에는 배열에 값을 넣어보겠습니다. 이렇게 배열 생성자에 값을 할당할 때에는, 특정 요소를 넣으려면 여러개의 값을 넣고, 원하는 크기의 공간을 할당하려면, 원하는 공간의 크기를 괄호 안에 작성해주면 됩니다. 배열 리터럴 두번째 방법은 배열 리터..
5.25일에 같이 프로젝트를 도와주시는 회사를 방문했습니다. 현재 제가 있는 곳에서 회사까지 거리가 어느정도 있어서 왕복 시간은 오래소모되었지만 회사에서 많은 것들을 배울 수 있는 뜻깊은 기회였습니다. 회사에 가기전에 직접 대면으로 질문을 하고 답을 얻고 싶어 몇가지의 질문을 준비했었습니다. 제가 준비한 질문은 아래와 같습니다. 첫번째는, 필수선택인 radio button을 어떠한 방식으로 구현하면 좋을까 이였고 두번째는, 상세옵션화면에서의 합계가격과 상세옵션화면에서 선택한 데이터를 메인화면의 주문서섹션에 표시하기 위한 데이터 전달이었습니다. 먼저 첫번째에 대한 부분의 해결방법은 아래와 같습니다. 기존에는 list에 radio group을 표시하고 거기다가 radio button을 표시했었는데 이렇게하게..
아래는 저번시간까지 구현한 상세옵션화면이다. 이번에는 합계(총가격)과 선택옵션 체크, 체크해제에 따른 값이 달리지는 것들을 구현해보겠다. 먼저 Block에 InputParameter(매개변수)를 하나 만들어주겠다. 이름은 TotalPrice로하였다. 이 변수에 해당메뉴의 기본가격이 담겨야하는데
이번에는 선택한 옵션을 오른쪽부분에 표시하도록 해보겠습니다. 대략적인 틀은 다음과 같습니다. List로 2개의 구역을 만들어 한개의 List에는 선택옵션을 표시, 다른하나의 List에는 필수옵션을 표시입니다. 아래와 같이 컨테이너와 List를 만들어줍니다. 그리고 List에 If 위젯을 넣어줍니다. If 위젯의 조건(Condition)에 다음과 같이 작성해줍니다. GetProductOptionsByProductId.List.Current.ProductOption.Check = True 만약 각각의 선택사항옵션의 Check 속성의 값이 True라면 해당 값을 표시해주도록 하였습니다. 해당옵션의 이름과 가격도 마찬가지로 True안에 넣어주었습니다. 첫번째 Exrpession의 값입니다. GetProductO..
위는 저번시간까지 구현한 상세옵션화면이다. 선택사항옵션만 구현한 상태이다(선택사항옵션은 체크박스로구현). 이번에는 필수옵션을 구현해보겠다. 필수옵션은 해당메뉴를 클릭하였을때 필수록 클릭해야하는 옵션이다. 예를 들면, 세트를 주문하였을때 같이 나오는 면을 선택해야한다. 면의 종류에는 우동,소바가 있다. 둘 중 하나를 필수로 선택해야 함으로 라디오위젯을 사용하였다. 먼저 필수옵션 Entity를 만들어주었다. 원래 선택사항옵션엔터티(ProductOption)에 함께 만들려고했는데 List로 해당 엔터티의 값들을 표현함으로 하나 더 만들어주었다. 그리고 관계는 다음과 같이 해주었다. 아래는 만든 엔터티이다. 데이터는 임시적으로 넣어주었다. 인터페이스 돌아와서 해당 엔터티를 불러줬다. 그리고 Filter를 다음과..
객체 이전에 자바스크립트의 자료형에 대해 배웠듯이, 자바스크립트는 8가지 기본 자료형이 있으며, 크게 원시타입과 비 원시타입으로 분류됩니다. 이번 시간에는 비 원시타입으로 분류되는 자바스크립트 객체형 자료형 중, 객체에 대해 알아보겠습니다. 객체생성 객체는 비 원시 타입 자료형으로, 한 번에 여러개의 데이터 값들을 저장할 수 있는 자료형입니다. 객체를 생성하는 방법에는 객체생성자, 객체 리터럴 2가지 방식이 있습니다. 객체 생성자 new라는 키워드를 통해 객체를 생성할 수 있습니다. let person = new Object(); 객체 리터럴 중괄호를 이용해 객체를 생성하며, 가장 많이 사용되는 방식입니다. let person = {}; 객체 프로퍼티 객체의 프로퍼티는 객체의 중괄호 내부에 들어갈 데이터..
메뉴를 클릭하였을때 해당메뉴의 상세옵션데이터를 보여주는 것을 구현해야 한다. 아래는 상세옵션의 Entity이다. 메뉴(Product)와 관계를 맺어주었다. Interface로 넘어와서 List위젯으로 상세옵션데이터를 보여주었다. source에 상세옵션 Entity를 설정해준다. 그리고 상세옵션메뉴 Entity를 Block 으로 불러와서 Filter를 설정해준다. Filter는 아래와 같다. 먼저 상세옵션의 ProductId를 In1과 같게해주었다. In1은 저번포스팅에서 나왔는데 메인화면에서 해당 메뉴를 눌렀을때의 ID가 들어있다. 결과를 확인해보겠다. 각각의 상세옵션이 잘 나옴을 알 수 있다.
