본문 바로가기

전체 글

(45)
Flutter) JWT를 구현해보기lutter) JWT를 구현해보기 이번 포스팅에서는 JWT 토큰을 이용한 벡엔드 통신 코드를  (견본) 직접 구현해보겠습니다.직접 검증까지 해보고 싶지만 벡엔드 서버가 없어서 견본으로만 퉁치겠습니다. 본 포스팅에서는 구현을 다룰 것이기 때문에 JWT 통신은 설명은 다른 블로그 참고를 추천드립니다.간단한 설명은 아래 이미지를 참고 바랍니다.다만 여기서 JWT 발급 이후 사용자 서버에 API 요청을 보냈을 때 Access Token이 만료된 경우는 다음과 같은 과정을 통해 다시 API를 요청합니다. 1. Access Token이 만료되었을 시 이전에 발급 받은 Refresh Token을 가져온다2. Refresh Token를 이용하여 서버에 Access Token을 재발급 API를 요청한다.3-1. 재발급 실패 시  Refresh Token..
LadyBug 제작 (5) -음악 추가 이번 포스팅에서는 게임에 배경음. 효과음 추가를 해보겠습니다.배경음악으로 사용할 무료 음원을 인터넷에서 다운받았습니다. Freesound - SearchProblems logging in? Enter your email or username below and we'll send you a link to help you login into your account.freesound.org 배경음 1개와 게임시작, 게임종료 2개의 효과음을 다운받았습니다. 음악 재생을 위해 패키지를 추가했습니다. 추가로 윈도우에서 사용할 때는 윈도우 버전도 필요하다하여 같이 설치했습니다. just_audio | Flutter packageA feature-rich audio player for Flutter. Loop, cli..
LadyBug 제작 (4) MVVM 적용 이번 포스팅에서는 새로운 기능보다 기존 코드 정리 및 MVVM 패턴 적용을 간단하게 해보겠습니다.일단 제가 MVVM 패턴을 적용하는 이유는 코드의 가독성  때문입니다.코드에서 각종 아이템 효과, 점수, 시간, 생명 등 추가 기능이 늘어나면 늘어날 수록 코드가 복잡해 질 수 밖에 없습니다. 따라서 코드를 분리하기 위해 MVVM을 적용할겁니다. 지난 포스팅 이후 거의 1주일동안 어떻게 하면 코드를 아주 잘 분리 할 수 있을까 여러 생각을 해보았습니다.일단 나눠야하는 코드는 다음과 같았습니다. 1. 캐릭터 위치 및 속도, 아이템 리스트, 점수, 시간 + 그외 추가할 정보2. 게임관련 비즈니스 로직3. 화면에 그려지는 View  일단 간단하게라도 정리할 코드를 나눠보니 아이디어가 떠올라서 몇가지 시도를 해보았습..
Github에 업로드한 파일을 지워보자 지난 포스팅에서 특정파일만 commit에서 지우는 명령어에 대해서 업로드 하였습니다. Git에 commit한 파일 기록 삭제하기해당 파일이 기록된 커밋 강제로 삭제하기 git filter-repo --path "lib/test copy.dart" --invert-paths --force 이후 Github와 연결이 끊겼기 때문에 다시 연결해주기git remote add origin https://github.com/your-username/your-rebeomsuong.tistory.com 이번 포스팅에서는 실제 제 프로젝트중 잘못 commit되어 업로드된 파일이 있어서 해당 파일을 지워보도록 하겠습니다.  과거 강의를 들으며 html과 Firebase를 이용한 강의였는데 HTML에서는 env파일을 사용 ..
Git에 commit한 파일 기록 삭제하기 해당 파일이 기록된 커밋 강제로 삭제하기 git filter-repo --path "lib/test copy.dart" --invert-paths --force 이후 Github와 연결이 끊겼기 때문에 다시 연결해주기git remote add origin https://github.com/your-username/your-repository.git 이후 강제로 푸시git push origin --force
위젯을 캡쳐하고 공유하기 Flutter의 화면 내에서 특정 위젯을 캡쳐하고 해당 사진을 갤러리에 저장 및 공유를 해보겠습니다. 풀코드는 아래에 남겨두겠습니다.flutter pub add screenshot //캡쳐flutter pub add path_provider //저장 경로 설정flutter pub add share_plus //공유flutter pub add gallery_saver_plus //사진 갤러리에 저장   먼저 스크린샷컨트롤러를 선언해줍니다 그 다음 캡쳐할 위젯을 스크린샷 위젯으로 감싸고 컨트롤러를 추가합니다.이러면 위젯을 캡쳐할 준비는 끝났습니다. 이제 캡쳐 후 저장 및 공유를 코드를 작성해보겠습니다.  2~3줄 : 사진을 저장할 경로를 가져오기4~5줄:  캡쳐본의 이름설정 (이름+ 시간난수로 저장) 9~1..
LadyBug 제작 (4) 이번 포스팅에서는 몬스터 객체가 렌덤하게 생성 후 이동하도록 코드를 작성해보겠습니다. 일단 몬스터의 정보를 담고 있는 클래스를 선언하겠습니다. velocity 변수는 이동 방향과 속도를 같이 저장하고 있습니다. 예를 들어 오른쪽 위로 이동하는 경우 (1,1)의 값을 가지고 있습니다. 이 때 속도가 2배라면 (2,2)라는 값을 가지게 됩니다.그리고 현재는 type 변수를 int형으로 선언하여 간단하게 처리하였는데 차후 객체의 종류가 늘어난다면 enum 으로 선언해도 좋을 것 같네요.  이제 테스트를 위해 랜덤한 버튼을 생성하여 화면에 추가되도록 하였습니다. 방향의 경우에는 마이너스와 플러스 값이 같이 나와야 하기 때문에 원하는 숫자 범위의 * 2를 해주고 그 후 그만큼을 빼는 방식으로 처리하였네요 추가로 ..
LadyBug 제작 (3) 이번 포스팅에서는 추가로 아이템이 될 객체를 생성해보고 해당 아이템을 플레이어가 먹었을 때 충돌 처리를 추가해보겠습니다. 몬스터이라고 생각하면 몬스터의 이동방향, 속도, 그외 정보도 추가해야 하겠지만 일단 이번에는 충돌 처리만 다루도록 하겠습니다.  해당 아이템이 그려질 수 있도록 상위 클래스의 배열에 위치 값을 저장해두었습니다.  이후 해당 배열을 이용해서 화면에 반복적으로 그려줍니다. 그리는 코드 자체는 플레이어를 그리는 코드와 동일합니다.  화면에 잘 표시 되네요. 이제는 아이템에 대한 충돌에 대한 처리를 해보겠습니다.  충돌 처리는 이후 라이프, 플레이어 추가 효과등이 적용 될 수 있으므로 플레이어 클래스에 아이템 배열을 전달해 처리하도록 하겠습니다. 처음에는 if문으로 직접 모두 플레이어 객체의..