{ "componentChunkName": "component---src-templates-blog-template-js", "path": "/2022-summer-todo/", "result": {"data":{"cur":{"id":"1b12bfbd-c20d-59f0-af06-8150b73f13a8","html":"

계획은 잘 세우는 나

\n

이전에도 블로그를 운영하면서 여러번 방학계획을 올렸었지만, 제대로 지켜진 적은 거의 없었다.\n팀 프로젝트 같이 다른 사람들과 같이 진행하는 것은 당연히 열심히 했었지만, 그러다보니 오히려 혼자서 해야하는 계획들을 잘 지키지 못했던 것 같다.\n그러니까 이번에 좀 제대로 해보자.

\n

1. 공프기 공부

\n

다음 학기부터 수강하는 공학프로젝트기획의 주제와 팀원들이 정해졌다.\n일단은 학교에 남아서 같이 ROS 등을 배우고, 주제에 관련된 기술과 특허를 찾는 등의 공부를 할것같다.\n아무래도 다른 사람들과 같이 진행하고, 1년 동안 지속적으로 진행할 프로젝트이다보니 가장 열심히 할것 같다.

\n

2. 알고리즘 / 코딩테스트

\n

2학년 방학부터 계속해서 조금씩 공부를 하긴 했지만 실력이 만족할만큼 늘진 않았다.\n공부를 해본 결과 학기 중에는 공부가 힘들다고 생각이 들었고, 혼자서 진행하기에는 내가 너무 나약하기 때문에 이번에는 학교에서 진행하는 알고리즘 공부 캠프를 신청했다.\n이걸 바탕으로 AtCoder나 CodeForce에서 진행하는 대회도 꾸준히 참가할 예정이다.

\n

3. 개인프로젝트

\n

웹/앱을 만든건 꽤 있지만 정작 맘에 드는 건 하나도 없다.\n이전부터 사람들이 실제로 사용할 수 있는 서비스를 만들고 싶었는데 이번 방학에 해보려고 한다.\n일단 주제는 헬스, 크로스핏 등의 운동을 하는 사람들을 타겟으로 잡았는데 언제 바뀔지 모른다.

\n
\n\n
","excerpt":"계획은 잘 세우는 나 이전에도 블로그를 운영하면서 여러번 방학계획을 올렸었지만, 제대로 지켜진 적은 거의 없었다.\n팀 프로젝트 같이 다른 사람들과 같이 진행하는 것은 당연히 열심히 했었지만, 그러다보니 오히려 혼자서 해야하는 계획들을 잘 지키지 못했던 것 같다.\n그러니까 이번에 좀 제대로 해보자. 1. 공프기 공부 다음 학기부터 수강하는 공학프로젝트기획의 주제와 팀원들이 정해졌다.\n일단은 학교에 남아서 같이 ROS 등을 배우고, 주제에 관련된 기술과 특허를 찾는 등의 공부를 할것같다.\n아무래도 다른 사람들과 같이 진행하고, 1년 동안 지속적으로 진행할 프로젝트이다보니 가장 열심히 할것 같다. 2. 알고리즘 / 코딩테스트 2학년 방학부터 계속해서 조금씩 공부를 하긴 했지만 실력이 만족할만큼 늘진 않았다.\n공부를 해본 결과 학기 중에는 공부가 힘들다고 생각이 들었고, 혼자서 진행하기에는 내가 너무 나약하기 때문에 이번에는 학교에서 진행하는 알고리즘 공부 캠프를 신청했다.\n이걸 바탕으로…","frontmatter":{"date":"June 09, 2022","title":"22 여름방학 계획","categories":"기타","author":"김형진","emoji":"🚘"},"fields":{"slug":"/2022-summer-todo/"}},"next":{"id":"c876f69f-dc03-5325-b070-9385c3e699a6","html":"

\"유일하게

\n

구글 로그인은 프로젝트를 시작할 때 내가 가장 처음으로 구현한 기능이다. 프로젝트 시작 전에는 개발에 재미를 붙이지 못했던 내가 이 로그인 기능 구현을 처음으로 성공하고 재미를 붙이게 해준 아주 고마운 기능이 됐다. 구글 로그인말고도 React에서의 계정 기능은 어렵지 않게 구현할 수 있기 때문에 처음 시작하는 사람들이 시도해보면서 재미를 붙이면 좋을 것 같다.

\n

주의!!

\n

이 포스트는 react-native-cli를 이용하여 생성한 프로젝트가 있다는 가정하에 진행됩니다. 만약 expo-cli를 사용하고 있다면 새롭게 프로젝트를 만들어 주시길 바랍니다. (react-native-cli 설정 방법은 여기에서 찾아볼 수 있다.)

\n

Firebase 설정

\n

먼저 Firebase의 계정을 만드는 것부터 시작한다. 계정을 만들었다면 Firebase 홈페이지 우측 상단에 있는 ‘콘솔로 이동’ 버튼을 누르거나 console.firebase.com 으로 직접 이동한다.

\n

콘솔에 들어가게 되면 이런 화면이 보일것이다.\"\"

\n

작성자는 이미 만들어놓은 프로젝트들이 많아서 꽉 차있지만 처음 계정을 만든 후에는 아무것도 없을것이다. 여기서는 Add project를 눌러서 새 프로젝트를 만들어준다.

\n

\"\"

\n

이름을 설정한 후에는 계속 continue를 누르면 된다. 중간에 구글에서 제공하는 앱 측정 솔루션을 사용할것인지에 대해 물어보는데 써도 안써도 상관은 없다.

\n

프로젝트가 생성된 후에는 이런 창이 나오게 된다.\n\"\"\n우리는 안드로이드 앱을 만들것이기 때문에 빨간색 원이 그려진 안드로이드 버튼을 누른다.

\n

\"\"\n버튼을 누르면 이렇게 안드로이드 앱 생성 페이지가 나오게 된다.\n우리가 입력해야 할 것들은 Android package name과 SHA-1인데, 일단 package name을 어떻게 입력해야 하는지부터 알아보자.

\n

package name은 내가 만든 프로젝트에서 찾아 볼 수 있다. 프로젝트에서 android/app/src/main 경로로 들어가면 AndroidManifest.xml이라는 파일을 발견할 수 있는데, 이 파일 상단에 보이는

\n
package=\"com.프로젝트 이름\"
\n

이 이름을 그대로 복사 붙여넣기 하면된다. 내 경우에는 test_project라는 이름으로 프로젝트를 생성했기 때문에 package name은 com.test_project가 된다.

\n

다음으로 SHA-1은 페이지에는 optional이라고 써있기는 하지만 구글 로그인 기능을 이용하기 위해서는 필수이다. SHA-1을 얻는 방법은 간단하다.

\n
cd android && gradlew signingReport
\n

이 명령어를 콘솔에 입력하면 많은 양의 비슷해 보이는 문단들이 나올텐데, 그 중에서 경로가 프로젝트/android/app/debug.keystore인 문단에서의 SHA-1을 입력하면 된다.

\n
Variant: debugUnitTest\nConfig: debug\nStore: C:\\react\\test_project\\android\\app\\debug.keystore\nAlias: androiddebugkey\nMD5: -------------------------------\nSHA1: // 여기에 나오는 것을 복붙\nSHA-256: ----------------------------\nValid until: 2052 5 1
\n

이렇게 package name과 SHA-1을 입력하고 Register app 버튼을 누르면 무언가를 다운로드 하라는 버튼이 보인다.\n\"\"\n버튼을 누르고 다운받은 google-services.json 파일을 보이는것과 같이 android/app 경로에 넣어준다. 이 파일은 이후에 구글 로그인에 필요한 web client id를 가져올 때 쓰인다.

\n

google-services.json 파일을 다운받아 맞는 경로에 넣기까지 했으면 Firebase에서의 설정은 거의 끝이 났다.\n마지막으로는 Firebase에서 제공하는 Authentication 기능을 활성화 해야한다.\n\"\"\n페이지 왼쪽에 있는 Authentication 섹션으로 넘어가 Get Started 버튼을 누른다.\n\"\"\n페이지가 넘어가면 이런 화면이 나올텐데, 살펴보면 여러 방법의 로그인 기능들이 있는것을 볼 수 있다.\n물론 우리는 구글 로그인을 사용할 것이기 때문에 구글만 활성화시키면 된다.\n\"\"\n구글을 눌러 활성화를 시키면 끝이다. Project support email은 현재 자신이 로그인 되어있는 이메일을 넣으면 된다.

\n

다음편에서는 실제 앱에서 구글 로그인 기능을 구현해보겠다.

\n
\n\n
","frontmatter":{"date":"June 02, 2022","title":"[React Native] Firebase를 이용한 Android 구글 로그인 1","categories":"개발 featured","author":"김형진","emoji":"📱"},"fields":{"slug":"/react-native-google-login-1/"}},"prev":{"id":"a156bea7-398f-5fd9-bf25-cc07bd12ec74","html":"

개발하게 된 계기

\n

작년에 들었던 수업에서 개인 프로젝트로 3대운동에 도움이 되는 계산기들과 영상들을 볼 수 있는 웹사이트를 만든 후부터 내가 좋아하는 운동과 관련된 서비스를 만들고 싶었다. 이후 학기와 방학 중 다른 것들을 하느라 따로 짬이 나지 않았는데 이번 여름에는 각을 잡고 만들어보려고 한다.

\n

어떻게 쓰일 것인가

\n

학생들이 자신의 운동 영상을 제출하면 해당 영상으로 운동을 얼마나 많이 or 무겁게 들었는지를 평가한다. 무게, 횟수 등의 랭킹은 학부, 학번, 성별, 소속 RC 등의 카테고리로 나뉘어져 자신이 어느 그룹에서 어느 정도의 순위인지 가늠할 수 있다. 자신의 운동능력등에 따라 업적과 그로 인해 얻을 수 있는 뱃지 등이 있고, 이는 자신의 프로필이나 게시판에 글이나 댓글을 쓸때 나타낼 수도 있다 (Ex. 3대 500 뱃지, XX학부 스쿼트 랭킹 1위 등). 자신의 프로필을 꾸며 본인의 운동 경력을 보일 수 있다.

\n

이 기술을 쓰려고 한 이유

\n

처음 시작할 때 예정은 저번 학기 들었던 DB 수업에서 배웠던 SQL 쿼리들을 좀더 다뤄보고 싶어서 MySQL+Express+Node+React로 기술 스택을 잡았지만, 서비스를 학교 인원들만 사용할 수 있게 제한하고, 일정을 급하게 만들다보니 그나마 익숙한 Firebase를 사용하게 됐다. React는 이전에 React Native를 사용한적이 있어 어느 정도 익숙한 편이고, 많이 쓰이는 JS 라이브러리이다 보니까 더욱 배워보고 싶었다.

\n

생각해보아야 할것들

\n

유저들의 운동능력을 평가하는 방법이 너무 비효율적이고 귀찮다. 웹사이트에 공유하여 유저들이 자체적으로 평가하는 방법도 생각해봤지만 몇몇 트롤 유저들의 영향을 많이 받을 것 같고, 내가 일일히 확인하자니 유저들이 영상을 제출하는것도 귀찮고 내가 확인하는 것도 귀찮다.

\n

앞으로의 계획

\n

이미 기본적인 큰 틀은 잡혀있고, 로그인 기능이나 각 필요한 페이지들을 만들고 Router로 연결하는 등의 작업들도 마쳤다. 앞으로는 각 페이지에서 쓰일 CRUD 기능들을 먼저 만들고 세부적인 조정에 들어간 후 마지막으로 디자인을 할 예정이다. 아마 늦어도 방학이 끝나기 전에는 완성이 될것이다.

\n
\n\n
","frontmatter":{"date":"July 01, 2022","title":"22 개인 프로젝트 개발","categories":"개발 featured","author":"김형진","emoji":"🏋️‍♂️"},"fields":{"slug":"/22-personal-project/"}},"site":{"siteMetadata":{"siteUrl":"https://hhjj0506.github.io","comments":{"utterances":{"repo":"hhjj0506/hhjj0506.github.io"}}}}},"pageContext":{"slug":"/2022-summer-todo/","nextSlug":"/react-native-google-login-1/","prevSlug":"/22-personal-project/"}}, "staticQueryHashes": ["1073350324","1956554647","2938748437"]}