Code Story

안녕하세요~! 이번에는 부스트코스 에이스 미션4 - 프로젝트 5를 리뷰할게요.

PJT5의 주제는 네트워킹입니다. 웹서버와 통신하는 걸 기본으로 하죠. 그래서 요구사항 역시 그에 관련되어 있어요.

기존에는 액티비티, 프래그먼트 화면의 이미지와 텍스트 등의

리소스를 내부에서 정의하거나 저장해서 보이게 했다면, 그 리소스 대신 서버에서 받은 걸로 대체하는 게 목표입니다.

사진에 있는 요구사항은 총 6가지이지만 그 맥락은 비슷하다고 볼 수 있겠네요. 특히 1~4번이 그렇죠.

좀 더 자세히 살펴볼까요?

1~4) 제공되는 API를 보고 서버에 요청하고 응답을 받아 화면에 표시하자!

부스트코스에서 프로젝트를 위한 API를 제공합니다. 해당 API에 표시된 것들을 보고 적절하게 서버와 통신하면 되죠.

Host 주소 = http://boostcourse-appapi.connect.or.kr:10000

+ 영화순위 리스트 조회 /movie/readMovieList

+ 영화상세 조회 /movie/readMovie

등등...

호스트 주소를 기본으로 작업에 알맞은 추가 정보를 url로 사용하면 됩니다.

2번 요구사항의 영화목록 화면은 영화순위 리스트 조회에서

3번 요구사항의 영화상세 화면은 영화상세 조회에서 요청하는 식입니다.

자세한 코드 구현은 부스트코스 강의를 보면서 그대로 따라하면 어느 정도 할 수 있습니다.

강의 코드를 응용하는 건 각자의 몫이겠죠. (강의에서는 Volley와 Gson 등을 사용합니다. 다른 라이브러리가 더 빠르고 좋다는 내용도 본 게 기억나는데 강의 내용에서 사용하는 걸 사용하는 게 좋을 듯하네요.)

제가 이 작업을 하면서 기존의 코드를 바꾼 게 있는데 리스트뷰에 대한 것들입니다.

리스트뷰 강의에서 나와있듯 요즘은 리스트뷰보다 리사이클러뷰를 더 많이 사용한다고 하여서

리스트뷰에서 리사이클러뷰로 바꿨습니다.

리스트뷰처럼 어댑터를 이용하면 간단히 사용할 수 있어요.

5) 데이터를 서버에 보내어 저장하기

저는 이 부분이 가장 헷갈렸습니다. 일단 강의에서 나오진 않거든요... 그래서 정말 별 짓 다 했습니다.

기존 코드(서버에서 데이터를 받아오는)와 크게 다르지 않은 방식일 듯하여 그 코드를 이리저리 변형하면서 했죠.

그러다가 어처구니없는 실수를 할 뻔했습니다.

url을 데이터를 저장시킬 서버로(http://boostcourse-appapi.connect.or.kr:10000/movie/createComment

그 이후에 EditText나 RatingBar 등의 데이터를 뒤에 url += "" 방식으로 붙여주고 서버에 데이터를 요청한 것처럼 그대로 사용했더니... 놀랍게도 EditText의 String과 RatingBar의 float 데이터 등의 코멘트 데이터가 서버에 저장이 되었습니다.

하지만... 아무리 생각해도 이건 아닐 것이다 라는 생각이 들어서 엄청 고생했죠...

결론은 간단했습니다. 서버에서 응답을 받을 때 GET으로 받았다면, 이번에는 POST로 서버에 보내면 되었습니다.

(이 간단한 걸 몰라서 이틀을...!! Rest api에 대한 개념 자체를 공부 안해서 헛짓을 했습니다ㅠㅠ)

데이터를 받을 때와 달리 추가적으로 Map과 관련된 코드를 추가해야하니 주의해야 합니다.(구글링하면 나와요.)

6) 이미지 다운로드

이것 역시 부스트코스의 강의에서 나온대로 따라하면 어려움 없이 수행할 수 있습니다.

그러나 제가 이상한 것인지 ImageView가 있는, 그러니까 이미지 다운로드를 사용하는 화면을 보다가 다른 화면으로 넘어간 이후, 다시 원래 화면으로 돌아오려고하면 Bitmap recycle 에러가 나와 앱이 강제로 종료되는 사태가 일어났습니다.

(이에 관련된 토론이 없는 걸 보니 저 빼고는 안 그런 거 같아요... 왜 나만...?)

이 역시 이틀 정도 헤매다가 결국 부스트코스 강의에 있는 오픈 코드에서

recycle 해주는 코드를 지워버리니 정상으로 동작했습니다. 그러나 recycle을 해주지 않으면 메모리에서 나중에 문제가 일어날 수 있다는 걸 알고 있었기 때문에...

해당 화면을 종료(onDestory)할 때만 recycle하는 코드를 새롭게 추가했습니다.

이것으로 모든 요구사항을 충족시켰습니다. 반나절 정도 코드를 정리하고 주석을 달고 밤에 제출했습니다.

결과를 볼까요?

PASS!!

뭔가 제 노력을 알아주신 거 같아 뿌듯함이 ㅠㅠ 이런 작은 칭찬 하나가 원동력이 되더군요 ㅎ;

이제 남은 프로젝트가 3개... 그거까지 열심히해서 잘 마무리하도록 하겠습니다.

감사합니다.

이번 프로젝트는 이전 프로젝트보다 할 게 많고 복잡했습니다.

일단 뷰페이저라는 새로운 녀석을 다뤄야하고 새로운 메인화면을 만들어야 합니다.

그리고 원래 액티비티였던 것들을 프래그먼트로 변경해야 합니다. 또한 바로가기 메뉴도 추가해야 됩니다.

1. Viewpaer

프로젝트 이전에 학습하는 강의에서 나오는 녀석입니다. 강의를 그대로 따라가면 어려울 것 없이 만들 수 있습니다. 

프레임 레이아웃 안에 뷰페이저를 만드는 것으로 main.xml에서 할 일은 끝나고 xml에서 지정한 id를 이용하여

java에서 제어합니다. 제어를 위해서 adapter를 만들어야 하는 것을 잊지 말아야할 것 같네요.

뷰페이저 어뎁터를 이용하여 프래그먼트로 바꾼 상세보기 화면들을 뷰페이저에 넣어줍니다.

예를 들면 pagerAdapter.additem(Fragment); 이런 식으로요. 그 이전에 프래그먼트를 정의하고 선언하는 건 당연하겠죠.

2. 데이터 처리

원래 액티비티였던 상세보기 화면을 프래그먼트로 바꿨으니 데이터를 다루는 방식도 바꿔야만 했습니다. 

액티비티 간에 데이터를 전달할 때 인텐트를 사용하지만 프래그먼트에서는 인텐트를 사용할 수 없기 때문에 메소드 호출 방식으로 데이터를 전달합니다.

프래그먼트에서는 액티비티의 메소드를 호출하고, 액티비티에서는 프래그먼트의 메소드를 호출하죠. 이렇게 호출한 메소드로 데이터를 주고 받거나 필요한 기능을 수행합니다. (이게 좀 헷갈리죠..)

3. 바로가기 메뉴

바로가기 메뉴의 동작까지 구현하기 위해서(햄버거 버튼을 클릭했을 때 목록 등장)

DrawerLayout과 ActionBarDrawerToggle를 활용합니다. 추가로 단 몇 줄의 코드로 바로가기 메뉴를 만들 수 있죠...

그리고 Override에서 onNavigationItemSelected를 찾아 필요 기능을 구현합니다.

onNavigationItemSelected 안에서 각 버튼의 ItemId를 int로 받아 실행하죠.

할 거 다 한 거 같죠? 결과를 확인해봅시다.

다행히 통과했습니다. 그런데 리뷰어 님이 몇 가지 오류를 찾아주셨습니다.

처음에는 무슨 뜻인지 몰랐습니다. back 키가 제가 만든 버튼들이 아니라 스마트폰의 back 키라는 걸 모르고

제가 만든 버튼만 눌러본 거죠... 그래서 '오류가 없는데? 잘못 보신 건가?' 이렇게 생각했습니다.

하지만 역시나...

빨간색 동그라미로 표시한 버튼을 눌렀을 때 리뷰어 님이 말씀하신 것처럼 오류가 발생했습니다.

원인을 찾는 건 어렵지 않았습니다.

프래그먼트인 상세보기 화면에서 back 버튼을 눌렀을 경우 프래그먼트가 종료되어야 하지만,

제가 이 점을 생각하지 않아 그 뒤에 있는 메인 Activity가 종료된 겁니다.

한줄평 작성하기 화면에서의 비정상 종료도 비슷한 원리였습니다...

게다가 이것 말고도 세부적으로 고쳐야 할 점들을 몇 가지 찾아 PASS했지만 FAIL이 나온 듯한

기분이 들었습니다 ㅠ.ㅠ

다음 프로젝트를 진행할 때 전부 고쳐야겠습니다.

먼저 요구사항입니다.

앞서 만들었던 '작성하기'와 '모두보기'을 기억하시나요? PJT2에서는 해당 버튼을 눌렀을 때

토스트 메세지로 버튼을 눌렀을 경우를 간단히 표시만 해주었습니다.

이번 프로젝트의 목표는 토스트 메세지가 아니라 실제로 버튼을 눌렀을 때 해당 화면으로 이동하는 거죠.

간단히 말하면, 해당 버튼에 대한 화면을 만들고 이동하는 기능을 구현하면 됩니다.

제가 만든 화면을 보고 얘기하죠.

두 화면은 모두 Activity로 만들었고 크게 복잡한 구성은 없습니다.

솔직히 그냥 보면, 엄청 간단해 보이죠? 그런데 여기에는 함정이 있습니다.

요구사항만 보고 단순하게 생각하면 빠지기 쉬운 함정이죠.

일단 작성하기 화면은 말 그대로 댓글을 작성하는 화면입니다.

코멘트와 별점을 입력하면 그걸 기록해야 한다는 의미죠.

모두보기 화면은 그 댓글들을 모두 보여줍니다. 또한 작성하기 화면으로 이동할 수도 있죠.

감이 오시나요?

맞습니다. 이번 프로젝트에서 제가 가장 시간을 쏟은 부분이 바로 '데이터 전달과 기록'입니다.

아직 데이터베이스를 사용하지 않는 부분이라 상당히 많이 고민한 부분입니다. 솔직히 데이터에 관련된 세부적인 사항들에 대해서는 데이터베이스를 배울 때 구성해도 되지 않을까 했지만...

공부하자는 생각으로 일단 구현하기로 했습니다 ㅋ

1) 메인 화면에서 작성하기 화면으로 전환

Intent와 startActivityForResult 메소드를 이용하여 전환하면 간단합니다.

2) 작성하기 화면에서 댓글과 별점을 결정 + 그 댓글을 메인 화면과 모두보기 화면으로 전달, 기록

Intent에 작성시간, 코멘트, 별점을 name을 지정해서 저장한 이후 그 Intent를 메인 화면, 혹은 모두보기 화면으로 전달

Intent를 통해 데이터를 전달 받은 각 화면들은 제가 만든 setNewCommentData 메소드를 통해 기록됩니다.

(이 과정에서 Bundle과 Parcelable이 활용됩니다. 코드를 올려드리고 싶은데 규정 때문에 올릴 수가 없네요.)

3) 메인 화면에서 모두보기 화면으로 전달

메인 화면의 코멘트 리스트의 데이터들을 Parcelable로 묶어서 전달하고 그걸 풀어서 코멘트 리스트를 만듭니다.

4) 모두보기 화면에서 작성하기 화면 전환 + 새로운 댓글 기록

화면 전환은 이전과 다르지 않습니다. 다만 작성하기 화면에서 데서 뒤로 돌아올 때 메인 화면이 아니라 모두보기 화면으로 전환되도록 해야 합니다.

5) 모두보기 화면에서 메인 화면

만약 모두보기 화면에서 작성하기를 통해 새로운 코멘트가 기록되었다면(if를 이용), 그 기록을 전달하여 메인 화면의 코멘트 리스트를 갱신했습니다.

이것도 꽤 오래 전에 했던 거라 그때 데이터 부분에서 엄청 고생했던 기억이 나네요. 여기서 핵심적이라 느낀 부분은 Bundle과 Parcelable을 이용했던 것입니다. 둘 다 데이터 전달에 있어서 자주 사용되는 거 같은데요...(맞나?) 다시 복습을 할 필요성이 느껴지네요.

저는 이외에도 새로운 코멘트가 추가될 때마다 평점의 평균까지 갱신해주었는데요. 별이 다섯 개라서 5점으로 계산했다가 10점 만점인 것을 보고 다시 했었습니다 ㅋ

만약 평점을 갱신하고 싶으시다면, ratingbar에서 받아온 숫자는 int가 아닌 float라는 걸 유의하시길 바랍니다. (그래서 그냥 평균을 계산하면 이상한 값이 나와요.)

제출한 결과를 한 번 볼까요?

마이너한 이슈들은 주로 가독성과 관련된 사항들이거나 사소하다고 느껴지는 것들이었는데,

리뷰어님께서 사소한 것까지 빠지지 않고 봐주셨습니다.

예를 들면

이런 꿀 같은 충고와 함께

잘한 점들은 칭찬도 해주십니다 ㅋㅋ (뿌듯)

이상으로 PTJ3 리뷰 끝내겠습니다~!

제가 부스트코스에서 수강신청한 과목은 안드로이드 프로그래밍입니다.

안드로이드 프로그래밍은 8단계로 진행되며 각 단계마다 다른 요구사항을 가진 프로젝트를 진행합니다.

8단계의 프로젝트는 모두 이어지기 때문에 중간에 건너뛰거나 할 수는 없습니다.

오늘은 PJT1~PJT8까지의 프로젝트 중 PJT2를 공유하려고 합니다.

PJT1. 영화상세 화면 만들기는 부스트코스 에이스 일정에 포함되어 있지 않기 때문에

생략되었습니다. (너무 쉬운 경향도 있기 때문에 공유할 필요가 없기도 하고.. ㅎ)

요구사항입니다.

1) 좋아요/싫어요 버튼 기능

2) 한줄평 리스트 만들기

3) 한줄평의 '작성하기'와 '모두보기' 버튼 기능의 임시 기능(Toast message)

3번 요구사항은 아직 작성하기 화면과 모두보기 화면을 만들기 전이라 임시로 구현하려는 듯하네요.

저는 PTJ2를 제출할 때 이미 PTJ3까지 완성한 상태였는데요. 그렇기 때문에 별다른 어려움 없이 진행했던 기억이 납니다.

1번은 좋아요와 싫어요 버튼을 눌렀을 때 리스터를 이용하여 해당 변수를 조절해주고

2번은 강의 동영상에서 배운 것처럼 리스트뷰를 활용하면 되고

3번은 버튼 리스너를 이용하여 Toast. 메세지를 불러오면 됩니다.

주의할 점은 1번 요구사항입니다. 좋아요와 싫어요를 중복으로 선택할 수 없기 때문에 좋아요를 이미 누른 상태에서 싫어요로 변경했을 때, 좋아요 숫자가 감소하도록 하는 게 포인트입니다. 물론 반대의 경우도 마찬가지입니다.

다음은 제가 완성한 화면을 캡쳐한 모습인데요..(티스토리가 처음이라 가로배치하는 법을 모르겠네요;;)

제출 결과는?

프로젝트를 제출할 때 유의할 점은 요구사항만이 아닙니다.

안드로이드로 구동되는 스마트폰마다 사이즈가 다르기 때문에 평소 테스트하던 기종을 변경했을 경우,

예기치 못한 오류가 발생할 수 있습니다. 제가 그런 실수를 해서 첫 번째 리뷰에서 FAIL이 나왔습니다 ㅠㅠ

여러분은 그런 일이 없기를 바라면서 다양한 기종으로 테스트해보기를 권합니다.

보시는 것처럼 두 번째 리뷰에서는 PASS를 받았습니다. 제가 이 당시에 전반적인 규칙에 대해 숙지하지 못해서 코멘트를 남겼었는데, 리뷰어께서 저렇게 친절하게 답변해주셨습니다.

그리고 마지막 코멘트를 보고 요구사항만을 충족하는 프로젝트가 아니라 제 자신이 만족할 수 있을 만큼 프로젝트에 몰두하는 계기가 되었습니다. (요구사항에는 없지만 제가 구현하거나 지키고 싶은 것들에 대해서 넘기지 않고 될 때까지 매달렸습니다... 솔직히 요구사항보다 이런 게 시간을 훨씬 많이 잡아먹어요 ㅋ)

이상으로 PTJ2에 대한 리뷰를 끝내겠습니다.

안녕하세요~!

이번에 부스트코스 에이스 2019 Summer 1기에 합격하여

부스트코스에서 진행하고 있는 프로젝트를 공유하게 되었습니다.

그런데 부스트코스를 모르는 분들이 계시겠죠?

다양한 교육기관과 단체가 제휴를 통해 모인 edwith에서

제공하는 온라인 교육 프로그램이에요~!

동영상 강의 -> 프로젝트 진행 -> 전문가 리뷰

이런 순서로 진행하는데 리뷰를 제외하고 모두 무료!!

그래서 평소 공부할 때 참고하던 곳입니다.

철저하게 자율 공부로 진행하는 경향이 강하기 때문에

바쁜 일이 있거나 신경을 쓰지 않으면 프로젝트를 이어가기가 쉽지 않은데요..

때마침 부스트코스에서 에이스라는 이름의 장학생을 모집했습니다!!

바로 신청했고 결과는,

두둥! 다행히 합격했습니다 ㅎㅎ

에이스는 두 개의 무료 리뷰 쿠폰의 혜택을 받고

일정에 맞춰서 프로젝트를 완성하고 공유하면 되는 겁니다.

저는 솔직히 부스트코스에 관련된

공부가 지지부진해서 날이 갈수록 뒤로 미루고 있었는데

이렇게 에이스로 선발된 것을 계기로 9월까지 공부를 끝내려고 합니다~!

앞으로 6개의 미션에 대한 공유를 올릴 테니

관심 있으신 분들은 많이 찾아주세요^^