백엔드 실습 로또 추천사이트 만들기

조코딩 - 백엔드의 개념과 로또 추천 사이트 만들기

영상: https://youtu.be/zpBzgV9DAeQ

이론 공부만 하기 지루해서 간단한 실습하려고 함. 백엔드 따라해보기로 했음.
루비온레일즈는 벡부터 프론트까지 한번에 있는 프레임 워크임.

MVC 패턴

컨트롤러: 클라이언트의 요청 받고 모델을 호출. 데이터를 모델에 전달 전 가공. 모델이 마친 업무 뷰에 전달
모델 : 요청에 맞는 역할 수행. 데이터처리. DB에 연결.
뷰: 컨트롤러에서 받은 모델의 결과 값을 가지고 출력 화면 만듬. 표시.

ref: https://asfirstalways.tistory.com/180

루비온 레일즈 사용해서 MVC 패턴 만들고

1. 개발환경 설정 - 구름IDE

구름 IDE - 클라우드 개발환경. 설치 필요 없음.
IDE : 통합 개발 환경
https://ide.goorm.io/

대시보드 > 새컨테이너 생성 : 개발할 수 있는 하나의 컴퓨터(작업공간) 생성하기. 루비온 레일즈로 생성하기. 생성 후 컨테이너 실행 -- 루비온 레일즈가 설치된 개발환경이 만들어짐

2. 컨트롤러 만들기

터미널에 컨트롤러 생성 명령어 및 이름 입력 + 엔터

rails g controller lotto

app - controller 에서 생성 확인 가능

3. 뷰 만들기

탐색기에서 app > views > lotto (lotto 컨트롤러와 연결된 뷰)
우클 - 새로만들기 - 파일

이름.html.erb

erb 는 루비 확장자

뷰 만들고 컨트롤러 파일에서

def index
	end

로 연결 시켜주고 저장

4. 라우터 설정

config - rounter.rb 라우터 파일열기

https://guides.rubyonrails.org/routing.html 라우터 규칙 참고
그대로 복사해서 사용함.

get '/patients/:id', to: 'patients#show'

get은 주소 창으로 접속했을 때 :
to : 컨트롤러와 뷰

입력 후 저장

실행 >>> 터미널 쪽에 주소창 나옴.
만든 rails 사이트에 들어갈 수 있음.

주소 뒤에 router 에 적어준 거로 가면 뷰에 입력한게 보임.

사이트 만들기

컨트롤러와 뷰 조작

컨트롤러에 @뒤에 변수 만들고 뷰에 <%= 변수 %> 하면 보임.

5. 로또 추첨 알고리즘 만들기

1 - 45 숫자 중 랜덤으로 6개 뽑기

구글에 ruby 언어 검색해서 필요한 코드 찾자!

컨트롤러

	def index
		@numbers = [*1..45]
		@lotto = @numbers.sample(6).sort
	end

뷰

<h1>
	<%= @lotto %>
</h1>

1. 변수에 숫자를 배열(숫자가 여러개니까)로 담기
2. 뽑는 코드
3. 숫자 정렬
4. 뷰에 보여질 변수 입력

6. 뷰 꾸미기

로또 공식 사이트처럼 숫자에 색 입히기

사이트 - 개발자 도구 에서 코드 가져다 쓰기 (선택도구로 css코드 가져오기)

뷰 파일에 그대로 붙여 넣기
Alt + Shift + p > 코드 정렬
해당 공 번호 대신 랜덤한 숫자 배열 중 []로 차례대로 가져오기

CSS 가져오기

개발자 도구 - 네트워크 - 새로고침 - css
공 색이 있는 css파일 전체 복사

rails폴더 중 app - assets - stylesheets - apllication.css 에 붙여넣기.

기타

bootstrap 등으로 꾸미려면

app - views - layouts 폴더 - application.html.erb

헤드 , 바디 테드 활용해서 꾸미기. 헤드 아래에 부트스트렙 임포트 하는 테그 넣으면 됨.

정리

구름 IDE : https://ide.goorm.io/

프로젝트 사이트 주소 : https://lotto-site-dxagq.run.goorm.io/gogo

프로젝트 코드

구조