오늘의 공부

  • 캠프의 시작

  • 본 캠프 시작으로 개강 OT로 캠프의 로드맵을 훑어 보았다.

  • 팀을 여러 구간별로 새로 진행한다는 사실을 알게 되었다.

  • 여러 번 프로젝트를 마치면서 각자의 실력에 맞는 학습을 진행한다는 것도 좋아 보였다.

1. 프로젝트 회의

  • 첫 프로젝트 ‘멤버 소개 페이지 만들기’ 를 위해 새로운 팀이 편성되었다.

  • 만난지 몇 분도 채 되지 않아 서로 서먹하였으나, 프로젝트를 진행하며 서로 말을 조금씩 트게 되었다.

  • 일단 페이지 구성을 위한 와이어 프레임을 각자 만들어보고 비교해가며 장점들을 종합해서 만들어 보기로 하였다.

  • 아래는 그렇게 1차 회의를 통해 정해진 초안이다!

와이어프레임

  • 구역은 각자의 역할(구현 구역)을 정해주기 위해 나눠 놓았다.

  • 이후 튜터님의 피드백을 통해 수정/삭제 기능은 ‘관리자 모드’를 따로 구현하여 넣는 걸로 결정하였다.

2. 프로젝트 작업

  • 역할들 중 방명록 작성란을 구현하는 것을 맡게 되었고, 아직 협업을 위한 GIT 구성을 하지 않았기에 오늘은 시간이 되는만큼 구현을 해보기로 하였다.

  • 아래는 임시로 구현해본 방명록 사이트 사진이다.

방명록

  • TodoList 사이트 만들기 때 사용한 코드들을 재활용하였다.

  • 추가로 닉네임을 랜덤색으로 만들기 위한 코드를 검색하여 사용하였다.

<script>
h3.style.color = "#" + parseInt(Math.random() * 0xffffff).toString(16);
// 랜덤을 통해 0~1 의 랜덤 실수 값을 0x(16진수) ffffff(6자리) 를 뽑아 16진수로 표현 => 컬러코드
</script>
  • 버튼 및 인풋 관련에 반응 선택자 / 상태 선택자를 알게 되었고, 이를 이용하여 방명록에 약간의 생기를 불어넣어주었다.
// 버튼 위로 마우스를 올렸을 때 
button:hover 
// 버튼을 클릭 하였을 때
button:active 
// input 박스를 선택했을 때 
input:focus 
// 방문한 사이트
site:visited 
// 입력 가능한 input 선택 
input:enabled 
// 입력 불가능한 input 선택
input:disable

학습 과정 중 특이사항 / 삽질

  • 웹개발 종합반 강의를 복습해주시며 ‘Prettier’라는 자동정렬기능을 소개해 주셔서 바로 설치 및 설정을 마쳤다.

  • 같이 와이어 프레임을 어떻게 만들고 공유할지를 고민 했을 때, 팀원분들 중 한 분이 구글 프레젠테이션을 추천해주셨다!

  • 서로 맡은 구역이 달라 디자인을 어떻게 할까에 대해서 ‘만든 사람이 마음껏 화려하게’해보고, 나중에 합치며 첨삭을 하기로 결정 하였다.