반복문과 조건문 그리고 자료구조 과제

회고조 과정

회고조의 시간때 배운 반복문과 조건문을 바탕으로 AI에게 문제를 제출해달라고 요청해서 회고조팀원들과 함께 각자 문제풀이를 진행하고 코드리뷰를 하는 시간을 가졌다.

 

늘 그렇듯 누군가가 작성한 코드를 내 코드와 비교하여 내 코드의 개선점과 더 나은 방향을 고민해보는것은 즐거운 일이었다 ㅎㅎ

---

자료구조 스택과 큐

나는 전공 학부생으로 어느정도 접해본 개념이지만 강사님께서 설 연휴동안 공부하고 싶은 사람들은 하라고 하여, 다시한번 복습하는 차원으로 정리를 실시해보았다.

 

좌측 : 스택, 우측 : 큐

피그마를 사용하여 작업을 진행했고, 피그마를 처음 만질때 보다 훨씬 실력이 늘어 이젠 간단한 이미지는 금방 금방 작업할 수 있게 되었다 ㅎㅎ

 

역시.... 끈기와 반복은 가장 무서운 법이다.. 흐흐흐...

 

다른 블로그처럼 스택구조는 Last In First Out 이니 뭐니 하는 내용은 집어치우도록 하겠다.

왜냐하면 사실 이런 정보들은 구글링을 하면 충분히 공부할 수 있는 내용들이고 이런 개념은 바닥에 널려 어디에서나 찾을 수 있기 때문이다.

 

이를 코딩하여 좀 더 직접적으로 이용해보기로 했다.

---

Stack

 

Stack

먼저 시각화를 위해 HTML과 CSS를 이용하여 간단하게 AI에게 작성해달라고 부탁했다.

 

여기서 Stack 구조를 가장 잘 표현하기 위해선 배열을 활용하는것이 가장 직관적이면서 의도에 맞다고 생각했다.

      const stack = [];
      const MAX_SIZE = 6;

      const stackContainer = document.getElementById("stack-container");
      const message = document.getElementById("message");

      let counter = 1;

      function pushItem() {
        if (stack.length >= MAX_SIZE) {
          message.innerText = "스택이 가득 찼습니다!";
          return;
        }

        const value = "데이터 " + counter++;

        stack.push(value);
        console.log("추가: " + value);
        renderPush(value);
        message.innerText = value + " 가 추가되었습니다.";
      }

      function popItem() {
        if (stack.length === 0) {
          message.innerText = "뺄 데이터가 없습니다!";
          return;
        }

        const value = stack.pop();
        console.log("제거: " + value);
        renderPop(value);
      }

 

stack이라는 배열에 버튼에따라 value가 배열에 저장되거나, 삭제되도록 하였다.

로그

---

Queue

Queue

위와 같은 개념에서 코드만 살짝 수정하여 Queue를 구현해보았다.

가장 큰 개념은 Stack과 달리 Queue는 제거를 pop()이 아닌 shift() 함수를 쓰는것이다.

const value = queue.shift();