꿀팁 저장소

웹뷰를 사용하여 youtube를 간단히 연동할 수 있습니다.

<WebView
  style={{ width: '100%', height: '100%' }}
  mixedContentMode='always'
  source={{ uri: `https://www.youtube.com/embed/bTBmpBUHmVc?controls=1&disablekb=1&egm=1&rel=0` }}
  useWebKit={true} // ios 필수
  scrollEnabled={false}
  domStorageEnabled={true}
  javaScriptEnabled={true}
/>

링크된 영상은 쯔양님의 영상입니다.

체크된 바로는 너무 긴 영상은 로드되지 않는것으로 보입니다.

영상 플레이어 관련 옵션들은

https://developers.google.com/youtube/player_parameters#playlist

여기서 확인할 수 있습니다.

확대하여 전체화면 보기를 하는것은 좀 더 알아본 후 추후 업로드하도록 하겠습니다.

안녕하세요?

간단하지만 매우 유용한, array method에서 async/await용법을 사용하는 방법을 알아보겠습니다.

이는, 서버에 반복적으로 값을 요청해야할 때 매우 유용하게 쓰입니다.

const arr = [ { key: 1 }, { key: 2 }, { key: 3 } ]

const results = arr.map(async (obj) => {
  return await this.fetchSomething(obj.key);
});

Promise.all(results).then((completed) => {
  return completed
});

map외에 filter, some, forEach등등 에서도 얼마든지 자유롭게 활용할 수 있겠죠?

웹사이트 개발 / 홈페이지 제작 / android앱 개발 / ios 앱 개발 / server / client / aws / fullstack / buisness partner / 외주 / 용역

https://open.kakao.com/o/sNETgUJb

http://self-made.cloud

명령어로 collection 내 데이터 확인하는 방법

use database

:  특정 데이터베이스에 접근할 수 있습니다.

show collections

: 컬렉션들의 목록을 확인할 수 있습니다.

db.getCollection('컬렉션 이름').find()

: 컬렉션 내의 모든 데이터(document)를 확인할 수 있습니다.

명령어로 collection내의 데이터를 찾아 업데이트 하는 방법

db.getCollection('컬렉션 이름').findOneAndUpdate({ _id: '아이디 값' }, { $set: { 바꿀것: '이렇게 바뀜' } })

: findOneAndUpdate가 핵심 키워드 입니다. 이는 단 하나의 document를 찾아내 그 값을 업데이트 합니다.

메서드의 첫 매개변수로 조건식이 옵니다. 위에 서는 { _id: '아이디 값 } 에 해당합니다.

_id가 아닌 다른것을 통해 조건을 지정해도 상관없습니다.

메서드의 두번째 매개변수는 업데이트 할 내용입니다.

$set을 이용해 수정하거나 $push를 이용해 추가할 수도 있습니다.

$ne 란?

- $ne: '' 는 ''을 제외하고 나머지를 가져온다는 뜻

- $not: { $ne: ''  } 와 같이 사용할 수 도있음.

div태그를 textarea와 같이 사용하는 것은, 종종 쓰이므로 간단하게 정리를 해보고자 한다.

stackoverflow에서 쉽게 찾아볼 수 있지만 언제 지워질지 모르기에 기록을 해둔다.

<textarea>I am a textarea</textarea>

<div id="textarea" contenteditable>I look like textarea</div>

<input value="I am an input" />

<div id="input" contenteditable>I look like an input</div>

위의 것들을 직접 실행시켜 보면 어떻게 다른지 어떻게 쓰일수 있는지 짐작이 갈것이다.

나는 이 중에서 div contenteditable을 사용할 예정이다.

[redux]

최신 웹 기술들을 접하는걸 즐기는 사람이라면 누구나 한번쯤은 들어봤을 법한 라이브러리다.

도대체 redux란 무엇일까? 사람들이 왜 redux에 열광하는 것일까?

난 react가 정말 완벽하다고 생각하고 사용하고 있었으며, redux는 불필요한 것으로 치부하고 배우지 않고있었다.

사실은 도망친 것일수도 있다.

왜 이렇게 배울게많은거야? 또 새로운 거야? 하고말이다.

(이미 나온지 한참됐지만)

그치만 최근 개발하여 론칭한 대규모의 앱인  '공무원 시험일정, 공시생 SNS: 공투공' 을 만들며 그 필요성을 절실히 느끼고 익히게 되었다.

아니, 익히고 있는 중이다.

경험을 바탕으로 말하자면, 정말 작은 프로젝트에서까지 redux를 적용할 필요는 없을것 같다

(경우에 따라서는 필요할수도)

하지만, 규모가 커질것으로 예상되거나 큰 규모의 프로젝트를 계획하고있다면 redux는 확실히 도입해볼법한 라이브러리다.

그렇다면 도대체 redux란 무엇인가?

간단히 검색해보면 알수있듯 상태 관리 라이브러리다.

상태 관리란 무슨 의미일까?

프로젝트 내에는 다양한 오브젝트들이 있는데 그 안의 변수, 메서드 등의 현재값을 상태라고 본다.

그렇다면 상태를 관리한다는 것은 무슨 의미일까?

프로그램 내에는 다양한 범위(전역, 지역, 지역의 지역...)의 변수, 메스드 등이 존재한다.

이런 상황에서 특정영역A의 변수값a, 특정영역B의 변수값 b가 있을 때, b의 변화에따라 a의 값을 바꿀수 있겠는가?

생각해 본적 있는가? 있을것이다. 물론 없을수도 있다. 지금 생각해보면 된다.

잠시만 생각해보면 전역으로 모든 값을 관리하면 가능하다는 결론을 도출할 수 있다.

이런 생각에 기반해서 등장한 것이 상태관리 라이브러리다.

유용하고 유명한 상태관리 라이브러리로는 redux, mobx등이 있다.

이 중에서 redux를 알아볼 것이다. 얕지만 누구나 이해할 수 있는 수준에서.

redux를 사용함에 있어 알아둬야할 사항을 먼저 얘기하고 시작한다.

1. redux는 라이브리리이다. 따라서, react와 함께는 물론 어느 환경에서도 유연하게 적용할 수 있다.

2. redux의 등장배경을 떠올려보면 당연한 이야기이지만, 프로젝트 내에는 단 하나의 'store'만이 존재한다.

3. '상태'는 immutable하다. 겁먹을 필요없다. 그저 '읽기전용' 이라고 생각하면 된다. 상태에 대하여 직접 입력, 수정 등을 행하지 않는다.

4. 앞으로 알게될 'reducer'는 '이전의 상태'는 건드리지 않고 '다음의 상태'값만을 생성해서 반환한다.(순수한 함수)

이제, 다음 글에서 본격적으로 redux를 어떻게, 어떤 구조를 이루어 써야하는지 알아본다.

ReactNative 최고의 장점은 누가 뭐래도 크로스 플랫폼이라는 것이다.

나 또한 그것이 RN을 선택하게 된 이유 중 하나였다.

그동안 ios 개발은커녕 ios, mac os 그 무엇 하나 이용해본 적이 없던 나에게는 수많은 시련이 다가왔다.

안드로이드 개발도 전혀 경험이 없었지만 윈도우에서 개발이 가능하다는 것과 그동안 계속해서 안드로이드 핸드폰을 써왔다는 것만으로 친숙한 환경에서 개발하는 듯한 느낌을 주었다. 그래서 훨씬 수월했다. (솔직히 안드로이드가 개발이든 배포든지 간에 더 쉬운 것 같다.)

첫 번째 시련은 mac 없이는 보다 정확히는 mac의 xcode 없이는 개발이 불가능하다는 것을 알게 되었다.

개인 개발자에 불과했던 내게는 금전적인 벽은 생각보다 넘기 힘든 부분이었다.

모두가 잘 알고 있듯이 맥의 가격은 일반 노트북들보다 몇십만 원 이상 비싸다.

다행히도 내게는 지문 자국 하나 나지 않은 새것에 가까운 LG 그램이 있었고, 그램을 판매 후 중고 맥북을 사들였다.

맥을 이용해 안드로이드와 ios를 넘나들며 꾸준히 두 개의 플랫폼 모두 잘 만들어가지고 있는지 체크했다.

이 과정이 생각보다 귀찮은 부분이다. (안드로이드를 베이스로 개발하며 중간중간 ios가 잘 되고 있는지 체크했다.)

개인적으로는 안드로이드는 제법 수월했다. 크기가 아닌 비율을 활용해서 개발을 하고 나면 어느 기종이든 상관없이 화면이 아주 깔끔하게 잘 나왔다. (어느 블로그에서 보면 수천 종의 안드로이드 디바이스에 맞추는 것을 어려운 일이라고 하나 그것은 잘못된 얘기라고 생각된다)

하지만, 역시나 문제는 ios였다. 첫 번째로, iPhonX와 같은 무베젤 폰에 대한 처리가 필요했다.

react-native-iphone-x-helper라는 npm 라이브러리를 이용해 기종 체크를 하고 padding을 주는 것으로 처리하였다.

두 번째로, iPhoneX가 아니어도 안드로이드와 다르게 상태 바(status bar) 영역을 존중하지 않고 개발한 화면이 해당 영역을 침범하는 것이 발견되었다. (안드로이드에서는 상태 바 영역은 고유의 영역으로 개발자가 임의로 침범할 수 없다. 따라서, 별도의 핸들링을 해줄 필요가 없다)

마찬가지로, ios 중 무베젤이 아닌 기종의 경우에 대해서 padding을 주는 것으로 처리하였다.

마지막으로, 팁을 하나 주고자 한다.

모든 screen의 가장 바깥쪽을 커스터마이징한 VIew 컴포넌트로 감싸주는 것이 내게는 아주 도움이 되었다.

<CustomView> ... </CustomView>

이런 식으로 모든 화면을 감싸두면, 나중에 위의 사례와 같이 화면 비율이나 기기 특성에 따라 모든 화면의 스타일을 핸들링해야 될 때 정말 편하게 할 수 있다.

React의 Ref

Javascript의 사용자라면 this에 대해 많은 고민을 해봤을것이다.

this는 대체 지금 무엇을 가리키고 있는가는 초보개발자라면 한번쯤 고민해본 문제이며 이 때문에 시련을 겪어보았을것이다.

React에서의 Ref는 this의 연장선 상에 있다고 본다.

아주 쉽게 Ref에 대해 얘기한다면 자식 클래스의 변수, 메서드 등의 프로퍼티들을 현재의 클래스에 사용(호출)하기 위한 도구 수준으로 생각할 수도 있다.

예를들어, 이런것이다.

자식 클래스에 fetchUserInfo라는 메서드가 있다.

그런데, 현재 작업중인 부모클래스에서 어떠한 경우에 자식클래스의 fetchUserInfo를 호출하고 싶은 경우가 생길 수 있다.

생각보다 이런일은 자주 생긴다.

이럴때 간단히 자식클래스에 ref를 해주면 간편하게 호출할 수 있다.

자식클래스가 User와 관련되었다면, 부모클래스에서 호출한 자식클래스에 다음과 같이 작성해주면 그만이다.

<User ref={ (user) => { this.user = user;  }} />

그러고 나면 this.user.fetchUserInfo(); 와 같이 자식클래스의 메서드를 호출할 수 있게된다.

뿐만아니라 state, props등에도 접근할 수 있으니 아주 편리하다고 볼 수 밖에 없다.

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

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

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

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

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

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

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

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

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

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

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

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