스택의 이해 앞으로 가기 뒤로가기

문제 

---

 

브라우저에서 "뒤로 가기", "앞으로 가기" 기능이 어떻게 구현되는지를 조건에 맞춰 구현하라.

조건

---

1. 새로운 페이지로 접속할 경우 prev 스택에 원래 있던 페이지를 넣고 next 스택을 비웁니다.
2. 뒤로 가기 버튼을 누를 경우 원래 있던 페이지를 next 스택에 넣고 prev 스택의 top에 있는 페이지로 이동한 뒤 prev 스택의 값을 pop 합니다.
3. 앞으로 가기 버튼을 누를 경우 원래 있던 페이지를 prev 스택에 넣고 next 스택의 top에 있는 페이지로 이동한 뒤 next 스택의 값을 pop 합니다.
4. 브라우저에서 뒤로 가기, 앞으로 가기 버튼이 비활성화일 경우(클릭이 되지 않을 경우)에는 스택에 push 하지 않습니다.

인터넷 브라우저에서 행동한 순서가 들어있는 배열 actions와 시작 페이지 start가 주어질 때 마지막에 접속해 있는 페이지와 방문했던 페이지들이 담긴 스택을 반환하는 솔루션을 만들어 김코딩의 궁금증을 풀어주세요.

 

결과

---

let actions = ["B", "C", -1, "D", "A", -1, 1, -1, -1];
let start = "A";

let output = browserStack(actions, start);
console.log(output); // [["A"], "B", ["A", "D"]]

actions = ["B", -1, "B", "A", "C", -1, -1, "D", -1, 1, "E", -1, -1, 1];
output = browserStack(actions, start);
console.log(output); // [ ["A", "B"], "D", ["E"]]

직접 표현해보기

---

	Prev []	현재	next[]
		“A”
“B”	[“A”]	“B”
“C"	[“A”,”B”]	“C”
-1	“A”	“B”	“C”
“D”	“A”,”B”	“D”
“A”	“A”,”B”,”D”	“A”
-1	“A”,”B”	“D"	“A”
1	“A”,”B”,”D”	“A”
-1	“A”,”B”	“D”	“A”
-1	“A”	“B”	“A”,”D”

 

순서

---

function browserStack(actions, start) {
  // TODO: 여기에 코드를 작성합니다.
  // 목적 : 배열 데이터의 타입에 따라서 prev 배열과 next 배열에 
  // 데이터를 넣고 빼는 새로운 함수 정의   
  

  //결과 배열, 이전스택과 나중 스택 그리고 현재 변수를 정의합니다.
  let prevStack=[]
  let nextStack=[]
  let current=start

  // 요소들을 반복해서 확인을 합니다.
  for(let i=0;i<actions.length; i++){
    //만약에 typeof 해서 문자열이고 
      //이전 스택에 원래 페이지를 넣고 넥스트 스탭을 비웁니다.
    if(typeof actions[i] === "string"){
      //현재 변수를 prev에 넣고
      prevStack.push(current)
      // 현재 변수에 새로운 값을 재할당하고
      current=actions[i]
      //새로운 페이지로 들어갔기 때문에 빈 배열로 할당.
      nextStack=[]
    //만약에 숫자가 -1 이고 prevStack의 길이가 0이 아니면 
    }if(actions[i]=== -1 && prevStack.length !== 0){
        //현재 변수의 값을 넥스트클레스에 넣은 후 새로운 변수에 넣고
        let prevPage=prevStack.pop()
        //기존 현재 변수를 넥스트 배열에 옮긴 후 
        nextStack.push(current)
        //현재 변수를 이전클레스에서 pop한 것을 가져와 재할당한다. 
        current=prevPage

    //만약에 1이고 nextStack의 숫자가 1이고 next 변수의 길이가 0이 아니면  
    }else if(actions[i]=== 1 && nextStack.length !==0  ){
      // 넥스트 페이지에 넥스트클레스에서 꺼낸 요소를 넣고 
      // 현재 변수의 값을 이전클레스에 넣은 후
      // 현재 변수가 비기 때문에 여기에 넥스트 페이지를 할당한다.
      let nextPage= nextStack.pop()
      prevStack.push(current)
      current=nextPage
    }
  }
  
  //모든 반복문이 끝나면 새로운 배열에 요소로 전스택 현재값 나중에 스택을 요소로 넣어준다.
    return [prevStack,current,nextStack]
}

배운 점

---

1. 한글로 정의하지 못하면 코딩도 불가능하다는 점을 다시 상기시킨 문제

2. pop()과 같이 빼낸 요소들은 따로 저장하는 습관

3. 로직의 순서가 중요 current를 볼 때 먼저 기존 current 변수를 옮기고 그 다음 재할당해야 하는 순서가 중요