15일차 TIL(팀 프로젝트, localStorage)

가장 시멘틱한 팀원분의 코드를 선택하여 각자의 역할을 분배하였다.

 

1. 다른 API를 다시 가져와서 적용하여 각자의 해당 항목들을 다시 선언.

2. 각 페이지 클릭시 상세 페이지 구현.

3. 각 페이지에서 리뷰를 작성할 수 있는 UI구현 -

    작성자 / 비밀번호 / 리뷰 - 이를 localStorage에 저장하고 불러오고 삭제까지

4. github의 pull request를 사용하여 협업. 등의 스텝이다.

 

우선 내배캠 참여 전에 공부했었던 localStorage 저장하고 불러오는 공부를 한 적이 있어서,

내가 지원하였다. 빨리 마무리 된다면 전체적인 css도 만져보겠다고 했다.

 

역할 분배가 끝나고 예전 작업과 강의들을 되짚어보면서 리마인드 해보았다.

 

localStorage.setItem('key', 'value');

localStorage.setItem('username', 'Alice');

 

localStorage.getItem('key');

localStorage.getItem('key');

 

localStorage.removeItem('key');

localStorage.removeItem('username');

 

오후 - 저녁까지 할애했는데 쉽지 않았다.

간단한 구현의 로직을 작성했던 거라 기존 로직에서 조금만 복잡하게 하려니 막히면서

막막해졌다. 

 

data를 입력하고 등록을 누르면,

이런식으로 localStorage에 저장이 된다.

이를 하나의 배열로 저장하는게 막힌다.

다른 로직도 구현해봤는데 다소 방향이 달라져서 원점으로 돌아와봤다.

const form = document.querySelector('form');

const nam = document.querySelector('#name');

const pwd = document.querySelector('#pwd');

const btn = document.querySelector('#btn');

const area = document.querySelector('.area');

const a = nam.addEventListener("keydown", () =>{

    localStorage.setItem("id", nam.value);

})

const b = pwd.addEventListener("keydown", () =>{

    localStorage.setItem("pw", pwd.value);

})

const c = area.addEventListener("keydown", () =>{

    localStorage.setItem("review", area.value);

})

const todo = [a,b,c];

console.log(a);

const todoString = JSON.stringify(todo)

console.log(todoString)

localStorage.setItem("todo", todoString)

btn.addEventListener('click', () => {

    alert("저장완료!");

})

window.onload = () => {

    if(localStorage.getItem("review")){

        if(confirm("최근작성한글을 불러올까요?")){

            document.querySelector(".area").innerText =

            localStorage.getItem("review");

        } else {

            localStorage.removeItem("review");

        }

    }

}

 

검색하는건 막연한 심해를 탐험하는거 같은데 거기서 나에게 맞는 로직을 찾아 가공해서

실패를 거듭한 후 성공하면 그렇게 좋을 수 없다.

 

다시 심해로 뛰어들어서 잠수 좀 해본 다음 튜터님에게 조언을 얻어야 할거 같다.

호기롭게 시작했는데 역시나 만만치 않다. 꼭 내일 안으로 해결할 것이다.