은하수 골목

무료 국비로 대우직업전문학교에서

하이브리드 앱/웹 반에서 프로그램을 배우고 있는 학생입니다.

홈페이지 제작반은 아니지만, 기초로 초반에 홈페이지 제작을 배웠습니다.

홈페이지를 배웠을때만 해도 어려웟는데,

지금 코드를 보니 그때 보단 쉽게 느껴지네요ㅎ 

제가 배우면서 만들었던 홈페이지는

'Doctor Who'라는 영국 드라마를 테마로 만들었습니다.

BBC ONE의 홈페이지가 아닌 'Doctor Who'만의 홈페이지로,

'정보전달과 닥터후의 홍보 홈페이지를 만들어 보자!' 라고 생각하고 제작하게 되었습니다.

인트로 페이지입니다.

이미지를 클릭하면 메인페이지로 이어집니다.

요렇게 메인페이지로 넘어갑니다.

메뉴단은 마우스를 대면 이미지가 변경이 됩니다.

페이지는 에피소드. 캐릭터 소개, 몬스터 소개, 갤러리, 클립 영상, 뉴스로 나누었습니다.

요건 에피소드페이지 입니다.

이전다음

0

드라마에선 위 움짤처럼 

폴리스박스가 깜빡거리면서 나타났다 사라졌다를 반복면서 등장 합니다.

저걸 표현하고 싶어서 이페이지엔 애니메이션 효과를 주어서

저기 폴리스 박스가 깜빡거리게 만들었습니다.

이전다음

0

일정 시간동안 이미지가 사려졌다 나타났다를 반복합니다.

어느 정도 원하는 효과가 꽤 잘나온 편이여서 

만들면서 만족해 했던 것 중 하나입니다.:D

저는 현재 하이브리드 웹/앱반이지만,

홈페이지 제작반도 따로 운영되고 있습니다.

홈페이지에서 나아가 하이브리드앱 까지 배우고 싶으신분들은 하이브리드 반도 좋겠지만,

앱까진 어렵다 싶으신 분들은 홈페이지 제작반도 추천드립니다.

홈페이지 제작반은 5개월 과정이고, 하이브리드앱/웹반은 10개월 과정으로 진행되고 있습니다.

양과정 모두 2D그래픽도 배우고 있으니, 

기초가 없다고 걱정하시는 분들도 너무 걱정하지 말고 오세요~

저도 여기와서 2D와 프로그램 모두 처음 배웠는 걸요.:D

혹시나 모자란게 있어도, 다 같이 남아서 공부하면서, 알아가고 있습니다.

관심 있으신분들은 한번 방문해 보시는 것도 좋을거 같습니다.

저번에 했던건 이클립스에서 연동이 되었다면,

이번엔 이클립스를 거치지 않는 방법으로 폰갭(Phonegap)의 사용방법에 대해서 포스팅을 해볼까합니다.

이클립스에서 실행하는 폰갭은 실행하는 속도가 오래걸려서, 

'아파치'를 사용하고있었습니다.

아파치도 좋지만, 이건 올리는 족족 확인할 수있어서 정말 좋은거 같습니다. 

우선은 Node.js를 받아 주어야 합니다.

Node.js 바로가기

Node.js는 플랫폼 역할을 해줍니다.

첫페이지에 올라와있는 일걸 받아 주어도 좋지만,

만약에 64비트(bit)가 아니신 분들은 Downloads로 가주세요:D

들어가 보시면, LTS에 먼저 체크가 되어 있는데,

Stable에 체크를 해주시고, 자신의 피시와 맞는 사양을 선택해서 다운 받아 주시면 됩니다.

저는 윈도우를 사용하고 있으니, Windows Installer의 64비트가 됩니다.

다운로드 과정은 간단합니다.

특별히 바꾸거나 하는 부분은 없습니다.

다운이 완료되었다면 'cmd'를 실행 시켜주세요.

그리고, 'npm -version'을 입력하면, 버전이 저런식으로 버전이 뜹니다.

정말 빠른속도로 슉슉슉 올라가서 캡쳐는 뜨지 못했지만,

'npm -install -g phonegap'을 입력해 주세요.

입력해 하게되면, 엄청나게 빠른속도로 스크롤 바가 올라갑니다.

스크롤이 다올라 갔다면, 

이번엔 'npm install -g cordova'를 입력해 주세요.

아까와 같이 또 스크롤바가 엄청나게 파바박 올라갑니다.

완료가 되었다면, 한번 연결을 해볼까요?

먼저 'cd \'로 C드라이브로 연결을 해주고, 

'md projects'로 'projects'라는 저장 폴더를 생성합니다.

(저장할 파일을 만들어 주는 것입니다. 굳이 projects가 아니여도 상관없습니다.:D)

그리고, 'cd projects'로 방금 생성한 'projects'폴더로 들어갑니다.

현재 경로는 C드라이브에 'projects'폴더에 있습니다.

'phonegap create hello_world'로 'hello_world'라는 폰갭 프로젝트를 생성해 줍니다.

위 처럼 뜬다면, 올바르게 생성이 됬습니니다.

혹여나 저렇게 뜨지 않고, 오류 메시지가 뜬다면, 

설치과정 중 오류가 있었던 겁니다.

'cordova'를 입력해서 아무정보도 뜨지 않는다면, 

npm을 다시 설치해 보시는걸 권장드립니다.

만약 뜬다면, 'npm -install -g phonegap'와 'npm -install -g cordova'를 다시한번 입력해 재설치 해주세요.

정상적으로 오신분들이라면 'cd hello_world'라 작성해 주시면 위처럼 뜹니다.

여기까지 됬다면,

바로 핸드폰 어플로 연결해 바로 보실 수 있습니다.

어플을 받기전에 'listening on'부분의 숫자를 기억해주세요.

자신의 컴퓨터와 연결되는 서버 주소입니니다.

이제 제대로 되는지 확인해 보기위해 핸드폰에 어플을 설치해 봅시다.

구글 마트에서 'PhoneGap Developer'를 검색해 보시면 위와 같은 어플이 있을겁니다.

설치를 눌러 설치해 주세요.

설치되었습니다.

아이콘이 귀엽네요:D 

실행하기 이전에 해당 컴퓨터와 연결되어 있는 피씨와 

동일한 아이피가 필요합니다.

와이파이를 연결하고 실행 시켜주세요:D

실행해 보시면 이렇게 뜨는데 저기에 아까 위에서 기억해 놓으신 숫자를 적어주시면 연결됩니다.

핸드폰에 연결하긴 했지만,

이게 어떻게 되는건지 잘 모르시겠죠?

간단히 소스를 수정해 보겠습니다.

혹시 이클립스에서 내용을 작성하던 경로 기억하시나요?

경로가 비슷하답니다.:D

저장된 파일에서 'www'파일을 찾아 주어야 하니까요!

우선 우리가 만들어 주었던 

프로젝트는 C드라이브에 projects폴더에 'hello_world'라는 프로젝트를 만들어주었습니다.

찾아 들어가 봅니다.

가보게 되면, 우리가 찾던 'www'폴더가 바로 보이실겁니다.

그곳에 index.html이 바로 우리가 찾던 프로그램입니다.:D

총 경로 → "C:\저장폴더\프로젝트명\www"

메모장이나, 노트패드로 연결해서 열어보시면 익숙한 소스들이 보시게 될겁니다.

저는 일단 보여드리는 것이니, 

바디부분에 <h1>태그의 내용을 작성해 보겠습니다.

저장하는 순간, 핸드폰에 문장이 변경되는 걸 확인해 보실 수 있을겁니다.

완전 샤사삭!

신기합니다!

이제 새로운 것도 받았겠다,

좀더 새롭게 어플을 만들 수있을거 같습니다.

학원에 다니면서, 정말 신기하고, 재미있는 프로그램을 많이 만나고 있네요:D

이제 바로바로 핸드폰으로 확인까지 할 수있으니,

앞으로 배울 내용들이 더욱더 기대가 됩니다.

요즘 편의점에서 많은 음료 및 식품들을 맛보고 있습니다.

기존에도 다녔지만,

빈도수가 굉장히 낮았었습니다.

그렇다보니 특징있는(?) 식품들 이나 

편의점 전용 상품등등을 잘 사먹지 않았었습니다.

하지만, 다녀보니....

완전 꿀맛....8ㅅ8b

2~3달 정도 먹으면서 인상 깊었던거 기대했던거 등등 

사진을 찍어 놨던걸 기준으로 결산을 해볼까 합니다.

1. 스페셜티 카페라떼 아포가토/스페셜티 카페라떼 모카

개인적으론 아포가토가 맛있었습니다.:D

둘다 달달한 커피는 맞는데, 

카페라떼는 뭔가 묵직한 느낌이고,

아포가토는 산뜻한(?)느낌입니다.

가끔씩 우울하거나 기분전환 할때 종종 사먹고 있습니다.:g

좀 더 달콤한맛을 원하시다면 아포가토를 추천드립니다.

2. 덴마크 쇼콜라띠에 시나몬

볼 때마다 커피인가 초코우유인가 정체성을 고민했었던 건데,

한번 먹어 보았습니다.

맛은 생쵸코 좋아 하시는 분들이라면,

눈이 하트로 뿅뿅뿅 변하지 않을까 하는 맛이였습니다.

일반 초콜릿맛이 아니라,

생초코 맛이 진하게 나면서, 묵직한 맛이 났습니다.

진짜 생초코를 갈아 만들었나 싶은 맛이였습니다.

생초콜릿 좋아하시는 분들에게 완전완전 강추합니다.

3. 대만 밀크티

대만차 시리즈로 나온 듯한데,

처음에 용기가 이뻐서 산게 큽니다.:D

하지만, 후회는 커녕

하트를 뿅뿅뿅 날려 주었습니다.

이렇게 애정하지만, 사진이 없다는건 함정....ㅜ

전 저 시리즈 중 밀크티만 먹어보았습니다.

진짜 완전완전 꿀맛입니다.

밀크티를 사랑하는 여러분께 꼭꼭 먹어보라고 추천 드리고 싶습니다.

아주 진한 밀크티가 일품입니다.

편의점에서 파는 밀크티 통틀어서 제일 진하고 깊은 맛이 아닐까 싶습니다.

혹시 이것보다 맛있는 (편의점)밀크티가 있다면,

추천 부탁드려용~

3. 밀크 베어 / 초코 베어

이건 푸딩인데요,

제가 다니는 편의점에서도 오래전부터 팔고는 있었지만,

항상 품절이여서 구경을 할 수없었는데, 

이날은 두개다 있더라구요ㅎ

까서 업어져랏!

엎으면 이미지처럼 나올듯하게 층이 되어있습니다.

저는 밖에서 먹어서 업어먹는 호화를 누릴 수없었습니다.ㅠㅠ

푸딩을 그렇게 많이 먹어 보진 않았지만,

가격대비 완전 만족했습니다.

초코+딸기시럽 조합도 독특하고 좋았지만,

전 전통파(?) 스타일 좀더 좋았습니다.:D

4. 비요뜨 슈팅스타

솔직히 고백하겠습니다.

저는 토르오빠야 땜에 저걸 먹었습니다.(동공지진)

흠...맛은...

제 취향은 아니였습니다.

까봤을땐 외관상 기존 비요뜨 시리즈와 다를바 없었지만,

씹었을때 "토도독" 튀더라구요~

식감이 재미있긴 하지만,

딱 거기까지 였었습니다.

못먹을 정도는 아니고, 

호기심에 먹어볼 정도 였습니다.:D

다음에 사진이 또 차곡차곡 모이면

다시 한번 편의점 결산을 해보겠습니다.:D