yceffort

WebSocket 웹은 전형적으로 HTTP 요청에 대한 HTTP 응답을 받고, 이에 따라 브라우저 화면을 새로 만드는 방식이다. 따라서 데이터 통신은 요청과 응답이 한 쌍으로 묶여왔다. 그러나 웹 페이지가 보다 쉽게 상호작용을 하려면, 브라우저와 웹 사이에 이러한 요청 - 응답 방식이 아닌 더 자유로운 양방향 메시지 송수신 기술이 필요하다. 이러한 요구를 충족하기 위해 HTML5에서 표준안의 일부로 WebSocket이 등장하였다. 문서보기: https://html.spec.whatwg.org/multipage/web-sockets.html Caniuse: https://caniuse.com/#feat=websockets Socket.io https://github.com/socketio/socket.io Socket.io는 WebSocket이 나올 당시 (2011년 쯤?) 모든 브라우저가 지원하지는 않았으므로, 대다수의 브라우저에 WebSocket…

네이버 클라우드 플랫폼의 서비스 중 하나인 https://www.ncloud.com/product/applicationService/sens 로 SMS를 발송하는 예제. ncloud서비스를 다 써본건 아니지만, 는 전 서비스에 다 똑같이 쓸 수 있을 것 같은 기분이다.

regex를 활용해서 숫자에 , 를 찍어서 formatting을 해보자. 1. 첫번째 시도 인터넷에 가장 많이 떠돌아 다니는 해결책으로, 아쉽게도 소수점에 대한 대응이 되지 않는다. 2. 두번째 시도 이게 성공하는 줄 알고, test 도 넘어가길래 실제로 써보았더니 앱에서 오류가 나기 시작했다. ㅠ.ㅠ 이와 관련된 posting은 여기 여기에서 찾아볼 수 있었다. 는 각각 lookbehind 문법으로, 아쉽게도 사파리와 익스플로러에서는 지원하지 않는다.. (감사합니다.) 따라서 아쉽게도, 순수 regex로 모든 브라우저 환경을 지원하면서 대체 하기는 무리인듯 하다. 3. (지금까지의) 정답 언젠가 더 좋은 방법을 찾기를 바라며 (...)

요즘 리액트를 쓰는 많은 프로젝트에서, SSR을 지원하기 위해 nextjs를 쓰고 있다. 초기 로딩 속도나, SEO 지원 이슈 등 등 때문에 아무래도 SPA는 요즘 트렌드에서 많이 밀린 기분이다. 물론 razzle 을 쓰거나 custom server 로 맨 바닥에 해딩하는 방법도 있지만 여기저기 컨퍼런스나 주변 사람들의 말을 들어보면 nextjs가 대세이긴 한 것 같다. 입사 이래로 nextjs를 쓰면서 별 생각 없이 썼던 것들이 많은데, 9.3 출시를 기념하여 이참에 하나씩 정리해보려고 한다. 1. Page pages/posts/id.tsx 2. Routing 3. Router 3-1. Router Api 1. Page…

nextjs의 공식 문서를 보고 요약한 내용입니다. 1. getInitialProps 2. getStaticProps 3. getStaticPaths 4. getServerSideProps 1. getInitialProps Nextjs 9.3 이전에는 밖에 존재하지 않는다. 최신 버전인 9.3에서는 밑에서 설명할 나 를 사용하기를 권장한다. (왠지 deprecate 될 것 같은 기분이다.) 는 페이지에서 서버사이드 렌더링을 가능하게 하며, 페이지가 호출될 때 최초로 데이터 조작을 가능하게 한다. 이 말의 뜻은, 서버에서 데이터를 불러온 다음에, 이 데이터와 함께 페이지를 내보낸다는 뜻이다. 이는 특히 SEO 등에서 유용하다. 주의: 를 쓰는 순간 nextjs의 automatic static optimization이 불가능해진다. 예제를 살펴보자. 내 에서 비동기로 데이터를 가져 온 다음에, props…

커링 이 글 에 잘 정리 되어 있습니다. Currying은 여러 개의 인자를 가진 함수를 호출 할 경우, 파라미터의 수보다 적은 수의 파라미터를 인자로 받으면 누락된 파라미터를 인자로 받는 기법을 말한다. 즉 커링은 함수 하나가 n개의 인자를 받는 과정을 n개의 함수로 각각의 인자를 받도록 하는 것이다. 부분적으로 적용된 함수를 체인으로 계속 생성해 결과적으로 값을 처리하도록 하는 것이 그 본질이다. 을 javascript 콘솔에서 찍어보면 아래와 같이 나온다. 먼저 이 실행되면 위의 함수를 리턴한다. 저 함수 내에서 a 는 1로 기억되고 있다. 그리고 의 결과를 바로 그 다음인 2 파라미터와 함께 바로 실행했다. 그 결과 3이 되었다. 이 선언된 순간, 이 함수가 리턴하는 익명함수는 클로저가 되었다. 이 익명함수에서는, a가 정의된적은 없지만 클로저는 그 함수가 실행된 환경을 기억하고 있으므로 1을 기억하고 익명함수에 계속해서 a =…

Transfer learning audio recognizer 1. 소개 2. 요구사항 3. Tensorflow.js와 오디오 모델 로딩 4. 실시간 예측 5. 예측을 테스트 해보기 6. 데이터 수집 코드를 자세히 보기 7. 수집한 데이터 테스트 8. 모델 훈련시키기 코드 살펴보기 9. 슬라이더를 실시간으로 움직이기 코드 살펴보기 10. 최종 결과물 확인 Transfer learning audio recognizer 이번 튜토리얼에서는, Tensorflow.js를 활용하여 브라우저에서 학습시키는 커스텀 오디오 분류기를 만들어 볼 것입니다. 브라우저에서 슬라이더를 컨트롤을 하여 사운드를 만들어 볼 것입니다. 비교적 적은 학습 자료로 짧은 소리를 분류하는 모델을 만들기 위해 전송 학습을 사용할 것입니다. 그리고 음성 명령 인식을 위해 미리 훈련된 모델을 사용할 것입니다, 이 모델 위에 우리가 맞춤형 사운드 클래스를 인식하도록 새로운 모델을 훈련시킬 예정입니다. 1. 소개 먼저, 2…

Transfer learning image classifier 1. Introduction 배우게 될 것 2. 요구 사항 3. Tensorflow.js와 MobileNet 불러오기 4. 브라우저에서 MobileNet을 로딩 5. MobileNet을 테스트 하기 6. 브라우저에서 웹캠을 활용하여 MobileNet 모델을 실행하기 7. MobileNet에 Custom 분류기를 추가하기 8. Optional: 예제를 확장하기 9. 우리가 배운 것 Transfer learning image classifier 본 튜토리얼에서는, 브라우저 환경에서 Tesnorflow.js를 활용하여 커스텀 이미지 분류기를 만드는 방법을 알아봅니다. 이번 장에서는, 최소한의 데이터를 활용하여 높은 정확도를 가진 모델을 만들기 위하여 transfer learning(전이학습)을 활용해볼 것입니다. 우리는 이미 잘 학습되어 있는 MobileNet…

전이 학습이란 무엇인가? 전이 학습이란 무엇인가? 정교한 딥러닝 모델은 수백만개의 파라미터 (가중치)를 가지고 있으며, 이를 처음 부터 훈련하려면 엄청난 양의 컴퓨팅 자원이 필요한 경우가 많습니다. 전이학습은, 이미 관련된 작업에 대해 훈련받은 모델의 한 부분을 취해서, 새로운 모델에서 이를 재사용함으로써 이러한 컴퓨팅 자원의 소모를 단축시키는 기술입니다. 예를 들어, 다음 튜토리얼은 이미 이미지내에서 100…

1. 서론 2. XMLHttpRequest 3. JQuery Ajax 3. async await & fetch 4. fetch polyfill 5. deep dive to fetch 5-1. 에러 처리 5-2. Abortable Fetch 5-3. fetch in react 6. 결론 1. 서론 자바스크립트에서 http 요청을 하는 것은 이제 비일비재한 일이 되었다. 서버에서 모든 데이터를 가져와서 static 한 html을 만들어서 보여주고 있는 웹페이지는 아마 찾기 어려울 것이다. 맨 처음 웹을 배울 때, jquery의 ajax 요청을 배우 던 것이 한 5년 전 쯤 되었다. 비동기 http 요청이 비일비재한 요즘, 지금은 그 기술이 어디까지 왔을까? 그리고 어떻게 써야 더 깔끔하게 쓸수 있을까? 2. XMLHttpRequest Caniuse: XMLHttpRequest MDN: XMLHttpRequest whatwg: XMLHttpRequest…