📚금일 학습 내용
vsc 초기화와 라우팅 처리의 하루
❗ 특정 vsc 확장프로그램이 정상적으로 실행되지 않는 경우..
vsc 업데이트를 하니 갑자기
vscode-styled-components라이브러리가 제대로 적용되지 않는 문제가 발생했다.
하이라이트 기능은 정상적으로 동작했지만 핵심 기능 중 하나인 자동완성이 동작하지 않았다.
.. 그냥 해볼까 생각도 했지만 꽤 불편한 점이 많았기에 수정하고자 하였고 그렇게 공식 문서를 뜯어보면서 수정이 시작되었다.
해당 채널 디스코드도 있었다. 알고 싶지는 않았다.
결론부터 말하자면 나는 vsc재설치를 통해서 해결했다. 우선 대부분의 경우 vsc 버전이나 tsc 버전을 맞춰주는 경우 문제가 해결되었는데 나는 그런 방법에서 해결되지 않았고, emmet 설정이나 특정 확장 프로그램을 비활성화 해도 문제가 지속되었다.
확장프로그램 혹은 vsc 설정에서 충돌이 일어 났는데, 사실 학부생 시절부터 쌓여온 C/C++ 컴파일러, Java 컴파일러, 파이썬 컴파일러와 연관된 수 많은 확장프로그램이 있어서 원인을 특정짓기 어려웠다. 따라서 추후에 해당 부분은 필요하면 설치하도록 하고 VSC를 날렸다.(물론 VSC에 해당하는 백업 파일들은 혹시 몰라서 남겨두었다.)
https://github.com/styled-components/vscode-styled-components
해당 확장 프로그램 깃 허브 주소인데 이런 문제가 꽤 있는 듯 싶다. 제작자도 인지하고 있는 것 같고 그래서 Readme.md 파일 하단에 관련 내용들이 많이 작성되어 있다. 가장 많이 권장되는 방법은 확장 프로그램들을 일일이 제거하면서 테스트 하거나 아니면 vsc와 TS 버전을 맞추는 내용이였는데, 나는 두 가지 모두 안돼서 결국 VSC 재설치를 했다(설정 파일을 모두 날리고)
❗ 라우트 라우트 라우트..
이번 과제 조건을 전부 공개할 수는 없지만 충격적인 조건이 하나 존재했다. 물론 해석을 잘못한 것일 수도 있다고 생각도 되는데, 쟁점은 URL 변경 없이 새로고침, 뒤로가기, 앞으로가기를 구현하는 내용이였다.
... 어떻게 하지 하다가, 우선 선택해본 방법은 context API와 세션 스토리지를 사용한 상태저장으로 구현해본 것이였다. 각 기능을 활용해 지나왔던 페이지를 담는 배열과 뒤로가기 시에 해당 배열에서 나온 pop된 페이지를 저장하는 배열을 만들었다. 음 간단하게 말하자면 브라우저에서 사용되는 뒤로가기, 앞으로가기에 해당하는 배열을 직접 만들었다. 그리고 놀랍게도 이 방식은 나름 정상적으로 잘 동작했다.
주석과, 의미 없는 코드를 제거해야겠지만.. 400줄이 나왔다.
다만 위 방식에서 발생했던 큰 문제점은 내가 만든 버튼을 통한 동작일 경우에만 정상적으로 동작했다. 막상 실제 브라우저의 뒤로가기, 앞으로가기 버튼으로는 위 기능이 동작하지 않았다.
여기서 그냥 과제를 진행할까 하다가 나름의 챌린지로 브라우저의 앞으로가기, 뒤로가기에서 동작하는 방식으로 선회해보고자 했다. 그리고 그때 사용할 수 있는건 historyAPI였다.
자, historyAPI 중 브라우저의 히스토리에 새 항목을 추가하는 pushState MDN을 살펴보도록 하자. pushState(state, unused, url) 총 3개의 파라미터를 받는다.
첫 번째 파라미터는 상태 객체를 나타낸다, 즉 이 객체는 페이지 상태에 대한 정보를 가지고 있다. 두 번째 파라미터는 원래는 title이라는 파라미터인데 현재는 사용되지 않고 있으며 그렇기에 빈 문자열로 두는 것이 좋다고 한다. 마지막 세 번째 파라미터는 url이다. 새로운 히스토리의 url을 입력받는다.
여기서 생각을 조금 바꿔보자. 우리에게 필요한 것은 결국 상태이다. 그렇다면 history.pushState(pageName, "", ""); 이런 식으로 페이지를 입력할 수 있다. URL은 단 하나도 바뀌지 않는다. 하지만 state의 전달 값으로 우리는 페이지를 구분할 수 있고 해당 방식으로 구현하기로 했다.
그렇다면 이 state는 어떻게 가져올 수 있을까? 아래 코드와 같이 window.onpopstate의 객체에서 가져오도록 하자. 타입스크립트이니 매개 변수에 해당하는 타입을 추가해주고 각종 조건을 추가해주어서 코드를 작성했다.
window.onpopstate = (event: PopStateEvent) => {
if (event.state !== null) {
...//
} else {
...//
}
};이 코드들을 기반으로 작성한 코드로는 앞으로가기와 뒤로가기는 모두 잘 동작했다. 그리고 문제는 새로고침이였는데 이 부분은 브라우저의 세션스토리지 기능을 활용해서 의도하지 않은 동작에서 발생하는 새로고침 시에도 사용자가 현재 화면에 머물 수 있도록 조치해주었다.
📖소회
오래 걸렸다. 라우팅 처리로 하루를 날렸지만 나름 의미있는 고민들을 많이 했다고 생각되어서 시간 낭비라는 생각은 안한다. CSS도 재미있지만 이런 로직 처리도 재미있기 때문이다. 그리고 사실 꽤 중요한 부분이라고 생각하는 편이기도 하고.. 이제 라우팅 기능을 App.tsx에 다 몰아서 완성했으니 내일은 파일 분리를 시도하며 파일간 전환 효과를 추가해보자. 내일도 달려야지?🔥🔥🔥
TIL 작성 소요시간 약 25분
