한지 - 한조각 쓸모있는 지식 레터

이번에는 React-Native로 '공무원 시험일정, 공시생 SNS: 공투공'을 개발하면서 사용했던 코드작성법에 대해서 공유할까한다. 나는 원래 그렇게 코드를 잘짜는 사람도아니고, 깔끔한 코드를 추구해왔던 사람도 아니다.

하지만, 내가 이번 프로젝트를 성공시킬 수 있고 많은 개발자들의 협업하에 프로젝트가 발전해 나갈 것이라고 굳게 믿고있기에 남 보기좋은 깔끔한 코드를 작성해야겠다고 마음 먹게 되었다.

개발을 진행하면서도 코드 양식을 통일하기위해 몇번을 다시 작성하기도 하였다.

변수의 선언은 언더바를 활용한 표기법을 채택하였다. (예: next_val)

함수명은 낙타식 표기법을 사용하였다.(예: fetchUser)

파일의 구조는 components, lib, screens, stacks, actions, reducer, styles로 구성되어있다.

components아래 common을 두어 공통적으로 쓰이는 컴포넌트를 만들어 두었고 그외에는 screen별로 쪼개어 컴포넌트들을 만들었다.

따라서, screens에는 커스터마이징된 컴포넌트들로 구성된 아주 보기좋은 코드만이 남아있다. method는 화살표함수를 기본원칙으로 했다.

또한, method는 이름에서 명시된대로만 동작해야하며 추가적인 동작은 최대한 지양하였고, 모듈화를 통해 똑같은 함수를 다시쓰는일은 줄이도록 했다.

일명 TS, TypeScript는 채택하지 않았다. 대세이긴 하지만 내가 아직 받아들일 마음의 준비가 되지않았다. 없이도 코드짜는데 문제가 없다는 자기위로식 마인드가 아직 남아있다. propTypes는 적극 활용하였다. 

코드를 작성하며 가장 어려웠던 부분은 모듈화이다. 전체적인 설계가 완벽하게 나오지 않은 상황에서 코딩을 해나간것이 문제였다.

항상 코딩전에 미리 생각 가능한 범위에서 간단한 설계를 하고 작업에 들어갔지만, 생각을 벗어나는 일은 존재했다. 이것은 내가 개발 중간중간에 지속적인 코드 리팩토링을 통해 계속해서 모듈화 해가게 만들었다. 이것인 전체적인 개발기간을 다소 길어지게 만들었다. (그래도 생각보다도 훨씬 빨리 완성했지만)

이미 React-Native를 위한 제법 많은 라이브러리가 등장했다.

푸시, 페이스북 로그인 등 묵직묵직한 라이브러리부터 부분적인 컴포넌트에 해당하는 라이브러리까지

수많은 라이브러리들의 홍수속에 자신의 프로젝트에 알맞는, 쓸만한 라이브러리를 찾는것 또한 개발자의 역량이다.

나 역시도 라이브러리 선택에 몇차례 실패한 경험이있다.

원하는 것이 아니었거나, 퍼포먼스가 만족치 못하거나. 그럴때가 있었다.

그렇게 직접만들게된 라이브러리가 몇몇있다.

예를들어, 커스터마이징된 Silder, Modal, Alert, Gallery, View 등등

그럼 본론으로 돌아와 몇몇 핵심적인 라이브러리를 소개하고자 한다.

React-Native로 앱을 개발하게 되면 필수적으로 선택해야되는 라이브러리가있다.

바로 화면전환. Routing과 관련된 라이브러리다

react-navigation, react-navigation-tabs 가 대표적이다

나는 그 중 react-navigation을 선택하였다.

솔직히 별다른 이유는 없었다. 더 많은 사용자가 선택하였고, Issue에 대한 피드백이 좀 더 좋아보였기 때문이다.

선택할때 비교해보지는 않았지만 Docs도 상당히 잘되어있다.

Docs를 보지않고 사용한다면 바보 소리를 들어야 할 정도로 잘되어있다.

다음으로 소개할 라이브러리는 react-native-vector-icons이다.

Web에서 아주 유용하게 사용했던 Fontawesome의 아이콘을 사용할 수 있을까? 에서 출발한 생각이 react-native-vector-icons에 이르게 했다. Fontawesome외에도 수 없이 많은 아이콘을들 쓸수 있게되었다. 이 아이콘들은 폰트로써 설치되며 빈번히 사용되는 이미지를 써야되는 경우 이미지를 대체하기위해 사용하게 되었다.(용량 혹은 서버에서의 호출하는 비용을 아끼기위해) 아래의 링크에서 아이콘 목록을 확인할 수 있다.

https://oblador.github.io/react-native-vector-icons/

마지막으로 소개할 라이브러리는 Web에서도 자주 사용했던 라이브러리인 Axios와 Moment이다.

Axios는 Rest API통신을 위해 사용한다.

BaseUrl등 간단한 설정을 해두면 아주 간편하게 사용할 수 있다.

Moment는 시간과 관련하여 JS진영에서 가장 인기있는 라이브러리이다.

사용법도 아주 쉽고 Docs가 정말 잘되어있다.

안녕하세요?

웹개발에서 앱개발로 전향한지 4개월

여러 고비를 넘어 드디어 첫 앱을 세상에 내놓았습니다.

바로 전국에 힘들게 공부하는 공시생들을 위한 SNS인

'공무원 시험일정, 공시생 SNS: 공투공' 입니다.

'타임라인, 검색, 팔로우'는 물론, 일반 SNS들과는 다르게 '시험일정, 메모, 스크랩, 학습관리' 등을 통해 공시생들에게 특화된 SNS환경을 조성해주는것을 목표로 하고 있습니다. 기본적이 사용방법은 기존의 SNS들처럼 #해시태그하고 @언급하는 방식으로 사용할 수 있습니다.

사길, 기존에 유사한 형태의 카페들이 다수 존재합니다.

그러나 게시판 형식에 얽매여있는 카페의 구조로는 사용자가 직접 원하는 정보를 찾아가만 합니다. 즉, 원하는 정보를 얻기위해서는 그만큼의 시간과 노력이 필요하죠. 원하는 정보가 있는 게시판에 들어가, 필요한 정보가 올라왔는지 모든 글들을 일일이 확인해보아야합니다.

 SNS인 '공투공'은 어떨까요?

관심있는 키워드를 단 한번의 터치로 팔로우 하고, 좋은 게시글을 자주 공유해주는 다른 사용자를 팔로우 하기만 해도 원하는 정보를 개인화된 나만의 타임라인을 통해 확인할 수 있습니다. 멋지고 유익한 나만의 게시판을 하나 갖는셈이죠.

늘 시간과의 싸움을 하고있는 공시생 여러분들에게 정보검색의 효율을 높이고, 유용한 정보를 쉽고 빠르게 다량으로 얻을수 있다는것은 정말 반가운일 이 아닐 수 없습니다.

또한, SNS인만큼 다른 사용자들과의 교류를 위한 기능들을 충분히 지원하고 있습니다. 특히, 기존의 카페들에서 가장 많이 올라오는 글 중에 하나인 스터디 모집을 SNS에서 한다면, 관심있어 하는 사용자들에게 별다른 노력없이 노출시키고 쉽게 인원을 모집할 수 있을것입니다. 

구글 플레이스토어, 애플 앱스토어에서 모두 다운받을 수 있습니다.

공시생님들의 건승을 빕니다. 감사합니다.

[관련 이미지]

[소개글]

공시생에서 공무원으로 가는 여정의 첫 번째 준비물

공무원 시험 일정, 시험 과목, 스터디 모임 등 필요한 모든 소식을 팔로우 하고 다른 사용자들과 소통해보세요.

국내유일 공시생, 공무원을 위한 소셜 네트워크 서비스

시험 일정, 시험과목, 스터디 모임, 고시원 정보 등 수험 생활에 꼭 필요한 핵심 정보부터

스크랩, 해야 할 일 목록, 학습 일지 등 학업 관리에 필요한 모든 도구까지!

더 쉽고 편리하게 찾아보세요

- 지금 내게 필요한 정보 검색

- 관심 있는 소식은 팔로우

- 시험 일정 등 중요한 정보는 스크랩

공무원 합격을 위한 나만의 학습 관리 도구

- 해야할 일 메모로 매일매일 학습 일정 관리

- 하루 한 줄 학습 일지 작성으로 하루를 돌아보고 스스로를 점검

다른 사용자들을 팔로우하고 소통하기

- 수험생활의 다양한 노하우, 정보, 궁금증, 다짐 등을 공유하기

- 수험생활에 필요한 모임, 서로 힘이 되어줄 친구 구하기

- 다른 사용자들의 소식을 확인하고 좋아요, 댓글로 관심 표현하기

[자세한 내용]

https://baek2sm.github.io/zero_to_gong/web/