토스트루키 캠프 4기 [기술교육 2주차] - 개발 시작 1주차
프로젝트 주제
주최자를 위한 모임 서비스 - Patron -
프로젝트 일지
월요일
기획 발표
우리 조장님께서는 무결점 발표를 해주었지만 애꿎은 Dooray가 조장님께 시련을 주셨다. 조장님이 프레젠테이션은 정말 잘했는데…. 진짜 잘했는데 뭐라 설명할 방법이 없다…
이번에는 어떻게 보면 리허설 때 비슷한 현상이 일어났음에도 불구하고 다른 방법으로 해결하러 하지않고 기존의 방법을 고수하면서 나오게 된 막을 수 있는 사고였다. 앞으로는 운에 맡기기 보다는 뭐든지 확실하게 짚고 넘어가는 것이 좋겠다. **운이 안좋다고 생각하지말고 제대로 준비하지 못한것이 맞다!**
변창범 멘토님과 회고
서로 간단하게 덕담 주고받고 어떤점이 아쉬웠는지는 자기자신에 대해서만 얘기를 했다. 대놓고 반 강제적(?)으로 누구를 칭찬하고 칭찬받는다는건 참 어색하면서도 산뜻한 느낌을 주는것 같아 아주 신선했다.
이후 멘토님과 프로젝트 진행상황에 대해 이야기 하고 어떤식의 전략을 취하면 좋을지를 이야기하며 마무리했다.
회의
이번 회의에서는 앞으로 개발을 어떻게 해나가면 좋을지 대략적인 계획을 세웠다. 각자가 간단하게 어떤 기능들이 필요한지 스토리카드의 내용들을 살펴보며 모두가 같은 페이지에 있는지 확인하는 회의였다. 얘기가 길어지는 바람에 DB Schema는 내일 짜기로 했다.
회의를 할 때마다 점점 피부로 와닿는 것은 커버해야할 양이 정말 많다는 것이다. 처음 생각했을때도 조금은 많다고 생각했지만 얘기를 나누면 나눌수록 점점 할게 많아지는 현실이 약간은 막막하게 만드는 것 같다. 하지만 언제나 그래왔듯이 시작하기 전이 가장 막막한법! 막상 부딫혀서 해보면 그리 많지는 않을 것이라 (바래) 본다.
화요일
DB Schema 회의
테이블도 상당히 복잡해 보인다… 하지만 다행히(?) 11개 테이블로 막은 것 같다. 그래도 조장님이 잘 이끌어줘서 생각보다 막힘없이 쭈욱 진행됬다. 디비 스키마를 짜고나니 마음이 한결 편안해지는 것 같다. 아주 좋다.
수요일
오늘 배운거
Branch 하고나서의 Setting
- SourceTree로 프로젝트를 clone 한다
- Spring STS의 Workspace에서 프로젝트 Import를 한다
- 새로운 workspace를 열었다면 UTF-8 설정을 까먹지 않고 해준다
- Project Facet에서 Tomcat서버를 추가해준다.
- Maven Build를 위해서 Run As …. -> Maven 선택 후
- clean build (test) install 커맨드를 넣고 Run!
- 프로젝트 개발 시작하면 되겠다!
오늘 질문
JSP에서 glyphicon을 썻는데
우선 코드를 봅시다.
<form class="navbar-form navbar-right">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search">
<div class="input-group-btn">
<button class="btn btn-default" type="submit">
<i class="glyphicon glyphicon-search"></i>
</button>
</div>
</div>
</form>
분명히 같은코드인데 html 페이지를 만들어서 Chrome에 띄우면
[GOOD] 
[BAD] 이렇게나 잘 나오는데 왜 STS에서 Tomcat서버를 통해 JSP를 띄우면
이렇게 사이즈가 틀어져서 나오는지 모르겠다.
인터넷에 찾아보니 form이 font-size를 interit 받아서 그런다고 하는데 실제로 glyphicon-search의 font-size를 20px로 늘리니 사이즈가 딱 맞긴 했다. 그런데내가 하고 싶은 것은 input창을 줄여서 glyphicon에 맞추는건데 form, input, div등의 font-size를 모두 바꾸어 보았는데도 맞출수가 없었다.
도대체 어떻게 바꾸는 거죠 ??
답은 HTML5로 설정하지 않아서 였다…. <!DOCTYPE HTML>로 무조건 시작해주세요!
목요일
멘토님과 회식
회식은 언제나 즐겁다. 팀원들과 멘토님과 섞여서 이런저런 얘기를 나누는데 주제도 참 폭넓게 여러 이야기를 했다. 사실 개발얘기만 할까봐 약간은 걱정 했는데 그건 기우였던걸로… 역시나 노는건 즐겁다 ! 일도 노는것처럼 즐겁게!
오늘 배운거
CSS 정리를 잘 못하겠으면…
CSS에 들어가는 .XXXX {} 를 함수라는 개념만 가지고 시작한다. 그리고 html태그에 “style=’…'”식으로 필요한 모든 조건들을 넣으며 UI를 최적화 한 뒤 CSS에 각 항목별로 .xxxx{} 함수를 만든 후 반복되는 것은 함수로 바꾸어 처리한다. 이상!
HTML CSS 교육
semantics + function
#content {
font-size: 14px;
}
.content-filler {
background-color: #123
color: #123
}
.content-filler > a {
<!-- 여기에 들어가는 것들은 모두 content-filler class 아래에 있는 <a>에만 적용 -->
}
시맨틱은 #표시로, 펑션은 .표시로 알 수 있다. 각 시멘틱/펑션 이름 이루 > a 이런식으로 >표시를 해준다면 주어진 시멘틱/펑션 바로아래에 해당하는 a 또는 표시된 항목들에 적용된다.
media Query
@media screen and (max-width: 960px){
.a {
width: 100%;
}
.text-box {
margin: 0 auto;
}
}
이런식으로 미디어 쿼리를 주게되면 조건부에 맞추어 UI를 조정할 수 있다. responsive 항목들이 창의 크기가 달리짐에따라 깨지기도 하는데 미디어 쿼리로 조정한다면 UI가 터지는것을 막을 수 있다.
오늘 든 생각
나의 메인페이지
상당 부분을 다시 해야겠다. 강의를 듣고나니 어떻게 구현해야할지 조금은 감이 잡히는것 같다. 우선 부트스트랩을 써서 처리한 부분들을 하나씩 다시 만들어봐야겠다. 성공적으로 css를 적용하는 것이 이번주까지의 목표!
TUI sample Project
팀원들의 이해를 돕기위해 TUI 샘플 프로젝트를 만들어야 한다. html/css/javaScript 모두 처음 접해보는 나로써는 모든게 카오스에 가깝지만 한참을 보다보니 뭔가 이해가 되기 시작한다. 쉽게 잘 만든 것 같은데 처음이라 그런지 어렵게 느껴지나보다. 천천히 더욱 자세히 살펴봐야겠다. 우선 차트는 성공했으니 나머지는 금방…(?)
Good Luck!
금요일
오늘 할일
- TUI editor + grid 샘플 만들고
- 메인페이지 수정하고
- 점수 시스템 어떤식으로 할지 조사/결정하고
다 못하면 주말에 하는걸로 ~
점심 다트 내기
오늘 한분은 힘들어서 밥대신 잠을 청했고 그외 3명만 밥먹으러 갔다가 다트내기를 하기로 했다. 마침 옆에 있던 다른팀원 한분을 껴서 하기 시작했는데 1번 다트기계가 고장나있는 관계로 우리끼리 새로운 룰을 만들어서 적용해보기로 했다. 1인당 3개의 다트를 던지고 순서대로 진행하되 먼저 Bulls Eye를 맞추는 사람이 열외되는 방식으로, 마지막 남은 한사람이 편의점에서 음료수 하나씩 사주는걸로 했다. 시작은 활력넘치고 좋았으나… 아무도 bulls eye를 맞추지를 못한다… 한 20분 던지다가 포기하고 3개 던져서 총합점수가 가장 높은 사람이 사는걸로 바꿔서 마무리를 지었는데, 하필 걸려도 다른팀원분이 걸려가지고 왠지모를 죄책감이 드는 내기였다… 다음 설욕전을 기약하며 마무리 !
오늘 배운 거
dependency 체크/관리를 꼼꼼히 하자
tutorial이나 가이드라인 또는 bower와 같은 installer 등은 너무 믿지 말자. 편하게 설치해주고 다운받아 주기는 하지만 뭔가 하나씩 잘못되어 있을 수 있다. 가령 이름이 바뀌었다던지…. 여튼 잘 체크하자 !
JSP에서 다른 JSP 파일로 Parameter 넣기 + 받아오기
자 우선 넣는 방법부터!
<jsp:include page="instance.jsp">
<jsp:param name="myVar" value="${instanceVar}"/>
</jsp:include>
이렇게 넘겨준걸 instance.jsp에서 받아오려면 ~
<c:out value="${param.myVar}"/>
OR!
아래와 같이 JSTL tag c:set과 request scope를 사용해서 넘겨줘도 된답니다.
<c:set var="instance" value="${your.value}" scope="request"/>
<jsp:include page="instance.jsp"/>