github에 올리면 안되는 APIKEY 숨기기 - iOS

 

 

 

 

 

 

화면과 같이 간단한 프로젝트를 바탕으로 설명하겠습니다.

프로젝트는 여기 링크로 가시면 상세 코드 및 화면 구성을 확인하실 수 있습니다!

 

 

 

---

 

 

 

 

화면은 아래와 같이 간단하게 구성하였습니다.

 

storyboard

 

 

우선 api 호출이 성공하신 후에 api관련 설정을 해주세요!

(위의 프로젝트 같은 경우 Alamofire, swiftyJSON을 사용하여  json 형식의 api 데이터를 가져와 사용하고 있습니다.)

 

api call success

 

 

저는 우선 API 관련 설정은 끝났고, 

그 결과가 label에 잘 뜨는지 확인한 결과 다음과 같이 잘 출력되는 것을 볼 수 있습니다!

 

(이 포스트를 작성 후 참고하실 수 있게 같은 프로젝트로 api 호출 하는 과정을 간단하게 포스팅할까 생각중입니다.)

api 호출이 어려우신 분은 그것 부터 연습해보시는게...어떠할지..!

 

 

 

 

---

본격적으로

APIKEY 숨기는법

 

 

 

우선 PropertyList 파일을 하나 생성해줄게요

(위에 pro까지만 검색해도 나옵니다.)

 

create new file / property List

 

 

우리가 흔히 부르는 plist가 P(roperty)list 의 줄임말 입니다.

(몰랐던 분들도 있을 겁니다 후후)

 

 

 

파일명은

저희가 날씨정보를 가져오니까

WeatherInfo.plist

정도로 해둘게요!

 

 

plist - add key

거기에 API_KEY 라는 이름의 key를 하나 추가해줄게요! 

그리고 value에는

"APIKEY를 입력해주세요" 라는 문구를 적어두겠습니다.

 

 

 

 

 

create new file / Extension Bundle

 

 

그리고 나서 Extension 파일을 하나 만들어줄 건데요,

파일명은 "자신의앱이름++Bundle" 로 swift 파일을 하나 생성해주세요!
(저의 경우는 앱이름이 PracticeHideAPIKEY 니까 "HideAPIKEY++Bundle" 로 해주었어요)

 

 

Bundle Extension

 

 

그리고나서 plist에 작성한 API_KEY 정보를 불러와 사용할 수 있는 코드를 작성해줍니다.

+ 여기에 guard문을 통해 만약 API_KEY를 작성하지 않을 경우 fatalError를 보여주도록 할 수 있습니다.

( 이 guard문을 사용하고 싶다면 WeatherInfo.plist의 API_KEY의 value에 아무것도 적지 않으면 되겠죠? )

 

 

 

 

 왜 Bundle 에 extension해서 작성을 하죠..?

 

Bundle이란

실행 가능한 코드와 그 코드의 자원을 포함하고 있는 디렉토리입니다.

그 예로는 info.plist, assets, String file 등이 있는데

우리는 plist 정보에 접근할 것이기 때문에 Bundle에 extension을 작성해주는 겁니다.

 

Bundle에는 여러 가지가 있지만

그 중 main은 앱이 실행되는 코드가 있는 Bundle 디렉토리에 접근할 수 있게 도와주는 bundle입니다.

그래서 이따가 아래에서 Bundle안에 있는 apikey값을 가져오기 위해

Bundle.main.apikey 순으로 접근하여 값을 가져올 거에요 :)

 

 

 

 

 

---

 

 

 

API 호출할 때 plist에 저장한 API_KEY 정보 불러와 대입해주기!

 

fetch data function

 

위의 코드 사진에서 보면

appid 상수 보이시죠?

 

 

거기에 저희가 WeatherInfo.plist 에 저장한 값을 불러오도록

Bundle에 extension 해두었던!

apikey 변수를 불러와 담아줍니다.

 

 

그리고

url 안에 apikey를 입력해야 하는 appid 부분 뒤에 넣어줍니다.

 

 

 

---

 

 

 

 

여기서 잠깐

그리고 우선 이 상태로 깃에 올려주세요!

지금까지 작성한 만큼 커밋 작성해서 push 해두시면 됩니다.

 

 

!! 주의할 것 !!

1. api 호출 url에 apikey를 지웠는지 확인.

2. WeatherInfo.plist에 혹시나 apikey값을 적진 않았는지 확인.

 

apikey가 노출되지 않도록 하려는 것이니까 꼭 체크 후 푸시 해주세요!

 

그러면 

우리가 작성 Extension,

API 호출 코드,

APIKEY를 노출하지 않은 상태의 WeatherInfo.plist

가 들어가게 되겠죠?

 

 

 

 

---

 

 

 

 

 

그리고

WeatherInfo.plist의 API_KEY에 자신의 apikey를 넣어주시고

일단 화면에 데이터가 잘 fetch되어 label에 뜨는지 확인!

 

 

 

after - set apikey in plist

 

저는 잘 뜹니다. 

여기서 잘 안뜨신 분들은 우선 위의 과정에서 오타나 빼먹은 부분은 없는지 잘 확인해주세요 :)

 

 

 

 

---

 

깃 추적 중지 시키기

이제 깃에 APIKEY를 올려두었던 것을 로컬에서 변경하더라도 더 이상 추적하지 않도록 해보겠습니다.

(터미널에 익숙치 않으신 분들이 있을 수 있어 명령어도 함께 캡쳐했습니다.)

 

이제 거의 다 왔어요! 조금만 힘냅시다

 

 

 

현재 상태에서 테스트를 위해 

WeatherInfo.plist 안의 API_KEY값을 임시로 3333 으로 저장해두고 

진짜 원격에 반영 안되는지 테스트를 해볼게요

 

값 변경 후 

git status 를 보면

 

 

git status

 

위 처럼 

저희가 추적하길 원하지 않는

 

WeatherInfo.plist를 추적하고 수정되었다는 것을 git이 알고 있네요..

(이래서 눈치빠른 git은 곤란하다니까... 없어져 줘야겠어..)

 

 

 

 

 

 

여기서 위와 같이

git update-index --skip-worktree 자신의프로젝트명/WeatherInfo.plist

라고 입력해주면

다시 git status를 확인해봤을 때 

WeatherInfo.plist를 더 이상 깃이 추적하지 않는 모습을 볼 수 있습니다.

 

 

 

 

이 명령어는

특정 파일을 skip worktree 에 포함시키는 명령어로

 

더 이상 깃이 WeatherInfo.plist 를 추적하지 않게 됩니다.

 

worktree와 index는 뭔가요?   <- 링크 확인!

 

 

다시 포함시키고 싶다면 아래와 같이 쓰시면 됩니다.

git update-index --no-skip-worktree 다시포함시키고싶은파일명

 

 

---

 

왜 이렇게 복잡하게 하는거죠..?

그냥 처음부터 .gitignore에 추가하면 되는거 아니에요?

 

 

만약 아예 처음부터 git에 파일을 추가한 적이 없고,

그 파일을 처음부터 추적할 생각이 없다면 

.gitignore에 해당 파일을 추가해주시면 됩니다.

(그 방법은 아래에 적어두었습니다.)

 

 

 

그런데 이렇게 하는 이유는

혼자 프로젝트를 할 때도 그렇지만

만약 내가 회사에 지원했는데 과제 형식 테스트를 받게 되었거나, 다른 사람이 내 프로젝트를 본다 했을 때

어디에 apikey를 넣으면 되는지

어떻게 해야 작동하는지 알기 어려울 수 있잖아요?

 

그걸 알기 쉽게 깔끔하게 정리하기 위해서 입니다.

그렇다고 그 사람들 편하라고 내 apikey를 노출 시켜두는 건 위험하니까요!

 

이런식으로 빈 plist 파일을 하나 만들어 두면

이 프로젝트를 보는 사람이

그냥 파일을 찾아 apikey 를 입력하는 것보다

훨씬 직관적이고 깔끔하게 어디에 apikey를 입력해야 하는지 확인할 수 있습니다.

 

 

 

 

그리고 나서 github에 들어가서 확인해보시면~

 

giphy.com

 

 

내가 로컬에서 변경해도 원격에는 반영이 되지 않는 모습을 볼 수 있습니다.

 

 

 

---

 

 

 

apikey를 숨기는 방법은 다양합니다.

아마 검색하시다보면 다른 방법도 많이 나오는데

어떤 방법이 더 좋은 건 없는것 같아요

 

내가 사용하기 편하고 손에 익는 것

혹은 내가 속한 팀이나 회사에서 사용하는 방법을 따르는 것

일 것 같습니다!

 

 

 

 

---

 

 

 

 

후 생각보다 포스팅이 길어졌네요... 😇 (영혼가출)

 

 

 

오늘은 이만 다시 프로젝트를 하러 사라져야곘어요...^^..

제가 포스팅에 쏟은 열정만큼 이 글을 보는 분들께 도움이 되셨으면 좋겠습니다.

 

 

 

아래에는 간단하게 터미널 사용법과

.gitignore 사용법에 대해 작성해봤어요!

필요하신 분은 접은글을 열어 확인해보시면 될 것 같습니다.

 

 

 

그럼 바위~~

(사라질 땐 누구보다 빠르게)

 

 

 

 

 

--------------------------------------------------------------------

[ 초심자를 위한 간단 설명 ]

1

.gitignore 처럼 앞에 . 이 붙는 파일은 숨김 파일 이에요

그래서 그냥 finder로 들어가서는 볼 수 없답니다.

 

2

vim 파일이름

을 터미널에 입력하면 파일을 편집할 수 있어요

이를 vi편집기 라고 하고

vi 편집기, vi 명령어

라고 검색해보시면 추가적인 정보를 얻을 수 있습니다.

 

--------------------------------------------------------------------

[ TIP ]

만약 숨김파일까지 모두 보고싶다면 ???

터미널에

ls -al

이라고 쳐보세요 

( ls : 파일 목록 보이기)

( ls -al : 숨김파일을 포함한 파일 목록을 long 형식으로 보이기)

그럼 위의 사진과 같이  . 으로 시작하는 숨김파일까지 모두 확인할 수 있습니다!

 

그럼 위의 사진과 같이  . 으로 시작하는 숨김파일까지 모두 확인할 수 있습니다!

 

 

[ .gitignore에 추가하여 처음부터 추적안되게 하기 ]

편집기를 열어 키보드에서

a 키

를 누르면 

편집 모드로 바뀝니다.

 

 

이런 식으로요!

 

 

그 상태에서 주황색 네모처럼 작성해주세요!

.gitignore는 git에서 추적하지 말아줬으면 하는 파일 목록이 적혀있는 파일인데, 

거기에 저희가 추적을 원치 않는 파일을 추가해준거에요.

(참고: ## 은 주석처리입니다. 어떤 파일인지 설명을 간단히 적는정도로 작성하시면 될거같아요)

 

그리고

esc 키

를 누른 후

:wq 

라고 입력해주시면

* wq: 저장(write) 및 종료(quit)

 

 

 

vi편집기가 종료되고 다시 원래의 터미널 모습이 뜰거에요.

 

그 상태에서~

이제 깃은 우리의 WeatherInfo.plist 파일 추적을 추적하지 않습니다.

이 상태로 add, commit, push 하시면 깃에 올라가지 않았다는 것을 확인 할 수 있습니다.

 

 

 

 

 

 

 

틀린부분이 있거나, 더 좋은 방법이 있다면 댓글로 남겨주세요! 
🌈댓글은 언제나 환영입니다🙏🏻

 

 

 

 

참고자료

https://compiledsuccessfully.dev/git-skip-worktree/

Git update-index --skip-worktree, and how I used to hate config files

https://backlog.com/git-tutorial/kr/intro/intro1_4.html

누구나 쉽게 이해할 수 있는 Git 입문~버전 관리를 완벽하게 이용해보자~ | Backlog

https://git-scm.com/docs/git-update-index

Git - git-update-index Documentation