스택으로 뒤로가기/앞으로가기

Javascript 2021. 3. 16. 13:58
728x90
728x90

스택

밑이 막힌 상자같은 자료구조

 

용도

뒤로가기 등

 

스택의 구현 방법

배열, 연결리스트

 

스택의 추상적인 데이터형

top : 현재위치 프로퍼티

length : 스택에 포함된 요소 수 반환 함수

clear : 스택 모든 요소 삭제 함수

push : 스택에 새 요소 추가 함수

pop : 스택의 탑에 있는 요소 제거 후 반환 함수

peek : 스택의 탑에 있는 요소 내용 반환 함수

empty : 스택에 요소가 있는지 여부 반환 함수

 

 

js 스택 구현

1

//스택 생성자 함수
function Stack() {
    this.dataStore = []; //스택요소를 저장하는 배열
    this.top = 0;
    this.push = push;
    this.pop = pop;
    this.peek = peek;
    this.clear = clear;
    this.length = length;
}

//push
function push(element) {
    this.dataStore[this.top++] = element; //현재 top위치에 새요소를 추가한 다음 top이 증가
}

//pop
function pop() {
    return this.dataStore[--this.top]; //스택의 탑 위치에 있는 요소를 반환한 다음 top변수를 감소
}

//peek : 스택의 탑에 있는 요소 내용 반환 
function peek() {
    return this.dataStore[this.top-1];
}

//length
function length() {
    return this.top;
}

//clear
function clear() {
    this.top = 0; //top변수를 0으로 설정하면 스택 전체 요소가 삭제
}

//스택 클래스 구현 테스트
var s = new Stack();
s.push("main실행");
s.push("println실행");
s.push("timer실행");
print("length: " + s.length());
print(s.peek());

var popped = s.pop();
print("The popped element is: " + popped);
print(s.peek());
s.push("프로그램 종료");
print(s.peek());
s.clear();
print("length: " + s.length()); 
print(s.peek()); //undefined , 스택에 모든 요소를 삭제했으므로 탑위치에 데이터가 없는 상황



function print(v) {
    document.write(v+"<br/>");
    //console.log(v);
}

//[출처] [자료구조] 자바스크립트로 스택(Stack) 구현 |작성자 자바킹
//http://blog.naver.com/PostView.nhn?blogId=javaking75&logNo=220226369586&categoryNo=71&parentCategoryNo=0&viewDate=&currentPage=1&postListTopCurrentPage=1&from=postView

 

2

class Stack {
  constructor() {
    this.arr = [];
    this.index = 0;
  }
  push(item) {
    this.arr[this.index++] = item;
  }
  pop() {
    if (this.index <= 0) return null;
    const result = this.arr[--this.index];
    return result;
  }
}

let stack = new Stack();
stack.push(1); // arr: [1], index: 1
stack.push(2); // arr: [1, 2], index: 2
stack.push(3); // arr: [1, 2, 3], index: 3
console.log(stack.pop()); // 3 , index: 2
console.log(stack.pop()); // 2 , index: 1
console.log(stack.pop()); // 1 , index: 0
console.log(stack.pop()); // null

//https://velog.io/@kimhyo_0218/JavaScript-%EC%8A%A4%ED%83%9DStack-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0

 

3

   constructor(size){
        this.size = size;
        this.top = 0;
        this.array = [];
    }
   pop(){
        let temp = this.array[this.top];
        this.top--;
        return temp;
    }

    push(item){
        if(this.size > this.top){
            this.top++;
            return this.array[this.top] = item;
        }else{
            console.log(new Error("stack is full"));
        }
    }
    
    peek(){
        return this.array[this.top];
    }
function Stack(max_size){
    
    const size = max_size;
    let top = 0;
    let array = [];
    
    return{
        pop(){
             if(top==0){
                console.log("stack is empty");
            }else{
                let temp = array[top];
                top--;
                return temp;
            }
        },
    
        push(item){
            if(size > top){
                top++;
                return array[top] = item;
            }else{
                console.log(new Error("stack is full"));
            }
        },
        peek(){
            return array[top];
        }
    }
  
}

var a = Stack(5);
a.push(1);
a.push(2);
a.push(3);
a.push(4);
a.push(5);
console.log(a.pop()); // 5
console.log(a.peek()); // 4
//https://hokeydokey.tistory.com/30

 

 

 

자바에서 배열을 이용한 스택 구현

구현 : 1

 

 

url이 바뀌지 않는 싱글페이지에서 뒤로가기, 앞으로가기 구현

 

스택 자료구조로 브라우저에서 뒤로가기, 앞으로가기 코드를 구현중... 뒤로가기용, 앞으로가기용 두 개의 스택이 필요하다고 생각.

 

1. 메뉴바에 보여지는 것

          <------ 시간 (최근) ------

메뉴바     4      3      2      1

 

2. 시뮬레이션

 

          <------ 시간 (최근) ------

히스토리 메뉴바     

아무것도 없는 상태

 

[히스토리 기능 테스트 시작]

메뉴 1 클릭

히스토리 메뉴바     1

메뉴바 표시를 위한 히스토리 목록에 1 저장
뒤로가기용 스택에 히스토리 갱신 전 마지막 요소는 없기 때문에 저장되지 않음

 

메뉴 2 클릭

히스토리 메뉴바     2      1

뒤로가기용 스택에 히스토리 갱신 전 마지막 요소(1)를 저장, 뒤로가기용 스택에는 1이 들어있음
히스토리 메뉴바 반환 시 좌측을 최신 것으로 정렬

 

메뉴 3 클릭

히스토리 메뉴바     3      2      1

뒤로가기용 스택에 히스토리 갱신 전 마지막 요소(2) 저장, 1, 2가 들어있음

 

메뉴 4 클릭

히스토리 메뉴바     4      3      2      1

뒤로가기용 스택에 히스토리 갱신 전 마지막 요소(3) 저장, 1, 2, 3이 들어있음

 

[뒤로가기 테스트 시작]

뒤로가기 한 번 시행

히스토리 메뉴바     3      4      2      1

히스토리 갱신 전 마지막 요소를 앞으로가기용 스택에 저장(4). 과거 보고 있는 곳도의미.

앞으로가기용 스택에 저장된 것 : 4

뒤로가기용 스택의 마지막 요소(3)를 삭제, 1, 2가 들어있음 

앞으로가기 버튼 활성화(이전에는 비활성화) 

 

뒤로가기 한 번 시행

히스토리 메뉴바     2      3      4      1

갱신 전 마지막 요소를 앞으로가기용 스택에 저장(3). 과거 보고 있는 곳도의미. 

앞으로가기용 스택에 저장된 것 : 4, 3

뒤로가기용 스택 마지막 요소(3)를 삭제, 1, 2 들어있음 

 

[앞으로가기 테스트 시작]

앞으로가기 한 번 시행

히스토리 메뉴바     3      2      4      1

앞으로가기용 스택에 마지막 요소(3) 삭제. 현재 보고있는 곳도 의미, 저장된 것 : 4

뒤로가기용 스택에 갱신 전 마지막 요소 추가(2), 저장된 것 : 1, 2

 

앞으로가기 한 번 시행

히스토리 메뉴바     4      3      2      1

앞으로가기용 스택에 마지막 요소(4) 삭제. 현재 보고있는 곳도 의미, 저장된 것 :  없음

앞으로가기용 스택에 요소가 없으면 앞으로가기 버튼 비활성화

뒤로가기용 스택에 갱신 전 마지막 요소 추가(3), 저장된 것 : 1, 2, 3

 

[뒤로가기 테스트 시작]

뒤로가기 한 번 시행

히스토리 메뉴바     3      4      2      1

갱신 전 마지막 요소를 앞으로가기용 스택에 저장(4). 과거 보고 있는 곳도의미. 

앞으로가기용 스택에 저장된 것 :  4

뒤로가기용 스택 마지막 요소(3)를 삭제, 1, 2 들어있음 

앞으로가기 버튼 활성화

 

* 히스토리 목록은 스택과 별개로 본 지 오래된 동일한 요소를 지운 뒤 최근에 본 것만 뒤에 쌓는 식으로 동작.

 

 

 

history 객체에 대해서 > click!

원래 이 기능을 수행하는 history 객체의 기능을 사용할 수도 있다.
내가 history를 사용하지 못한 이유는 웹이 로그인 제외.. 싱글 페이지이며 원 페이지 내에서 각 목차별 콘텐츠로 페이지를 이동하는 것처럼 해야하다보니 그와 비슷하게 동작하는 것을 개발해야 했다. 브라우저의 앞/뒤로가기를 누르면 로그인하는 첫 페이지로 이동해버린다.

구현해야 하는 기능은 조회한 목차별 콘텐츠의 이력이 저장되며, 뒤로가기 앞으로가기가 동작해야 했다.  
그리고 로그인 시 조회했던 목록에 대한 정보를 다시 들고와야한다. 

막연하게 브라우저에서 썼던 히스토리 기능, 특히 앞으로가기가 뒤로가기 기록에 대해 의존하는 걸 다시 확실히 알았다. 

728x90
728x90
저작자표시 비영리 변경금지

'Javascript' 카테고리의 다른 글

meta viewport tag, 디바이스별 해상도 반응형 분기점  (0) 2021.04.14
큐  (0) 2021.03.17
[JS] substr()  (0) 2021.03.11
select box 셀렉트 박스 변경 이벤트 처리(js, jquery)  (0) 2021.02.26
임의로 클릭 발생, 제이쿼리 trigger  (0) 2021.02.22
블로그 이미지

coding-restaurant

코딩 맛집에 방문해주셔서 감사합니다.

,
250x250
250x250
English Korean
05-09 00:22

티스토리툴바

v