부트캠프 84일차 후기

이제 내일이면 프론트엔드 작업을 마칠 수 있을 것 같다. 이 지긋지긋한 javascript와의 씨름을 끝내고 다음 주부터는 부가기능 디버깅과 백엔드 보강에 몰입하고 싶다.

 

쉼 없이 달리느라 의아한 버그를 만나기도 했는데, 분명 localStorage에 있는 jwt를 서버에게 건냈음에도, 로그인이 안 된 상태로 접근하는 버그를 맞닥들이기도 했다. 처음에는 내가 수정하고 있는 부분의 버그인가 싶어서 관련 부분을 수정을 했음에도, 로그인이 안된 것이였다. 혹시 몰라서 다른 로그인 시스템을 살펴보니 이전에 로그인 상태로 동작하던 코드도 비로그인 상태로 동작했다. 이것을 보고 이 버그의 정체를 깨달았는데, 사실 버그가 아니였다. 내가 jwt의 만료 시간을 3시간으로 잡아두어서, jwt가 만료된 것이다. 이런 어이없는 이유로 시간을 낭비해버린것이 참 자신이 한심하다 해야 할까, 그만큼 한 페이지를 오래 붙잡아서 수고했다라고 자신을 격려해야할까....

 

프론트엔드 작업을 하며, 몇몇 기능을 알게 되어서 이번에 간단하게 얘기하고자 한다. 일단 export와 import다. javascript 내 하나의 파일이나 모듈의 함수나 객체를 다른 곳에서 사용할 수 있는 방법이 있는데, 위의 두 키워드가 주인공이다. 

사용법은

https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-%EB%AA%A8%EB%93%88-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0-import-export-%EC%A0%95%EB%A6%AC

[JS] 📚 모듈 사용하기 import / export 완벽 💯 정리

여길 참조하도록 하자. 간단하게 말해서

export const client = axios.create(
    {
        headers: {
            "Authorization": localStorage.getItem("jwt")
        }
    }
)

이런게 선언하고 다른 파일에서

import {client} from "./member"

이렇게 하면 사용할 수 있다고 한다. 이것을 찾아보게 된 것은 매번 jwt를 건내는 client를 각 파일에서 만드는 것이 귀찮아서 이렇게 사용을 고려해보게 되었다. 사실 이것은 후에 언급할 버그와 연관이 있다.

 

분명 내개 script 태그로 소스를 불러왔음에도, 소스를 불러오지 못하는 버그를 만나게 되었다. script의 위치가 문제인가 싶어서 여러 위치로 옮겨보았고, 혹시나 해서 script 위치에 대해 공부를 하게 되었다.

 

1. Head 태그에 위치

- 인터넷이 느리거나 자바스크립트 파일이 무겁다면 웹사이트를 불러오는데 소요되는 시간이 많음

- DOM을 제어하거나 조작할 떄, 오류가 발생할 수 있음.

 

2. body 태그 끝에 위치

- 가장 많이 사용, 파일을 다운로드 하기 전에 HTML 코드를 모두 파싱해서 빠르게 불러올 수 있음.

- 다만 자바스크립트에 의존적이면 오랜 시간이 걸림

 

3. Head 태그에 async 속성

-  병렬 다운로드가 되어서 속도가 빨라진다.

-  자바스크립트가 실행될 때, 잠시 HTML 파싱이 멈춰서 느려질 수도 있음.

 

4. Head 태그에 defer 속성

- HTML을 파싱하는 동안 코드를 다운로드하고, 파싱 완료후 파일이 실행

- 속도적인면에서 가장 우세.

 

참조: https://shape-coding.tistory.com/entry/JavaScript-Script-%ED%83%9C%EA%B7%B8%EC%9D%98-%EC%9C%84%EC%B9%98%EB%8A%94-%EC%96%B4%EB%94%94%EA%B0%80-%EC%A2%8B%EC%9D%84%EA%B9%8C

[JavaScript] <Script> 태그의 위치는 어디가 좋을까?

 

지금까지 2번 방법을 주로 사용했는데, 4번 방법을 사용해보는 것을 고려해보게 되었다. 이렇게 공부를 했음에도 script 위치엔 잘못이 없다는 결과가 되어서 많이 혼란스러웠다. 문득 console 화면을 보니, 지금까지 무시했던 오류가 있었다. already defined 오류인데, 이상하게도 코드엔 오류가 없었음에도 이 오류가 발생해서 무시를 했었다. 그런데, 이 오류가 이번에 두 개가 떴다. 해당 오류는 위의 jwt를 건낼 때 사용하는 코드에서 발생했는데, 위의 코드를 복사 + 붙여넣기를 해서 변수 이름이 같았다. 혹시나해서 변수명을 수정하니 제대로 작동하는 것이 아닌가.. 그렇게, 자바스크립트에서 하나의 오류가 발생하면 뒤의 코드를 무시하는 경우가 있다는 사실을 알게되었다.