0주차 토요일, OT주간 이야기 - 풀스텍 미니

0주차 토요일, OT주간 이야기 - 풀스텍 미니(밤샘, 22시간 코딩시간)

어제도.. 새벽에 잤다. 겁나 피곤한데, 22시간 나아가 보자...

실제로 가보지도 못한, 콜로세움을 여기서 가보네 ㅋㅋ

01 풀스텍미니, 밤샘코딩 이야기

그래도 한 번 해봤다고, 오늘의 git 버전 관리는 원활하게 작동 중이다.

git rebase main

작업 중에 버전이 변경된 main 브랜치에 rebase를 해준 결과, 나의 작업 파일은 공중에 뜬 상대로 아직 푸시하지 못한 상태이다. 그래도 1시 이전에는 마무리를 할 수 있을 것 같다. 아침 9시에 시작해서 정말 15시간째 컴퓨터 앞에서 코딩을 하고 있다니 놀라운 일이다. 작년에 스파르톤에 참여했을 때는 강의만 들었는데, 오늘은 코딩만 했다. 이제 자랑의 시작이다. 새벽에 막 배운 내용부터 시작해서, 모든 내용을 총괄해서 적용한 나의 욕망에 대해서 기록해 보겠다.

02 나의 욕망을 위한 공부의 응집력!

욕망의 스스륵 사이드바 01

아직은 메인 페이지를 디자인 하지 않았기에 허전한 첫페이지이다. 그러나 이 화면을 위해서 15시간을 투자했다. 왜냐? 아래에서 차근히 설명해 보겠다. 먼저 로그인 페이지로 이동해보자. 로그인을 클릭해보자.

그러면 화면 밖에서 화면 안으로 스스릉 사이드바가 0.35s에 걸쳐서 쏙 들어온다. 그리고 로그인이 성공되면 아래와 같이 작동한다.

팝업으로 로그인이 성공했다는 것을 알려주고, 사이드바는 다시 스르릉 들어간다. 이번에는 회원가입을 해보자. 회원가입은 스스릉 사이드바에서 실행할 수 있다. 회원가입을 클릭해보자.

HTML과 CSS로 디자인한 팝업창이 띄워진다. 그리고 회원가입이 완료되면, 팝업으로 회원가입이 되었다는 것을 알려준다. 그러나! 스스릉 사이드바는 들어가지 않는데, 가입이 완료하면 로그인을 해야 되기 때문에, 로그인을 바로 하도록 배려하였고, 로그인이 승인되면, 사이드바는 스르릉 사라진다.

욕망의 스스륵 사이드바 02

사이드바에 대한 욕심은 여기서 끝나지 않았다. 우리들만의 이스터에그를 만들어보자. 하단을 보면 우리팀의 조명이 있다.

저기에 특별한 기능을 추가하였다. 클릭을 하면 어떻게 될까?

웹 페이지를 제작한 개발자들에 대한 소개가 등장하도록 세팅하였다. 여기까지가 15시간의 결과물이다. 아래에서는 위의 페이지를 작성한 코드들에 대해서 정리해보고자 한다.

03 코드이야기

3개월의 욕망과 공부가 여기에 전부 투영되었다. 심지어 스스릉바는 어제 새벽 1-3시에 공부한 내용이었다. 공부했으면? 바로 적용해야지 잊어버리지 않을 것이다. JS로 구현하는 것은 너무나 어려운 일인 것 같은데, 해당 내용은 HTML이 40%, CSS가 50%, JS가 10% 정도의 문법으로 작성하였다. 즉 위의 구동을 대부분 CSS로 제어했다.

input:checked + 인접요소선택자

HTML부분

<header>
  <div id="header_logo"><img src="" alt="">공감창고</div>
  <nav>
    <ul id="navibar">
      <li><a href="#">음악창구</a></li>
      <li><a href="#" id="mideoArea">영상창구</a></li>
      <div id="login_sidebar_box">
        <input type="checkbox" id="login_sidebar">
        <label for="login_sidebar" class="login_sidebarbtn"><span>로그인</span></label>
        <div id="sidebar" class="sidebar">
             </div>
    </ul>
  </nav>
</header>

놀랍게도 이게 전부이다.

CSS부분

/* sidebarPart, start */
      input[id="login_sidebar"] {display: none;}
      input[id="login_sidebar"]+label {position: relative;cursor: pointer;}
      input[id="login_sidebar"]+label span {transition: all .35s;}
      input[id="login_sidebar"]:checked +label {z-index: 2;}
      /* input[id="login_sidebar"]:checked +label span {color: black;} */
      div[class="sidebar"] {width: 300px;height: 100%;background: #222;position: fixed;top: 0;right:-300px;z-index: 1;transition: all .35s; display: flex; flex-direction: column;align-items: center; padding-top: 50px;}
      input[id="login_sidebar"]:checked + label + div {right: 0;}
      span[id="sidebar_logotxt"] {
        font-family: 'PyeongChangPeace-Bold';
        color: brown;
      }

/* sidebarPart, end */    

핵심은 input:checked 에 있다. checked:false 일 때와, checked:true 일 때를 구분하였고, 각 내용의 전환을 0.35s를 주어 자연스럽게 변화하도록 설정하였다.

HTML팝업창

노마드코더의 강의에서 HTML팝업창의 존재를 알았다. 물론 니코쌤은 가르쳐주지 않았다. 방법은 찾아보는 것밖에 없지 않은가. 그래서 열심히 구글링을 했고, 팝업의 위치를 사용자의 화면의 정가운데 위치하도록 설정하였다. 코드를 살펴보자.

HTML부분(팝업창을 부를 HTML - JS)

function login_singup() {
  let top = (screen.height-300)/2;
      let left = (screen.width-500)/2;
      window.open('/account/signup2', 'open', 'width=500, height=300, top ='+top+', left='+left);
}

onclick으로 함수를 호출하고, window.open이 되도록 하였다. 그렇게 발생된 이벤트에 따라서 동작한 팝업창이 아래의 내용이다.

HTML팝업창의 배경은 미리캠버스에서 사이즈(500x300)에 맞춰서 디자인을 했다. 그리고 빈 공간에 input태그를 넣어서 작성하였다. 열려진 팝업창에서 내용을 더 기록했다. 해당 기능이 완료되었다면, 팝업창은 어떻게 될까? 사라져야 하지 않을까?

  if(pw1 === pw2) {
    $.ajax({
      type:"POST",
      url:"/account/signup2check",
      data:{'id_give':id,'pw_give':pw1,'nick_give':nick},
      success:function(response) {
        alert(response['msg'])
        window.close()
      }
    })

window.close()를 통해서 작동되도록 설정해서 기능을 구현했다. 별 것 없는 것 같지만, 나로써는 정말 3개월 동안 공부한 모든 것을 녹여놓았다.

04 정리하며

어느덧 12시 43분이 지나가고 있다. 발표까지 5시간을 더 달려야 한다. 그러나 끝까지 잘 마무리하고, 발전한 나를 보면서 으쓱함을 누리면서 잠에 들어야겠다.