JS과제 에러핸들링

자바스크립트 과제를 하며 생긴 에러를 정리해보자~!!!👀
깃허브 링크 : /github.com/subinsad

1. 투두 li가 2개씩 등록되는 에러

api호출도 2번씩되고, 엔터키로 입력할땐 1번되는데 추가 버튼을 클릭할때마다 li가 2개씩 등록되는 에러가 생겼다.

시도 1. 배열 초기화 후 추가

displayTodos(todos) {
    const todoItems = this.el.querySelector('#todoItems');
    const existingTodoItems = todoItems.querySelectorAll('li');

    todoItems.innerHTML = ''; // 기존 todoItems 초기화

    todos.forEach((todo) => {
        const existingTodo = Array.from(existingTodoItems).find(
            (el) => el.dataset.todoId === todo.id
        );

        if (!existingTodo) {
            this.renderTodoItem(todo, todoItems);
        }
    });

- 여전히 2개씩 나오는 이슈 발생하고 콘솔창에서 확인해보니 li내용은 같지만 id값이 다른걸 확인

시도 2. API 호출 확인

static async createTodo(newTodoTitle) {
        try {
            const apiUrl =
                'https://asia-northeast3-heropy-api.cloudfunctions.net/api/todos';

            const res = await fetch(apiUrl, {
                method: 'POST',
                headers: {
                    'content-type': 'application/json',
                    apikey: 'KDT7_GrZ1eYBo',
                    username: 'KDT7_ParkSuBin',
                },
                body: JSON.stringify({
                    title: newTodoTitle,
                }),
            });

            const json = await res.json();
            console.log(json);
            return json;
        } catch (error) {
            console.error('할 일을 만드는 중 오류 발생:', error);
            throw error; // 에러를 호출한 쪽으로 전파합니다.
        }
    }

• const json = await res.json(); console.log(json); 이 부분의 콘솔이 두번씩 찍히는걸 확인

해결방법

If (Event.isComposing) return

keydown 이벤트 발생 시 해당 이벤트 핸들러가 두번 호출되는걸 확인했는데, 이 문제는 macOS 사용자에게 나타나는 문제로, 입력창에서 한글을 입력한게 조합중인지, 끝난건지 확인할 수 없는 경우 발생한 문제였다. 그래서 이를 확인하는 프로피티인 isComposing 을 사용해 문제를 해결했다.

2. JS 컴포넌트 후 라우팅 이슈

메뉴버튼을 누르고 나오는 컴포넌트 화면이 렌더링이 안되어 새로고침을 눌렀을때 차트가 나오는 이슈가 생겼다. 이와 마찬가지로 API를 사용하는 투두도 안나오는 이슈가 발생했다.

해결방법

APP.js 에서 상태를 초기화 한 후, 화면을 그릴 때 컴포넌트를 업데이트(리렌더링) 해주는 로직을 짜면 된다.

export default class App extends Component {
    constructor() {
        super();
        this.state = {}; // 상태 초기화

        this.renderComponent(); // 화면 그리기
    }

    renderComponent() {
        const theHeader = new TheHeader(this);
        const routerView = document.createElement('router-view');
        const mypage = new MyPage(this);

        console.log('컴포넌트');
        this.el.innerHTML = ''; // 제거 후 그리기
        this.el.appendChild(theHeader.render());
        this.el.appendChild(routerView);
        this.el.appendChild(mypage.render());
    }

    update() {
        // 컴포넌트 업데이트
        this.renderComponent();
    }

이렇게 했더니, 경로가 이동이 안되는 이슈가 발생하여, 페이지 이동 로직을 추가해주었다.

navigateTo(href) {
        // 페이지 이동 로직 추가
        window.location.hash = href; // 경로를 hash로 변경
        window.location.reload(); // 새로고침 추가
    }

그리고 update함수를 작성해주면 된다.

3. 컴포넌트 이슈

컴포넌트 안에 컴포넌트를 연결시켰는데, 새로 생성되는 div에 class를 넣을려고 했는데 새로운 div가 생겨 div가 의도하지 않게 2개씩 생성이 되었다.

해결방법

새로 생성되는 div를 this로 넣어주니 해결이 되었다.

this.el.classList.add('classname');

4. 배포오류

vercel 로 배포를 했는데 이미지가 깨져서 나오는 이슈가 발생했다. 그래서 경로를 상대경로, 절대경로로 바꿔보았는데 깨지는 이슈는 그대로였다.

해결방법

이미지는 정적이미지로 /public 폴더에서 관리하면 프로젝트를 빌드할 때 /dist 폴더로 복사해서 사용된다. 복사된 /dist/img 폴더는 /img/이미지.확장자 형태로 접근하면 된다