[WEB] Joguman Studio Clone Project (Shopping Mall)

학기중에 간단하게 html, css를 이용해서 프로젝트를 해본뒤로 피드백을 적용하고자 방학을 기점으로 클론 프로젝트를 진행하였다. 동기들과 함께 쇼핑몰 페이지를 디자인과 기능을 최대한 비슷하게 구현해보고자 하였다. 이번 방학에는 프론트엔드를 담당했고, 해당 프로젝트가 마무리되면 ios로 넘어가서 평소 하고싶었던 앱 개발을 진행해보고자 한다! 이번 프로젝트는 협업을 배우고, 프로젝트 진행 과정과 공부 방법을 배우는것을 목표로했다. 그래서 백엔드보다는 프론트쪽으로 처음 접하기 쉽게 접근했다!

 

• 클론하고자 했던 사이트

https://www.jogumanstudio.com/

조구만 스튜디오 ®

 

아직까지 프로젝트는 진행중이며, 마무리단계에 있다.

기본적인 페이지는 이미 다 만들어놓은 상태이고, 백엔드도 기능 구현이 거의 다 완성된 상태로 프론트랑 연결만 하면 된다. 중간점검차 아카이빙을 하고자 한다.

 

• 공부기간

처음 공부기간은 한달로 지정하여 각자 담당한 파트를 공부했다. 나는 fastcampus강의를 이용하여 기초 공부를 진행했고, https://fastcampus.co.kr/dev_online_webmotion

최성일의 코딩 초급자를 위한 웹 모션 디자인 올인원 패키지 Online. | 패스트캠퍼스

프로젝트를 진행하며 추가적으로 제이쿼리도 같이 공부를 했다! 제이쿼리는 유튜브를 통해 공부할수있었다.

https://www.youtube.com/watch?v=uwn3Y4xzOcw&list=PL-qMANrofLyu4HcK14ntl-o7d-eHxo7-U 

https://poiemaweb.com/

웹 프로그래밍 튜토리얼 | PoiemaWeb

 

 

또한, 이번 프로젝트를 진행하며 git 사용법까지 배울수있었다. git 사용법은 추가적으로 강의를 듣는다기보다는 구글링을 통해 공부하였다. 

https://github.com/Eunice991217

Eunice991217 - Overview

git에 처음으로 프로젝트가 올라가니 감회가 새로웠던것같다,,,

 

• 참고 url (추가적인 참고 url은 notion에 아카이빙 해두었다...!)

https://learngitbranching.js.org/?locale=ko

Learn Git Branching

https://mylko72.gitbooks.io/git/content/branch/checkout.html

브랜치 생성과 삭제, 체크아웃 · Git, 분산버전 관리시스템

https://for-it-study.tistory.com/53

[GitHub,Git] Git branch 생성과 변경을 GitHub에 반영하는 방법

https://wotres.tistory.com/entry/Github-에러-해결법-Authentication-failed-for-use-a-personal-access-token-instead

Github 에러 해결법: Authentication failed for ~ use a personal access token instead

https://www.inbogi.com/bok/2020/04/1/

[GIT] GIT branch strategy 명명규칙 및 전략 - INBOGI Magazine.

 

• 프론트, 백엔드 공유

프론트와 백엔드는 각자 두명씩 나누어져서 진행했고, 자료공유는 dicord와 notion을 통해 기록하였다.

진행상황은 만날때마다 각자 담당했던 부분에 대해 정리했고, 그날 공부했던것을 기록해두었다.

ex) https://www.notion.so/22-07-20-da44f250806e4409a969133c86f2ecf0

 

주간 목표를 지정해두어 프론트와 백엔드 둘다 날짜별로 진행상황을 기간에 따라 최대한 완료할수있도록 하였다. (필요한 공부도 추가적으로 했다!)

 

추가) 디스코드에서 추가적인 자료공유를 하고 노션을 통해서는 진행 상황을 기록했다.

 

• ERD Cloud

처음 시작할 때는, 모두가 DB를 고민해보았고, 백엔드 쪽에서 ERD 클라우드를 통해 DB 관리를 진행해주었다!

https://www.erdcloud.com/d/ryPyDHxPML3v4F3tL

jogumanClone

 

• 페이지 구상

Front 계층구조.pdf

0.62MB

관리자 페이지 계층구조.pdf

0.62MB

기본적인 페이지 디자인과 구조는 사이트와 동일하게 했고, 관리자 페이지는 추가적으로 만들었다 (디자인은 마이페이지와 비슷하게 구상했던것같다.)

 

저번 프로젝트 피드백 받은대로 css, js 파일을 다 분리해서 진행했고, 정말 많은 페이지를 만들었다,,,,, (다 캡쳐하진못했고, git에 아카이빙 해두었다,,,)

자바스크립트도 제이쿼리도 다양하게 사용해봤다,,,아쉬운점은 리액트까지 못해봤다는거,,,?

리액트도 추가적으로 공부할수있으면 해야겠다,,,

//basket checkbox 선택되면 해당 상품 개수 가져오기
$(function() {
    var check_all = $("input[name=check_all]");
    var check = $('input[name=check]'); //box 객체 가져오기
    var productCnt = $('#productCnt').text();
    var resultProductCnt = parseInt(productCnt);

    check_all.click(function () {
        if ($(this).is(":checked")) {
            $('#productCnt').empty();
            $('#productCnt').append(check.length);
            resultProductCnt=check.length;
        } else {
            resultProductCnt=parseInt(productCnt);
            $('#productCnt').empty();
            $('#productCnt').append(resultProductCnt);
        }
    })

    check.click(function() {
        if ($(this).is(":checked")) {
            resultProductCnt++;
            $('#productCnt').empty();
        } else {
            resultProductCnt--;
            $('#productCnt').empty();
        }
        if(resultProductCnt<0){
            resultProductCnt=parseInt(productCnt);
        }
        $('#productCnt').append(resultProductCnt);
    })
})

//위시리스트
function heartClickOn(e) {
    const normal=document.querySelector("#normalHeart");
    const solid=document.querySelector('#solidHeart');
    const resultCnt=document.querySelector('#heartCnt');
    let cntNumber=resultCnt.innerText;
    solid.style.display="none";

    normal.addEventListener('click',function() {
        normal.style.display="none";
        solid.style.display="inline-block";
        cntNumber=parseInt(cntNumber)+1;
        resultCnt.innerText=cntNumber;
    })

    solid.addEventListener('click',function() {
        normal.style.display="inline-block";
        solid.style.display="none";
        cntNumber=parseInt(cntNumber);
        resultCnt.innerText=cntNumber;
    })
}

그래도 저번 프로젝트와는 다르게 table로 구상하기보다는 div태그를 활용하여 flex 레이아웃에 익숙해질수있었다. (예시 페이지 - store)

• flex 레이아웃 정리

https://org9899.tistory.com/29

[WEB] Flex 레이아웃

<!doctype html>
<html lang="en"
      xmlns:th="http://www.thymeleaf.org/"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="~{fragments/layout}">

<head>
    <title>store</title>
    <style>
        #mainStore{
            border-bottom:2px solid orange;
        }
    </style>
</head>
<body layout:fragment="content">
<container>
    <div data-include-path="header.html"></div>
    <article>
        <div class="wrap">
            <div class="articleStoreNav">
                <div class="item1">
                <ul>
                    <li style="border-bottom: 2px solid black; color:black">All</li>
                    <li>Stationery</li>
                    <li>Digital</li>
                    <li>Living</li>
                    <li>Acc</li>
                    <li>Collab</li>
                </ul>
                </div>
                <div class="item2">
                <form action="#" method="#">
                    <label for="item2Id" class="form-label"></label>
                    <input type="search" placeholder="Search" class="searchBorder" id="item2Id">
                    <button type="submit" class="item2Btn"><span class="bi bi-search"></span></button>
                </form>
                </div>
            </div>
            <div class="sorting-product">
                <select class="select-product">
                    <option selected id="select-text">등록순</option>
                    <option value="1">등록순</option>
                    <option value="2">인기순</option>
                    <option value="3">낮은가격순</option>
                    <option value="4">이름순</option>
                </select>
            </div>
            <div class="storeDivWrap">
                <div class="row row-cols-1 row-cols-md-4 g-4 storeWrap">
                    <div class="col storeCol">
                        <div class="card storeCard">
                            <img src="https://cdn.imweb.me/thumbnail/20220718/6fffdcfb4d48a.jpg"
                                 class="card-img-top card-img-top-store" alt="...">
                            <div class="store-card-body">
                                <div class="card-title store-card-title">
                                    Branchio Drink Holder 브라키오 튜브 컵홀더
                                </div>
                                <div class="card-price">
                                    $10,000
                                </div>
                                <div class="card-update">
                                    <div class="updateBox-new">NEW</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col storeCol">
                        <div class="card storeCard">
                            <img src="https://cdn.imweb.me/thumbnail/20220707/9b3f2e400b2f3.jpg"
                                 class="card-img-top card-img-top-store" alt="...">
                            <div class="store-card-body">
                                <div class="card-title store-card-title">
                                    Branchio Drink Holder 브라키오 튜브 컵홀더
                                </div>
                                <div class="card-price">
                                    $10,000
                                </div>
                                <div class="card-update">
                                    <div class="updateBox-new">NEW</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col storeCol">
                        <div class="card storeCard">
                            <img src="https://cdn.imweb.me/thumbnail/20220616/a87f4c9ae5d79.jpg"
                                 class="card-img-top card-img-top-store" alt="...">
                            <div class="store-card-body">
                                <div class="card-title store-card-title">
                                    Branchio Drink Holder 브라키오 튜브 컵홀더
                                </div>
                                <div class="card-price">
                                    $10,000
                                </div>
                                <div class="card-update">
                                    <div class="updateBox-new">NEW</div>
                                    <div class="updateBox-soldOut">SOLDOUT</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col storeCol">
                        <div class="card storeCard">
                            <img src="https://cdn.imweb.me/thumbnail/20220708/c0974aa4313f8.jpg"
                                 class="card-img-top card-img-top-store" alt="...">
                            <div class="store-card-body">
                                <div class="card-title store-card-title">
                                    Branchio Drink Holder 브라키오 튜브 컵홀더
                                </div>
                                <div class="card-price">
                                    $10,000
                                </div>
                                <div class="card-update">
                                    <div class="updateBox-new">NEW</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col storeCol">
                        <div class="card storeCard">
                            <img src="https://cdn.imweb.me/thumbnail/20220615/3f30d34a48463.jpg"
                                 class="card-img-top card-img-top-store" alt="...">
                            <div class="store-card-body">
                                <div class="card-title store-card-title">
                                    Branchio Drink Holder 브라키오 튜브 컵홀더
                                </div>
                                <div class="card-price">
                                    $10,000
                                </div>
                                <div class="card-update">
                                    <div class="updateBox-new">NEW</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        </div>
    </article>

</container>
<!--자바스크립트 : 속도를 위해 아래 첨부-->
</body>
</html>

 

• 중간 피드백

아직까지 프로젝트가 마무리된게 아니라서 지금까지의 셀프 피드백을 해보고자 한다.  처음에 계획하고 시작했던것보다 이번 프로젝트를 진행하면서 공부방법과 공부량이 부족하다는것을 많이 깨달았다,,,

사실 보려고했던 강의는 4개 전체였지만,,,최성일 강의만 수강했었다,,,개강이 얼마안남은 지금 상태에서 다 보기란 무리고 개강하고 천천히 1~2개씩 아카이빙 하면서 볼 생각이다. 한번에 완벽하게보다는 천천히 꾸준히가 더 좋은 방법이라는 것을 알았다,,,매일해야돼 매일!!!

프로젝트를 진행하면서 강의는 크게 도움이 되지않는다는것 또한 알수있었는데, 강의를 보고 내껄로 만드는 과정을 사실 구글링이다. 강의는 정말 기초적인 지식만 전달해줄뿐,,,,

강의를 보고 강의에서 나온 내용을 적용하기보다는 구글링이나 유튜브를 통해 배운것이 더 많긴했다.

이래서 개발자한테는 구글링이 교수님이다,,,

그래도 나름 이번 프로젝트를 진행하면서 방학을 알차게 보낼수있었고, git 사용법, 프로젝트 진행과정(프로젝트를 시작할땐, DB부터 설계부터 해야한다 등) 등 다양하게 배울수있던 부분이 많았다. 피드백 받은대로 적용하는 과정이 되기도했었고, 아직 많이 부족하지만 프로젝트를 마무리 지어가는 과정을 통해 더 발전하고자 한다.

프로젝트가 마무리되면 추가적으로 아카이빙 해볼예정이다!!