이노베이션 1주차 2 - 프론트엔드?

나를 포함한 팀원 모두가 백엔드 부분을 공부하고 있어서 프론트엔드를 누가 맡을지 결정하기 쉽지 않았다. 토의 끝에 내가 프론트엔드 메인 페이지 부분을 맡기로 하였다.
 
그렇게 자세히 프론트엔드부분을 공부하지는 않았기에 모르는 것이 많았고 이를 새로 공부하면서 프로젝트를 진행시키고자 했다.
 
htm

tag : HTML 요소(element)라고도 부르며, HTML 문서를 구성하는 기본 단위 id : 한 페이지에 단 한번의 정의로 고유한 하나의 태그만 사용. 그리고 하나의 태그에 id 속성은 한 개. 동일한 것이 없는 고유한 태그기 때문에 <고유 식별자>라고도 표현. 로고, 상단메뉴, 하단정보 같은 스타일을 정의할 때 id를 사용 class: 요소에 스타일 시트를 적용하기 위한 구분자

---

jQuery

오픈 소스 기반의 자바스크립트 라이브러리, HTML의 요소들을 쉽게 조작하고 편리하게 사용 자주 쓰는 jQuery input 박스 값 가져오기 $('#해당 id 값').val(); input 박스 값 바꾸기(또는 해당 값으로 입력하기) $('#해당 id 값').val('바꿀값); div 보이기 / 숨기기 $('#해당 id 값').show(); $('해당 id 값').hide(); button 값 바꾸기 $('#해당 id 값').text('바꿀값'); $('#btn-posting-box').text('포스팅 박스 닫기');

---

jSon

일반적으로 서버에서 클라이언트로 데이터를 보낼 때 사용하는 양식.  클라이언트가 사용하는 언어에 관계 없이 통일된 데이터를 주고받을 수 있도록, 일정한 패턴을 지닌 문자열을 생성하고 이를 내보내면 클라이언트는 그를 해석해 데이터를 자기만의 방식으로 온전히 저장, 표시

 
위의 기본적인 세 가지를 알고 본격적으로 메인 페이지를 만들기 시작했다.
처음에는 어떻게 틀을 잡아야할지 고민이 되었지만 첫 프로젝트인만큼 융통성을 발휘하여 인터넷에 무료로 풀린 부트스트랩을 차용하여 필요한 부분은 남기고 나머지는 없애고 추가로 만들고 싶은 부분은 만드는 방식으로 시작하였다.
 

 <section class="Comment">
    <div class="mybox">
      <div class="mybucket">
        <input id="guestbook" class="form-control" type="text" placeholder="한마디 씩 남겨주세요" />
        <button class="insertButton" onclick="save_guestbook()" type="button">ENTER!</button>
      </div>
      <div class="information">
        <input id="name" class="form-control" type="text" placeholder="이름" />
        <input id="pw" class="form-control" type="password" placeholder="비밀번호" />
      </div>
    </div>
    <div class="mybox" id="comment-list">
      <div id="${own_uuid}">
        <p class="small-name">이름</p>
        <p class="small-text">방명록내용</p>
        <div id="edit-guestbook-${own_uuid}" style="display: none">
          <input id="edit-guestbook-text-${own_uuid}" type="text" />
          <input id="edit-guestbook-password-${own_uuid}" type="password" placeholder="비밀번호" />
          <button onclick="modify_guestbook('${own_uuid}')" type="button" class="btn btn-primary">저장</button>
          <button onclick="cancel_edit('${own_uuid}')" type="button" class="btn btn-primary">취소</button>
        </div>
        <button onclick="edit_guestbook('${own_uuid}', '${guestbook}')" type="button"
          class="btn btn-primary">수정</button>
        <button onclick="check_delete_guestbook('${own_uuid}')" type="button" class="btn btn-primary">삭제</button>
        <div id="delete-guestbook-${own_uuid}" style="display: none">
          <input id="delete-guestbook-password-${own_uuid}" type="password" placeholder="비밀번호" />
          <button onclick="delete_guestbook('${own_uuid}')" type="button" class="btn btn-primary">확인</button>
          <button onclick="cancel_delete('${own_uuid}')" type="button" class="btn btn-primary">취소</button>
        </div>
      </div>
    </div>
  </section>

이런 식으로 다른 부분들은 차용하고 방명록을 담을 수 있는 부분만 팀원들과 협의해가며 만들었다.
암호화와 관련된 부분은 이 기능을 담당한 팀원이 따로 추가하여 완성할 수 있었다.