꿀팁 저장소

종종 쓰이지만, 쉽게 까먹는 git명령어에 대해 짚어본다.

협업을 하다보면 원격 브랜치에 푸시를 해야하는 경우가 있다.

(= 혹은, 로컬에 새로운 브랜치를 생성하고 해당브랜치를 원격 저장소에 푸시하는 경우가 있다.)

1. git checkout -b feature_branch_name

2. Edit, add and commit your files

ex)

  > git add -A

  > git commit -m 'something message'

3. git push -u origin feature_branch_name

sns관련 meta태그 설정이 존재한다.

자, 빠르게 필요한 부분만 정리해본다.

// 공통
<title>타이틀</title>
<meta name='descriptoin' content='소개글'/>
<meta name="Copyright" content="selfmade" />
<meta name="author" content="selfmade" />

// facebook, kakao
<meta property='og:url' content='https://stock.selfmade.cloud'/>
<meta property='og:type' content='website'/>
<meta property='og:title' content='타이틀'/>
<meta property='og:descriptoin' content='소개글'/>
<meta property='og:image' content=''/>

// twitter
<meta name="twitter:title" content="타이틀" />
<meta name="twitter:description" content="소개글" />
<meta name="twitter:image" content="" />
<meta name="twitter:card" content="photo" />

이것을 설정해야만 링크를 공유할 때, 이미지 소개글 등이 제대로 나타난다.

※ 단, 카카오 공유시 이미지가 변경되지 않을때, 캐시를 지우도록 하자.

https://developers.kakao.com/docs/cache

NoSQL을 다루다보면 제목과 같은 일이 제법 빈번히 발생한다.

const ProductSchmea = new mongoose.Schema({
  ...
  comments: [
  	{
      userId: ...,
      comment: ...,
      createdAt: ...,
      updatedAt: ...,
    }
  ]
});

위와 같은 설계를 하는일이 제법 많기때문이다.

상품에 대한 댓글을 위처럼 관리하면 매우 쉽기 때문이다.

그런데 comments를 수정하려면 어떻게 할까...? 가 문제다.

먼저, comments를 추가하는것은 제법 간단하다.

...
try {
  const commentInfo = {
    userId: ...,
    comment: ...,
  };
  
  await Prodcut.findOneAndUpdate({ _id: id }, { $push: { comments: commentInfo } }).exec();
} catch(error) {
  ...
}
...

이런식으로 push해서 넣으면 끝..!

대망의 수정이다.

알고나면, ? 쉽네 뭐야 어떻게 된거지? 라고 할만큼 쉽다.

하지만, 모르면 도저히 그 방법을 찾을수가없다.

...

try {
  await Product.findOneAndUpdate(
    { _id: id, 'comments._id': commentId }, 
    { $set: { 'comments.$.comment': '수정해버림' } 
  }).exec();
  
} catch(error) {
  ...
}

...

포인트는 두가지이다.

1. comment._id를 알아야한다는 것.

2. comments.$.comment

여기서 .$은 javascript의 [n]을 대신해준다.

위의 정보는 은근히 찾기 어려워 이렇게 간단히 주석을 남긴다.

create-react-app, 통칭 CRA는 2018년 부터 IE에 대응하지 않는다고 선언했다.

실제로 CRA로 만든 프로젝트를 IE에서 실행시키면 화면에 아무것도 노출되지 않는다.

대한민국에 사는 우리는 IE에서도 서비스를 해야만한다...

IE에 대응하는 방법은 의외로 간단하니 알아두자.

// 모듈 설치
npm install react-app-polyfill


// index.js - 1번째줄  (반드시 1번째 줄 부터 설정)
import 'react-app-polyfill/ie9'
import 'react-app-polyfill/ie11'
import 'react-app-polyfill/stable'
...


// package.json
{
  ...
  "browserslist": {
      "production": [
        ">0.2%",
        "not dead",
        "not op_mini all",
        "ie 9"
      ],
      "development": [
        "last 1 chrome version",
        "last 1 firefox version",
        "last 1 safari version",
        "ie 9"
      ]
   },
  ...
}

안녕하세요, react-naitve의 webview를 마스터해보는 시간을 갖겠습니다.

저는 유튜브 영상처리를 위해 webview를 써오고 있는데요.

webview는 생각보다 많은 처리가 가능하더라고요~

그래서 한번 정리해보려 합니다.

1. source

source는 유일한 필수 property입니다. 따라서, 반드시 지정해주어야 합니다.

source에는 uri 또는 html이 올 수 있습니다.

말 그대로 page url이나 html을 작성하면 되는대요.

// uri 예제
<WebView 
	source={{ uri: 'https://naver.com' }}
/>

// html예제
<WebView 
	source={{ html: "<p>여기는 다음 티스토리</p>" }}
/>

2. useWebkit

공식문서에서는 해당 속성의 설명을 다음과 같이 하고있습니다.

"If true, use WKWebView instead of UIWebView."

그런데, 최신의 ios버전(아마 12부터)에서는 UIWebView 를 지원하지 않기 때문에 필수적으로 useWebkit을 사용해야합니다.

꼭, true로 값을 지정해주시기 바랍니다.

3. injectedJavaScript

webview의 source에서 지정한 것이 로드된 후에, 해당 페이지 또는 html에 javascript를 넣어주는것인데요.

다양한 용도로 쓰일 수 있겠죠?

응용해보시기 바랍니다.

(javaScriptEnabled를 함께 true로 지정해주어야 합니다.)

4. allowsInlineMediaPlayback

html의 비디오 태그에는 playsinline라는 속성이 있습니다.

ios에서 영상이 자동으로 fullscreen이 되는것을 막아주는 속성인데요.

webview에서도 해당 속성을 true로 지정해주면 같은 효과를 낼 수 있습니다.

5. 그 외

mixedContentMode, domStorageEnabled, mediaPlaybackRequiresUserAction 과 같은 다양한 속성이 있습니다.

다방면으로 대응 가능한 유용한 WebView!!

잘 활용해보시기 바랍니다.

NoSQL에서 배열은 DB의 자료형으로써 매우 자주 쓰이는 편입니다.

어떻게 array에 특정 조건을 걸어서 값을 필터링하는지 간단히 살펴보겠습니다.

* 키워드는 elemMatch

const filtered_examples = await ExampleCollection.aggregate([
	{
		$lookup: {
			from: 'joinedCollection',
			localField: 'localField,
			foreignField: 'joinedCollectionField',
			as: 'retunName',
		},
	},
	{
		$match: {
			examples: { $elemMatch: { name: 'johndoe' } },
		},
	},
])

nodejs에서 s3에 이미지를 업로드하는 방법은 두가지가 있습니다.

1.  multer-s3사용하기

2. s3, api사용하기

nodejs를 통해 개발을 해오신분이라면 multer에 익숙하리라 생각합니다.

multer-s3는 이미 업로드의 위치를 s3의 버킷으로 합니다. 

간단히 살펴볼까요?

* multer, multerS3 사용

const multer = require('multer');
const multerS3 = require('multer-s3');
const aws = require('aws-sdk');

aws.config.update({
    accessKeyId: myAccessKey,
    secretAccessKey: mySecretKey,
    signatureVersion: 'v4',
    region: myRegion,
});

const s3 = new aws.S3();

const imageUpload = multer({
    storage: multerS3({
        s3: s3,
        bucket: 'myS3Bucket',
        metadata: (req, file, cb) => {
            cb(null, { fieldName: file.fieldname });
        },
        key: (req, file, cb) => {
            cb(null, Date.now().toString());
        },
    }),
});

이와같이 어렵지 않게 업로드 할 수 있습니다.

* 이번에는 AWS에서 document의 putObject를 살펴보겠습니다.

var params = {
	Body: <Binary String>, 
	Bucket: "examplebucket", 
	Key: "HappyFace.jpg", 
	Tagging: "key1=value1&key2=value2"
};

 s3.putObject(params, function(err, data) {
	if (err) console.log(err, err.stack); // an error occurred
	else     console.log(data);           // successful response
	/*
	data = {
		ETag: "\"6805f2cfc46c0f04559748bb039d69ae\"", 
		VersionId: "psM2sYY4.o1501dSx8wMvnkOzSBB.V4a"
 	}
 	*/
 });

두 방법 모두 간편하여, 원하는 방법으로 사용하시면 될것같습니다.

현재, 저는 multer를 쓰고있지만, 이왕이면 aws에서 가이드해주는 방식을 따르는것이

좋다고 생각합니다.

늘 그렇듯 버그에 직면하고 해결했습니다.

ios13의 다크모드가 나오면서

이와 와같이 날짜가 나타나지 않는 (사실은 하양글씨로 바뀌어서;;)

버그를 만났습니다.

* 해결방법

1. 먼저, 최신버전의 react-native-modal-datetime-picker를 설치해줍니다.

제, 기준으로는 7.6 이전버전입니다.

darkMode옵션이 추가됐지만 먹지않는 상황인데요.

2. react-native-appearance모듈도 설치해줍니다.

rn - npm install react-native-appearance / react-native link react-native-appearance

expo - expo install react-native appearance

3. node_module/react-native-modal-dateitme-picker로 찾아들어갑니다.

4. 상단에 코드를 두줄 추가해줍니다.

import { Appearance } from 'react-native-appearance';
const colorScheme = Appearance.getColorScheme();

5. darkmode를 체크하는 옵션을 넣어줍니다.

defaultProps부분의 darkmode옵션을 다음과 같이 설정하면 됩니다.

isDarkModeEnabled: colorScheme === 'dark',

6. 마무리로 유지보수 단계에서 버전업이 혹시나라도 될수있으니 package.json의 버전을 ^7.6과 같이 고정해줍니다.

7. 그래도 부족하니 ReadeME에 명시해줍니다.

8. 7.6이상의 버전에서는 node_module까지 가지않고 isDarkModeEnabled옵션을 사용하여 간단히 처리할 수 있습니다. ^^ 업데이트 하세요~

* Null field 어떻게 조건식에 넣지?

NoSql에서 쿼리문을 짜다보면 종종 필드값을 갖지않은 컬렉션을 골라내야할 때가 있습니다.

그때를 위해 간단히 알아보도록 하겠습니다.

Case 1:

// 필드가 존재하지 않거나, 필드의 값이 null인 것
db.inventory.find( { item: null } )

Case 2:

// field가 존재하지 않는 것
db.inventory.find( { item : { $exists: false } } )

react-native의 shadow 속성에 대해 좀더 자세히 알아보는 시간을 가졌습니다.

한번 살펴볼까요?

이것 하나면 끝!

https://ethercreative.github.io/react-native-shadow-generator/

더 알아보기...

* ios에서 shadow 사용하기

iosShadow: {
	shadowColor: '#4d4d4d',
	shadowOffset: {
		width: 8,
		height: 16,
	},
	shadowOpacity: 0.3,
	shadowRadius: 4,
}

친숙한 shadow옵션을 사용하네요.

어렵지않게 구현할 수 있습니다.

* android에서 shadow 사용하기

androidShadow: {
	elevation: 6,
}

아주 심플한 속성, elevation을 통해 shadow를 줄 수 있습니다.

반대로 생각하면 디테일하게 설정을 못한다는 단점이 있네요.

* 하나의 프로퍼티로 ios, android shadow모두 지정하기

두 플랫폼의 shadow설정 방식이 다르다고해서 위와 같이 두가지 프로퍼티로 관리한다면

다소 귀찮을 수 있습니다.

그래서, shadow속성을 다룰때는 보통  Platform.select기능을 이용합니다.

shadow: {
	...Platform.select({
		ios: {
			shadowColor: '#4d4d4d',
			shadowOffset: {
				width: 8,
				height: 8,
			},
			shadowOpacity: 0.3,
			shadowRadius: 4,
		},
		android: {
			elevation: 8,
		},
	}),
},

* 노하우 / 디버깅

구글링해도 찾기 쉽지않은 개발 노하우가 있습니다.

사실, react-native의 shadow를 사용하다보면 이상하게 동작하는 경우를 종종 마주하게됩니다.

overflow가 안먹힌다거나, 주지도않은 overflow속성이 들어간것 처럼 shadow가 잘릴때도 있습니다.

그 중에서, List모듈(Flatlist, Scrollview 등) 내 컴포넌트들에 shadow를 주는 요령입니다.

그냥 주었다가는 뭐야 왜 잘리지? 하는 상황을 겪을수 있으니 주의하시기 바랍니다.

List모듈 혹은 그 부모 컴포넌트에 padding/margin등의 속성을 사용하고있는 상황에서,

그 내부 컴포넌트에 shadow를 주면 잘리는 경우를 맞닥드렸을 때는!

그 padding, margin 스타일들을 제거하고 LIst모듈의 contentContainerStyle에 padding/margin을 먹여야 합니다.