얌생

오늘의 목표

⏱️ 오늘의 일정

9:00 ~ 12:00 - 프로그래머스 코테 문제 풀기

12:00 ~ 13:00 - 팀 회의

13:00 ~ 17:00 - 팀 프로젝트 웹 개발 팝업창 띄우기

17:00 ~ 21:00 - 개인 공부

📜 프로그래머스 코테 문제 풀기

9:00 ~ 12:00 프로그래머스 코테 문제 풀기

어제 다짐 했던거 처럼 5가지의 문제를 풀었다.

아직은 레벨 1단계라 크게 어려움은 없었다.

https://github.com/YamSaeng/AlgorithmCodingTest/tree/main/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%A8%B8%EC%8A%A4/1/70128.%E2%80%85%EB%82%B4%EC%A0%81

https://github.com/YamSaeng/AlgorithmCodingTest/tree/main/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%A8%B8%EC%8A%A4/1/77884.%E2%80%85%EC%95%BD%EC%88%98%EC%9D%98%E2%80%85%EA%B0%9C%EC%88%98%EC%99%80%E2%80%85%EB%8D%A7%EC%85%88

https://github.com/YamSaeng/AlgorithmCodingTest/tree/main/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%A8%B8%EC%8A%A4/1/12917.%E2%80%85%EB%AC%B8%EC%9E%90%EC%97%B4%E2%80%85%EB%82%B4%EB%A6%BC%EC%B0%A8%EC%88%9C%EC%9C%BC%EB%A1%9C%E2%80%85%EB%B0%B0%EC%B9%98%ED%95%98%EA%B8%B0

https://github.com/YamSaeng/AlgorithmCodingTest/tree/main/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%A8%B8%EC%8A%A4/1/82612.%E2%80%85%EB%B6%80%EC%A1%B1%ED%95%9C%E2%80%85%EA%B8%88%EC%95%A1%E2%80%85%EA%B3%84%EC%82%B0%ED%95%98%EA%B8%B0

https://github.com/YamSaeng/AlgorithmCodingTest/tree/main/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%A8%B8%EC%8A%A4/1/12918.%E2%80%85%EB%AC%B8%EC%9E%90%EC%97%B4%E2%80%85%EB%8B%A4%EB%A3%A8%EA%B8%B0%E2%80%85%EA%B8%B0%EB%B3%B8

📜 팀 회의

12:00 ~ 13:00 - 팀 회의

오늘 18:00 시 까지는 코딩을 완료하고, PPT를 준비해야한다는 전체 공지를 받았다.

그 후, 간단한 미니 게임을 통해 발표 순서를 정하게 되었는데

우리 '2조' 가 가장 먼저 발표를 하게 되었다. 

팀 회의에서는 발표자를 뽑고 좀 더 추가 할 수 있는 기능은 없을 지 얘기하는 시간을 보냈다.

내가 맡은 방명록 팝업창 띄워서 처리하기 기능만 추가하면 웹페이지는 완성이였다.

📜 팀 프로젝트 웹 개발 팝업창 띄우기

13:00 ~ 17:00 - 팀 프로젝트 웹 개발 팝업창 띄우기

어제 문제가 되었던 점은 다음과 같다.

<script type="module"></script>

script에 module를 붙이면 해당 블럭이 독립된 공간이 되고 외부에서 함수를 호출하지 못하는 문제였다.

어떻게 해야 호출을 할 수 있을까?.. 고민을 하다가 우선은 html에서 자바스크립트(js)를 분리하기로 했다.

<script defer src="about.js"></script>

이처럼 스크립트를 분리해서 about.js에 따로 관리하도록 수정했다.

위처럼 만들고 웹페이지를 실행했는데 이번에는 Firebase에서 데이터를 받아오지 못하는 문제가 생겨버렸다..

머리가 지끈지끈해지는 순간... 튜터님에게 가서 물어보니 결국에는 type="module"을 붙여야

Firebase를 사용할 수 있다는 설명을 듣게 되었다. 처음으로 돌아온 상황.. 

구글에서 좀 더 찾아보기로 했다.

javascript module function call 이라고 검색을 했더니

어느 외국사람이 질문 올린 글이 있었다.

https://stackoverflow.com/questions/69888029/how-to-call-a-function-declared-in-a-javascript-module-type-module-from-an-htm

살펴보니 나처럼 함수를 호출하지 못하고 있는 문제였고,

위 글에서 발견한 export와 import를 찾아보게 되었다.

https://ko.javascript.info/import-export

module에서 함수 앞에 export를 붙이면 해당 함수를 내보낼 수 있는 기능을 하는 지시자였고,

import는 반대로 해당 함수를 불러들일 수 있는 지시자였다.

export function GetGuestbookContent(Name, guestbookContentData, guestBookWindow) {
    if (!Name || !guestbookContentData) {
        alert('이름과 메시지를 모두 입력하세요.');
        return;
    }

    // Firebase DB에 저장
    DB_SaveGuestBookContent(Name, guestbookContentData, guestBookWindow);
}

<script type="module">
    import { GetGuestbookContent } from "./about.js"

    $("#guestBookPostingBtn").click(function () {
        let guestBookNameData = $("#guestBookName").val();
        let guestbookContentData = $("#guestBookContent").val();

        GetGuestbookContent(guestBookNameData, guestbookContentData, window);                  
    })

    $("#guestBookCloseBtn").click(function () {
        window.close();
    })
</script>

보내고자 하는 함수 앞에 export를 붙이고

해당 함수가 필요한 곳에 import를 사용해 불러들이니 데이터를 주고 받을 수 있게 되었다.

다행히도 만들고자 했던 방명록을 팝업창으로 띄워 정보를 받고,

받은 정보를 DB로 전송해 읽어들이는 부분을 완성 할 수 있게 되었다.

📜 개인 공부

17:00 ~ 21:00 - 개인 공부

팀프로젝트 개발 하느라 듣지 못했던 인프런 CS강의를 듣고

중간 중간 발표 PPT, 시연영상 체크를 하며 개인 공부 시간을 보냈다.

🌙 하루를 마치며

결국에는 팝업창을 띄워 정보를 처리 할 수 있게 된 것에 대해 매우 만족스러운 기분을 느꼇다.

내일 오후 2시에 발표 인데, 시작이 반이라는 것처럼 첫번째 팀 프로젝트 발표를 성공적으로 끝낼 수 있으면 좋겠다.

오늘의 목표

⏱️ 오늘의 일정

9:00 ~ 10:00 - 알고리즘 문제 풀기

10:00 ~ 13:00 - 팀 프로젝트 진행

13:00 ~ 14:00 - 점심시간

15:00 ~ 15:30 - 전수 면담

15:30 ~ 21:00 - 개인 공부

📜 알고리즘 문제 풀기

9:00 ~ 10:00 - 알고리즘 문제 풀기

캠프에서 제공하는 알고리즘 문제를 2가지를 풀었다.

( 아직은 쉬운편이라서 좀 더 풀긴 해야 할듯.. )

https://github.com/YamSaeng/AlgorithmCodingTest/tree/main/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%A8%B8%EC%8A%A4/1/12903.%E2%80%85%EA%B0%80%EC%9A%B4%EB%8D%B0%E2%80%85%EA%B8%80%EC%9E%90%E2%80%85%EA%B0%80%EC%A0%B8%EC%98%A4%EA%B8%B0

https://github.com/YamSaeng/AlgorithmCodingTest/tree/main/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%A8%B8%EC%8A%A4/1/12922.%E2%80%85%EC%88%98%EB%B0%95%EC%88%98%EB%B0%95%EC%88%98%EB%B0%95%EC%88%98%EB%B0%95%EC%88%98%EB%B0%95%EC%88%98%EF%BC%9F

https://bit.ly/3XR66UE

블로그 글을 보고 백준 허브 확장 프로그램을 알게 되었다.

Git과 연동되어 백준이나 프로그래머스 문제를 풀면 자동으로 Git에 연동되고 메모리 사용량, 속도 등을 기록해줘서

매우 편하다.

📜 팀 프로젝트 진행

9:00 ~ 10:00 - 팀 프로젝트 진행

웹개발 종합반에서 배운 내용을 토대로 기본적인 생성, 삭제, 수정을 할 수 있는 웹페이지를 만들었다.

내가 맡은 부분은 전체적인 틀을 보고 부족한 부분을 채우는 부분과

방명록을 팝업창을 띄워서 정보를 입력하고, 받은 정보로 방명록 카드를 생성하는 부분을 맡았다.

방명록을 팝업창으로 생성하는 부분에서 막히는 부분이 있는데 다음과 같다.

메인 화면

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <script type="module">
        $('#guestbookbtn').click(function () {
            window.open("test_child.html", "_blank", `width=1000, height=600, toolbars=no, scrollbars=no`);
            console.log(guestbookContent);
        });

        function guestbookContent(data) {
            console.log(data);
        }   
    </script>
</head>

<body>
    <button id="guestbookbtn">자식 창 열기</button><br>
    <h4 id="data_from_child">받아온 데이터 : </h4>
</body>

</html>

자식 화면

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

    <style>
        @import url('https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap');

        * {
            font-family: 'Gowun Dodum', sans-serif;
        }

        .myguestbookbox {
            border-radius: 10px;
            box-shadow: 0px 0px 3px 0px rgb(0, 0, 0);
            width: 400px;
            height: 500px;
            margin: 30px auto 20px auto;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
    </style>

    <script type="module">                      
        $("#guestbookWriteBtn").click(function () {           
                        
            let guestbookContentData = $("#guestbook-content").val();            
            opener.guestbookContent(guestbookContentData);
            window.close();
        })        
    </script>

</head>

<body>
    <div class="myguestbookbox">
        <h3>방명록 작성하기</h3>
        <div class="form-floating mb-3">
            <input type="text" class="form-control" id="guestbook-name" placeholder="이름" required>
            <label for="guestbook-name">이름</label>
        </div>
        <div class="form-floating mb-3" style="width: 300px; height:300px">
            <textarea class="form-control" id="guestbook-content" placeholder="내용" required
                      style="height:300px"></textarea>
            <label for="guestbook-content">내용</label>
        </div>
        <div class="mybtn">
            <button type="button" class="btn btn-dark" id="guestbookWriteBtn">작성하기</button>
            <button type="button" class="btn btn-outline-dark" id="close-guestbook">닫기</button>
        </div>
    </div>    
</body>

</html>

자식 화면에서 작성하기를 누르면 opener의 guestbookContent()를 호출해 데이터를 전달하는 테스트 코드다.

문제는 opener의 guestbookContent가 정의가 되어 있지 않다고 계속 오류가 발생하는 지점이다.

어느 부분이 문제인지 파악하기 위해 부모쪽을 수정했는데

수정한 부모 화면

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <script>
        function OpenChild() {
            window.open("test_child.html", "_blank", `width=1000, height=600, toolbars=no, scrollbars=no`);
        }

        function guestbookContent(data) {
            console.log(data);
        }
    </script>

</head>

<body>
    <button id="guestbookbtn" onclick="OpenChild()">자식 창 열기</button><br>
    <h4 id="data_from_child">받아온 데이터 : </h4>
</body>

</html>

<script type="module">

<script type="module"> 를 제거하고 <script>로 수정

function OpenChild() {
    window.open("test_child.html", "_blank", `width=1000, height=600, toolbars=no, scrollbars=no`);
}

<script type="module"> 제거로 인해 JQuery를 사용하지 못해서 ( 자식 창 열기 ) 버튼에 OpenChild() 함수를

onclick으로 할당했다.

이렇게 수정하고 실행을 하니 이번에는 guestbookContent()가 잘 실행이 된다.. 

아마도 <script type="module">를 제거하고 다른 방식으로 사용하면 되는거 같은데,

왜 <script type="module">를 선언하면 guestbookContent()를 찾지를 못하는 건지 궁금해서

혼자 구글링해보다가 튜터님한테 가서 물어보게 되었다.

<script type="module">

이렇게 type = "module"로 지정하면 해당 <script> 블럭이 완전 독립적인 스코프로 지정되어 

외부에서는 guestbookContent()를 호출하지 못한다는게 튜터님의 설명이였다.

근데 현재 메인 화면 작업은 전부 JQuery를 사용하기 때문에 type="module"를 붙이기는 해야하는데..

다른 방식을 사용해 방명록 팝업창을 구현해봐야 할듯..

📜 전수 면담

15:00 ~ 15:30 - 전수 면담

튜터님과의 짧은 면담이 있었다.

개발경험, 공부 가능한 시간 등등 

📜 개인 공부

15:30 ~ 21:00 개인 공부

https://www.inflearn.com/course/%EB%84%93%EA%B3%A0%EC%96%95%EA%B2%8C-%EC%BB%B4%EA%B3%B5-%EC%A0%84%EA%B3%B5%EC%9E%90

평가도 괜찮고 다시 한번 정리할겸 CS 강의 시작으로 결제했다. 

자기전까지는 완강 목표 !!

🌙 하루를 마치며

이번에야말로 CS 공부를 인강으로 확실하게 정리해야겠다고 마음을 먹었다.

팀 발표가 금요일이라 방명록 팝업창 띄우는게 급하긴 한데... 내일은 방법을 찾아 해결하도록 노력해야겠다.

방법을 못 찾으면 현재 방식대로 방명록을 작성해도 괜찮으니 약간은 부담감을 내려놓고 짱구를 잘 굴려봐야겠다.

오늘의 목표

⏱️ 오늘의 일정

9:00 ~ 10:00 - [왕초보] 웹개발 5주차
10:00 ~ 11:00 - Git 특강

11:00 ~ 13:00 - [왕초보] 웹개발 5주차

13:00 ~ 14:00 - 점심시간

15:00 ~ 18:00 - 팀 프로젝트 웹 개발

18:00 ~ 19:00 - 저녁시간

19:00 ~ 21:00 - 팀 프로젝트 웹 개발

📜 [왕초보] 웹개발 5주차 강의 듣기

9:00 ~ 10:00 웹 개발 5주차 강의

11:00 ~ 13:00 웹 개발 5주차 강의

다행히도 점심 전에는 완강 할 수 있었다.

웹개발에서 들은 내용들은 따로 글을 작성할 예정!

📜 Git 특강

10:00 ~ 11:00 Git 특강

튜터님의 온라인 세션으로 Git 특강을 듣게 되었다.

Git은 평소에도 자주 쓰는 툴로 내용은 알아듣기 쉬웠고,

보통은 혼자 사용하느라 Branch도 만들지 않고 사용했는데,

full request라는 기능을 처음 들어서 유용한 시간이었다.

앞으로 Branch로 작업해서 충돌도 나보고 Main으로 올려보면서 연습을 많이 해야겠다

📜  팀 프로젝트 웹 개발

15:00 ~ 21:00 - 팀 프로젝트 웹 개발

점심시간에 밥은 대충 먹고 다이소에 가서 마이크와 웹캠을 사왔다.

팀 회의로 리더도 정하고, 중간에 튜터님한테 찾아가서 팀 프로젝트에서 각 팀원들이 담당할 부분에 관한 조언도 들었다.

약간 두루뭉실한 부분도 있었지만 팀원들 나름대로 각자 작업을 맡았다.

🌙 하루를 마치며

내일부터는 CS 공부와 코테도 다시 시작해야겠다.

오늘의 목표

⏱️ 오늘의 일정

9:00 ~ 10:00 - OT
10:00 ~ 11:00 - [특강] 게임 서버 개발자 로드맵

11:00 ~ 12:00 - 프로젝트 진행방식 설명
12:00 ~ 13:00 - 팀 프로젝트 

13:00 ~ 14:00 - 점심시간

15:00 ~ 18:00 - 개인 공부

18:00 ~ 19:00 - 저녁시간

19:00 ~ 21:00 - 개인 공부

📜 OT ~ [특강] 게임 서버 개발자 로드맵

9:00 ~ 10:00 - OT

10:00 ~ 11:00 - [특강] 게임 서버 개발자 로드맵

OT를 참여하게 되었는데, 튜터님의 게임 서버 개발에 관한 전반적인 설명이 알아 듣기 쉬웠고,

다시 한번 마음을 잡는 계기가 되었다.

📜 프로젝트 진행방식 설명 ~ 팀 프로젝트

11:00 ~ 12:00 - 프로젝트 진행방식 설명

12:00 ~ 13:00 - 팀 프로젝트

캠프에서 정해준 팀에 따라 2조에 배정되었다. 

1주차 프로젝트로 웹페이지를 만들어서 발표를 한다고 하는데, 시간표를 보니 금요일날 발표로 정해져 있다.

나를 포함해서 총 5명이 배정되었는데, 처음 날 이라 그런지 서먹해 말도 별로 건네지는 못했다.

다른 팀원이 팀 Git과 Firebase에 초대해줘서 참여했다.

📜 개인 공부

13:00 ~ 21:00 개인 공부

1주차 팀 프로젝트 참여를 위해, 캠프에서 지급한

[왕초보] 웹 개발 종합반 강의를 3주차 까지 듣고,

우선 글을 쓰게 되었다. ( 4주차 까지 무조건 듣고 자야지.. )

내일 정오 전까지는 5주차 까지 완강 하는게 목표다