TigerCow.Door


안녕하세요. 문범우입니다.


최근 멋쟁이 사자처럼 6기 운영진으로 활동하며, 지난 8월말에 해커톤을 진행하였습니다.

저는 방학간 파이썬, 장고 스터디를 진행하며 함께 공부한 친구들과 장고를 활용한 공유일기장 플랫폼 웹사이트를 개발하였습니다.


aws ec2 프리티어을 이용하여 배포까지 완료하였으나, 실제로 서비스 론칭등의 계획은 없습니다.

장고를 직접 활용해보고 6기 인원들에게는 배포까지 해보는 경험으로써의 토이 프로젝트였습니다.


활용된 스택은 다음과 같습니다.


python: 3.6.5


django: 2.0


postgresql: 10.4



해당 프로젝트에서 저는, 프로젝트 전체 기획 및 진행을 담당하며 세부적으로는 데이터베이스 설계 및 구축, 교환일기장 기능 개발을 담당하였습니다.



- 서비스 소개


카카오톡 소셜 로그인



장고를 활용한 공유일기장 플랫폼에서는 카카오톡 소셜로그인을 통해 누구나 쉽게 서비스를 이용할 수 있도록 개발하였습니다.



메인화면 달력 및 작성한 일기 확인하기


사용자는 메인화면에서 달력을 확인할 수 있고, 그 전에 작성한 일기들은 해당 요일에 제목이 표시됩니다. 제목을 누르면 해당 일기로 이동할 수 있습니다.



일기 작성하기


사용자는 일기 쓰기 탭을 눌러서 일기를 작성할 수 있습니다.

제목, 작성할 교환일기장, 감정, 날씨, 사진, 내용을 입력합니다.

하나라도 작성되지 않을시에는 저장되지 않고 빈칸을 알려줍니다.



교환일기장


교환일기장에서는 개인이 작성한 일기 뿐아니라 다른 사람의 일기를 확인할 수 있습니다. 관심사가 같거나, 친구들끼리 함께 일기를 작성하고 싶을때는 교환일기장을 만들거나, 참여하여 함께 일기를 작성할 수 있습니다.



이 외에도 일기를 보관할 수 있는 '뜯어가기' 기능과 댓글기능 등을 구현하였습니다.



배포된 프로젝트의 모든 코드는 아래 깃헙에서 확인하실 수 있습니다.

https://github.com/doorBW/LAN-Diary


이 외에도 추가적인 질문등은 언제든지 댓글 및 이메일, 카카오톡을 이용해주세요 :)

블로그 이미지

Tigercow.Door

Web Programming / Back-end / Database / AI / Algorithm / DeepLearning / etc

댓글을 달아 주세요



안녕하세요. 문범우입니다.

이번 포스팅을 시작으로 해서, 파이썬 기반 웹 프레임워크인 플라스크(Flask)에 대한 기초다지기 강의를 시작할 예정입니다.

해당강의는 서울시립대학교 멋쟁이사자처럼 python 스터디에서 진행되는 강의이며 블로그에 게시되는 내용들은 각 수업을 정리하여 스터디에 참석하지 못한 인원이나 복습용입니다.

(추가로 영상촬영을 생각하고 있지만 아직 실질적인 계획은 없습니다.)


해당 수업은 다음과 같은 분들을 대상으로 진행됩니다.

- HTML, CSS 에 대해서 기본적으로 알고계시는 분들(직접적으로 사용되지는 않습니다.)

- Python에 대해 관심이 있고 흥미가 있으신 분들(문법이 크게 중요시되지 않습니다. 파이썬 문법이 매우 simple하고 쉽기 때문에 중간중간 필요한 것들에 대해서는 설명드릴 예정입니다.)


해당 내용은 기본적으로 파이썬3가 설치되어 있는 기준에서 설명드리며, 맥OS를 기반으로 내용이 진행됩니다.

윈도우와 큰 차이는 없을 것으로 예상되지만 윈도우환경에서 작업하시면서 발생하시는 오류는 댓글 및 이메일을 통해 남겨주시면 빠른 시일내에 답변을 드리도록 하겠습니다.


수업에 대한 커리큘럼 및 강의자료는 아래 github 주소에 있습니다.

https://github.com/doorBW/UOS_LIKELION_python




그럼 바로 강의 내용을 진행해보도록 하겠습니다.



이번강의 내용은 위와 같은 순서로 진행됩니다.

먼저 우리가 다루고자 하는 Flask가 무엇인지 알아볼 텐데, 이에 대해 알기위해 Web Framework가 무엇인지도 매우 간단하게 알아볼 예정입니다.

이후 자신의 컴퓨터에 플라스크를 설치해보고, 기본적인 예제를 진행해보도록 하겠습니다.

이후에는 플라스크를 이용하여 두수의 곱에 대한 값을 구하는 페이지를 만들어보고, 이어서 학교의 공지사항을 크롤링하는 등 플라스크에서 외부 라이브러리를 사용해보는 연습을 해보도록 하겠습니다.


그럼, 플라스크는 과연 무엇일까요?

슬라이드의 그림을 보면, 우리가 과학실험시간에 자주 보던 플라스크..

우리가 지금 배우고자 하는 것과는 전혀 관련이 없습니다 :) ㅎ


플라스크는 쉽게 말해서, 웹 프레임워크(Web Framework) 입니다!

파이썬 기반의 웹 프레임워크로는 플라스크 이외에도 유명한 장고(Django)가 있습니다.

이 두가지에 대한 차이점은 우리가 웹 프레임워크가 무엇인지 먼저 알아보고 확인해볼게요!


웹 프레임워크...가 무엇일까요?

뭔가 자주 들어본 것 같긴한데!

멋쟁이 사자처럼을 하신 분들은 Ruby on Rails를 해보셨을텐데, 이것도 루비언어 기반의 웹 프레임워크입니다.


웹 프레임워크를 너무 어렵게 보지 말고 조금만 더 쉽게 생각해볼게요!


루비온레일즈를 다뤄보신분들은 조금 더 이해가 쉽겠지만, 우리가 웹 어플리케이션, 즉 웹 사이트를 만들때 해야될 것들이 뭐가 있을까요?

보통 처음에 ' http:// main. ~ . com' 이라는 주소로 들어오면 메인 화면을 띄어줄거에요! 그리고 거기서 음.. '게시판' 메뉴를 누르면, 'http:// main. ~ .com/post '이런 정도의 url로 넘어가겠죠!

근데 이런 설정은 누가하죠?

우리가 html에서 a태그를 이용해서 어디로 가는지 알려주죠, 근데 좀더 자세히 들어가서, 게시판에서는 우리가 단지 html로 작성된 내용만 보는게 아니잖아요?

사용자들은 자신이 게시글을 올릴 수도 있어야 하고, 게시글을 확인도 할 수 있어야하고~ 댓글도 달고, 좋아요도 누를수 있어야하죠!

근데 이걸 단순히 html이나 css를 통해서 구현이 가능할까요?


이렇게 우리가 어떤 화면으로 넘어가는지 경로를 설정해주고, 그 경로로 가서 단순히 정보를 보여주는 것 뿐 아니라, 내부적으로 어떤 처리를 할지, 어떤 함수를 실행할지 설정하고, 우리의 데이터베이스에 있는 내용을 어떻게 가져와서 어떻게 보여주게 할 것인지, 우리가 처음부터 하나씩 다~ 구현하려면.. 어떻게 하죠..?


그런데 이를 보다 쉽게 다룰 수 있도록 해주는 것이 바로 Flask이고 웹 프레임워크입니다!


적절한 비유가 될지는 모르겠지만, 제가 청량리에서 신촌으로 무언가 물건을 보내려할때 우리는 '퀵 서비스'를 이용할 수 있어요!

이런 서비스가 없다면, 저는 옷을 차려입고 나가서 집앞 버스정류장에 가서 272, 271 등의 버스를 타고 신촌으로 열심히 가서 알맞은 위치에 물건을 전해줘야 하죠. 하지만 '퀵 서비스'가 있기 때문에, '퀵 서비스'의 이용법만 안다면 아주 간편하게 물건을 전송할 수 있죠! (물론 요금을 지불해야하지만, 웹 프레임워크는 무료랍니다!)


이렇게, 우리가 웹 어플리케이션을 만들고자 하는데 필요한 다양한 설정이나 기능들을 보다 쉽고 간편하게 다룰 수 있도록 해주는 것이 웹 프레임워크입니다.

그리고 세계에 존재하는 다양한 언어별로 사용되는 웹 프레임워크가 여러 종류인 것이죠.

처음에 말씀드렸듯이, 파이썬을 기반으로 한 웹 프레임워크는 대표적으로 플라스크(Flask) 와 장고(Django)가 있습니다.


이 두개의 차이점에 대해서는 쉽게 생각해서,

플라스크는 덜 도와주지만 그만큼 자유도가 높고,

장고는 더 도와주지만 상대적으로 제한된 점이 있어요.


물론 우리와 같이 처음 시작해보는 사람들에게는 두가지 모두 큰차이는 없습니다.

저는 오히려 처음 할때는 깔끔한 플라스크가 조금 더 쉽게 느껴지지 않을까 라는 생각에 플라스크로 수업을 진행하게 되었습니다.



플라스크는 설치도 너무나 간편합니다.

파이썬을 설치하신 분들께서는 pip라는 파이썬 패키지툴이 자동으로 설치되어 있습니다.

이를 통해서 플라스크를 설치하시면 되는데, 위의 슬라이드와 같이


pip install flask


명령어를 맥은 터미널에, 윈도우는 cmd창에 입력시켜주세요!


* 파이썬을 이용하시는 많은 분들께서는 virtualenv 라는 가상환경을 통해 설치하시는 분들도 많은데, 이는 버전관리나 프로젝트 관리가 용이하도록 하는 방법 중에 하나입니다. 물론 이를 익히면 더 좋겠지만, 오히려 처음에는 머리속을 더 복잡하게 할 수 있다고 생각되어 단순히 로컬(자신의 컴퓨터)에 설치하는 과정으로 진행합니다.

이에 대해서 궁금하신 분들은 댓글 및 이메일에 말씀해주시면 답변드리겠습니다. :)


플라스크가 설치가 되었나요?

그럼 자신이 사용하는 에디터를 켜서 위의 코드를 먼저 따라서 쳐볼게요!


다 치셨으면, 이제 한줄씩 무엇을 의미하는지 함께 확인해볼게요.

조금 이따 보겠지만, 위와 같이 9줄 밖에 안되는 코드인데도 불구하고, 이것은 Hello World라는 문구를 출력하는 웹페이지를 완성한 상태입니다 :)


1번줄에서는, Flask라는 패키지, 우리가 방금 설치한 그것에서 flask를 가져옵니다. 쉽게 생각해서 우리가 앞으로 flask를 쓰겠다는 이야기에요.


2번줄에서는 플라스크를 생성(실행?)하는 의미입니다. app이라는 변수에 flask 프로젝트를 초기화 시켜서 실행하겠다라는 코드입니다.


3번줄은 공백이고~ 4번줄에서는, url을 지정해주는 코드입니다.

@app.route('/'), 즉 우리가 위에서 생성한 app에 대해 route, 경로를 설정해줄건데, ('/') http:// <우리 기본 주소> /  와 같은 경로를 이야기해요!

예를 들어, @app.route('/route_test') 라고했다면?

http:// <우리 기본 주소> /route_test 와 같은 경로를 이야기한 것 이겠죠?


그럼, 이렇게 경로를 설정해서 뭐할건데?

그것이바로 다음줄에 나와있습니다.

5번줄에서 함수를 정의하는데, 이것은 바로 위에서 설정한 경로에 사용자가 요청을 보냈을때 실행되는 것 입니다.

hello_world 라는 함수를 실행할 것이고, 그 함수의 내용으로는 6번줄에 나와있습니다.

return 'Hello World!' 단순히 Hello World! 를 반환하도록 하였습니다.

즉 Hello World! 라는 문자열을 띄어주라고 한거에요.


그리고 8,9번줄은 단순히 해당 플라스크 프로젝트를 실행시키는 코드라고 이해하시면 됩니다 :)


이제 위와 같은 구조를 가지는 구구단 계산 페이지를 만들어 볼거에요.

완성된 코드는 github에 있지만.. 일단 우리는 기능적으로 구현되는 것에 초점을 둘것이기에 디자인은 전~혀 예쁘지 않습니다.. :)


(해당 내용은 코드에 따로 주석으로 설명을 달아 놓았으니 추가적인 설명은 생략합니다.)



(해당 내용은 코드에 따로 주석으로 설명을 달아 놓았으니 추가적인 설명은 생략합니다.)




다음주에는 이메일 인증을 통한 회원가입을 구현해보는 실습을 진행할거에요.

실제로 자신의 구글계정을 이용해서 이메일을 보내보도록 하고, 이후에 회원가입 직접 구현해볼거에요!


실제로 비밀번호 암호화도 시켜볼 것이고, 우리가 이메일 보내는 실습을 해냈기 때문에, 회원가입을 요청한 사람이 자신이 등록한 이메일로 전송된 메일로 인증을 성공했을 때만 정상적인 사용자로 인식되게끔 할 예정입니다.


이를 위해서는 데이터베이스를 설치해서 db에 사용자 정보를 담아야하는데, 이때문에 mysql을 연결해볼지 말지 고민중입니다... (거의 할 예정이에요..ㅎㅎㅎㅎㅎ)

하지만 우리가 db 다루는 것이 목표가 아니기 때문에, db에 대해서는 대략대략 넘어가고 우리가 구현하고자 하는 기능을 구현하는데 초점을 둘 예정입니다.



이렇게 첫번째 수업에 대한 사전정리 작업을 하였습니다.

오늘 오후 7시에 수업이 진행되는데, 이후 추가적인 내용은 해당 포스트에 추가하여 정리하겠습니다.

궁금하신 점이나 잘 해결이 안되는 점들은 언제든지 댓글 및 이메일, 카카오톡을 통해 연락해주세요 :)


블로그 이미지

Tigercow.Door

Web Programming / Back-end / Database / AI / Algorithm / DeepLearning / etc

댓글을 달아 주세요

안녕하세요. 문범우입니다.

이번 포스팅은 4월 12일 서울시립대학교 멋쟁이사자처럼 수업에 대한 내용입니다.

지난 포스팅을 시작으로 Ruby on Rails를 시작했습니다.

따라서 이번 포스팅의 내용은 다음과 같은 순서로 진행됩니다.


- 지난 내용 복습

- Array 개념

- Range

- Lotto 번호 생성 페이지 만들기

- 이미지 넣기



1. 지난 내용 복습


지난 포스팅에서는 먼저 MVC 패턴과,

ruby on rails가 무엇인지 알아보았습니다.

우리가 앞으로 다루게 될 ruby on rails 는 백엔드(backend) 작업으로써, ruby 언어를 이용한 프레임워크입니다.

백엔드를 다루다보면 사소한 문법실수나 기타 실수때문에 아예 웹페이지가 뜨지 않을때도 많습니다. 따라서 하나하나 꼼꼼히 살펴보고, 에러가 발생했을때는 에러메세지를 보고 직접 해결해보는 연습을 하시면 좋습니다.

개인적인 팁을 드리자면, 에러가 발생했을 때, 사용하고 있는 언어나 프레임워크를 시작으로 에러메세지를 구글링하면 해결방안이 나올 때가 있습니다.

예를 들어, ruby on rails를 사용하다가 abc 라는 에러가 발생하면, 구글에 ruby on rails abc error 와 같은식으로 검색하시면 됩니다.


그리고 이어서 우리는 Cloud9을 통해 ruby on rails를 시작하는 방법에 대해서 알아보았습니다.

cloud9은 우리가 특정 프레임워크를 우리의 컴퓨터에 직접 설치하지 않고 가상으로 사용할 수 있도록 해주는 서비스 입니다. 일반적으로 IDE 라고 불리는데, cloud9 이외에도 국내에서 구름IDE등이 존재합니다.

현재 기존의 cloud9은 신규가입이 불가하여 서울시립대학교 멋쟁이사자처럼에서는 대표님께서 따로 결제를 진행하여, 다른 학생들을 팀에 초대하여 cloud9를 이용하는 방식을 사용하고 있습니다. 다른분들께서는 기존의 cloud9말고 aws c9이라는 서비스를 무료로 이용할 수 있지만 워크스페이스(가상환경)를 하나만 생성할 수 있는 등의 제약이 있습니다.


또한 간단하게 ruby on rails 프레임워크를 이용해보는 시간을 가졌습니다.

home이라는 컨트롤러를 생성하여 컨트롤러에서 다루는 변수를 view로 가져와 출력해보기도 하였습니다.



2. Array 개념


이번에는 바로 ruby on rails에서 직접 코딩하기보다 간단한 개념을 하나 익혀보겠습니다. 하지만 바로바로 결과를 확인할 수 있도록 cloud9을 실행해서, 코드로 확인해보면서 진행하겠습니다.


먼저 cloud9 서비스를 키고 새로운 ruby on rails 워크스페이스를 생성합니다.

워크스페이스가 생성되고 나면 아래에 있는 창을 bash라고 했었습니다. 터미널이라고도 불리는 것으로써 윈도우에서의 cmd(명령 프롬프트)라고 생각하시면 됩니다.

해당 bash 창에서 다음과 같이 명령어를 입력합니다.



irb 라고 입력하면, 위의 사진과 같이 ~~~ $ 였던 것이 ~~~ > 으로 바뀝니다.

간단히 말해서 irb란, 루비 프롬프트, 루비의 대화형 창에 들어오게 하는 명령어입니다. 해당 창에서는 ruby 언어를 통한 코딩이 바로바로 가능합니다.



이제 Array 에 대해 알아보면서 해당 irb 창에서 바로 테스트 해보겠습니다.

array란 배열이라는 의미입니다. 

배열이라는 것은 다음 그림과 같은 것 입니다.



위의 그림과 같이 1부터 6이 담긴 상자가 이어져 있습니다.

그리고 index 라고 하는 각 상자에 대한 번호가 부여되어 있습니다.

쉽게 생각해서 이러한 형태를 배열이라고 생각할 수 있습니다.

즉, 우리가 위의 형태를 가진 배열을 a라고 설정한다면 a[0] = 1이고 a[3] = 4가 될 것입니다.


ruby 에서는 이러한 배열을 만들기 위해서 처음에 다음과 같이 명령을 내려줍니다.


a = Array.new


이 명령어를 통해서 a라는 이름의 새로운 배열을 만들게 됩니다.

그리고 위와 같은 명령어를 통해 생성되는 배열은 기본적으로 어떠한 상자도 가지고 있지 않은, 단순히 배열로써의 성격만 띄고 있는 상태의 배열입니다. 만약 처음부터 3개의 상자를 가진 배열을 만들고 싶다면,


a = Array.new(3)


과 같이 입력하면 됩니다.

바로 irb 를 통해서 진행해보도록 하겠습니다.



irb 에서는 만들어진 배열을 바로 결과로 보여줍니다.

이때 a = Array.new(3) 을 통해 세개의 상자가 생기긴 했는데 우리가 따로 입력하지 않은 nil 이라는 값이 들어있는 것을 볼 수 있습니다.

배열을 처음 만들게 되면 우리가 어떠한 값을 넣을 것인지 지정해주지 않았으므로 아무 값도 들어가지 않습니다. 이럴때 컴퓨터는 어떠한 값도 존재하지 않는다는 것을 표현해주기 위해서 null 또는 nil 이라고 표시합니다. 즉, null 또는 nil 이란 0이나 기타 어떠한 값도 아닌, 아무것도 없는 값을 의미합니다.


이제 우리가 새롭게 만든 배열 a 에 특정 값을 넣어보도록 하겠습니다.

새로운 값을 삽입하기 위해서는 push라는 함수를 이용합니다.


a.push(3)


위와 같이 (배열).push(삽입할 값) 을 입력함으로써 배열에 새로운 값을 입력할 수 있습니다.



그런데 우리가 처음에 3개의 상자를 가지게 만들어서 생겼던 nil이 사라지지 않고 그대로 존재하고 있습니다.

push 함수는 기존의 상자에 대해 값을 변경하는 등의 작업이 아닌, 새로운 상자를 만들면서 우리가 입력한 값을 넣어주는 함수이기 때문입니다.

그럼 nil 값을 가지고 있는 3개 상자의 값을 바꿔보도록 하겠습니다.

처음에 배열에 대해서 소개해드릴때 각 상자는 자신의 위치, 인덱스를 가지고 있다고 말씀드렸습니다.

이러한 인덱스를 이용하여 값을 바꿀 수 있는데, 이때 인덱스의 시작값은 0입니다.

즉, 현재 a[0] == a[1] == a[2] == nil 인 것입니다.

따라서 각 상자에 새로운 값을 넣어주도록 하겠습니다.



각 상자에 대한 인덱스를 이용하여 값을 바꿔줌으로써 현재 a라는 배열은, [1, 2, 3, 4, 5, 10] 이라는 형태를 가지게 되었습니다.


이번에는 배열에서 지정한 개수의 요소를 랜덤하게 뽑는 함수 sample에 대해서 알아보겠습니다. 현재 a 배열에는 6개의 요소가 들어있는데 이중 랜덤하게 하나의 요소를 뽑도록 하는 함수입니다. 다음과 같이 사용합니다.



또한 sample 함수의 뒤에 소괄호를 통해 숫자를 써주면 그 값만큼의 요소를 랜덤하게 뽑을 수 있습니다.



3. Range


이번에는 Range에 대해서 알아봅니다.

단순하게 값에 대한 범위를 말하는 것이라고 생각하시면 됩니다. 즉, 우리가 1부터 45를 표현하려고 하는데 이를 단순하게 1, 2, 3, 4, 5, ... 44, 45 이런식으로 표현하는 것이 아니라 보다 쉬운 방법을 사용하는 것입니다.

ruby 에서는 점 두개( .. )를 이용해서 범위를 표현합니다.

즉, 1~45는 1..45 로 표현할 수 있습니다.



4. Lotto 번호 생성 페이지 만들기


이제 위에서 알아봤던 개념들을 바탕으로 Lotto 번호를 만들어내는 페이지를 제작해보도록 하겠습니다.

먼저 여러분이 사용하셨던 irb 창을 나가기 위해 exit를 입력합니다.



먼저, ruby on rails가 이용하는 MVC패턴 중 Controller를 만들어보도록 하겠습니다.

아래 명령어를 통해 home 이라는 컨트롤러와 함께 index라는 액션을 함께 생성합니다. (액션이라는 것에 대해서는 아래에서 설명하겠습니다.)


rails generate controller home index

or

rails g controller home index


위의 명령어를 통해서 app > controllers 안에 home이라는 컨트롤러가 생성되며 app > view 에 home이라는 폴더가 생겼을 것입니다.

먼저 app > controllers 안에 있는 home 컨트롤러를 확인해보겠습니다.



위와 같은 파일이 열립니다.

2,3번째 줄을 보시면 def index ~ end 라는 것이 적혀있습니다.

이것이 아까 우리가 컨트롤러를 만드는 명령어에서 함께 만든 index 액션입니다.

액션이라는 것은, 우리가 특정 view에 대해 서버측에서 어떻게 행동할지(데이터를 처리하거나 기타 로직을 수행하는 등) 작성되는 곳 입니다.

즉, 하나의 액션에는 하나의 view가 대응됩니다.


위에서 우리가 index라는 액션을 만들었기 때문에 아까 확인했던 app > view > home 안에도 index.html.erb 라는 view가 생성되었을 것입니다.


이제 우리의 index 액션에 우리가 처리하고자 하는 코드를 작성해보도록 하겠습니다.


로또 번호 생성 페이지를 제작할텐데, 간단히 로또 번호에 대한 규칙을 확인해보면 아래와 같습니다.


- 1~45의 숫자가 존재한다.

- 7개의 숫자를 추첨한다.

- 숫자는 중복되지 않는다.


크게 위의 3가지 규칙이 존재합니다.

그럼 먼저 1~45의 숫자를 만들어서 배열에 담아보도록 하겠습니다.



위의 3번째 줄을 보시면, lotto_num 이라는 이름으로 1~45의 값을 갖는 배열을 만들어주었습니다.

우리가 배열에 대해서 알아볼때, 새로운 배열은


a = Array.new


와 같은 방식으로 만들었는데, .new 를 이용한 방식으로 배열을 생성하게 되면 내용이 비어있는 상자들만 가진 배열을 만들게 됩니다. 이후 각각의 상자들의 값을 수정해주어도 상관없지만, 좀 더 편하게 만들기 위해서는 위의 사진과 같은 코드를 이용하여 처음부터 1~45 각각의 값을 갖는 상자들을 만들었습니다.


그럼 이제 1~45의 숫자를 가지고 있는 lotto_num 배열에서 7개의 숫자를 추첨해보도록 하겠습니다.


우리가 위에서 알아본, 배열에서 랜덤하게 요소를 뽑는 sample 함수를 이용합니다.



또한 뽑게되는 7개의 숫자는 모두 view 에서 사용되어야 하는 변수이므로 변수이름 앞에 @를 붙여주도록 합니다.


이렇게 7개의 숫자를 추첨하였습니다.

하지만 아직 하나의 문제가 남아있습니다.

지금 추첨하는 7개의 숫자는 서로 중복될 수 있습니다.

단순히 1~45의 숫자를 가진 배열에서 랜덤하게 하나를 뽑을 뿐이지, 이미 뽑힌 숫자는 안된다라는 등의 조건을 걸지 않았기 때문입니다.

어떻게 해결할 수 있을까요?


다양한 방법이 존재하지만, 그 중에서도 심플한 방법을 사용해보도록 하겠습니다.

바로, 추첨되는 번호를 1~45숫자를 가진 배열에서 삭제시키는 방법입니다.

삭제를 할때는


<배열>.delete(삭제하고자 하는 요소 값)


와 같은 delete 함수를 이용합니다.

작성된 코드는 아래와 같습니다.



이렇게 하면 위에서 알아본 3가지 규칙에 따른 로또 번호 생성이 완료되었습니다.

그럼 이렇게 추첨한 번호들을 view에서 보여주도록 하겠습니다.


app > view > home 폴더를 들어가면 index.html.erb 라는 파일이 있습니다.


해당 파일에 우리가 추첨했던 로또 번호들을 아래와 같이 작성하면 되겠습니다.


지난 포스팅에서도 설명 드렸듯, html.erb에서 ruby를 사용하기 위해서는 특별한 구문을 사용해야 합니다.

위에서와 같이 쓰려고하는 내용을 <%=  %>로 묶어 줍니다.

위와 같이 코드를 작성하고 run project 를 한 후에 주소창에 /home/index 를 붙여서 확인하면 다음과 같습니다.



이렇게 올바른 결과가 출력되고, 새로고침을 할 때마다 번호들이 새롭게 추첨되는 것을 볼 수 있습니다.


우리가 위에서 했던 방법말고, 반복문을 이용해서 코드를 더 짧게하는 등의 방법도 가능합니다. 크게, 반복문을 사용하거나, sample 함수를 응용해보는 방법입니다.

각각에 대한 코드는 아래에 공개하겠으나 꼭 스스로 한번 생각해보고, 코드를 작성해보고 난 후에 확인하시기를 바랍니다.


* 반복문 사용하기



* sample 함수 응용하기



5. 이미지 넣기


마지막으로 해볼 것은 우리가 단순히 숫자로 출력했던 것들을 이미지로 출력하게끔 하는 것입니다.

먼저 사용되는 이미지 압축 파일은 다음과 같습니다.

images.zip

해당 파일을 다운받아서 확인해보시면 아시듯 1~45번의 공으로된 이미지가 1~45이름으로 저장되어 있습니다.



이제 다운받은 이미지를 넣기 위해 위의 사진과 같이 app > assets > images 폴더를 클릭한뒤 상단 탭에 있는 File > upload local file > select files 를 누르고 다운받은 이미지 45개를 첨부합니다.



그리고 index.html.erb 파일의 코드를 위와 같이 수정합니다.

루비에서 image_tag를 작성하고 그 뒤 소괄호에 파일이름을 넣으면 자동으로 이미지를 불러와 줍니다. 또한 이미지파일 이름을 적을때 #{} 를 이용하면 중괄호 안에 우리가 컨트롤러에서 지정한 변수를 사용할 수 있습니다.


이와 같이 수정한 후에 결과를 확인해보면 아래와 같이 이미지로 로또 번호가 생성되는 것을 확인할 수 있습니다.



이렇게하여 로또 번호 생성 페이지를 만들어 보았습니다.

새롭게 알아보고 있는 ruby on rails 를 학습하며 낯설고 어려운 점도 많겠지만 하나하나 천천히 따라오다보면 어느새 잘 이해되고 스스로 할 수 있게 될 것입니다.

잘 이해가 안되거나, 에러가 나는 부분들은 댓글이나 이메일을 통해서 말씀해주시면 최대한 도움드리도록 하겠습니다.


블로그 이미지

Tigercow.Door

Web Programming / Back-end / Database / AI / Algorithm / DeepLearning / etc

댓글을 달아 주세요

안녕하세요. 문범우입니다.

4월 2일에 페이지 제작 실습(2)를 포스팅을 한 이후에 오랜만에 정리하는 것 같네요.

그 동안 서울시립대학교 멋쟁이사자처럼에서는 수업을 진행했으나, 새로운 걸 배우기 보다 그 동안 배웠던 내용을 토대로 특정 웹페이지들을 선정하여 그대로 만들어보고, 더 나아가 새롭게 JQuery를 적용해 보는 등의 수업을 진행하였습니다.

이전의 포스팅들에서 모두 다루었던 내용들이기 때문에 따로 포스팅은 하지 않았습니다.


그리고 4월 8일 일요일수업에서는 Ruby on Rails 수업을 시작하였습니다.

아직은 local(자신의 컴퓨터) 자체 환경에서 진행하지 않고, Cloud9 이라는 서비스를 이용하여 진행합니다.

따라서 해당 포스팅은 아래와 같은 순서로 진행될 예정입니다.


- Ruby on Rails 이란

- MVC pattern

- Cloud9 이용하기

- Ruby on Rails 버전 확인 및 버전 변경

- Ruby on Rails 기초



1. Ruby on Rails 이란



Ruby on Rails 이란 쉽게 말해서 Ruby 라는 프로그래밍 언어를 기반으로 한 MVC패턴의 프레임워크입니다.

Ruby, MVC패턴, 프레임워크.. 모두 처음 들어보셨을텐데요, 하나씩 간단하게 알아보도록 하겠습니다.


먼저, Ruby란 프로그래밍 언어의 하나입니다.

혹시 C, Java, Python 등에 대해서 들어보셨나요? 모두 프로그래밍 언어들 입니다. 즉 우리가 사용하는 언어가 한국어, 영어, 일본어 등 여러개가 있듯 컴퓨터에게도 컴퓨터가 이해할 수 있는 여러가지 언어가 있습니다. 그리고 Ruby 는 그 중 하나인 것입니다.

재미있는 점은, Ruby 언어의 철학 중 하나가, 스트레스 없는! 즐거운 프로그래밍이라는 것입니다. 나중에 직접 사용해보시면 느끼시겠지만 이러한 철학대로 루비는 매우 직관적이고 이해하기 쉬운 문법 구조를 가지고 있습니다.

따라서 코딩을 처음하시는 분들, 비전공자 분들도 쉽고 빠르게 익히실 수 있는 장점이 있습니다.

또한 세계적으로 정말 많이 사용하는 언어이기도 합니다 :)


그럼 MVC전에, 프레임워크에 대해서 알아볼게요.

프레임워크(Frame-work)란, 어떠한 목적을 달성하기 위해 복잡하게 얽혀있는 문제를 해결하기 위한 구조이며, 소프트웨어 개발에 있어서 하나의 큰 뼈대역할을 해준다. 라고 나무위키에 나와있습니다.

쉽게 말해서, 우리는 웹 어플리케이션을 만드려고 하고있죠?

이러한 상황에서 프레임워크는, 우리가 웹 어플리케이션을 만드는데 보다 쉽고 빠르고 멋있게 만드는데 도움을 주는 녀석이라고 생각할 수 있습니다.

예를 들어보면, 여러분들이 발표자료를 만들 때 PPT를 처음부터 다 디자인하고 만들면 물론 좋겠지만, PPT가 처음인 분들에게는 매우 어렵고 낯선 작업일 수 있습니다. 이럴때 우리는 보다 쉽게 만들기 위해서 템플릿이라는 것을 통해 만들어 내곤하죠? 쉽게 생각해서 프레임워크가 이러한 템플릿역할을 한다고 생각하시면 됩니다.

웹 어플리케이션을 아예 처음부터 만드는데에는 보안이나 구조등에 대해서 매우 신경쓸일이 많고 작업해야 할 것들도 매우 많습니다.

따라서 우리는 고급개발자분들께서 만들어 놓은 프레임워크를 이용하여 빠르고 쉽게 웹 어플리케이션을 만들게 됩니다.


그럼 다시한번, Ruby on rails 는 뭘까요?

처음에 말씀드렸듯이 Ruby on rails는 Ruby 라는 언어를 기반으로 한 프레임워크입니다. 즉, Ruby 언어를 이용해서 웹 어플리케이션을 보다 쉽게 만들수 있도록 돕는 것이라고 할 수 있겠습니다.


우리 멋쟁이사자처럼에서는 Ruby 언어에 대한 문법수업을 따로 진행하지 않고, Ruby on Rails 를 이용하며 웹 어플리케이션을 만들면서 그때 그때 필요한 문법들을 공부해볼거에요.

위에서 말씀드렸듯이 Ruby는 매우 직관적이고 이해하기 쉬운 문법 구조를 가졌기 때문에 너무 걱정하지 않으셔도 괜찮습니다.



2. MVC pattern



전체적인 MVC패턴을 나타내면 위의 그림과 같습니다.


저의 블로그를 예시로 한번 생각해볼게요.

먼저 제 블로그의 메인화면으로 오려면 우리는 주소창에 

http://doorbw.tistory.com/

이라는 URL을 입력합니다.

이것이 요청을 보내는 것입니다.

'서버야, 나한테 http://doorbw.tistory.com/ 주소를 가진 웹 어플리케이션을 보여줘!' 라는식으로 요청을 보내는 것이죠.

해당 요청을 받은 서버에서는 주로 MVC(Model View Controller)패턴으로 이루어져 있습니다.


먼저 요청을 받은 Controller는

'그래, 잠깐만! Model아 http://doorbw.tistory.com/ 주소에 맞는 모델을 찾아줘' 라고 Model 한테 요청에 대한 결과 값을 찾도록 지시합니다.


즉, Model은 Controller의 요청에 따른 데이터를 찾아서 알맞은 데이터를 Controller 한테 보내줍니다.

'Controller야 너가 요청에 대한 데이터 여기있어!'

이때 Model 은 데이터베이스, 변수, 초기화 값 또는 이런 데이터를 가공하는 컴포넌트를 이야기합니다.


그럼 해당 데이터를 받은 Controller는 이것을 View에게 전달합니다.

'View야 여기 사용자가 요청한 데이터야!'


이렇게 해서 데이터를 받은 View는 실제로 사용자에게 시각적으로 http://doorbw.tistory.com/에 대한 화면을 응답으로 나타냅니다.


이것이 전체적인 MVC 패턴의 과정입니다.

우리는 그동안 HTML과 CSS, JavaScript를 공부하면서 시각적인 프론트엔드(Frontend)를 배웠습니다.

그리고 이제 Controller 와 Model에 대해서 배워 볼 것인데 이것을 Ruby on rails라는 프레임워크를 통해서 배워볼 것입니다.



3. Cloud9 이용하기



우리는 위에서 설명드린 Ruby on Rails 를 이용하기 위해 Cloud9 IDE 서비스를 이용합니다.

Cloud9 IDE 서비스는 간단하게, 가상컴퓨터, 가상환경을 제공해주는 서비스라고 생각하시면 됩니다.

우리의 노트북, 컴퓨터도 있는데 이런 서비스를 이용하는 이유는, Ruby on Rails가 윈도우환경에서는 설치하는 작업등이 약간 까다롭기 때문입니다.

그럼 Cloud9 에서는 쉽나요?

네, 쉽습니다. 우리가 Cloud9 IDE에서 하나의 가상환경을 만들때 Ruby on Rails 를 이용할 것이라고 명시해주면 Ruby on Rails를 이용할 수 있는 기본적인 환경을 다 셋팅해주기 때문에 매우 간편합니다.


그런데 작년기준으로 aws에서 Cloud9(이하 c9)을 인수하게 되어서 현재는 aws c9 과 기존 c9 두개의 서비스가 존재하고 있습니다.

기존 c9유저는 그대로 이용가능하나 신규가입은 불가합니다.

이와 다르게 aws c9은 신규가입이 가능하지만 워크스페이스를 1개 밖에 못만든다는 단점이 있습니다.


현재 멋쟁이사자처럼에서는 aws c9을 이용하여 수업을 진행하고 있는데, 저희 서울시립대학교 멋쟁이사자처럼에서는 기존의 c9을 이용합니다.

신규가입이 불가능하지만, 기존 유저가 c9에서 pro로 업그레이드하며 매달 결제를 하면 기존유저뿐 아니라 신규유저를 초대하여 함께 이용가능합니다.

따라서 본 포스팅에서는 기존 c9을 이용합니다.

(aws c9을 이용하시는 분들도 내용에 있어서는 차이가 없지만, 새롭게 워크스페이스를 만드는 것이 불가할 뿐입니다.)


현재 서울시립대학교 멋쟁이사자처럼 6기분들에게는 uos_likelion이라는 팀 이름으로 초대메일이 갔을 것입니다.

해당 메일을 확인하고 링크를 통해 c9에 가입하시길 바랍니다.


가입후에 아래와 같은 화면이 뜨게 됩니다.



좌측에 있는 파란색 목차중에 uoslikelion이라는 팀이 있는 걸 확인하세요.

(서울시립대 분들 중 해당 항목이 나타나지 않는 분들은 연락바랍니다.)


팀을 확인했으면, Workspaces에서 + 버튼을 눌러 새로운 워크스페이스를 만듭니다.



그리고 위의 내용처럼, 워크스페이스의 이름을 작성해주시고(주황색이 뜨면 안됩니다. 첫번째 글자는 숫자가 불가하다는 등의 규칙이 있습니다.) 그 아래 Team에서 uoslikelion을 선택하고, 아래 템플릿을 고르는 곳에서 Ruby를 선택해주시길 바랍니다.

이후 아래에 있는 초록색 버튼을 눌러 워크스페이스를 생성합니다.

약간의 시간이 소요될 수 있습니다.



워크스페이스가 생성되면 위와 같은 창이 뜨게 됩니다.

좌측에 보면 다양한 폴더와 파일들이 있을 텐데, 한번에 다 설명드리는 것보다 필요한 것들에 대해서 그때그때 설명드리려고 합니다.

이렇게 해서 Ruby on Rails 기반의 c9 워크스페이스 생성을 진행했습니다.



4. Ruby on Rails

    버전 확인 및 버전 변경


여러분께서 이용하시는 특정 프로그램에도 버전이 있듯이, Ruby on Rails 라는 프레임워크에도 당연히 버전이 있습니다.

그럼 방금 우리가 생성한 워크스페이스의 Ruby on Rails의 버전을 확인해보겠습니다.

워크스페이스에서 아래부분(기본적으로는 파란색)을 보시면 bash 라는 탭이 눌러져 있습니다.

해당 탭은, 우리가 윈도우에서 사용하는 cmd(맥에서는 터미널), 프롬프트와도 같은 것입니다. 여기에 특정 명령어들을 입력해서 몇가지 작업을 합니다.

bash 창이라는 이름을 기억해두시길 바래요.


이제 버전확인을 위해서 bash창에 아래와 같은 명령어를 입력합니다


rails -v



명령어를 입력하면 위와 같이 Rails 4.2.5 라고 버전을 알려줍니다.

(aws c9을 이용하시는 분들은 5.~ 버전이 나올 것입니다. 추가적인 버전 변경없이 그대로 사용하셔도 되고 버전변경 하셔도 상관없습니다.)


이제 이 Rails의 버전을 5.0.6 으로 올려야 합니다.

최신버전은 더 높지만, 현재 멋쟁이사자처럼 메인강의에서 5.0.6버전으로 진행하기때문에 해당 버전으로 올리도록 하겠습니다.


워크스페이스 좌측 폴더 및 파일 목록에서 Gemfile 이라는 파일을 더블클릭합니다.




그럼 위와 같은 코드가 작성된 파일이 열립니다.

여기서 5번째줄을 보시면 gem 'rails', '4.2.5' 라고 적혀있을텐데 이것을 위의 그림의 코드처럼 gem 'rails', '5.0.6' 으로 바꿉니다.

그리고 컨트롤+s (맥: 커맨드+s) 를 눌러서 저장합니다.

위 그림에서 탭칸쪽을 보시면 Gemfile이라는 파일 옆에 회색 동그라미가 보이는데 이것은 수정되었지만 저장되지 않았다를 표시해주는 것입니다.


저장을 하고 난 후에 bash 창에 아래와 같은 명령어를 입력합니다.


bundle update



해당 명령어를 입력하면 무언가 계속 진행됩니다.

약간의 시간이 소요되니 잠시 기다리면 됩니다.

기다리고 나서 다시 입력할 수 있는 상태가 되면 아래와 같이 버전을 확인해봅니다.



레일즈의 버전이 5.0.6으로 변경된 것을 확인할 수 있습니다.



5. Ruby on Rails 기초


이제 Ruby on Rails 의 기초를 배워보겠습니다.

우리가 위에서 MVC 패턴에 대해서 알아보았는데, 이제 직접 컨트롤러를 만들어보고 약간의 확인해보도록 하겠습니다.

컨트롤러를 만들때는 bash 창에 아래와 같은 명령어를 입력해서 만듭니다.


rails generate controller home index


위의 명령어는 home 이라는 이름을 가진 controller 를 생성하는 명령어입니다. 이때 home 은 단순히 컨트롤러의 이름이기 때문에 여러분들께서 편하신대로 설정하셔도 됩니다. 또한 그 뒤에 있는 index 를 함께 만들어주는 옵션입니다. index에 대해서는 추후 공부해볼 것이니 일단 그대로 써줍니다.



위와 같이 명령어를 입력하면 bash 창에서도 뭐가 막 생기는 걸 볼 수 있고, 실제로 좌측 목록에서도 새로운 파일이나 폴더들이 생긴것을 확인할 수 있습니다.

혹시 컨트롤러의 이름을 잘못 입력하거나 잘못 만들었다 하시는 분들은 어떻게 할까요?

새로생긴 파일들을 하나하나 찾아서 지우는 것이 아니라 하나의 명령어로 간단히 지울 수 있습니다.

만약 컨트롤러를 지우고 싶을땐 아래와 같은 명령어를 입력합니다.


rails destroy controller home index


물론 home은 여러분께서 지우고자 하는 컨트롤러의 이름입니다.


이제 실제로 컨트롤러를 약간 사용해보겠습니다.

좌측 목록에서 app > controller > home_controller.rb 파일을 더블클릭합니다.



위와 같이 class 와 def 가 쓰여진 코드를 확인할 수 있습니다.

해당 파일은, home이라는 컨트롤러에 대해서 진행할 작업을 코드로 작성해주는 곳입니다.

구체적으로는 추후에 천천히 배우도록 하고 간단하게 Controller 에서 view로 변수를 전달해보도록 하겠습니다.

아래와 같이 위의 파일에 코드를 작성합니다.



코드에서도 쓰였듯이, local_var 와 @global_var 라는 것을 만들고 문자열을 대입해주었습니다.

의미상으로 정확히 지역변수, 전역변수와는 좀 다르지만 이해를 위해 일단 저렇게 네이밍을 해보았습니다.

이때 두 변수의 차이가 있는데 view에서도 사용되는 변수라고 되있는 변수는 이름앞에 @ 가 붙어있습니다.

우리가 컨트롤러 내에서 자체적으로 변수를 사용하여 작업할 때도 있지만, 당연히 컨트롤러에서 나온 데이터를 view 로 넘겨줘야할 때도 있습니다.

이럴때 view 로 넘기고자 하는 변수의 이름 앞에 @ 를 붙여야 합니다.


그럼 @ 를 붙인 변수를 사용해보도록 하겠습니다.

app > view > home > index.html.erb 라는 파일을 더블클릭합니다.



해당 파일을 열면 1번과 2번 줄의 코드만 작성되어 있습니다.

우리가 그동안 학습했던, 익숙한 html의 코드입니다.

이제 여기에 우리가 아까 컨트롤러에서 넘긴 변수를 사용해 볼 것입니다.

다시한번 파일명을 보시면 단순히 .html 로 끝나는 것이 아니라 그 뒤에 .erb 라고 되어 있습니다. 해당 확장자는 html 파일에서 ruby 언어를 알아들을 수 있도록 하는 것입니다.

그럼 어떻게 ruby 언어를 사용할까요?

위 그림의 3번째 줄을 보시면 


<%= @global_var %>


와 같이 작성되어 있습니다. 이 처럼 ruby 언어를 사용하기 위해서는 

<%=  %> 로 작성하고자 하는 ruby 코드를 묶어줘야합니다.

또한 추후에 배울 반복문(for 등)을 사용하기 위해서는 약간 다른,

<% %>와 같은 구조를 사용하는데 이건 나중에 더 자세히 다뤄보도록 하겠습니다.

위의 그림처럼 3번째줄에 코드를 작성하고, 실제로 잘 나오는지 확인해보도록 하겠습니다.


워크스페이스의 상단을 보시면 run project 가 있습니다.

해당 버튼을 누르면 아래 bash가 있던 창에 새로운 탭이 열리며 아래와 같이 뜹니다.



해당 창은 실행되고 있는 우리의 웹페이지를 일시적으로 배포해준 것에 대한 창입니다.

해당 창을 확인해보시면, Your code is running at ~

이라는 부분의 주소를 클릭하여 open 을 누릅니다.

그리고 주황색의 무슨 창이 뜨시면, open app 을 누릅니다.

(안떠도 상관없습니다.)

그러면 아래와 같은 화면이 뜹니다.


여기서 주소창 맨뒤에, /home/index 를 입력합니다.

저같은 경우엔 

https://review-0408-doorbw.c9users.io/home/index

가 되겠습니다.

그럼 아래와 같은 페이지가 뜨게됩니다.


우리가 컨트롤러에서 넘겨서 html 파일에서 사용한 @global_var 가 정상적으로 출력되어야합니다.


여기서, 첫 화면에서 위의 화면이 뜨지 않고 home/index 를 입력해야 하는 것은 route 설정과 관련되어 있습니다.

이에 대해서는 추후에 공부해보도록 하겠습니다.



이렇게 해당 포스팅부터는 새로운 back-end에 대해서, 그 중에서도 ruby on rails 에 대한 시작을 하였습니다.

해당 포스팅과 관련이 없어도 궁금하거나 의문이 생기는 부분이 있다면 언제든지 댓글이나 이메일을 통해 질문해주시면 감사하겠습니다 :)

블로그 이미지

Tigercow.Door

Web Programming / Back-end / Database / AI / Algorithm / DeepLearning / etc

댓글을 달아 주세요


안녕하세요. 문범우입니다.

해당 포스팅은 서울시립대학교 멋쟁이사자처럼, 4월 1일 수업에 대한 내용입니다.


금일 수업에서는 그동안 진행했던 내용을 바탕으로 하나의 웹페이지를 그대로 따라 구현해보는 실습을 진행하였습니다.

따라서 해당 포스팅에 대한 순서는 아래와 같습니다.


- 지난 시간 복습

- 구현해 볼 웹 페이지 소개(HTML/CSS)

- Jquery 구현



1. 복습


지난 시간에는 주로 Jquery에 대해서 알아 보았습니다.

그 동안 html과 css로 구현한 웹 페이지는 정적인 형태였습니다.

이에 추가적으로 배워본 Jquery는 동적인 형태의 페이지를 구현하는데 사용됩니다.

예를 들어 메뉴 버튼에서 마우스를 가져간 항목의 글자가 더 찐해지거나 색상이 바뀌는 것, 무언가를 클릭했을 때 요소의 등장이나 사라짐등의 효과등을 구현합니다.


Jquery는 JavaScript기반의 라이브러리로써 우리가 단순히 JavaScript를 사용하여 동적인 페이지를 구현하는 것보다 더 간편하고 쉽게 동적인 페이지를 구현할 수 있도록 도와줍니다.

Jqeury에 대한 보다 자세한 내용은 지난 포스팅에 대한 내용을 참고하시길 바랍니다.

http://doorbw.tistory.com/119?category=697742



2. 구현해 볼 웹 페이지 소개(HTML/CSS)


이제 여러분들께서 그동안 배우고 공부해본 HTML과 CSS를 이용하여 하나의 페이지를 그대로 구현해 볼 것입니다.

Jquery를 이용해야 하는 부분도 있지만 그러한 것들은 잠시 내려두고 단순히 HTML과 CSS를 그대로 따라해봄으로써 우리가 웹페이지를 만들때 어떤식으로 구조를 잡아야하고 실제로 우리가 배운 속성들에 대해 연습해보는 경험이 될 것입니다.


우리가 보고 그대로 구현해 볼 웹 페이지는 아래와 같습니다.

http://themes.khaitawng.com/Regina/index.html


물론 처음 진행하시는 분들은 막막하고 어려울 수 있겠지만 그동안 배운 것들을 최대한 응용해보면서 구현하시면 가능할 것이라 생각됩니다.

서울시립대학교 멋쟁이사자처럼에서는 약 1시간30분동안 이것을 진행하였고 마처 완성하지 못한 부분은 과제로 진행하여 다음 수업까지 완성시켜서 오기로 하였습니다.


무작정 세부적으로 코드를 구현하는 것 보다는, div을 통해 구조를 잡으면서 필요한 class와 id를 적절히 선언해두고 전체적인 구조가 잡히면 하나씩 세부화시키는 연습이 필요합니다.


HTML과 CSS가 완료된 코드는 아래와 같습니다.

꼭! 미리 확인하기 보다 먼저 코드를 작성해보시길 바랍니다.




3. JQuery구현


꼭 위의 2번과정을 통해 HTML과 CSS를 완성시키고 JQuery를 구현하시길 바랍니다.

이번 내용에서 다루게 될 JQuery내용은 지난 시간 포스팅에서 진행했던 내용과 크게 차이점은 없습니다.


우리가 보고 따라한 페이지에서는 크게 두가지의 jQuery효과가 있을 것입니다.

하나는 메뉴에 마우스를 가져갔을 때 해당 메뉴의 글씨가 검정색으로 변하는 효과와, More out team-> 이라는 메인 문구에 마우스를 가져갔을 때 해당 div의 배경은 검정색, 글씨는 하얀색으로 변하는 효과입니다.

두 효과모두 지난 포스팅에서 배웠던 내용이고, 비슷하기 때문에 첫번째 효과에 대해서만 설명드리도록 하겠습니다.


먼저 script로 둘러 쌓인 태그 내에서 아래와 같은 코드로 JQuery 준비를 시작합니다.


$(document).ready(function(){


});


이제 해당 코드 내부에 JQuery를 구현합니다.

먼저 생각해볼 점은,

1. 메뉴는 원래 회색글씨 -> 기본 css에서 default로 지정되어야 하는 값

2. 마우스를 올리면 검정글씨 -> mouseover시 css 변경

3. 마우스가 내려가면 다시 회색글씨 -> mouseout시 css 변경

이렇게 됩니다.

1번은 기본 css에서 적절히 구현하셨을 거라 생각하기에 2번과 3번을 JQuery로 구현해보겠습니다.


2번에 대한 코드는 아래와 같습니다.


1
2
3
4
5
$(document).ready(function(){
    $('.about, .team, .work, .blog, .contact').mouseover(function(){
        $(this).css('color','black');
    });
});
cs


위와 같이 코드를 구현하면 웹페이지에 메뉴에 마우스를 올렸을 때 해당 메뉴의 글씨가 검정색으로 변하는 것을 확인할 수 있습니다.

위의 코드에서 this라는 것이 쓰였는데, this는 앞에 있는 요소들을 그대로 가져오는데 사용됩니다.

그리고 3번을 추가적으로 구현하면, 마우스가 해당 메뉴를 벗어났을 때 다시 메뉴의 글씨가 회색으로 변할 것입니다.

3번까지 구현된 코드는 아래와 같습니다.


1
2
3
4
5
6
7
8
$(document).ready(function(){
    $('.about, .team, .work, .blog, .contact').mouseover(function(){
        $(this).css('color','black');
    });
    $('.about, .team, .work, .blog, .contact').mouseout(function(){
        $(this).css('color','gray');
    });
});
cs


이렇게 해서 메뉴에 마우스를 가져갔을 때, 해당 메뉴의 글씨가 검정색으로 변하면서 highlight와 같은 효과를 구현할 수 있습니다.

또한 같은 효과를 다른 방식의 코드로써 구현할 수 있는데 이는 아래와 같습니다.


1
2
3
4
5
6
$(document).ready(function(){
    $('.about, .team, .work, .blog, .contact').hover(
        function(){$(this).css('color','black')},
        function(){$(this).css('color','gray')}
    );
});
cs


위에서는 hover라는 함수를 사용하여, mouseover와 mouseout을 동시에 지정할 수 있습니다.


이렇게해서 4월1일의 서울시립대학교 멋쟁이사자처럼에 대한 수업의 정리가 되었습니다.

해당 수업에서는 무언가 알려드리는 것보다, 여러분들께서 직접 구현해보고 코드를 작성해보시는 것이 중심이 되었습니다. 다른분들께서도 꼭 코드를 직접 구현해보시길 바랍니다.

블로그 이미지

Tigercow.Door

Web Programming / Back-end / Database / AI / Algorithm / DeepLearning / etc

댓글을 달아 주세요