[도쿄의 사계] #2021/1/26 개발일지

What I did

<my trip box 페이지>

・ 가장 중요한 메모 저장 및 삭제 기능을... 또 다시 현역 엔지니어인 지인의 도움을 빌어 구현하고야 말았다...
(백엔드 엔지니어이지만 로컬스트로지 기능으로 사이트를 만든적이 없어서 약 1시간 반정도 소요됨. 나 혼자였으면 2주일 걸려도 몰랐을듯....하)

🎈 로컬 스트로지 참고사이트

봐도 잘 모르겠지만..... 한국어, 일본어, 영어로 알아 봄.

https://coding-restaurant.tistory.com/264

https://mosei.tistory.com/entry/%EC%9B%B9%EC%8A%A4%ED%86%A0%EB%A6%AC%EC%A7%80-%EC%98%88%EC%A0%9C

https://developer.mozilla.org/ko/docs/Web/API/Storage/removeItem

http://www.kaasan.info/archives/911

https://stackoverflow.com/questions/28362404/how-to-delete-a-specific-item-object-in-localstorage

🎈 JS

       // 여기부터가 메모를 local Storage에 저장하고 삭제하는 코드 //
        let memos = getItem('memos');               // 'memos'라는 큰 박스를 만들어서
        let new_memo = {'title': title, 'comment': comment};   // 그 안에 작은 박스의 new_memo(메모 타이틀과 내용이 담긴)를 넣어주기
        memos.push(new_memo);
        setItem('memos', memos)  // 'memos'안에 memos의 내용들을 저장하기
        alert('Your memo is saved!');
        window.location.reload();
        // 윈도우가 리로드 될 때 마다 새롭게 저장할 공간 만들기

    }

    function deleteMemo(key) {     //삭제에 쓰일 함수를 만들어 key를 넣어주기 (여기서 key는 'memos' )
        let memos = getItem('memos');  //getItem은 문자열 형태로 저장된 데이터를 서버에 돌려주는(불러오는) 역할
        if (memos) {
            memos.splice(key, 1);       // memos안에 담긴 리스트 중에 첫번째의 리스트를 찾아서 기존의 메모 리스트를 지워주기!
            setItem('memos', memos)
            alert('Your memo is deleted!');
            window.location.reload();
        }
    }

    function showArticles() {       //저장한 메모들을 화면에 띄워주는 함수
        articles = getItem('memos');        // getItem을 이용해 로컬스토리지에 저장된 메모를 불러오고 있음
        for (let i = 0; i < articles.length; i++) {
            let title = articles[i]['title'];
            let comment = articles[i]['comment'];
            makeCard(i, title, comment)
            // 밑에 있는 function makeCard() 함수에 불려서 카드 붙여주기가 실행됨
        }
    }

    function makeCard(key, title, comment) {                    // 삭제 버튼을 클릭하면 deleteMemo(${key}) 가 실행되게 지정하기
        let temp_html = `  <div class="card">
                                            <div class="card-body"">
                                                <a onclick="deleteMemo(${key})" class="btn btn-outline-secondary" style="text-align:right; margin-bottom:10px; font-size: 15px">삭제</a>
                                                <br>
                                                <a class="card-title" style="color: darkslateblue; font-size: 18px; margin-left: 10px;">${title}</a>
                                                <p class="card-text comment" style="white-space:pre-wrap;">${comment}</p>
                                                </br>
                                            </div>
                                        </div>`
        $('#cards-box').append(temp_html);
    }


  function getItem(key) {
        return JSON.parse(localStorage.getItem(key)) || [];
    }

    function setItem(key, value) {
        localStorage.setItem(key, JSON.stringify(value));
    }
    
    

언젠간... 이해하고 나혼자서도 코드 짤 수 있는 날이 오겠지..?

・ 삭제 버튼 위치 모양 조절하기
삭제 버튼은 부트스트랩에서 가져 왔고, 제목보다 위에 자리잡도록 하고 싶어서 행을 만드는 태그를 타이틀과 코멘트 코드 안에 넣어주었다.

    function makeCard(key, title, comment) {                    // 삭제 버튼을 클릭하면 deleteMemo(${key}) 가 실행되게 지정하기
        let temp_html = `  <div class="card">
                                            <div class="card-body"">
                                                <a onclick="deleteMemo(${key})" class="btn btn-outline-secondary" style="text-align:right; margin-bottom:10px; font-size: 15px">삭제</a>
                                                <br>
                                                <a class="card-title" style="color: darkslateblue; font-size: 18px; margin-left: 10px;">${title}</a>
                                                <p class="card-text comment" style="white-space:pre-wrap;">${comment}</p>
                                                </br>
                                            </div>
                                        </div>`
        $('#cards-box').append(temp_html);
    }

Doing..

・　 구글 번역 스타일 주기 (아니면 이대로 go?)

🎈참고 사이트
https://stackoverflow.com/questions/6633127/can-you-style-the-google-translate-plugin?newreg=5de55719d98343af94480a7a6267b18d

・　 구글 번역에 넣을 언어 코드 조사하기 (배경화면 사이즈에 맞게 간추리기)

🎈참고 사이트
https://www.benricho.org/translate/languagecode.html
http://m.blog.naver.com/rahayu/220691374831

・　 메모 박스 사이즈 조절, 삭제 버튼 크기 및 위치 조절

What to do

・ 핸드폰 사이즈 CSS 구글링(“CSS 모바일“, “CSS 미디어 쿼리”)
・ 각 html(총 4페이지)에 핸드폰 용의 CSS 입력하기
・ 기존 주소로 배포하기 (1/28금요일까지!)