본문 바로가기

전체 글

 (73)
React - EC2에서 React 환경 구축하기 * 목차 1. node.js, npm 설치 2. yarn, vite 설치 3. ec2 network 설정 예전에는 React 시작하려면 npm create-react-app이 대부분이었는데 webpack의 속도 issue와 vite와 같이 훌륭한 Build 도구가 있어서 요즘은 또 트렌드가 다릅니다. 요즘 트렌드에 맞춰서 환경구성하는 방법을 소개합니다. *환경 - Instance : AWS EC2 - OS : ubuntu 22.04 LTS - Terminal : bash - 언어 : javascript (Typescript는 다음 기회에...) - 패키지 관리 : yarn - build tool : vite - frontend : react18 0. EC2 instance 구축하기 인스턴스 구축은 다른 ..
AWS - EC2 초 간단 생성 + vscode 원격연결 독립된 서버가 급히 필요한데 주변에 아무것도 없다면? Linux OS가 필요한 상황인데 집에 Windows만 있는 상황이라면? Docker를 windows 환경에서 또 새로 구축하긴 귀찮죠... 그럴 때는 EC2를 사용해 봅시다!! 1. AWS Service 접속 aws 사이트에 접속해 줍시다. https://aws.amazon.com/ko/ 클라우드 서비스 | 클라우드 컴퓨팅 솔루션| Amazon Web Services aws.amazon.com 2. AWS 가입 후 계정 생성 (생략) 계정 생성 시 신용카드를 필요로 하기 때문에 계정 보안에 유의합시다. 그렇다고 MFA를 함부로 설정하고 폰을 바꾸거나 MFA 사용법을 까먹으면 계정사용이 곤란해집니다. 나중에 수동으로 문의해서 해제해야 계정 사용이 가능..
Python - 테트리스(Tetris) 만들기 (16) - Checkbox 여기까지 잘 따라오신 분들은 Checkbox를 만드는데 전혀 어려움이 없을 것이라 생각됩니다. Checkbox 그림을 넣어서 표현해도 좋지만 간략하게 빈 네모에서 색깔이 찬 네모를 표현하는 것으로 간단하게 만들어 보겠습니다. Checkbox 위치 잡기 python code로 만들면 다음과 같습니다. class CheckBox: _ACTIVATE_COLOR = (127, 255, 127) _DEACTIVATE_COLOR = (192, 192, 192) BACKGROUND_COLOR_MAP = {True: _ACTIVATE_COLOR, False: _DEACTIVATE_COLOR} LINE_COLOR = (255, 255, 255) def __init__(self, x, y, size): self.x, se..
Python - 테트리스(Tetris) 만들기 (15) - Slider 지난시간에는 Text input rect를 만들었었습니다. 이번시간에는 Slider를 만들어 보겠습니다. Slider 만들기 Silder는 시작과 끝이 있고, 그 사이에 Toggle이 있습니다. Toggle을 마우스나 키보드를 활용해서 수직이나 수평으로 이동해서 값을 조절합니다. Silder의 시작과 끝은 Silder가 가질 수 있는 최대값과 최소값을 의미하며 그 사이의 값은 Toggle의 위치에 비례합니다. 이 내용을 가지고 Slider를 만들어 보겠습니다. class SlideBar: _ACTIVE_COLOR = (192, 64, 64) _DEACTIVE_COLOR = (192, 192, 192) BACKGROUND_COLOR_MAP = {True: _ACTIVE_COLOR, False: _DEACT..
Python - 테트리스(Tetris) 만들기 (14) - text input 이번시간에는 text를 input할 input rect를 만들어 보겠습니다. web에서는 tag를 사용하면 참 쉽게 만들 수 있습니다. 하지만 pygame은 저런 tag가 존재하지 않으니 직접 만들어 줘야 합니다. 한번 잘 만든다음에 다양한 곳에서 사용해 보도록 합시다. Input Rect input rect의 기능은 다음과 같이 정리됩니다. 1. active, deactive된다. 2. rect 영역을 클릭하면 active된다. 3. rect 외 영역을 클릭하면 deactive된다. 4. active 되었을 때 key입력에 따라 input rect에 있는 text가 update된다. 5. backspace key를 누르면 text가 한 칸씩 삭제된다. 물론 다양한 경우에 따라 이 규칙들은 조금씩 변화될..
Python - 테트리스(Tetris) 만들기 (13) - Setting Screen 이전시간에는 Main Screen 껍데기를 만들었습니다. 이번에는 Setting Screen을 만들고, 연결하는 작업을 해보도록 하겠습니다. Setting Screen 그리기 Setting Screen은 어떤 내용이 있어야 할까요? 요구사항을 살펴보면 다음과 같은 항목들이 Setting Screen에서 설정해야 하는 값이 됩니다. 1. 키보드 맵핑 2. 홀드 시스템 On/Off 3. 고스트 시스템 On/Off 4. 미리보기 1 ~ 6 개 조정 5. 소리 볼륨 6. Lock Delay : mino가 Lock 된 이후 다음 블럭이 나오는데 걸리는 시간 7. Gravity : 아무 동작을 안하고 있을 때 블럭이 내려오는 속도 8. ARE : 락 되고 다음 생성까지의 지연시간 9. DAS : 자동 이동까지 걸리..
Python - 테트리스(Tetris) 만들기 (12) - Main Screen 시작하기 전에... 테트리스(Tetris) 만들기 (11) 에서 Diagram을 그렸던 것을 다시 확인해 봅시다. 보시면 Main Application에서 실행할 수 있는 기능이 3가지가 있습니다. 1. Setting Screen 2. Tetris Application 3. Exit 이렇게 3가지의 Status가 존재하게 됩니다. Setting screen은 같은 Main Application에 있지만, 세부적으로 들어가면 Main screen과는 다른 화면이 나오므로 화면 기능으로 봅시다. 이번 시간에는 Main Screen을 그려보도록 하겠습니다. Main Screen 그리기 Main Screen은 어떻게 생겼을까요? 위의 Diagram을 보면 어느정도의 윤곽이 드러납니다. 이 그림만으로는 사실 어떻..
TypeError: method() takes no keyword arguments *바쁘신 분들을 위한 빠른 해결법 ## test_dict.get("k1", default=0) ## default라는 설명을 적은것이 에러의 원인 test_dict.get("k1", 0) ## default라는 설명을 제거하면 된다. 해당 에러는 왜 발생하는가? no keyword argument 에러는 python의 함수에서 Keyword Argument를 사용할 수 없기 때문입니다. 이러한 함수는 주로 Built-in function에서 발생합니다. Python은 원래 Keyword Argument를 자유롭게 사용할 수 있습니다. 하지만 python에서 제공하는 Built-in function은 C-level API이기 때문에 Keyword Arguments가 제공되지 않습니다. built-in fu..
Python - 테트리스(Tetris) 만들기 (11) - Diagram 시작하기 전에... 테트리스(Tetris) 만들기 (10) 에서 요구사항을 분석한 결과, 아래와 같은 결론을 얻을 수 있었습니다. 1. Tetrion : playfield area(10x20), hidden playfield(10x40) area, hold area, preview area 2. Tetromino : shape, color, 7-bag random generator, center position, init position 3. Movement : left, right, softdrop, hard drop, SRS 4. Keyboard event : right, left, rotation, hold, soft/hard drop, press key long/short time. 5. Appl..
Python - 테트리스(Tetris) 만들기 (10) - Requirement 들어가기에 앞서... 테트리스 만들기(9) - Refactoring까지 따라오셨다면, 왜 제대로 된 설계 없이 기능 순서대로 마구잡이로 개발하면 안되는지 알게 되셨을 껍니다. 물론 혼자 진행하는 Practice라면 상관이 없지만, 만약에 이게 팀 단위의 Project였고, Refactoring할 시간은 없는데 새 기능을 추가해야 하는 상황이라면 어떻게 될까요? 아찔합니다. 이번 시간에는, 다시 처음으로 돌아가 https://tetris.fandom.com/wiki/Tetris_Wiki의 문서를 분석하고자 합니다. Tetris 요구사항을 전부 확인 먼저, Overview부터 살펴보도록 합시다. - 테트리스는 테트리온이라는 장치 내에서 동작합니다. - 테트리온의 가장 큰 부분은 가로 10칸, 세로 20칸 크..

티스토리툴바