20.06.20_mini 해커톤(2)

Notice

Recent Posts

Recent Comments

Link

« 2025/01 »
일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

Tags more

Archives

Today

Total

관리 메뉴

souvenir

20.06.20_mini 해커톤(2) 본문

2020년/TIL(Today I Learn)

20.06.20_mini 해커톤(2)

풀빵이 2020. 6. 30. 15:54

[오늘 공부한 것]

1. POS기 백엔드 기능 구현

: 아래 목록 중 1-4번, 6번을 구현하였다.

메뉴를 누르면 구매 목록에 추가하는 함수 (백엔드)
=> addItemToList
장바구니에 담긴 총 금액 계산하는 함수
=> calculateList
장바구니에서 메뉴 삭제하는 함수 (백엔드)
=> deleteItemFromList
탭 클릭 시 해당하는 카테고리 메뉴들을 출력해주는 함수
=> handleCategorySelect
Pay 버튼을 눌렀을 때 팝업창을 띄워주는 함수
=> handlePayPressed
Cancel 버튼을 눌렀을 때 장바구니 전체를 비워주는 함수 (백엔드)
=> handleCancelPressed
Quit 버튼을 눌렀을 때 윈도우를 닫아주는 함수
=> handleQuitPressed

[피드백]

1. 함수형 프로그래밍을 경험해볼 수 있었다.

타인의 코드를 보면서 일반적으로 DOM 구현을 위한 코드 스타일과 HTML 하드코딩 스타일이 다름을 알 수 있었다. (이전 코드는 ul 아래 li를 DOM에서 innerHTML 적용해서 그대로 수정하였다.
이 작성 방식이 함수형 프로그램이라는 것은 다시 한번 수업 영상을 보고서야 이해할 수 있었다. 말로만 설명하는 것보다는 역시 눈으로 보는 것이 직관적으로 이해하기 쉬운 것 같다.

아래는 해커톤 때 말고 기존 HTML과 JS를 입력했던 방식

//내부 목록을 DOM을 이용해 유동적으로 구현한 HTML
<body>

  <div id="title">twittler</div>

  <div id="read-section">
  
    <div id="read-new-comment">
    
        <button id="new-tweet"> new tweet Check</button>
        
      </div>
    
    
    <ul id="read-container">
    <!-----//유동적인 공간//------>
        
    </ul>
    <!-------read-container 끝------>
    
  </div>
  <!------read-section 끝---------->
  
  </body>

//유동적으로 리스트를 만들 수 있는 함수
//print 만능
function printTweet(msg){

//li 태그 목록 만들기
    let li = document.createElement('li');
    
//만든 li에도 클래스 이름을 붙여주어야 css가 적용이 되겠죠?    
    li.className = 'read-comment';
    

//li 안에 넣어줄 div 태그 만들기

    let divImg= document.createElement('div');
    
    let divread= document.createElement('div');
    
    let divName= document.createElement('div');
    
    let divComment= document.createElement('div');
    
    let divDate= document.createElement('div');
    
    let hr = document.createElement('hr');
    

//li 안에 넣어줄 div 태그 클래스 이름 부여

    divImg.className = 'user-img'
    
    divread.className = 'read-box'
    
    divName.className = 'read-username'
    
    divComment.className = 'read-it'
    
    divDate.className = 'date'
    

// 이 친구는 div 안에 img를 넣으려고 했는데 img 태그를 만들고 내용을 수정하려니 오류가 되어서 
// div 자체에서 innerHTML을 적용함

    divImg.innerHTML = `<img src="https://cdn.pixabay.com/photo/2015/06/22/08/40/child-817373_1280.jpg" alt = user의 사진/>`
    
    divName.textContent = msg.user;
    
    divComment.textContent = msg.message
    

    //const event = msg.created_at
    
    divDate.textContent = msg.created_at
    

//li의 부모 태그인 ul 호출

    let parent = document.getElementById('read-container')
    
    parent.appendChild(li);
    

//li 태그 밑에 자식 태그 달아주기 : appenChild
    li.appendChild(divImg);
    
    li.appendChild(divread);
    
    divread.appendChild(divName);
    
    divread.appendChild(divComment);
    
    divread.appendChild(divDate);
    
    li.appendChild(hr);
    
}

JS 코드의 경우도 기능(태그 생성, 클래스 부여, 내용 입력, 자식태그 달기 등)에 따라 묶음별로 나눠서 작성하는 것이 훤씬 보기도 편하고 작성할 때도 누락없이 작성할 수 있었다. 또한 이런 방식으로는 더 깔끔하고 동적으로 데이터 처리가 가능했다.

▼이전에 작성했던 코드 방식 = 세련되지 않은 코드

  //하드코딩한 HTML코드
  
  <div id="read-section">
  
    <div id="read-new-comment">
    
        new tweet
        
    </div>


    <ul class="read-container">
    
    <!---차이점이 보이는 공간---->
    
        <li class="read-comment">
        
            <div class="user-img">
            
                <img src="https://cdn.pixabay.com/photo/2015/06/22/08/40/child-817373_1280.jpg" alt = user의 사진/>
                
            </div>


            <div class="read-box">
            
                <div class="read-username">
                
                    Steave
                    
                </div>
                
                <div class="read-it">
                
                    Welcome to Code States
                    
                </div>
                
                <div class="date">
                
                    2019-01-03 12:30:20
                    
                </div>
                
            </div>

        </li>
    <!---차이점이 보이는 공간---->
        
    <hr>

//innerHTML을 이용해 하드 코딩한 함수
//DATA 배열에 저장되어 있는 내용을 HTML에 print 하는 함수

function printTweet(DATA){

  let li = document.createElement('li');
  
  li.className = 'read-comment';

// innerHTML을 이용해 그대로 내용을 입력하고자 하였다.
  li.innerHTML =
  
  `<div class="user-img">
              
      <img src="https://cdn.pixabay.com/photo/2015/06/22/08/40/child-817373_1280.jpg" alt = user의 사진/>
      
    </div>


    <div class="read-box">

      <div class="read-username">
      
         `+ DATA.user +
          
      `</div>
      
      <div class="read-it">`
      
         + DATA.msg +
          
      `</div>
      
      <div class="date">`
      
          + DATA.created-at +
          
      `</div>
    
  </div>`

  let parent = document.querySelector('read-containor');
  
  parent.appendChild(li);

}

2. 동적으로 입력한다는 의미

이번 해커톤을 진행하면서 '동적으로 입력한다'는 말을 자주 들었지만 사실 잘 와닿지 않았다. 다른 분들이 코드 진행해주시면서 정리해본 결과

특정 이벤트가 실행될 때, 특정한 데이터를 출력하거나 처리하는 것이 아니라 이벤트를 받은 데이터들만 출력되는 것

으로 말할 수 있었다. 포인트는 처리할 데이터가 정확하게 정해져있지 않다는 점.

예를 들어보자면 아래와 같다.

메뉴를 누르면 구매목록(장바구니)에 추가하는 함수를 만들고자 하였다.

이를 위해 해당 요소인 .item 마다 클릭 이벤트를 부여하였고, 그 때마다 addItemToList 함수가 실행되도록 하였다.

/*메뉴를 누르면 구매 목록에 추가하는 함수를 만들고자 한다.
*=> addItemToList
*
*1. itemName을 클릭했을 때 item의 정보(객체)를 가지는 변수를 생성
*
*2. 실행했을 때 cart에 해당 변수의 내용 입력
*
3. selected-item에 동적으로 li 생성
*/

//1. itemName을 클릭했을 때 item의 정보(객체)를 가지는 변수를 생성
const elItemInfo = document.querySelectorAll('.item');

elItemInfo.forEach(

    element => element.onclick = addItemToList
    
)

addItemToList는 위의 .item 요소들을 클릭하하면

1. 구매목록(장바구니 섹션)에 넣고 (addTableRow)

2. 해당 아이템들의 가격을 합치는 (calculateList)

기능을 구현하기 위한 함수이다.

//카트 추가 함수
function addItemToList(menuObj){ 
  //menuObj를 파라미터로 받고 있음.
  //menuObj는 미리 작성한 menu 객체

    addTableRow(menuObj); //입력한 메뉴를 장바구니에 출력하는 함수
    
    calculateList() //장바구니의 메뉴의 총합을 계산하는 함수
}

동적으로 입력한다는 의미를 제대로 이해할 수 있었던 포인트가 아래 함수를 입력했을 때이다.

지금까지 함수 기능들의 흐름을 정리해본다면

아이템 클릭(elItemInfo)->addItemToList(장바구니에 넣기, 계산하는 함수 연결)

-> 장바구니 출력 함수(addTableRow) + 계산하는 함수

이렇게 정리해볼 수 있다.

아이템을 클릭했을 때(이벤트) 해당 함수들이 연결되어서
menuObj(메뉴들을 모두 담은 데이터베이스 객체)의 모든 내용이 출력되는 것이 아니라
클릭당한 요소만 출력이 되기에

동적이라고 표현한 것이다.

아래 함수인 addTableRow 함수를 보면 위의 맥락에 따라 menuObj를 파라미터로 받지만

클릭된 해당 요소들만 출력함을 알수 있다.

function addTableRow(menuObj){
	// 입력한 메뉴들을 변수로 받아 장바구니를 출력하는 내용들(HTML에서 table로 작성했음)
    
    let tr = document.createElement('tr');
    
    let td1 = document.createElement('td');
    
    let td2 = document.createElement('td');
    
    let td3 = document.createElement('td');
    
    let td4 = document.createElement('td');


    tr.className = 'selected_item';
    
    td1.className = 'selected-menu_itemname'
    
    td2.className = 'selected-menu_quantity'
    
    td3.className = 'selected-menu_itemprice'


    td1.textContent = menuObj.item;
    
    td2.textContent = 1;
    
    td3.textContent = menuObj.price; 
    //중략
}

일단 어느정도 기능 구현이 된 수준에서 마무리 되었다는 것에도 성취감을 느꼈지만

다른 사람들의 코드 작성방식 및 흐름등 을 살펴보면 내가 놓치게 되는 많은 부분들을 이해할 수 있게 된다

이것이 페어프로그래밍의 묘미가 아닐까 싶다.

물론 이 외에 스스로 검색하면서 다른 사람의 스타일을 보는 것도 중요할 것 같다.

'2020년 > TIL(Today I Learn)' 카테고리의 다른 글

20.06.22-27 코딩공부(2)_filtering 구현 (0)	2020.06.30
20.06.22-27 코딩 공부 (0)	2020.06.30
20.06.14-15 코딩연습 (0)	2020.06.18
20.06.13_mini 해커톤 (0)	2020.06.18
20.06.12 코딩연습 (0)	2020.06.18

'2020년/TIL(Today I Learn)' Related Articles

Comments

souvenir

20.06.20_mini 해커톤(2) 본문

20.06.20_mini 해커톤(2)

[오늘 공부한 것]

[피드백]

'2020년 > TIL(Today I Learn)' 카테고리의 다른 글

티스토리툴바