Delia's Note

회사에서 채택했던 hapi 프레임웍을 소개한다. hapi 는 express 와 달리 파서가 필요없다. 필요한게 다~~ 있다. https://hapi.dev/ hapi.dev Build powerful, scalable applications, with minimal overhead and full out-of-the-box functionality - your code, your way Originally developed to handle Walmart’s Black Friday scale, hapi continues to be the proven choice for enterprise-grade backend need hapi.dev 문서화가 매우 잘되어있어서 적용도 쉽고, validation 을 위..

www.google.com/recaptcha/about/ 상단 Admin Console 클릭 > 원하는 구글 계정으로 로긴 우측상단에서 + 를 클릭하면 아래와 같은 화면이 나오는데 값을 입력하고 체출 클릭 *주의 : localhost 도메인을 지원하지 않으므로 로컬 테스트의 경우는 127.0.0.1 을 도메인으로 등록 dev 용과 production 용 사이트를 별도로 등록하기를 google 에서는 권유 입력하면 다음과 같이 사용할수있는 키를 제공 - 이후에 설정 페이지에서 확인가능 키를 이용해서 HTML 에 입력하면 됨. HTML 에 넣어보기 - 로봇이아닙니다를 클릭하고 완료되면 onSubmit() 이 호출됨 서버측 사용방법은 다음기회에!

이전 프로젝트에서는 squel 을 사용했었는데 지금은 knex 를 사용하고있다. 노드 서버에서 사용할 수 있고 우측 상단에서 database 를 선택해서 원하는 디비세팅으로 문서를 참고하면 된다. Promise 기반이고 toString() 을 이용해서 쿼리를 직접 확인할수도 있다. 문서화와 예제가 잘 되어있어서 매우 유용하다. Knex.js - A SQL Query Builder for Javascript The knex.schema is a getter function, which returns a stateful object containing the query. Therefore be sure to obtain a new instance of the knex.schema for every query..

lodash 는 자바스크립트에서 유용하게 사용할수있는 유틸리티 라이브러리다. 빈문자열 체크부터 다양한 기능을 갖고있는 배열과 오브젝트를 위한 유용한 유틸리티다. 예전에는 isEmply 나 isNull 같은 함수를 만들어서 사용했지만 이제 로대시 하나면 끝. 없으면 일이안되는 모듈. Lodash _.defaults({ 'a': 1 }, { 'a': 3, 'b': 2 });_.partition([1, 2, 3, 4], n => n % 2);DownloadLodash is released under the MIT license & supports modern environments. Review the build differences & pick one that’s right for you.Installati..

https://www.npmtrends.com/ NPM Trends: Compare NPM package downloads Which NPM package should you use? Compare NPM package download stats over time. Spot trends, pick the winner! www.npmtrends.com 나는 모듈 버전관리로 npm 을 사용하고 있는데 필요한 오픈소스를 찾다보면 비슷한 여러 모듈이 많아서 어떤걸 선택해야 할지 고민될때가 있다. 이럴때 유용하게 쓸 수 있는 사이트가 바로 npm trends 사이트다. npm 를 사용하는 모듈을 넣으면 다운로드 수 및 이슈 등등 비교 해 볼수 있어서 나는 주로 여기서 모듈 비교를 해보고 가장 많이 사용되는 모듈을..

회사에서 webrtc 를 이용한 웹 비디오 챗을 만들었는데 꽤 오랫동안 작업해서 지금은 안정화 되었지만, 이게 참 이슈가 많았다. webrtc 는 브라우저가 제공하는 비디오 & 오디오 관련 API 인데 브라우저별로 서포트 하는 범위가 버전별로 다르다. 가장 힘들었던 부분이 크로스 브라우징 이었는데, 대부분의 기능들은 브라우저 자체가 서포트하기만 하면 adapter를 이용해서 polyfill 이 가능하다. 문제는 아예 이를 지원하지 않는 브라우저 대표적으로 IE 같은 것들. 그리고 의외의 복병이었던게 안드로이드의 자체 브라우저나 앱에서 링크를 클릭했을때 앱 내부에서 임베디드 식으로 사용되는 브라우저들의 문제였다. 뭐 이들은 그렇다 치고, 가장 힘들었던게 바로 Peer2Peer 프로세스를 이해하는 것이었는데..

notistack 이라는 모듈인데 material ui 에서 채택하고 있는 써드파티 모듈이다. 디자인도 깔끔하고 커스터마이징도 쉬워서 매우 선호하는 모듈이다. Snackbar React component - Material-UI Snackbars provide brief messages about app processes. The component is also known as a toast. material-ui.com 다음과 같이 웹사이트에 안드로이드의 스낵바 같은 메시지를 디스플레이 할 수 있다. 사용하는 아이콘도 바꿀수 있고 각 컬러를 설정가능하고, 디스플레이 할수 있는 갯수, 위치 등도 수정 가능하고, 추가로 버튼같은 액션도 넣을 수 있다. SnackbarProvider 로 앱을 감싸주면 하위 ..

Promise 는 자바스크립트에서는 없어서는 안될 덕목? 이다. Promise 없는 자바스크립트는 상상할수없어이제......ㅠㅠ React.useEffect 안에서는 await 을 쓸수없다. 만약당신이 await 을 썼다면 리액트가 바로 당신을 혼줄 내줄것이야 - 는 개소리고 콘솔에 경고문을 보게된다. React.useEffect(async () => { // 이렇게 쓰면 안되고 const result = await axios( 'https://something.com/api', ); setData(result.data); }, []); 그렇다면 어떻게 사용해야 할까? promise 부분을 별도의 함수로 만들어서 호출한다. React.useEffect(() => { fetchData(); }, []); ..

Function 컴포넌트에서 useState 를 사용하고있고, setTimeout 함수안에서 특정 state 값을 체크해야 하는 상황인데, 이상하게도 분명히 setTimeout 함수가 실행되기 전 state 를 변경해주었는데도 setTimeout 호출 함수는 setTimeout 세팅 시점의 값을 가져오고 있었다. const [status, setStatus] = React.useState('ready'); function onClick() { setTimeout(() => { console.log('after timeout: ', status); }, 1000); setStatus('started'); } console.log('rendering :', status); return Click; 나의 경우..

https://reactjs.org/docs/hooks-intro.html Introducing Hooks – React A JavaScript library for building user interfaces reactjs.org Hooks 는 리액트의 function 컴포넌트에서 사용할 수 있다. 간단히 사용방법을 알아보자. React.useState class 컴포넌트에서 사용하는 state 와 setState 대신 사용하는 것은 React.useState 이다. 간단한 사용방법을 알아보자. const [count, setCount] = React.useState(0); useState() 괄호안에 들어가는 값은 디폴드 값이다. 위의 예제는 count 값으로 0 을 기본 세팅하고 count 값을 수..