스파르타코딩클럽 내일배움캠프4기 -6-

JaeSung Lee·2022년 11월 6일
회고록
0

내일배움캠프4기

목록 보기
6/24
post-thumbnail

한주간의 회고록이다.

내일배움캠프 4기에 입단하여 한주가 지났다.
하루 12시간씩 매일 컴퓨터에 앉아서 프로젝트를 해보았는데
머리가 지끈거리고 눈이 뻑뻑하다.
단기간에 무엇을 이루려면 그만한 노력이 필요하다.
한주간 무엇을 했는지 정리를 해보자!

mini project

가장 큰 이슈가 아닌가 싶다.
각자 만든 개인페이지와 공통페이지를 추가해서 팀원 전체 소개 페이지를 만드는것이다.
실력이 다들 달라서 잘할수있을까 했는데 다행히 좋은 팀원들을 만나서
성공적으로 끝냈다.

https://www.notion.so/74384905a327424fb81e7d3e413d7536

같이 친해지조

프로젝트 소개
첫 프로젝트로 만난 어색한 사이의 팀원끼리 프로젝트를 통해 서로 좀 더 친해지자는 목적으로 제작하게 되었습니다.

친해지조와 친해지조의 팀원들을 간단하게 소개하는 페이지입니다. 저희 팀원 뿐만아니라 다른 팀에도 친해지조를 소개하고, 메인페이지에서 댓글로 소통하며 모두가 친해질 수 있는 공간을 만들었습니다.

개발인원 및 역할

김한울 - 프론트엔드 ( 메인페이지 상단, 버튼의 html, css )

이재성 - 프론트엔드 ( 메인페이지 하단 ,댓글의 html, css )

강창순 - 백엔드 ( POST 기능 구현, 프로필카드 사진 css )

김남규 - 백엔드 ( DELETE, 좋아요 기능 구현 )

조희현 - 백엔드 ( GET, 페이지이동 기능 구현 )

노션에 있는게 복사가 안된다.
팀 소개와 각자 맡은 역할들을 써놓았는데 ㅜㅜ
위에 링크 클릭하면 이동이 된다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>친해지조</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
          integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
            integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
            crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
            integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
            crossorigin="anonymous"></script>

    <!--ajax 코드-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

    <title>미니프로젝트_html</title>

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+KR:wght@300&display=swap" rel="stylesheet">

    <style>

        body {
            background-color: #283345;
            padding-top: 120px;
        }

        * {
            font-family: 'IBM Plex Sans KR', sans-serif;
        }


        .text-center {
            margin: auto;
            margin-bottom: 50px;
            margin-top: 20px;
            width: 900px;
            text-align: center;
        }

        .g-4 {
            margin-left: 20px;
            margin-right: 20px;
        }


        .mb-2 {
            margin-top: 50px;
            margin-right: 30px;
            margin-left: 30px;
            padding-bottom: -70px;
        }


        .card-img-top {
            position: absolute;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .mycards {
            margin-top: 30px;
        }


        .card-header {
            font-weight: bold;
            margin-bottom: 30px;
            background-color: #3871ff;
            color: white;
        }

        #comment-list > div > p {
            margin-left: 30px;
            margin-bottom: 30px;
        }

        .nickname {
            font-size: 16px;
        }

        .cmnt {
            font-weight: bold;
        }


        .name {
            margin-bottom: 10px;
        }

        .btn {
            background-color: gray;
            color: white;
        }

        a {
            color: black;
        }

        a:hover {
            color: black;
            text-decoration: none;
        }

        .cmnt-body {
            color: white;
            padding: 1.25rem;
            background-color: #283345;
        }

        #exam {
            margin-bottom: 15px;
        }


        .cmnt-wrap {
            margin-top: 60px;
            margin-bottom: 60px;
            border-top: 0px solid #c2c2c2;
        }

        .card2 {
            width: 70%;
            margin: auto;
        }

        .cmnt-box {
            border-top: 1px solid #ffffff;
        }

        .cmnt-box:hover {
            border-top: 3px solid #ffffff;
        }



        .card-box {
            position: relative;
            max-width: 700px;
            height: 400px;
        }

        .card {
            margin-bottom: 120px;
            background-color: #ffffff;
        }

        .col .card:hover {
            border: 4px solid #3871ff;

        }

        .col > a > .card > .card-body {
            font-size: 20px;
            height: 150px;
            display: none;
        }

        .col > a > .card:hover > .card-body {
            display: block;
        }

        .col .card-title {
            font-weight: bold;
        }

        .bg-01 {
            background-color: transparent;
            color: #ffffff;
            width: 40%;
            border: 1px solid #8aacff;
        }


    </style>


    <script>

        $(document).ready(function () {
            show_comment();
        });

        function show_comment() {
            $.ajax({
                type: "GET",
                url: "/comments",
                data: {},
                success: function (response) {
                    let rows = response['comments']
                    for (let i = 0; i < rows.length; i++) {
                        let name = rows[i]['name']
                        let numb = rows[i]['numb']
                        let comment = rows[i]['comment']
                        let like = rows[i]['like']


                        let temp_html = `
                                        <div class="cmnt-box" id="exam">
                                            <div class="cmnt-body">
                                                <blockquote class="blockquote mb-0">
                                                    <div class="nickname">${name}</div>
                                                    <div class="cmnt">${comment}</div>
                                                </blockquote>

                                                <div>
                                                    <button class="btn mt-3"token interpolation">${numb})">❤️ <span id="count">${like}</span>개</button>
                                                    <button class="btn mt-3"token interpolation">${numb})">삭제</button>
                                                </div>
                                            </div>
                                        </div>
                                        `
                        $('#comment-list').append(temp_html)
                    }
                }
            })

        }

        function save_comment() {
            let name = $('#name').val()
            let comment = $('#comment').val()

            $.ajax({
                type: "POST",
                url: "/comments",
                data: {name_give: name, comment_give: comment},
                success: function (response) {
                    alert(response["msg"])
                    window.location.reload()
                }
            });
        }

        function delete_comment(numb) {
            $.ajax({
                type: "POST",
                url: "/comments/delete",
                data: {numb_give: numb},
                success: function (response) {
                    alert(response["msg"])
                    window.location.reload()
                }
            });
        }

        function like_comment(like) {
            $.ajax({
                type: "POST",
                url: "/comments/like",
                data: {like_give: like},
                success: function (response) {
                    alert(response["msg"])
                    window.location.reload()
                }
            });
        }


    </script>


</head>
<body>

<div class="card text-center bg-01">
    <div class="card-header">
        내일배움캠프 4기
    </div>

    <div class="card-body">
        <h4 class="card-title" style="font-weight: bold;">React A반 10조_같이 친해지조</h4>

        <h5 class="card-title mt-4" style="font-weight: bold;">우리 팀의 특징</h5>
        <p class="card-text">
            1) 조용하고 낯을 많이 가린다.<br/>
            2) 모두 비전공자&입문자이다.<br/>
            3) 전부 다른 지역에 거주 중이다.
        </p>

        <h5 class="card-title" style="font-weight: bold;">우리 팀의 약속</h5>
        <p class="card-text">
            1) 시간 약속 잘 지키기<br/>
            2) 부정적인 말, 나쁜 말 지양하기<br/>
            3) 작업이 막히거나 표정이 어두워지면 응원해주기<br/>
            4) 대답 잘 해주기(리액션이라도 하기!)<br/>
            5) 첫 날 보다 더 친해지기
        </p>
        <h5 class="card-text" style="font-weight: bold; margin-top: 30px; margin-bottom:40px;">실력 있는 개발자 동료가 되어주자!</h5>
    </div>
</div>

<div class="row row-cols-1 row-cols-md-3 g-4">

    <div class="col">
        <a href="/cs">
            <div class="card">
                <div class="card-box">
                    <img src="../static/kcs.jpeg" class="card-img-top" alt="cs_image">
                </div>
                <div class="card-body">
                    <p class="card-title">강창순/INTP</p>
                    <p class="card-text">고먐미 좋아하세요?</p>
                </div>
            </div>
        </a>
    </div>

    <div class="col">
        <a href="/ng">
            <div class="card">
                <div class="card-box">
                    <img src="../static/kng.jpeg" class="card-img-top" alt="...">
                </div>
                <div class="card-body">
                    <p class="card-title">김남규/ENFP</p>
                    <p class="card-text">자유로운 영혼</p>
                </div>
            </div>
        </a>
    </div>

    <div class="col">
        <a href="/hn">
            <div class="card">
                <div class="card-box">
                    <img src="../static/khu.jpeg" class="card-img-top" alt="...">
                </div>
                <div class="card-body">
                    <p class="card-title">김한울/INTP</p>
                    <p class="card-text">잔잔한 외힙러버</p>
                </div>
            </div>
        </a>
    </div>

    <div class="col">
        <a href="/js">
            <div class="card">
                <div class="card-box">
                    <img src="../static/js.JPG" class="card-img-top" alt="...">
                </div>
                <div class="card-body">
                    <p class="card-title">이재성/ENFJ</p>
                    <p class="card-text">열심히하겠습니다.<br> 제발 도와주세요.</p>
                </div>
            </div>
        </a>
    </div>

    <div class="col">
        <a href="/hh">
            <div class="card">
                <div class="card-box">
                    <img src="../static/jhh.jpeg" class="card-img-top" alt="...">
                </div>
                <div class="card-body">
                    <p class="card-title">조희현/ISFP</p>
                    <p class="card-text">흥 많은 I 🎵</p>
                </div>
            </div>
        </a>
    </div>

</div>

</div>

<div class="card2 mb-2">

    <div class="cmnt-wrap" style="background-color: transparent">
        <h3 style="font-weight:bold; color: #ffffff;">응원한마디</h3>

        <div id="comment-box">
            <input class="name form-control" type="text" placeholder="닉네임 입력" id="name"
                   style="width: 180px; margin-top: 30px;">
            <textarea class="form-control" id="comment" rows="3" placeholder="당신의 응원을 입력해주세요."
                      style="resize: none;"></textarea>
            <button type="button" class="btn mt-3" onClick="save_comment()">응원 남기기</button>
        </div>
    </div>

    <div class="mycards" id="comment-list">

    </div>

</div>


</body>
</html>

index 코드다.
부트스트랩을 활용했는데 솔직히 직접 만드는게 더 낫지 않나 싶다...
부트스트랩은 수정하기가 그렇게 용이하지가 않아서 많이 불편했다.
이번 프로젝트하면서 object-fit, hover 코드는 잊지않을듯 하다.
백엔드나 서버쪽은 내가 담당하지 않아서 솔직히 잘모르겠다..
프론트엔드할떄 그렇게 중요한 부분도 아니여서 힘빼지는 않았다.

git, github

개발자라면 무조건 알아야되는 깃, 깃허브...
허브하니까 다른 허브가 생각나는데...ㅎ

풀리퀘스트랑 클론하는건 알겠는데
문제는 merge랑 branch생성 이런 개념들이 헷갈린다.
이거는 많이 접해보고 해봐야 실력이 는다고하는데
주말동안 해보았다.
참고로 튜터님이 좋은 사이트 알려주셨다.
https://learngitbranching.js.org/?locale=ko
게임 형식으로 진행되는데 은근히 어렵다.

소감

간단한 소감...
처음으로 개발자의 협업을 맛 보았다. 그 맛은 생소해서 쓰게 느껴졌지만, 나중에는 달콤한 맛이났다. 서로가 서로의 부족한 부분을 채워주면서 성장하는것이 너무 좋았다.협업한 결과물도 만족스럽지만, 더 만족스러운건 좋은 동료들 얻은것이다.

이게 소감문에 남긴 소감이다...
추가로 더 적자면

업무를 하면서 협업은 중요하다. 개발자뿐만이 아닌 다른 업무에서도
협업은 필수로 존재한다. 혼자일한다고해도 어떻게서든 협업할 날이 온다.
그런데 개발자는 이런 협업을 중요시한다.
모든 사람들이 똑같을 순 없다.
살아온 환경과 주변 환경에 따라 얼마든지 바뀌는게 사람이다.
그래서 같이 일을할때 트러블이 필수로 생긴다.
없다고할수도 있는데 그건 없는게 아니고 숨기는거다.
몇십년을 함께 살아온 가족들도 맞지 않아서 싸우는게 사람이기에...

그래서 느낀게 서로 양보하고 존중하고 잡아주고 의지해주면서
일을 해야된다고 느꼈다.

설령 일이 안된다고해도 동료들을 보면서 긍정적인 기운 얻기 때문이다.

그걸 첫 미니프로젝트를 통해서 느꼈다.

정말 오랜만에 알찬 한주를 보냈다.
대체로 적응이 된거 같으니 운동과 독서를 병행하면서
훈련을 들어야겠다.

ㄹㅇ 고생했으니까 오늘 제육에 소주한잔 먹어야겠따 ㅎ

profile
JaeSung Lee
정말 최선을 다하겠습니다.
이전 포스트

스파르타코딩클럽 내일배움캠프4기 -5-

다음 포스트

스파르타코딩클럽 내일배움캠프4기 -7-

1개의 댓글

comment-user-thumbnail
김태인
2022년 11월 7일

쓴맛이 단맛으로 변했다니 너무 긍정적인 변화네요
크 제육에 소주한잔으로 자축 잘 즐기셨나요? ㅎㅎ
한주간 프로젝트하시느라 정말 너무 너무 고생 많으셨습니다

답글 달기