728x90
반응형

지난 주 정리

 

제어문

 - 문장들이 실행되는 순서를 제어하는 문장을 제어문(Control Statement)라고 한다.

 

조건문의 중요성

- 만약 프로그램에 조건문이 없다면 프로그램은 항상 동일한 동작만을 되풀이 할 것이다.

 

3가지의 제어구조

- 순차구조

- 선택구조

- 반복구조

 

if - else

if 조건식 :
                문장 1
     else : 
                문장 2

- else는 없을 수도 있다.

- 파이썬에서는 들여쓰기가 아주 중요하다.

 

논리 연산자

연산 의미
x and y x와 y가 모두 TRUE여야 TRUE
x or y x와 y 중 하나만 TRUE 여도 TRUE
not x TRUE > FALSE, FALSE > TRUE 

 

중첩 if 문

if 문 안에 다른 if 문이 들어갈 수 있다.

연속되는 범위 안에서 값을 도출하려 할 때 사용.

 

반복의 중요성

우리들의 생활에서는 반복적인 작업들이 필요하다. 

반복적이고 단순한 작업은 컴퓨터를 이용하여 자동화 하면 된다.

 

반복의 종류

- 횟수 반복(for 문) : 정해진 횟수만큼 반복한다.

- 조건 반복(while 문) : 특정한 조건이 성립되는 동안 반복한다. 조건이 변경되는 로직이 안에 꼭 있어야 한다. 없으면 무한반복하기 때문이다.


지난 주) 예제 풀어보기

문제 : 콘테스트 평가
7명의 심판들의 점수를 입력받아 리스트에 저장하고 최소값과 최대값을 리스트에서 제거하는 프로그램을 작성해보자
제거 전 [10.0, 9.0, 8.3, 7.1, 3.0, 9.0]
제거 후 [9.0, 8.3, 7.1, 9.0]

 

내가 적어본 코드

score = [10.0, 9.0, 8.3, 7.1, 3.0, 9.0]
print(score)
score.remove(min(score))
score.remove(max(score))
print(score)

 

코드실행 결과


강사님이 알려주신 코드

- 점수를 직접 입력하여 리스트에 추가할 수 있도록 설정함 

- 점수가 숫자일 경우에만 입력가능하도록 설정함

- 점수가 실수일 경우에는 소숫점이 존재하기 때문에 숫자로 인식되지않아 오류가 날 수 있음. 그렇기 때문에 replace함수로 '.'을 삭하여 조건문을 실행시킴

- 최솟값과 최댓값을 제거한 리슽의 평균을 구할 수 있도록 로직을 구현함

scores = list()
count = 0
while count < 7:
    count += 1
    score = input(f'{count}번째 심사위원 점수를 입력하세요. : ')
    # 소수점 입력시 체크 확인
    if score.replace('.', '').isnumeric():
        scores.append(float(score))

print(scores, min(scores), max(scores))
min = min(scores)
max = max(scores)
scores.remove(min)
scores.remove(max)
print(f'최솟값과 최댓값을 제거한 리스트 : {scores}')
avg = sum(scores)/len(scores)
print(f'평균은 : {avg}입니다.')

 

코드 실행 결과


(3일차 이어서)

제어문

 

3. for

- 횟수 반복문
- 가장 많이 쓰임.
- 리스트/튜플/문자열의 요소의 갯수만큼 반복한다.
- for 변수 in 리스트/튜플/문자열: 실행문...

 

- continue, break, pass
     > continue : 해당 조건에서 그 루프가 끝나고 다음 루프로 넘어간다.



     > pass : 실행할 코드가 없는 것을 뜻함.(모두 다 실행하고 그 다음 루프로 넘어간다.)


   

 > break : 반복문 자체를 중단한다.


 - List에서 for 문 쓰기


- Dictionary에서 for 문 쓰기


- Tuple에서 for 문 쓰기


- 구구단 생성하기


4.  List Comprehension(List 내 for 문 쓰기)

- 리스트 안에 for문을 포함하여 한줄로 편하게 코드를 작성하는 문법.

- [표현식 for 항목 in 반복가능객체 if 조건문]


- 조건문이 여러개 들어갈 경우

     > [for 항목1 in 반복가능객체1 if 조건문1 for 항목2 in 반복가능객체2 if 조건문 2...]

 

 

5.  Dictionary Comprehension


- Dictionary Comprehension에서 zip으로 표현하기

728x90
반응형
728x90
반응형

변수

 

변수의 이름

- 의미 있는 이름을 사용한다.

- 소문자와 대문자는 서로 다르게 취급된다.

- 변수의 이름은 영문자와 숫자, 밑줄(_)로 이루어진다.

- 변수의 이름 중간에 공백이 들어가면 안 된다. 단어를 구분하려면 밑줄(_)을 사용한다.

- 파이썬의 예약어(파이썬이 사용하는 특수한 언어)를 변수로 사용할 수 없다.

 

변수 예시

- 올바른 예 : size, cloud9, max_size, _count- 올바르지 않은 예     >> 6pack : 숫자가 앞에 오면 안 된다.     >> mid score : 중간에 공백이 있으면 안 된다.     >> class : 예약어를 변수로 사용할 수 없다.     >> money# : 특수문자 사용할 수 없다.

 

낙타체낙타체는 변수의 첫 글자는 소문자로, 나머지 단어의 첫 글자는 대문자로 적는 방법이다. 예를 들어, myNewCar처럼 'm'은 소문자로, 나머지 단어들의 첫 글자는 대문자로 표기한다.

 

Python PEP

파이썬 코드를 어떻게 구상해야 할지 알려주는 스타일 가이드

https://peps.python.org/pep-0008/

 

PEP 8 – Style Guide for Python Code | peps.python.org

PEP 8 – Style Guide for Python Code Author: Guido van Rossum , Barry Warsaw , Alyssa Coghlan Status: Active Type: Process Created: 05-Jul-2001 Post-History: 05-Jul-2001, 01-Aug-2013 Table of Contents This document gives coding conventions for the Python

peps.python.org


(2일 차 이어서)

변수의 유형

 

5. 딕셔너리

- key : value 쌍이 모여있는 형태 => property 형식
- key : value 들을 {}로 감싼다.
- 변수명 = { 'key' : 'value', ... , 'keyX' : 'valueX'}
- key는 중복될 수 없다.

- 위치도 인덱싱이 되지 않는다.
- 사용 이유 : 데이터에 이름을 붙여 더욱 명시적으로 사용하기 위함

- 함수로 가져오고 싶은 key를 정확히 명시하지않고, key 이름에 오타가 나면 에러가 나지 않고 새로운 key로 생성 될 수 있으니 주의해야 한다.

- list를 key로 사용할 수 없다.

Key가 List로 올 수 없음을 보여주는 예


- 딕셔너리 생성해보기

딕셔너리 생성하기

 

5-1. 딕셔너리 함수

- keys() : 딕셔너리에 들어있는 key들을 반환

- values() : 딕셔너리에 들어있는 value들을 반환

- items() : key와 value를 tuple로 반환

- get(‘value를 알고 싶은 key’) : key에 대응하는 value를 반환

- zip(unpack의 반대) : tuple/list 두개를 하나의 딕셔너리로 변환

     >> a, b = (1, 2) 1, 2 로 묶는것을 zip 그 반대가 unpack

- del() : 메모리 상의 변수를 지우는 함수 (다른 변수에도 사용 가능)

del() 사용

 

# 파이썬의 반복문

 

# 파이썬은 변수를 정할 때 타입을 따로 정하지 않는다. 그래서 변수가 어떤 타입인지 잘 모를 경우 나중에 변수끼리 연산할 때 타입이 달라 오류가 난다. 그렇기 때문에 변수의 타입을 잘 알고 가는 것이 중요하다.

 

6. boolean

- 참 또는 거짓을 나타내는 자료형

- True, False처럼 첫 글자가 대문자여야 함

- True인 것들, False인 것들

 

7. 값 변수, 참조 변수

- 값 변수 :  기본 타입

- 참조 변수 : 기본 타입 이외의 것


- copy() : 값을 받아오는 변수가 참조 변수일 경우에도 copy()로 값을 받아오면 값 변수가 된다.

copy()로 값 변수 받아오기


- Python Tutor

언어가 동작되는 것을 시각화 해주는 사이트

https://pythontutor.com/

 

Online Python Tutor - visualize, debug, get AI help for Python, Java, C, C++, and JavaScript

Online Compiler, Visual Debugger, and AI Tutor for Python, Java, C, C++, and JavaScript Python Tutor helps you do programming homework assignments in Python, Java, C, C++, and JavaScript. It contains a unique step-by-step visual debugger and AI tutor to he

pythontutor.com

 

8. 집합(set)

- set([]) << 이런 식으로 선언

- 요소에 접근할 때 list()로 변환해서 인덱스로 접근한다.

- 순서가 없고, 중복이 없다.

 

8-1. 집합에 사용되는 연산

- 교집합 : intersection (&)
- 차집합 : difference (-)
- 합집합 : union (|)


제어문

 

1. if

- 참, 거짓에 따라 동작을 수행

- 들여쓰기를 잘 해야 해!

들여쓰기 잘못했을 시 발생하는 오류


- pass : 조건문은 있지만 실행할 문장이 없을 경우, 오류를 무시하기 위해서 if 문에 작성하여 조건문을 넘기는 기능


- 숫자에서 0 은 False이며  나머지 숫자는 True의 값을 갖는다.

 

2. while

- 조건이 True일 동안 무한히 반복한다.

- 조건에 대한 탈출문 꼭 적어야 한다.

- break : 탈출문을 안적었을 때 break를 사용해 강제로 종료한다.


- countinue : 조건에 해당하는 경우 그 값을 출력하지 않고 건너뛴다.

 

예제 풀어보기

문제

콘테스트 평가
7명의 심판들의 점수를 입력받아 리스트에 저장하고 최소값과 최대값을 리스트에서 제거하는 프로그램을 작성해보자
제거 전 [10.0, 9.0, 8.3, 7.1, 3.0, 9.0]
제거 후 [9.0, 8.3, 7.1, 9.0]

 

내가 적어본 코드

score = [10.0, 9.0, 8.3, 7.1, 3.0, 9.0]
print(score)
score.remove(min(score))
score.remove(max(score))
print(score)

 

코드실행 결과

정답은...!!

다음주에 공개 됩니다...!

728x90
반응형
728x90
반응형

들어가기 전  

 

PyCharm

PyCharm은 전문 개발자를 위한 전체 스택 Python 통합 개발 환경(IDE)이다. Python 개발, 전체 스택 웹 개발, 데이터 과학 등 모든 Python 워크플로우를 지원한다. 지능형 Python 및 R 코드 지원, Python 웹 개발 프레임워크, javaScript 및 TypeScript, HTML/CSS, 데이터베이스, Jupyter Notebook에 대한 광범위한 지원을 한다.

 

DataSpell

DataSpell은 탐색적 데이터 분석 및 머신 러닝 모델 프로토타이핑을 위해 특별히 설계된 IDE이다. Jupyter Notebook의 대화형 기능과 지능형 Python 및 R코딩 지원을 하나의 사용자 친화적인 환경에 결합했다.

지능적인 코딩 지원, 버전 관리 및 기타 IDE 관련 기능은 물론 데이터를 시각화하고 데이터에서 인사이트를 얻는 데 도움이 되는 테이블, 플록 및 위젯 같은 대화형 출력기능이 있다.

 

추천사이트

1. MDN

https://developer.mozilla.org/ko/

 

MDN Web Docs

The MDN Web Docs site provides information about Open Web technologies including HTML, CSS, and APIs for both Web sites and progressive web apps.

developer.mozilla.org

 

2. SDKMAN (Java 개발환경 관리 Tool)

JVM 기반 언어와 프레임워크를 쉽게 관리할 수 있게 해주는 도구. 이 도구를 사용하면, JDK, Groovy, Scala, Kotlin 등과 같은 JVM 기반의 언어와 Gradle, Maven 등의 빌드 도구를 손쉽게 설치하고 관리할 수 있도록 도와준다.

https://sdkman.io/

 

Home - SDKMAN! the Software Development Kit Manager

SDKMAN! is a tool for managing parallel versions of multiple Software Development Kits on most Unix based systems.

sdkman.io

 

Settings에서 세부설정 바꾸기

1. Font 변경

2. 각 주석들의 폰트 색상 변경

3. 테마

 

플러그인 옵션 추천

1. CodeGlance3 (코드 미니맵을 생성해주는 플러그인)

2. Tabnine AI Code Compieton (코드 자동 완성) - 유료

 

Run Time Data Areas

자바 가상 머신의 메모리 모델

자바 기술 문서 : https://docs.oracle.com/javase/specs/jvms/se11/html/jvms-2.html#jvms-2.5


Python

-Python에서는 들여쓰기Indent가 문법으로 여겨진다.

-파이썬은 세미콜론을 붙이지 않는다. 단, 세미콜론을 붙여도 문법 에러는 발생하지 않는다. 보통 한 줄에 여러 구문을 사용할 때 세미콜론으로 구분해준다.

-terminal 에서 pwd 검색 시 경로를, dir 검색 시 세부정보를 알려준다.

-실행 단축키 : Ctrl + Shift + F10

 

Jupyter Notebook

-단축키

ESC : 셀 선택 상태

M : Markdoum 모드로 변경

Y : Code 드로 변경

DD : 셀 삭제

Shift + Enter : 입력 셀 실행 후 아래 셀로 이동 (없으면 새로운 셀 추가)

Ctrl + Enter : 입력 셀 실행

Ctrl + Shift + Enter :  이전으로 돌아감

 

-상단 카테고리 변경 (Code/Markdown)

Code - 코드 작성

Markdown - 메모

Markdown 사용법

https://heropy.blog/2017/09/30/markdown/ 

 

MarkDown 사용법 총정리

마크다운(MarkDown)에 대해서 알고 계신가요?파일 확장자가 .md로 된 파일을 보셨나요?웹 개발을 하면서 아마 README.md라는 이름의 파일을 한 번은 보셨을텐데, ...

heropy.blog


Python

 

변수

#정의

- 데이터를 저장하고, 변하는 수
- 이름과 값으로 구성

# 변수는 왜 필요한가
- 데이터는 계속 변화하기 때문에, 데이터를 변수로 지정해 놓고 변수 값만 변경하면 된다.

# 변수 이름 규칙
- 영문자로 + 숫자 + underbar의 형식을 사용한다. ex) a, a1, a1_
- 공백이 있으면 안된다 
- 대소문자 구분한다
- 특수문자가 있으면 안된다

# 데이터의 종류
-숫자형 : 정수, 실수
-문자형 : 문자, 문자열
-복합형 : 클래스, 리스트, 딕셔너리

# print 함수
-기본 출력 장치로 결과를 출력
-print(변수 or 출력하고 싶은 결과물)

 

1. 숫자

- 숫자 형태로 이루어진 자료형

- 정수(int) : 1, 2, -1, 0

- 실수(float) : 1.11, -1.000, 10e5, 10e-5

 

1-1. 숫자 변수 예제

# 과일 가게의 총 매출
품목 :
    바나나 (1000원)
    사과 (500원)
    체리 (5000원)
    
고객  
손씨 : 사과 (2)
손씨 : 체리 (3)
김씨 : 사과 (4)
박씨 : 바나나 (1)
박씨 : 사과 (2)
박씨 : 체리 (1)

# 객단가(고객 1명당 평균 매출)를 구해보시오.
바나나 = 1000
사과 = 500 
체리 = 5000

손씨 = (사과 * 2) + (체리 * 3)
김씨 = 사과 * 4
박씨 = (바나나 * 1) + (사과 * 2) + (체리 * 1)
sum = 손씨 + 김씨 + 박씨
print('총 매출 : ', sum)
print('객 단가 : ', sum/3)

결과

총 매출 :  25000
객 단가 :  8333.333333333334

 

2. 문자

-문자 형태의 데이터

-" " 이용하거나 ' ' 로 감싸준다.

- 인덱싱

     >>슬라이싱 : 인덱스의 시작 ~ 끝(범위, 간격)을 지정하는 방법

- java에서 문자열 곱하기는 불가능했지만 파이썬에서는 가능하다

- 문자열 포맷 : 문자열 내에서 변수, 값 또는 표현식을 삽입하거나 형식을 지정하는 방법

 

2-1. 문자열 함수

- upper() : 대문자 바꾸기

- lower() : 소문자 바꾸기

- count() : 문자열 안의 특정 문자열 개수 반환

- join() : 특정 문자열을 기준으로 문자열을 삽입

- split() : 특정 문자열을 기준으로 문자열을 나눈다

- replace() : 특정 문자열을 지정 문자열로 반환

- strip() : 공백제고 (lstrip, rstrip)

- find() : 특정 문자열을 찾아준다

- input() : 기본 입력 장치로 부터 입력된 정보를 반환한다.변수 = input()의 형식으로 사용

 

3. 리스트

- 요소들의 모음을 나타내는 자료형

- 요소들은 []로 감싼다

- 모든 자료형을 담을 수 있다

- 리스트 연산

     >> + 연산자 : 순서대로 연결하여 하나의 리스트로 만든다
     >> * 연산자 : 곱하는 수 만큼 반복하여 하나의 리스트로 만든다

 

3-1. 리스트 함수

- len() : 리스트의 길이를 반환
- sum(), min(), max() 함수 : 리스트 요소의 총합, 최솟값, 최댓값 (문자의 경우도 코드가 있기 때문에 코드가 가장 작은 값, 큰 값 반환)
- in() : 특정 요소가 리스트에 있는지 확인하는 함수
- append() :  맨 마지막에 요소 추가
- extend() :  맨 마지막에 다른 리스트를 추가
- insert() : 특정 위치에 요소를 삽입한다
- remove(), pop() : 리스트의 요소를 삭제
- join() : 리스트의 요소들을 하나의 문자열로 합침
- split() : 문자열 리스트의 요소들로 나눈다

- range() : range(시작, 끝, 간격)을 리스트로 반환해준다.

 

4. 튜플

- 리스트와 같다
- 수정 불가능 (불변성)
- 리스트보다 빠르다
- []가 아닌 () 사용
- append, insert, extend, remove, pop, sort 사용할 수 없다
- 튜플은 항목 할당을 지원하지 않는다. 즉, 대입 연산자가 먹히지 않는다.

 

728x90
반응형
728x90
반응형

 미니 프로젝트로 만드는 웹 페이지에 이것저것 추가하다가 날씨 정보를 불러오고 싶었다. 다양한 방법을 찾아보다 날씨 정보를 무료 API로 받아 올 수 있는 Open Weather 사이트를 이용해 보았다.

https://openweathermap.org/

 

Сurrent weather and forecast - OpenWeatherMap

Access current weather data for any location on Earth including over 200,000 cities! The data is frequently updated based on the global and local weather models, satellites, radars and a vast network of weather stations. how to obtain APIs (subscriptions w

openweathermap.org

 

날씨 API를 받아오는 방법

1.Key 발급

해당 사이트 로그인 후 나의 계정 My API Keys에 들어가면 발급 된 Key가 보일 것이다. (Key는 따로 메모해둔다)

 

2. Current Weather Data

상단 카테고리 중 API 로 들어간다. 아래로 내려가면 Current Weather Data가 보일 것이다. 아래 API doc을 클릭한다.

 

3. Json 호출

API doc에 들어가서 아래로 내려가다 보면 아래와 같은 링크가 있다.

https://api.openweathermap.org/data/2.5/weather?q={city name}&appid={API key}

 

{city name}에 날씨를 알고 싶은 도시(ex. seoul, london 등) 를 넣고 {API key]에는 자신의 key(1번 내용)를 넣어서 주소를 입력하면 Json형식으로 현재의 날씨정보을 알려준다.

 

날씨 API 활용

 받아온 날씨 API를 이용해 날씨를 검색해 볼 수 있는 웹을 구현해 보았다. 도시명을 입력하면 기본값인 Gwangju 옆으로 검색한 도시의 날씨가 보여진다.

728x90
반응형
728x90
반응형

개요

 

컴퓨터의 구성

1. 중앙처리장치(CPU: Central Processing Unit) - 산술/논리 연산, 흐름제어

2. 주기억장치(Memory)-임시저장소

3. 보조기억장치(Secondary storage)

4. 다양한 입/출력 장치(input/output(I/O) device) -HDD, SSD 등 데이터소스, 영구 저장소

컴퓨터에서 가장 중요한 부품인 CPU가 담당하는 기능
→계산기 능력과 순서를 제어하는 중앙 처리 장치
1개의 CPU(Core)안에
레지스터(임시저장) + ALU(산술/연산 유닛) + CU(흐름제어 유닛)

 

▶ALU는 계산기. 계산만을 위해 존재. 컴퓨터 내부에서 수행되는 대부분의 계산은 ALU가 수행

▶ 레지스터는 CPU 내부의 임시 저장 장치. 프로그램을 실행하는 데 필요한 값들을 임시로 저장. CPU 안에는 여러 개의 레지스터가 존재하고 각기 다른 이름과 역할을 함.

▶ 제어장치는 제어 신호라는 전기 신호(컴퓨터 부품들을 관리하고 작동시키기 위한 일종의 전기 신호)를 내보내고 명령어를 해석하는 장치.


컴퓨터 언어

Code

어셈블리어(문자코드, 의사코드): 어셈블리어는 기계어에 비해 사람이 이해하기 쉬운 저수준 프로그래밍 언어. 어셈블리어는 특정 컴퓨터 아키텍처에 대한 기계어 명령어를 기호화하여 표현한다.

기계어(숫자코드, 실행코드): 기계어는 컴퓨터가 직접 이해하고 실행하는 프로그래밍 언어. 이진 코드로 표현되며, 각각의 명령어와 데이터를 특정 비트와 바이트의 패턴으로 나타낸다.

 

*전달하고 해석할 때 동일한 코드를 사용하는 것이 무엇보다 중요하다.

 

알파벳을 위한 약속: 아스키 코드

ABC를 0과 1로 표현하는 방법 

ex) cmd에서 Alt+65를 치면 A가 입력됨

 

                                 인코딩(Encoding) →

사람의 언어                 번역: 컴파일러                   컴퓨터 언어

                                 ←디코딩(Decoding)

 

모든 언어를 위한 코드: 유니코드

16bit 사용

아스키코드 + 전 세계 언어에 대한 코드

 

프로그래밍 언어

사람이 알아볼 수 있는 언어로 작성하면 이것을 기계어로 번역해서 컴퓨터에게 알려주는 도구

기계어 < 어셈블리어 < 하이레벨 언어 < C언어 자바 파이썬 등

 

기계마다 다른 기계어

각각의 제작사에서 만드는 중앙처리장치는 저마다 특성이 다르기 때문에, 서로의 기계어가 다르다. 그래서 기계어에 관해서 이야기할 때는 반드시 적용되는 기준 기계를 함께 표시해 준다.

같은 프로그래밍 언어라도 기계가 다르면 (예를 들어, 윈도우 pc와 맥 pc) 컴파일러가 서로 달라야 하기 때문이다.

 

컴퓨터 언어 번역기: 컴파일러

사람이 알아볼 수 있는 단어로 작성된 언어를 컴퓨터가 이해하는 언어로 변환하는 작업을 컴파일 Complie이라고 한다.

컴파일 언어로 만든 프로그램을 실행하는 방법

complie install run excute

 

스크립트 언어 (vs 컴파일 언어)

자바스크립트와 파이썬의 코드는 1줄

이 두 언어는 스크립트 언어이기 때문

 

스크립트 언어: 스크립트 언어는 인터프리터를 사용하여 소스 코드를 런타임 중에 해석하고 실행한다. 이것은 소스 코드를 기계어로 변환하는 별도의 컴파일 단계가 없음을 의미한다. (ex. Python, JavaScript, Ruby, PHP 등)

컴파일 언어: 컴파일 언어는 소스 코드를 컴파일러를 사용하여 기계 코드로 먼저 변환한 다음 실행한다. 이것은 실행 전에 미리 컴파일 단계가 필요다. (ex. C, C++, Java, C# 등)

 

 


파이썬 소개

 

컴퓨터 시스템의 발전

1. 컴퓨터와 4차 산업혁명

-컴퓨터의 발전

-1946년 애니악

     #컴퓨터의 다양한 활용분야

     -범용기계

     -튜링 머신의 개념(1937년 알란 튜링)

     -인간 두뇌와 컴퓨터(마이크로 프로세서 칩)의 비교

2. 정보 통신과 네트워크

-컴푸터 네트워크의 중요성

-다양한 컴퓨터 네트워크

3.인터넷과 초연결사회

-인터넷의 개념과 발전

-인터넷 서비스의 발전 역사

     >>초기 정보검색 수단

     >>'인터넷 경제' 시대의 도래

 4. 웹의 출현

-1989년 스위스 CREN 연구소의 팀 버너스리

5.초연결사회로 변화

-초연결사회

     >>인터넷, 사물인터넷, 센서의 발달

 

소프트웨어의 중요성

-무어의 법칙: 마이크로프로세서 칩의 성능은 18개월 마다 두 배씩 증가한다.

-소프트웨어의 생산성

-하드웨어의 비용이 급격히 감소, 소프트웨어의 비용은 매우 빠르게 증가

>>인공지능, 빅데이터 분석, 사물인터넷, 자율주행 자동차, 모바일 컴퓨팅의 핵심 기술은 소프트 웨어(즉, 알고리즘)

 

프로그래밍 언어의 발전

 -프로그래밍 언어의 역사

     >> 4가지 패러다임: 절차적 언어, 객체지향 언어, 선언적 언어, 함수형 언어

-절차적 언어와 객체지향 프로그래밍 언어

 

컴파일러와 인터프리터

-기계어와 고수준 언어

     >>기계어: 하드웨어에서 자료 표현의 기본 단위인 비트값 0과 1로 표현

-컴파일러: 고수준 언어로 작성된 프로그램을 특정 CPU의 기계어로 번역

-인터프리터: 미리 번역해두는 것이 아니고 프로그램이 실행 될때 한문장 씩 기계어로 해석

 

파이썬의 철학과 특징

-파이썬의 철학

1991년 네덜란드의 귀도 반 로썸

쓰기 쉽고 이해하기 쉬운 프로그래밍 언어로 개발

 

Python

장점: 단순성, 오픈소스 언어, high-level 언어, interpreted, 객체지향적, 가독성, 간결한 언어

제약점: C, C++, Java에 비해여 실행 속도가 늦다

 

인공지능, 빅데이터 분석, 딥러닝, 컴퓨터 비전 영역의 다양한 외부 라이브러리 모듈의 지원으로 파이썬이 많이 이용되고 있다.

사이킷-런, 텐서플로우, 아파치 스파크, 파이토치 등 성능도 뛰어나며 많이 사용되는 머신러닝, 딥러닝 프레임워크들이 파이썬으로 접근이 가능하다.

 

파이썬은 어디에 작성하는가?

텍스트 에디터와 대화형 인터프리

VS Code, PyCharm, Jupyter Notebook, Colaboratory 등

 

문제 해결 방법론

-폴야의 문제 해결과정

1. 주어진 문제의 이해

2. 문제를 풀기위한 구체적 방법 > 알고리즘

3. 찾은 방법에 따라 실현 > 프로그램

4. 신뢰성 검증

 

알고리즘의 중요성

컴퓨터과학은 알고리즘에 관한 공부

 알고리즘은 컴퓨터과학에서 가장 중요한 개념이며 핵심 주제

 

소프트웨어와 알고리즘

알고리즘의 실현

-'잘 정의된 기본 절차(Well-defined Primitives)'들을 이용

-잘 정의된 기본 절차는 어떤 시스템을 만드는 '빌딩 블록'

-기본절차: 소프트웨어 개발에서 기본 절차는 프로그래밍 언어


 

추천 사이트

 

1. 타이핑 연습

https://www.speedcoder.net/

 

Typing Practice for Programmers | SpeedCoder

 

www.speedcoder.net

2. 프로그래밍에 대한 Q&A

https://stackoverflow.com/ 

 

Stack Overflow - Where Developers Learn, Share, & Build Careers

Stack Overflow | The World’s Largest Online Community for Developers

stackoverflow.com

3. 번역  

https://www.deepl.com/

 

DEEP

engineering wonder Making Humans Aquatic DEEP exists to radically advance how humankind can access, explore and inhabit underwater environments. Through flexible, modular subsea habitats, work-class submarines, and advanced human performance research, DEEP

www.deep.com

 


Python 설치 

 

1. Data Spell

https://www.jetbrains.com/  

 

JetBrains: Essential tools for software developers and teams

JetBrains is a cutting-edge software vendor specializing in the creation of intelligent development tools, including IntelliJ IDEA – the leading Java IDE, and the Kotlin programming language.

www.jetbrains.com

DataSpell에서 편의성 향상을 위해 설치할 옵션

Indent Rainbow (들여쓰기)

Key Promotor X (단축키 알려주는 옵션)

Material Theme Ul

Rainbow brackets

https://github.com/naver/d2codingfont 에서 글꼴 다운 받고 Dataspell 시스템 설정 내에서 적용

 

2. 파이썬 인터프리터 (필요한 라이브러리 제공)

설치 시 PC에 Microsoft Visual C++ Redistributable 설치 여부 확인

https://www.anaconda.com/  

 

Anaconda | The World’s Most Popular Data Science Platform

Anaconda is the birthplace of Python data science. We are a movement of data scientists, data-driven enterprises, and open source communities.

www.anaconda.com

 

아나콘다 설치 후 시스템 환경 변수 확인

 

※ 아나콘다 설치 시 아래 내용에 체크 해야 path에 아나콘다가 환경 변수로 들어온다.

  설치가 완료되면 Git Bash를 통해 설치된 경로와 버전을 확인 할 수 있다.

728x90
반응형
728x90
반응형

 미니 게임 만들기

 

목차

1. 게임에 대한 간단한 설명

2. 게임 실행 영상

3. 주요 코드

4. 어려웠던 점

 

1. 게임에 대한 간단한 설명

프로젝트의 일부분으로 미디어 카테고리에 전기차를 주제로 게임을 만들어보았다.

 해당 페이지에 들어오면 본 게임 시작 전에 미니 게임이 진행된다. 키보드를 이용해 지도 위에 있는 전기차를 이동시켜 주유소에 도달하면 본 게임으로 들어가게 된다. 

 본 게임은 스페이스바를 눌러 다가오는 장애물을 점프로 피해 목적지에 도달하는 게임이다. 목적지인 주유소는 Score가 150점에 도달하면 화면상에 나타나게 해 놓았고 주유소에 도달하면 게임 성공에 관련 된 모달이 뜬다. 성공 모달에서 찌리릿 코인을 받을 수 있으며 이 코인을 10개 모으면 쿠폰으로 교환할 수 있도록 다른 카테고리에 구현해 놓았다. 

 게임은 여러번 할 수 있지만 코인은 하루에 1개만 수집할 수 있도록 설정해 두었으며 게임을 진행하다 목적지에 도달하기 전에 장애물에 부딪히면 게임 실패에 관련 된 모달이 뜨고 실패 모달에서 다시하기 버튼을 눌러 게임을 다시 실행할 수 있다. 

 

2. 게임 실행 영상

3. 주요 코드

3 - 1. 게임 화면을 구성한 Html

    <!-- 게임 화면 -->
    <div class="game-wrap">
        <div class="bakcground">
            <div class="ground"></div>
            <a th:href="@{/home}">
                <div class="sun" th:style="'background-image:url(' + @{/eco-house.png} + ')'"></div>
            </a>
        </div>
        <div class="score">
            <p>SCORE</p>
            <span></span>
        </div>
        <canvas id="canvas" height="200"></canvas>
    </div>
    <!-- 안내 -->
    <h3 class="info">SPACE BAR로 JUMP 하세요! <br> 주유소에 도달하면 코인이 지급됩니다.</h3>
    <!-- 성공/실패 모달 -->
    <div class="game-over">
        <div class="pop-up">
            <img class="game-over-img" th:src="@{/link.png}" alt="게임오버" />
            <h2>충전소를 찾지 못했다!</h2>
            <p><span class="total-score"></span> 점</p>
            <button class="replay">다시하기</button>
            <button class="home">홈으로</button>
            <button class="get-coins" style="display: none;">찌리릿 코인 받기</button>
        </div>
    </div>

3 - 2. 관련 CSS 

본 게임 배경에 나오는 폭죽은 아래 링크에서 사용한 방법을 프로젝트 html에 적용 하였다.

https://mzero.tistory.com/13

 

Tistory에 마우스 애니메이션 효과 적용하는 방법

현재 나의 Tistory에 들어오면 마우스 움직임에 따라 애니메이션 효과가 따라 오는 걸 볼 수 있다. Tistory 외에도 자신이 만든 웹 사이트에서 마우스 커서에 효과를 넣을 수 있다. 1. 관련 사이트 먼

mzero.tistory.com

<style>
	.game-wrap {
        background-color: #000;
        position: relative;
        width: 100%;
        height: 100%;
    }

    .sun {
        position: absolute;
        top: 10px;
        right: 20px;
        width: 5rem;
        height: 5rem;
        background-image: url("/src/main/resources/static/der.png");
        background-size: cover;
        animation: rotate 5s linear infinite;
    }

    @keyframes rotate {
        to {
            rotate: 1turn;
        }
    }

    .ground {
        position: absolute;
        bottom: 0.8rem;
        left: 0;
        width: 100%;
        height: 0.2rem;
        background: #fff;
        z-index: 0;
    }

    .score {
        color: #fff;
        display: flex;
        gap: 6px;
        position: absolute;
        top: 8px;
        left: 0;
        font-size: 1.5rem;
    }

    .info {
        color: #fff;
        width: fit-content;
        margin: 0 auto;
        padding: 10px;
        border: 4px solid;
        border-radius: 8px;
        text-align: center;
        cursor: default;
    }

    #canvas {
        margin-top: 12rem;
        position: relative;
        z-index: 1;
    }

    .game-over {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.4);
        z-index: 10;
    }

    .game-over .pop-up {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 8px;
        align-items: center;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        max-width: 400px;
        width: 100%;
        height: fit-content;
        padding: 40px 0 32px;
        background-color: #fff;
    }

    .game-over .pop-up .replay {
        padding: 4px 8px;
        margin-top: 8px;
        border: 3px solid #191919;
        border-radius: 4px;
        background-color: #fff;
        font-size: 1.5rem;
        font-weight: bold;
        cursor: pointer;
    }

    .game-over .pop-up .home {
        padding: 4px 8px;
        margin-top: 8px;
        border: 3px solid #191919;
        border-radius: 4px;
        background-color: #fff;
        font-size: 1.5rem;
        font-weight: bold;
        cursor: pointer;
    }

    .game-over .pop-up .get-coins {
        padding: 4px 8px;
        margin-top: 8px;
        border: 3px solid #191919;
        border-radius: 4px;
        background-color: #fff;
        font-size: 1.5rem;
        font-weight: bold;
        cursor: pointer;
    }

    @media (max-width: 420px) {
        .game-over .pop-up {
            max-width: 300px;
        }
    }

    .game-over-img {
        width: 20rem;
        height: 20rem;
    }
</style>

3 - 3. 화면 구성과 관련된 Java Script

  • 본 게임 화면 우측 상단에 회전하는 집을 클릭하면 "/home" 경로로 이동하도록 이벤트 리스너를 설정하였다 .
  • let canvaslet ctx 부분은 게임 화면을 렌더링하는데 사용할 Canvas 요소와 2D Context를 가져온다.
  • electricCar 객체는 전기 자동차의 속성과 동작을 정의하고 있다. x, y는 자동차의 위치, widthheight는 자동차 이미지의 크기를 나타낸다. draw, jump, fall 메서드를 통해 자동차를 그리고, 점프와 낙하 동작을 처리하였다.
  • Box 클래스는 장애물을 나타낸다. draw 메서드를 통해 장애물을 생성하는데, 장애물의 위치는 화면 오른쪽 끝에서 시작하며 이미지는 장애물 이미지는 2개를 넣어 랜덤으로 번갈아 나오게 설정하였다.
	<script>
		const homeButton = document.querySelector(".home");
        homeButton.addEventListener("click", function () {
            window.location.href = "/home";
        });

        let canvas = document.getElementById("canvas");
        let ctx = canvas.getContext("2d");
        let currentCar = 0;
        canvas.width = window.innerWidth;

        var carImages = new Image();
        carImages.src = "/cargame.png";

		//전기차
        let electricCar = {
            x: 20,
            y: 50,
            width: 80,
            height: 80,
            draw() {
                ctx.drawImage(
                    carImages,
                    this.x,
                    this.y,
                    this.width,
                    this.height
                );
            },
            jump() {
                if (this.y > 40) {
                    this.y -= 60;
                }
            },
            fall() {
                if (this.y < 120) {
                    this.y += 10;
                }
            },
        };

        // 장애물
        var boxImages = [new Image(), new Image()];
        boxImages[0].src = "/pong.png";
        boxImages[1].src = "/pong2.png";

        class Box {
            constructor() {
                this.width = 40;
                this.height = 40;
                this.x = canvas.width - this.width;
                this.y = 155;

                // 장애물 이미지 선택
                const randomImageIndex = Math.floor(Math.random() * boxImages.length);
                this.image = boxImages[randomImageIndex];
            }
            draw() {
                ctx.drawImage(this.image, this.x, this.y, this.width, this.height);
            }
        }
        
         // spaceBar
        var jumpSwitch = false;
        let lastSpacePressTime = 0;

        document.addEventListener("keydown", function (e) {
            if (e.code === "Space") {
                const currentTime = Date.now();
                const timeSinceLastPress = currentTime - lastSpacePressTime;

                if (timeSinceLastPress > 500) {
                    jumpSwitch = true;
                    lastSpacePressTime = currentTime;
                }
            }
        });
	</script>

3 - 4. 장애물, 도착지 생성 및 Score 관련 Java Script

  • Destination 클래스에서는 도착지의 속성과 초기 위치를 설정하고, 도착지가 다른 장애물들과 충돌하지 않도록 확인하도록 하였다. 만약 충돌이 발생하면 새로운 도착지를 생성한다.
  • createBox 함수는 장애물을 생성하고, 생성된 장애물이 다른 장애물이나 도착지와 충돌하지 않게 하였다. 만약 충돌이 있으면 다시 호출되어 장애물을 다시 생성하게 된다
  • updateScore 함수는 Score를 1씩 증가시키고, 게임화면 좌측 상단에 있는 Score를 업데이트한다.
	<script>
        // 도착지 이미지 로드
        let destinationImage = new Image();
        destinationImage.src = "/link.png";

        class Destination {
            constructor() {
                this.width = 100;
                this.height = 100;
                this.x = canvas.width - this.width; // 장애물과 동일한 위치에서 시작
                this.y = 95;

                // 새로 생성한 도착지와 다른 장애물들과의 충돌 확인
                let isCollision = manyBoxes.some(existingBox => {
                    return (
                        this.x < existingBox.x + existingBox.width &&
                        this.x + this.width > existingBox.x
                    );
                });

                // 충돌이 있으면 다시 생성 시도
                if (isCollision) {
                    return new Destination();
                }
            }

            draw() {
                ctx.drawImage(destinationImage, this.x, this.y, this.width, this.height);
            }
        }

        let manyBoxes = [];
        let destination;

        // 장애물 생성 함수
        function createBox() {
            let box = new Box();

            // 새로 생성한 장애물과 다른 장애물들 및 도착지와의 충돌 확인
            let isCollisionWithOtherBoxes = manyBoxes.some(existingBox => {
                return (
                    box.x < existingBox.x + existingBox.width &&
                    box.x + box.width > existingBox.x
                );
            });

            let isCollisionWithDestination =
                destination &&
                box.x < destination.x + destination.width &&
                box.x + box.width > destination.x;

            // 충돌이 없으면 배열에 추가, 있으면 다시 생성 시도.
            if (!isCollisionWithOtherBoxes && !isCollisionWithDestination) {
                manyBoxes.push(box);
            } else {
                createBox();  // 다시 생성 시도.
            }
        }
        
        // score
        let score = 0;
        let scoreInterval;

        function updateScore() {
            score += 1;
            document.querySelector(".score span").textContent = score;
        }
	</script>

3 - 5. 게임 진행시 반복적으로 실행되는 게임 Frame 관련 Java Script

    • requestAnimationFrame(frameRun)은 브라우저에게 다음 프레임에서 frameRun 함수를 호출하도록 요청하는 함수로 이를 통해 게임 루프가 지속적으로 실행한다.
    • if (timer % 10 === 0) 은 매 10프레임마다 스코어를 업데이트한다.
    • if (Math.random() < 0.005) 부분은 게임에서 무작위로 장애물을 생성하기 위한 확률적인 조건을 나타낸다. Math.random() 함수는 0 이상 1 미만의 값을 반환한다. 즉, 매 프레임에서 Math.random() 함수를 호출하여 0 이상 1 미만의 난수를 생성하고, 이 값이 0.005 미만일 때에만 실행된다. 이렇게 함으로써 매 프레임마다 장애물을 생성할 확률을 매우 낮게 만들고, 게임이 무작위로 장애물을 생성할 수 있다.
    • if (score == 150 && !isDestinationVisible) 은 도착지 생성 조건을 나타내고 있다. score가 150점 일 때 도착지를 생성하여 화면상에 나타나도록 설정하였다.
    • if (isDestinationVisible) 은 도착지가 화면에 표시되는 경우 실행되어 도착지의 위치를 업데이트하고, 플레이어가 도착지에 도달하면 게임이 성공으로 처리됩니다.
	<script>
    	let isDestinationVisible = false;
    	let timer = 0;
        let jumpTimer = 0;
        let animation;

        // 프레임마다 실행하기
        function frameRun() {
            animation = requestAnimationFrame(frameRun);
            timer++;
            ctx.clearRect(0, 0, canvas.width, canvas.height);

            // score 처리
            if (timer % 10 === 0) {
                updateScore();
            }
            
            // 무작위로 장애물 소환
            if (Math.random() < 0.005) {
                createBox();
            }

            // 도착지 생성 조건
            if (score == 150 && !isDestinationVisible) {
                isDestinationVisible = true;
                destination = new Destination();
            }

            if (isDestinationVisible) {
                destination.x -= 2;
                destination.draw();

                // 도착지에 도달하면 성공 처리
                if (electricCar.x + electricCar.width >= destination.x && electricCar.y + electricCar.height >= destination.y &&
                    electricCar.x <= destination.x + destination.width && electricCar.y <= destination.y + destination.height) {
                    showGameSuccess();
                    cancelAnimationFrame(animation);
                    clearInterval(scoreInterval);
                    return;
                }
            }

            // x좌표가 0미만이면 제거
            manyBoxes.forEach((a, i, o) => {
                if (a.x < 5) {
                    o.splice(i, 1);
                }
                a.x -= 2;
                // 충돌 체크
                crash(electricCar, a);
                a.draw();
            });

            // 점프!
            if (jumpSwitch == true) {
                electricCar.jump();
                jumpTimer++;
            }
            if (jumpSwitch == false) {
                if (electricCar.y < 120) {
                    electricCar.y++;
                }
            }
            if (jumpTimer > 40) {
                jumpSwitch = false;
                jumpTimer = 0;
            }
            electricCar.draw();
        }
	</script>

3 - 6. 충돌확인과 게임리셋 Java Script

	<script>
	// 충돌확인
        function crash(electricCar, box) {
            let xCalculate = box.x - (electricCar.x + electricCar.width);
            let yCalculate = box.y - (electricCar.y + electricCar.height);
            if (xCalculate < 0 && yCalculate < 0) {
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                cancelAnimationFrame(animation);
                clearInterval(scoreInterval);
                const totalScore = document.querySelector(".total-score");
                totalScore.textContent = `${score}`;
                const sun = document.querySelector(".sun");
                const gameOver = document.querySelector(".game-over");
                sun.style.animationPlayState = "paused";
                gameOver.style.display = "block";
            }
        }
        
        // 리셋 버튼
        const replayBtn = document.querySelector(".replay");
        replayBtn.addEventListener("click", () => {
            resetGame();
        });

        // 게임리셋
        function resetGame() {
            cancelAnimationFrame(animation);
            clearInterval(scoreInterval);
            score = 0;
            document.querySelector(".score span").textContent = score;
            manyBoxes = [];
            currentCar = 0;
            jumpSwitch = false;
            lastSpacePressTime = 0;

            isDestinationVisible = false;
            destination = null;

            frameRun();

            const sun = document.querySelector(".sun");
            const gameOver = document.querySelector(".game-over");
            sun.style.animationPlayState = "running";
            gameOver.style.display = "none";

            // 스코어 인터벌 제거
            if (scoreInterval) {
                clearInterval(scoreInterval);
            }
            
            // 스코어 인터벌 다시시작
            scoreInterval = setInterval(updateScore, 2000);
        }
</script>

3 - 7. 게임 성공 시 뜨는 모달 Java Script

	<script>
    	// 도착지에 도달하면 게임 성공 팝업 표시
        function showGameSuccess() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            cancelAnimationFrame(animation);
            clearInterval(scoreInterval);

            const totalScore = document.querySelector(".total-score");
            totalScore.textContent = `${score}`;

            const sun = document.querySelector(".sun");
            const gameSuccess = document.querySelector(".game-over");

            sun.style.animationPlayState = "paused";
            gameSuccess.style.display = "block";

            let gameOverMsgElement = document.querySelector('.game-over .pop-up h2');
            gameOverMsgElement.textContent = '충전소에 도착했습니다!';

            const getCoinsButton = document.querySelector(".get-coins");
            getCoinsButton.style.display = "block"; // 버튼 표시

            getCoinsButton.addEventListener("click", async function () {
                const response = await fetch("/getCoins", {
                    method: "GET",
                });

                if (response.ok) {
                    const message = await response.text();
                    alert(message);
                    // 필요하다면 이후에 페이지를 새로고침하거나 다른 동작을 수행하세요.
                } else {
                    console.error("찌리릿 코인을 받는 중 오류가 발생했습니다: " + response.status);
                }
            });

            // "다시하기" 버튼을 숨깁니다.
            const replayButton = document.querySelector(".replay");
            replayButton.style.display = "none";
        }

	</script>

 

4. 어려웠던 점

 구현하는데 가장 시간이 오래 걸렸던 기능은 장애물이 생성되는 시간과 간격을 조절 하는 것이었다. 0.001초 단위로 장애물 생성의 변화가 크게 달라지다보니 적당한 시간을 찾기가 어려웠다.

 또한 게임을 하다보면 목적지와 장애물이 겹쳐나오거나 목적지를 지나치는 변수가 발생했다. 그래서 처음에 도착지를 지나치면 그 다음 설정한 점수에 도달했을 때도 목적지가 다시 생성되게 구현하고 싶었는데 아무리 코드를 작성해도 목적지가 한번 나오면 그 다음에 나오지 않았다. 결국 다른 방법으로 문제를 해결했는데 목적지인 주유소의 크기를 크게 만들어 목적지 근처에만 도달해도 성공할 수 있도록 수정하였다.

 

 

728x90
반응형

+ Recent posts