초이의 끄적끄적

커뷰 

2018 SW챌린지 공모전 은상 수상작

[About]

커뷰는 다양한 목적으로 카페를 찾는 사람들을 위한 맞춤형 카페 / 음료 랭킹 서비스이다.

음식점, 숙박시설 등에 대한 정보가 담긴 어플은 많지만, 상대적으로 카페와 관련된 어플은 찾기 힘들었다. 그래서 사용자 맞춤 검색을 통해 소비자의 합리적인 음료 / 카페 생활을 돕는 앱을 만들고자 하였다.

주요 기능은

이를 구현하기 위해서 개인 맞춤형 서비스 제공을 위한 필터링 검색 기능을 구현하였고,

음료 / 카페 랭킹을 구현하기 위해서 별점과 리뷰 갯수, 최신성 등을 고려한 랭킹 알고리즘을 구현하였다.

많은 데이터 수집을 위하여 구글 API를 이용하여 기존에 존재하는 카페 리뷰를 받아왔다.

  창업을 목표로 하는 공모전이였기 때문에 어떻게 해야 사용자에게 보기 편한 UI일까, 사용자가 원하는 서비스는 무엇일까, 어떻게 해야 수익을 창출할 수 있을까 등 다양한 고민을 해볼 수 있는 기회가 되었다.

  직접 발로 뛰며 카페와 음료 정보를 수집해 보고, 실제 카페 이용자들의 후기 수집을 위해 카페에 양해를 구하고 QR코드를 비치하여 설문조사를 진행해 보기도 했으며, 우리의 주 타겟층인 20-30대의 의견을 듣기 위해 에브리타임과 대나무숲에 설문조사를 부탁하기도 했다. 

  이러한 과정 속에서 창업은 기술력 뿐만 아니라 UI, 시장성, 마케팅 등 이 필요하다는 것을 느끼게 되었다.  

[ Develop Environment ]

Android Studio

Apache Tomcat

JSP(Java Server Page)

Mysql

[ API ]

• Google Maps SDK for Android API : Google지도 데이터를 기반으로 지도를 보여주는 서비스로 카페의 위치를 띄우는데 사용하였다.
• Google Places API : 장소에 대한 정보를 반환하는 서비스로 카페의 위치, 전화번호, 시간 등 카페의 세부정보를 수집하는데 사용하였다.

[ 시연영상 ]

지능형 SoC 로봇워 HURO-Competiton

지능형 SOC 로봇워 2017 HURO-Competiton 은상 수상

기간 : 2017.3.1 ~ 2017.9.16

[About]

SoC 지능형 휴머노이드 로봇의 미션수행 경기로, 영상인식과 센서인식을 이용하여 경기장에 설치된 장애물을 회피 또는 해당 미션을 수행하여 높은 점수를 획득하는 경기입니다. 카메라로 받은 영상을 9분할로 나누고 이진화하여 장애물의 위치를 인식하고 각 상황에 맞는 모션을 수행할 수 있도록 설계하였습니다.

※ SoC(System On Chip) : 단일 칩 시스템(SoC)는 하나의 집적회로에 직접된 컴퓨터나 전자 시스템 부품을 말함.

담당역할 : C++ 영상처리 개발

기여도 : 25% / 5명

[ 개발환경 ]

Software : Window, Cygwin (gcc operation environment), Putty,ssh

Hardware : PC, Soc Brain Board(Linux), Camera

[ 특이사항 ]

보드의 사양이 좋지 않아 라이브러리를 사용할 수 없었습니다.

[ 성과 ]

• 기존 RGB색상 모델에서 HSV 색상 모델로 변경하여 색인식 문제를 개선하였습니다.
• 트러블슈팅을 통해 원인 모를 모션 중지 문제를 해결하였습니다.

[ 경기 영상 ]

자바 스레드를 사용한 게임 만들어 보기

가장냥이의 생선가게 털러가기

[게임 설명]

• 길고양이인 가장냥이는 자식냥이들을 먹여 살리기 위해 생선을 털어 자식냥이들을 키워야합니다.

• 7일 안에 바퀴벌레, 쥐, 뱀 등 적들과 싸우거나 구걸을 하여 레벨업을 하고, Level 4 이상이 되면 사장의 눈을 피해 최종 미션인 생선가게 털기 게임을 완료하면 자식냥이들을 먹일 생선을 확보하여 해피엔딩으로 끝나게 됩니다.

[기능]

1. 인벤토리 : 상점에서 구매한 물품을 확인, 사용 할 수 있습니다.

2. 냥이 상점 : 물건을 사거나, 전리품을 팔아 돈을 획득할 수 있습니다.

3. 사냥하기 : 바퀴벌레 < 쥐 < 뱀들과 싸워 경험치를 획득해 레벨업을 합니다.

4. 생선가게 털러가기

   • LEVEL 4 이상이 되면 생선가게를 털러 갈 수 있습니다.

   • 밤에는 생선가게가 문을 닫기 때문에 낮에만 미션 수행이 가능합니다.

   • 사장이 생선가게를 지키지 않을 때 미션 수행이 가능합니다.

   • 제한시간 10초 동안 10번을 실수 없이 연속으로 생선이미지를 클릭한다면 미션성공입니다.

5.  구걸하기 : 랜덤으로 착한 사람과 나쁜 사람, 도둑 냥이를 만날 수 있습니다.
   • 착한 사람 : 참치캔을 얻어 HP를 회복합니다.
   • 나쁜 사람 : 돌을 맞아 HP가 감소합니다.
   • 도둑냥이 : 도둑냥이와 싸움을 해 HP가 감소합니다.
6. 상태 확인하기 : 가장냥이의 현재 상태를 알 수 있습니다.

[Thread]

1. 텍스트 Thread
   • 프롤로그, 게임 설명 등 출력 시 생동감있는 표현을 위해서 한줄, 혹은 한글자씩 출력합니다.
2.  로딩 Thread
   • 캐릭터 생성, 미션 장소 입장 시 실제 로딩이 되는 것처럼 표현하기 위해 사용합니다.
3. 음악 Thread
   • 각 상황마다 적합한 음악, 효과음을 재생합니다.
   • 배경음악 : 사냥터 BGM, 사냥터를 제외한 나머지 BGM
   • 효과음 : 타이핑 효과음, 버튼 클릭음, 아이템 획득/사용 효과음, 미션 실패/성공 효과음, 타격음 등등
4. 날짜 Thread
   • 하루를 2분으로 가정하고, 1분마다 낮과 밤이 반복됩니다.
   • 밤에는 생선가게가 문을 닫아 미션을 수행할 수 없으며, 7일이 지나면 미션 실패로 끝이납니다.
5. 생선잡기 게임 제한시간 Thread
   • 제한 시간 10초 안에 생선잡기 미션을 수행하지 못하게 미션실패입니다.
6.  사냥터 제한 시간 Thread\
   • 사냥을 시작하고 10초안에 몬스터를 죽이지 못하면 사냥에 실패합니다.
7. 몬스터 자동공격 Thread
   • 몬스터가 2초마다 자동으로 가장냥이를 공격합니다.

[GUI]

1. 날짜 알림 GUI : 시간과 날짜, 생선가게 운영시간을 보여줍니다.
2. 생성잡기 게임 GUI : 랜덤으로 출력되는 생선 이미지를 10초 안에 연속으로 10번 맞추는 게임입니다.

[ 시연영상 ]

https://github.com/jungeun960/Java-game

auto_increment 속성을 주는 컬럼은 항상 기본키(primary key)로 지정되어야 한다.

auto_increment 속성을 부여하는 컬럼에는 primary key 속성도 함께 지정해 주어야 한다. 만약, primary key 속성을 지정하지 않은 상태에서 auto_increment 속성을 부여하면 문법적 오류를 발생시킨다. 이 때 not null 속성은 주지 않아도 문법적 오류를 발생시키지 않지만 primary key 속성은 오류를 발생시킨다.

• Alert는 단순히 메시지를 전달하는 역할만 합니다. 반환하는 값이 없습니다.

ex) 버튼 클릭 시 메세지 띄우기

<button id="button1" onclick="button1_click();">버튼1</button>


<script>
function button1_click() {
        alert("버튼1을 누르셨습니다.");
}
</script>

• Confirm은 true 또는 false를 반환합니다. (확인을 클릭하면 true, 취소를 클릭하면 false를 반환)

ex) 확인 클릭 시 페이지 이동

<button id="button1" onclick="button1_click();">버튼1</button>


<script>
function button1_click() {
	var answer;

	answer = confirm("데이터를 삭제하시겠습니까?");
	//확인을 선택한 경우 자바스크립트를 호출할 때 같이 넘어온 url이라는 변수에 들어있는 주소로 페이지 이동

	if(answer == true){
      	 	location = url;
	}
}
</script>

• Prompt는 사용자가 입력한 값을 받아옵니다.

1. configure

 configure는 소스파일에 대한 환경설정을 해주는 명령어다.(configure뒤에 옵션을 넣음) 서버환경에 맞쳐 makefile을 생성해주는 과정이다.

 컴파일에 필요한 시스템 파일들은 어디에 위치해 있으며, 어떤곳에 설치를 하겠다고 지정을 하는 것이다.

예) # ./configure --prefix = /usr/local/mysql 하게 되면 어떤 파일을 /usr/local/mysql 이라는 곳에 설치 하겠다는 뜻.

2. make

 make는 소스를 컴파일 하는 것이다.

소스파일을 사용자가 실행 가능한 파일로 만들어 주는 과정을 말한다. make 과정이 끝나고 나면 설치파일(Setup 파일 같은 것)이 생성된 상태라고 볼 수 있다.

3. make install

make install은 make를 통해 만들어진 설치파일(setup)을 설치를 하는 과정이다.

DB에서 정보 조회를 할 경우에는 연결을 하고 쿼리문을 돌리고 연결을 끊게 된다.

이러한 작업보다 더 간단하게 데이터를 조회하는 방식으로 등장한 것이 쿠키와 세션이다.

클라이언트나 서버 둘 중 어디에 저장할건지에 따라 나뉘게 된다.

쿠키는 클라이언트(ex) 크롬, 익스플로우 등등) 

브라우져 별(크롬 쿠키 따로 / 익스플로우 쿠키 따로)로 저장을 한다.

홈페이지에 중복되는 내용을 쿠키에 저장하게 되면 변경사항만 받아오면 되기 때문에 새로고침할 때 업로드 속도가 빨라지게 된다. (요청할 때마다 다시 주는 것이 번거로우니까 가지고 있는 것)

ex) 자동로그인, 본 게시글 색 달라지는 것

※ css 변경 후 적용안되면 쿠키를 삭제해본다.

※ F12 application 탭에 쿠키정보 확인 가능

Session(셰션)은 서버에 저장을 한다.

쿠키에 저장하기에 보안적으로 문제가 될 만한것을 저장한다. 창을 닫으면 셰션이 파괴 된다. 파괴되면 다시 쓰지 못한다. (마치 자유이용권을 잘라버리는 것과 같다.)

ex) 로그인 유무 판별, 로그인, 로그아웃 

세션은 쿠키와 달리 보안상 로그인 정보를 서버에 저장하여 사용자들의 로그인 정보에 대한 보안을 한층 업그레이드 할 수 있게 해줍니다.

PHP 세션에 사용자 정보를 저장하기 전에, 먼저 세션을 시작해야 합니다.

Note: session_start() 함수는 <html> 태그 앞에 와야 합니다.

<?php session_start(); ?>



<html>

  <body>



  </body>

</html>

세션을 등록하기 위해서는 가장먼저 세션을 초기화 하여 세션을 생성하고, 현재의 세션 아이디를 활성화시키기 위해 session_start()함수를 사용한다.

PHP에서는 session_start() 함수를 이용하여 새로운 세션을 시작하거나, 기존의 세션을 다시 시작할 수 있습니다. session_start() 함수는 세션 아이디가 이미 존재하는지를 확인하고, 존재하지 않으면 새로운 아이디를 만듭니다. 만약 이미 존재하는 세션 아이디가 있을 때는 원래 있던 세션 변수를 다시 불러와서 사용할 수 있도록 합니다.

HTML5와 시맨틱 태그

시맨틱 태그 : 이름만 보고도 문서 구조에서 어떤 역할을 하는지 쉽게 이해할 수 있는 태그

• header : 머리말을 지정하는 태그
• nav : 문서를 연결하는 내비게이션 링크 ex) 홈페이지 상단 메뉴바

 header 태그로 헤더 영역 만들기

<header>
	<nav>
		<ul>
    		<li> <a href="#"> 메뉴1 </a></li>	
            <li> <a href="#"> 메뉴2 </a></li>	
            <li> <a href="#"> 메뉴3 </a></li>	
            <li> <a href="#"> 메뉴4 </a></li>	
       	</ul>
	</nav>
</header>

• hn : 제목을 표시하는 태그
• iframe : 외부 문서를 삽입하는 태그
  • ex) html안에 html 넣기
• section : 주제별 콘텐츠 영역을 지정하는 태그
• article : 독립적인 콘텐츠 내용을 삽입하는 태그
• aside : 본문 이외의 내용 표시하기 ex) 사이드바, 광고나 링크 모음 등
• footer : 제작 정보를 나타내는 태그
• address : 사이트 제작자와 연락처를 나타내는 태그 주로 footer 태그 안에 사용됨

HTML5와 멀티미디어

• object : 웹 문서에 외부 파일을 삽입하는 태그
• audio : 오디오 파일을 삽입하는 태그 ex) 배경음악
• video : 비디오 파일을 삽입하는 태그
• source : 모든 브라우저를 지원하기 위해 다양한 형식으로 변환된 비디오를 삽입하는 태그
• track : 비디오에 자막 파일을 연결해 표시하는 태그

CSS3 선택자

• 연결 선택자 : 선택자와 선택자를 연결해 적용 대상을 한정시킴
  • 하위 선택자 : 지정한 모든 하위 요소에 스타일 적용하기 - 상위요소 하위요소
  • 자식 선택자 : 자식 요소에만 스타일 적용하기 - 부모요소 > 자식요소
  • 인접 형제 선택자 : 가장 가까운 형제 요소에 스타일 적용하기 - 요소1 + 요소2
  • 형제 선택자 : 형제 요소에 스타일 적용하기 - 요소1 ~ 요소2

• 속성 선택자 : 태그 안에서 사용하는 속성들의 값에 따라 스타일 지정
  • [속성] : 특정 속성을 사용한 요소에 적용할 스타일
  • [속성=값] : 특정 값을 갖는 속성에 적용할 스타일
  • [속성 ~= 값 ] : 여러 값 중 특정한 값이 포함된 속성에 적용할 스타일
  • [속성 |= 값] : 특정 값이 포함된 속성에 적용할 스타일
  • [속성 ^= 값] : 특정 값으로 시작하는 속성에 적용할 스타일 
  • [속성 $= 값] : 특정 값으로 끝나는 속성에 적용할 스타일
    • ex) a[href $= "hwp"] // hwp로 끝나면 한글파일 이미지를 적용한다.
  • [속성 *= 값] : 값의 일부가 일치하는 속성에 적용할 스타일

• 가상 클래스 : 사용자의 동작에 반응하는 선택자
  • :link : 방문하지 않은 링크에 스타일 적용
  • :visited : 방문한 링크에 스타일 적용 
  • :hover : 요소 위에 마우스 포인터를 올려놓을 때 적용할 스타일
    • ex) 이미지 위로 마우스 올려놓으면 다른 이미지로 바뀌는 롤오버 효과(rollover)
  • :active : 요소를 클릭 했을 때 적용할 스타일
  • :focus : 웹 요소에 초점이 맞추어 졌을 때 적용할 스타일
  • :nth-child(n) : n번째 자식 요소에 적용할 스타일

CSS3와 애니메이션

• transform : 회전, 이동, 확대, 축소, 왜곡 웹 요소 변형하기
• transition : 전환 효과 만들기 진행시간, 속도 곡선, 지연 시간 설정
  • ex) 웹 요소의 배경색이 바뀌거나 도형의 테두리가 원형으로 바뀌는 것처럼 스타일 속성이 바뀌는 것
• animation : css로 애니메이션 만들기
• @keyframes : 애니매이션을 만들 때 바뀌는 중간 지점 만들기