잡학다식 개발일지

https://github.com/kyung412820/NoBase-Introduce

구현에는 어제 학습했던 프론트엔드 관련 지식이 함유되었다.

가장 기본이 되는 Java Script + HTML + CSS를 바탕으로 웹페이지의 화면과 이동을 구현하였다

대부분의 패널이 위와 같은 방식으로 구현되었지만, 이 프로젝트에서 가장 중요했던 부분은 역시 [ FIRE BASE ] 이 스텍 부분이였다.

파이어 베이스는 NoSQL을 기반으로한 데이터 베이스로, 구글에서 제공하는 데이터 스토리지 서버다. 단순히 말하면 일반적으로 말하는 서버의 역활을 구글이 무료로 제공해 준다고 생각하면 편하다.

FIRE BASE에서 프로젝트를 생성하면 이렇게 데이터 베이스를 사용할 수 있게 된다.

다만 데이터 베이스를 생성하더라도 위와 같이 앱을 설정을 해줘야 내 웹 코드에서 사용이 가능한데

1. 앱은 앱플리케이션을 말하는 것이 맞지만, 흔히 아는 스마트폰의 프로그램만을 의미하는 것이 아닌 원래 의미는 응용 소프트웨어를 말한다.

2. 그럼 응용 소프트웨어는 뭔가, 컴퓨터의 기본 시스템인 OS를 제외한 모든 프로그램을 말한다. 크롬, 게임, 알약과 같은 모든 프로그램이 이에 포함된다.

3. 이러면 웹 앱은 이해가 쉽다. 웹 서버에서 실행되며, 웹 브라우저를 통해 접근할 수 있는 소프트웨어 애플리케이션으로 간단히 말하면 '웹에서 사용되는 프로그램' 이라는 의미다.

4. 내 서버(FIRE BASE 서버)에서 웹 앱을 만든 다는 것은, 내 FIRE BASE에서 사용할 프로그램을 만든다는 것이다. (여기서는 서버에 접근할 수 있는 키를 제공하거나 내가 만든 프로그램에 서버를 연결하는 기능을 메인으로 사용했다.)

실제로 FIRE BASE는 위의 이미지에서 녹색 칠이 되어있는 부분에서 서버 접속에 필요한 키를 제공해 준다.

당연히 프로그램이 서버에 접속하는 입장이니 "나도 니네 서버 키 있어"라고 알려줘야 하기에, 프로그램 상에도 해당 키 부분이 포함되어야 한다.

위의 예시는 엄밀히 말하면 잘못된 예시지만, 위와 같은 느낌으로 클라이언트는 서버에 내가 입장권이 있다고 알려주는 것이다. 입장권이 맞다면 서버는 클라이언트에게 반대로 데이터를 제공해 준다는 것

이를 이용하여 코드를 구축하면

        $("#postingbtn").click(async function () {
            let name = $('#name').val();
            let pw = $('#pw').val();
            let content = $('#content').val();
            let date = new Date().toISOString();

            // Firestore에서 비밀번호 가져오기
            let passwordDoc = await getDocs(collection(db, "password"));

            // 비밀번호가 포함된 첫 번째 문서 가져오기
            let storedPw = '';
            passwordDoc.forEach(doc => {
                storedPw = doc.data().password; // 비밀번호 가져오기
            });
            console.log('Stored Password:', storedPw);
            // 비밀번호가 '1'인지 확인
            if (pw === storedPw) {
                let doc = {
                    'name': name,
                    'pw': pw,
                    'content': content,
                    'date': date
                };

                await addDoc(collection(db, "postmessage"), doc);
                alert('저장완료!');
                window.location.reload();
            } else {
                alert('비밀번호를 확인해 주세요');
            }
        })

        let docs = await getDocs(collection(db, "postmessage"));
        docs.forEach((doc) => {
            let row = doc.data();

            let name = row['name'];
            let pw = row['pw'];
            let content = row['content'];
            let date = row['date'];

            let temp_html = `
        <div class="post-entry">
            <div class="post-header">
                <span class="post-name">${name}</span>
                <p>${date}</p>
            </div>
            <hr class="post-divider"> 
            <div class="post-footer">
                <small class="post-date"">${content}</small>
            </div>
        </div>`;
            $('#message').append(temp_html);
        });

위와 같은 방식으로 구현할 수 있는데

이해가 힘들 수 있으니 특정 코드에 대해 설명해 보자 

1. 위 코드에서 doc = document 즉, 문서를 말한다.

2. addDoc은 '문서에 더하라' 라는 의미이다.

3. collection(db, "postmessage")는 'postmessage라는 이름의 데이터 베이스'를 의미한다.

4. doc은 내가 선언한 변수로, 현재 수정하고 있는 문서의 내용을 의미한다.

즉, 위 코드의 의미는

postmessage라는 이름의 데이터 베이스에 내가 수정한 문서를 서버 문서에 추가해라 라는 의미이다.

그럼 이 부분은? 

반대로 postmessage라는 이름의 데이터 베이스에서 문서를 가져와서 docs라는 변수에 추가해라 라는 의미가 된다.

위 내용을 토대로 서버 문서에는 name, pw, content, date라는 4개의 데이터 들이 하나의 문서로 합쳐진 다음 서버에 문서로서 업로드 되거나 반대로 불러와 진다.

아래는 실제로 어떤 변화가 생기는 지 설명하려 한다.

<위는 내가 생성한 프로그램>

<여기는 FIRE BASE의 데이터 베이스>

이렇게 맨 위의 커뮤니티 탭에서 [ 닉네임(name), pw, 내용(content) ]를 저장하면 아래와 같이 서버에 직접적으로 저장되고, 커뮤니티는 다시 서버에서 데이터를 불러와 오른쪽 패널에 서버에 있는 데이터를 띄운다.

간단한 서버와 클라이언트 간의 소통을 구현한 것으로, 백엔드라고 부를 수 있는 건지는 모르겠지만, 서버 통신이 가능했다는 것은 분명한 사실이다.

요새는 대부분의 기업이 firebase보다는 AWS와 같은 서버를 이용하지만 아직 기초단계인 나에게는 이정도가 딱 적당할 듯 싶다.

빨리 AWS나 Oracle, JPA, SPRING 과 같은 백엔드의 메인이라 불리는 기술들을 사용해 볼 수 있었으면 좋겠다.

프론트의 개발에는 기본적인 3가지의 요소가 있다. javascript, html, css 이렇게 3가지가 각각 행동, 뼈대, 치장의 역활을 수행하고 관계가 유기적으로 연동되어 우리가 보는 화면으로서 구현된다.

위와 같은 간단한 웹사이트를 제작하는 것은 위의 3개 만으로도 가능한데, 여기서 조금 더 욕심을 부린다면, JQuery와 Firebase와 같은 데이터 베이스를 추가하거나 Bootsrtrap을 통해 편리한 아트를 진행할 수 있다.

위의 요소들을 종합하면 아래와 같은 코드가 등장한다

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>나만의 추억앨범</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/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;
        }

        .mytitle {
            color: white;
            height: 500px;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: center;
            font-size: 200px; /* 크기를 줄여보세요 */
            font-family: "Playfair Display", serif;
            font-optical-sizing: auto;
            font-style: normal; /* 폰트 패밀리 수정 */
            padding-left: 50px;
            font-weight: bold;
            background-image: url('https://gongu.copyright.or.kr/gongu/wrt/cmmn/wrtFileImageView.do?wrtSn=11289000&filePath=L2Rpc2sxL25ld2RhdGEvMjAxNS8wMi9DTFM2OS9OVVJJXzAwMV8wNDg2X251cmltZWRpYV8yMDE1MTIwMw==&thumbAt=Y&thumbSe=b_tbumb&wrtTy=10006');
            background-position: center;
            background-size: cover;
        }

        .mybottom {
            background-color: rgb(22, 11, 46); /* 배경색을 검은색으로 설정 */
            color: white;

            height: 200px;

            /* 내용물을 정렬 */
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: center;
            padding-left: 50px; /* 왼쪽 여백 */
            font-weight: bold;

            bottom: 0; /* 하단에 배치 */
            left: 0; /* 왼쪽에 배치 */
            right: 0; /* 오른쪽으로 꽉 차게 */

            
            background-image: url('https://png.pngtree.com/thumb_back/fw800/background/20231006/pngtree-a-3d-illustration-of-space-flight-journeying-amidst-billions-of-stars-image_13537046.png');
            background-position: center;
            background-size: cover;            
        }

        .mytitle>button {
            width: 150px;
            height: 50px;
            background-color: transparent;
            border: none;
            color: white;
            font-size: 18px;
            font-weight: bold;
            border-radius: 5px;

            border: 1px solid white;
            margin-top: 20px;
        }

        /* 입력 박스 스타일 */
        .mypostingbox {
            width: auto; /* 고정된 너비 설정 */
            padding: 20px; /* 내부 여백 */
            border: 1px solid #ccc; /* 테두리 */
            border-radius: 5px; /* 모서리 둥글게 */
            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); /* 그림자 */
        }

        /* 카드 스타일 */
        .mycards {
            flex: 1; /* 남은 공간을 모두 차지하도록 설정 */
            max-height: 400px; /* 고정된 높이 설정 */
            overflow-y: auto; /* 세로 스크롤 가능 */
            padding: 10px; /* 내부 여백 */
            border: 1px solid #ccc; /* 테두리 */
            border-radius: 5px; /* 모서리 둥글게 */
            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); /* 그림자 */
        }

        /* 카드의 이미지 크기 조정 */
        .card-img-top {
            height: 200px; /* 카드 이미지 높이 고정 */
            object-fit: cover; /* 비율 유지하며 자르기 */
        }

        .mainmypostingbox {
            width: auto;
            margin: 20px auto;
            padding: 20px 20px 20px 20px;
            border-radius: 5px;
            box-shadow: 0px 0px 3px 0px blue;
        }

        .semimypostingbox {
            background-color: green;
            color: white;

            height: 300px;

            /* 내용물을 정렬 */
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            gap: 10px; /* 공백 간격 조정 */
            font-weight: bold;
            font-size: 25px;

            width: 45%; /* 너비 조정 */
            margin: 20px 30px 100px 30px; /* 위, 오른쪽, 아래, 왼쪽 여백 */
            padding: 20px; /* 패딩 설정 */
            border-radius: 5px;
            box-shadow: 0px 0px 3px 0px blue;

            background-image: url('https://img.freepik.com/free-photo/anime-style-mountains-landscape_23-2151135118.jpg');
            background-position: center;
            background-size: cover;
        }

        .mybtn {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;

            margin-top: 10px;
        }
        .paceimage {
            display: flex;
            justify-content: space-around; /* Or any alignment you prefer */
            margin: 20px 0; /* Adjust the spacing around the images */
        }

        .paceimage img {
            width: 150px; /* Set desired width */
            height: 150px; /* Maintain aspect ratio */
            border-radius: 10px; /* Optional: adds rounded corners to images */
            transition: transform 0.2s; /* Adds a hover effect */
        }

        .paceimage img:hover {
            transform: scale(1.5); /* Scale up on hover */
        }

        .fade-in {
        opacity: 0; /* 초기 투명도 설정 */
        transition: opacity 1s ease-in; /* 부드러운 전환 */
        }
        
        .mybtn>button {
            margin-right: 10px;
        }
    </style>
    <script type="module">
        // Firebase SDK 라이브러리 가져오기
        import { initializeApp } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-app.js";
        import { getFirestore } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";
        import { collection, addDoc } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";
        import { getDocs } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";

        // For Firebase JS SDK v7.20.0 and later, measurementId is optional
        const firebaseConfig = {
            apiKey: "AIzaSyCz-aTF0iQvQilKJyrTHQxg1T2X_13trtw",
            authDomain: "sparta-49ce5.firebaseapp.com",
            projectId: "sparta-49ce5",
            storageBucket: "sparta-49ce5.appspot.com",
            messagingSenderId: "819019173056",
            appId: "1:819019173056:web:e47a0781c0b38268923125",
            measurementId: "G-0NFWX91DD1"
        };

        // Firebase 인스턴스 초기화
        const app = initializeApp(firebaseConfig);
        const db = getFirestore(app);

        $("#postingbtn").click(async function () {
            let image = $('#image').val();
            let title = $('#title').val();
            let content = $('#content').val();
            let date = $('#date').val();

            let doc = {
                'image': image,
                'title': title,
                'content': content,
                'date': date
            };
            await addDoc(collection(db, "albums"), doc);
            alert('저장완료!');
            window.location.reload();
        })

        $("#savebtn").click(async function () {
            $('#postingbox').toggle();
        })


        let url = "http://spartacodingclub.shop/sparta_api/seoulair";
        fetch(url).then(res => res.json()).then(data => {
            let mise = data['RealtimeCityAir']['row'][0]['IDEX_NM']
            $('#msg').text(mise)
        })

        let docs = await getDocs(collection(db, "albums"));
        docs.forEach((doc) => {
            let row = doc.data();

            let image = row['image'];
            let title = row['title'];
            let content = row['content'];
            let date = row['date'];

            let temp_html = `
            <div class="col">
                <div class="card h-100">
                    <img src="${image}"
                        class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">${title}</h5>
                        <p class="card-text">${content}</p>
                    </div>
                    <div class="card-footer">
                        <small class="text-muted">${date}</small>
                    </div>
                </div>
            </div>`;
            $('#card').append(temp_html);
        });

    </script>
</head>

<body>
    <div class="mytitle">
        <p>No Base</p>
    </div>

    <div class="mytab">
        <button onclick="location.href='teamintroduce.html'" style="width: 100px; height: auto; border: none; background: none; padding: 10px; font-size: 16px;">
            팀 소개
        </button>
        <button onclick="location.href='team_member_2.html'" style="width: 100px; height: auto; border: none; background: none; padding: 10px; font-size: 16px;">
            방명록
        </button>
        <button onclick="location.href='team_member_3.html'" style="width: 100px; height: auto; border: none; background: none; padding: 10px; font-size: 16px;">
            팀 수정
        </button>
        <button onclick="location.href='team_member_4.html'" style="width: 100px; height: auto; border: none; background: none; padding: 10px; font-size: 16px;">
            학습 기록
        </button>
    </div>

    <div class="mainmypostingbox" id="postingbox">
        <h1>Team Goal</h1>
        <p style="margin: 5px 0;">1. javascript, http, css를 이용한 기본적인 웹페이지 개설 능력 강화</p>
        <p style="margin: 5px 0;">2. Firebase를 통한 Api의 사용 이해</p>
        <p style="margin: 5px 0;">3. 팀활동을 통한 팀워크 개발</p>
    </div>

    <div class="paceimage">
        <a href="teamintroduce.html">
            <img src="경훈.jpg" alt="Team Member 1" style="width: 100px; height: auto;">
        </a>
        <a href="team_member_2.html">
            <img src="영균님.jpg" alt="Team Member 2" style="width: 100px; height: auto;">
        </a>
        <a href="team_member_3.html">
            <img src="윤현님.jpg" alt="Team Member 3" style="width: 100px; height: auto;">
        </a>
        <a href="team_member_4.html">
            <img src="경빈님.jpg" alt="Team Member 4" style="width: 100px; height: auto;">
        </a>
        <a href="team_member_5.html">
            <img src="준일님.jpg" alt="Team Member 5" style="width: 100px; height: auto;">
        </a>
    </div>
    

        <div class="semimypostingbox" id="postingbox" style="display: inline-block;">
            <h1>My Strength</h1>
            <p style="margin: 10px 0;">1. 타인에 비해 흥미가 많은 편입니다.</p>
            <p style="margin: 10px 0;">2. 무언갈 도전하는 것을 즐깁니다.</p>
            <p style="margin: 10px 0;">3. 팀활동을 다양하게 해봤습니다.</p>
        </div>
        <div class="semimypostingbox" id="postingbox" style="display: inline-block;">
            <h1>Collaborative Style</h1>
            <p style="margin: 10px 0;">1. 팀원들이 하고자 하는 방향을 잡고 일을 완수할 수 있도록 조력</p>
            <p style="margin: 10px 0;">2. 학생의 입장으로 서로에게 배우는 자세</p>
            <p style="margin: 10px 0;">3. 서로의 의견을 존중하고 배려</p>
        </div>        
    </div>


    


</body>

</html>

아직 리엑트와 같은 고급 기술은 사용안해봤지만, 기본이라도 역시 쉽지 않은 것 같다.. 좀 더 열심히 해야할 것 같다.

자바란 무엇일까?

• 자바는 썬 마이크로시스템즈의 제임스 고실링과 다른 연구가들이 개발한 객체 지향적 프로그래밍 언어이다.

자바는 왜 배울까?

1) 자바는 간단하다.

- 타 언어에 비해 이해하기 쉽고 단순한 개발이 가능하다는 장점이 있어 현재 널리 사용되고 있다.

2) 객체지향 언어다.

- 추후 다시 기술할 예정인 객체지향이란, 코드를 기능별로 박스에 담는다고 생각하면 된다. 이 박스 하나하나가 객체라 불리며, 문제가 생기거나 수정할때 해당 박스 하나만 수정하면 되도록 설계되어 있어 유지보수, 안전성에서 유리하다.

3) 한국에서 많이 쓴다...

- 웹 개발에 있어서 한국은 자바 왕국이라는 말이 있을 정도로 자바를 주력으로 많이 사용한다. 취업에 한에서만 이야기하면 자바를 배우는 것이 취업의 문은 상대적으로 넓다는 것 (다만 2024년 기준으로는 개발자 시장이 많이 죽어서 취업이 힘든건 매한가지이다..)

1. **내가 내일배움캠프에 참여한 계기는 무엇인가요?**

- 컴공 그중 AI를 전공으로 해왔지만, 적성의 문제를 느끼며 우현히 시작했던 웹 활동을 돌아보며 다시 공부해보기로 했습니다!

2. 내가 이해한 **개발자**는 어떤 역할을 하는 사람인가요?

- 코더와 같은 단순한 구현을 넘어서, 자신의 알고리즘 지식을 기반하여 창의적으로 새로운 가치를 생성하고 더 높은 효율을 위해 개선을 도모하는 역할이라 생각합니다.

3. 프로그래밍을 경험해보셨나요? 해보셨다면 어떤 경험을 하셨는지를 작성해주시고,

아니라면 프로그래밍에 대해 찾아본 것을 작성해주세요.

- 프로그래밍은 빅데이터 ML,CNN과 같은 AI를 기반으로 다양한 프로젝트를 진행하고 대회에 입상해본 경험이 있습니다. 현재는 과거의 지식을 기반으로 미래에 더 걸맞는 백엔드 개발자가 되는 것이 목표입니다.

4. **개발자의 역할을 수행하는 데에 있어 나의 강점과 연관된 부분은 무엇이라고 생각하나요?**

- 팀으로 개발을 해오면서 느낀점은 개발자 또한 많은 대화를 통한 팀워크가 중요하다는 것입니다. 저는 이 부분에서 강점을 발휘할 수 있다고 생각합니다. 다른 하나는 가장 기초적인 본인의 프로그래밍 역량이라 생각합니다. 이 부분은 아직 부족하다 생각하지만 더 높은 곳을 목표로 한다면 꼭 채워나가야하는 부분이라 생각합니다.

5. **본 코스 수료 후, 어떤 개발자로 성장하고 싶나요?**

- 본 코스 수료 후에는 백엔드 개발자로서의 기초와 코틀린, 스프링을 이용한 백엔드 프로젝트를 진행하는 것이 목표입니다. 추후에는 데이터 분야의 전공을 살려 데이터 엔지니어링을 포함한 풀스텍 개발자가 되는 것이 목표입니다.

6. **본 코스 수료 후, 개발자가 된 5년 후 목표로하는 점은 무엇인가요?**

- 우선은 기업에 입사하여 현장에서 사용하는 프로그래밍 방식이나 기술 스텍을 쌓아올리고자 합니다. 최종적으로는 IT 기획이나 프로그래밍 기획을 진행하고 계획하는 기획자로서 살아가는 것이 목표이며 그를 위한 현장 업무를 준비하는 단계가 5년 뒤의 미래라고 생각합니다.

1. 나는 어떤 히스토리를 가지고 Spring 트랙에 참여하게 되었나요?
   • 컴공 그중 AI를 전공으로 해왔지만, 적성의 문제를 느끼며 우현히 시작했던 웹 활동을 돌아보며 다시 공부해보기로 했습니다!
2. 본 코스 수료 후, 어떤 백엔드 개발자 혹은 원하는 직무로 성장하고 싶나요?
   • 본 코스 수료 후에는 백엔드 개발자로서의 기초와 코틀린, 스프링을 이용한 백엔드 프로젝트를 진행하는 것이 목표입니다. 추후에는 데이터 분야의 전공을 살려 데이터 엔지니어링을 포함한 풀스텍 개발자가 되는 것이 목표입니다.
3. 그 외에 내일배움캠프에 기대하는 것이 있다면 자유롭게 작성해 주세요.- 저의 갈 방향을 잘 이끌어 주신다면, 나머지는 저의 몫이라고 생각합니다. 부디 좋은 방향으로 높은 곳에 닿았으면 좋겠습니다.