분류 전체보기 검색 결과

해당 글 777건

SPA에서 뒤로가기, 새로고침 시 404 Not Found 오류 해결

딱히 React만의 문제는 아니다. SPA면 다 발생하는 일이다. 하지만 필자가 React를 주로 쓰는 관계로 React 항목에 넣어뒀다. 새로고침, 외부 링크를 타고 갔다가 다시 돌아오는 뒤로가기 등등 에서 경로를 찾지 못하는 경우가 많다. 이러한 오류가 발생하는 이유를 connect-history-api-fallback 깃허브 페이지에서 인용하자면, SPA (Single Page Applications)는 일반적으로 웹 브라우저에서 액세스 할 수있는 하나의 색인 파일(index.html)만 사용합니다. 그런 다음 HTML5 히스토리 API를 사용하여 JavaScript를 사용하여 애플리케이션의 탐색을 일반적으로 처리 합니다. 이로 인해 사용자가 새로 고침 버튼을 누르거나 방문 페이지 이외의 페이지에 ..
React, Next, Redux/⚛ React.JS 2020. 4. 10. 03:58

React-Express에서 AWS RDS(DB 서버)로 데이터 전송하기

ORM 말고 SQL로 AWS RDS DB와 Express 웹 서버 연결 AWS RDS RDS(Relational Database Servide) 관계형 데이터베이스(RDBMS)를 생성하고 확장할 수 있는 서비스 DB 인스턴스를 손 쉽게 생성하고 관리하며 성능 확장도 할 수 있고 여러모로 편리하다. 장애에 대비한 F.. darrengwon.tistory.com 위 포스트와 연계하여 작성했습니다. React의 경우 Container와 Presenter를 이용하여 Container에서 axios를 통해 정보를 백엔드로부터 가져온 뒤, Presenter에게 props로 전달하는 방식이 좋습니다. Hook을 써서 한 js 파일에 다 담아도 되구요. https://darrengwon.tistory.com/156 C..
Node, Nest, Deno/🚀 Node.js (+ Express) 2020. 4. 9. 18:10

[Web-API] Web Speech API를 이용한 음성인식 구현

Building A Speech Recognition App Using Javascript - CodeSource.io In this article, we will build a speech recognition application in javascript without any external api or libraries. We will make use of the codesource.io 위 포스팅을 참고해서 작성되었습니다. 이번 포스트에서는 외부 API나 라이브러리를 이용하지 않고 순수한 자바스크립트로만 음성 인식 어플리케이션을 만들어 볼 것입니다. 주로 사용하는 것은 브라우저가 가지고 있는 speechRecognition api 입니다. SpeechRecognition The SpeechReco..
웹 전반, 브라우저/Web API 2020. 4. 9. 04:31

ORM 말고 SQL로 AWS RDS DB와 Express 웹 서버 연결

AWS RDS RDS(Relational Database Servide) 관계형 데이터베이스(RDBMS)를 생성하고 확장할 수 있는 서비스 DB 인스턴스를 손 쉽게 생성하고 관리하며 성능 확장도 할 수 있고 여러모로 편리하다. 장애에 대비한 Failover,.. darrengwon.tistory.com 우리는 sequelize라는 ORM을 활용하여 DB를 구성한 적이 있습니다. 이번에는 SQL을 활용하여 DB를 활용해봅시다. * AWS RDS를 생성했다는 가정 하에 포스팅이 진행됩니다. 파라미터 그룹을 utf8, utf8-general-ci 및 퍼블릭 액세스가 가능하다고 체크했습니다. 🧷 HeidiSQL 설치 및 DB, TABLE 생성 HeidiSQL은 관계형 데이터베이스 GUI 중 가장 유명한 툴로 정..
DB, ORM/🧊 MySQL 2020. 4. 9. 00:23

React 프론트를 Express 백엔드와 연결하기

NodeJS X CRA (proxy) Nodejs 와 create-react-app 을 연결하는 방법 velog.io 🧷 프론트와 백단의 분리 PUG, EJS와 같은 템플릿 엔진이 아닌 React를 프론트로 삼아보자. 우선, 작성한 React는 한 폴더 내로 몰아주자. 필자의 경우 아래와 같이 frontend라는 폴더 내로 모든 React 파일, 폴더들을 넣어주었다. 넣은 후에는 상위 폴더로 이동해서 백엔드 코딩을 하자. package.json의 일부를 가져와 보았다. npm run front를 입력하면 front 폴더로 이동(cd)하여 npm start를 진행하고 npm run server를 입력하면 노드로 app.js를 실행한다. 이 두 과정을 하나로 합친 것이 npm run dev이다. npm in..
Node, Nest, Deno/🚀 Node.js (+ Express) 2020. 4. 8. 20:06

passport.js : (5) facebook 로그인

passport-facebook Facebook authentication strategy for Passport. www.passportjs.org Facebook for Developers Facebook for Developers와 사용자를 연결할 수 있는 코드 인공 지능, 비즈니스 도구, 게임, 오픈 소스, 게시, 소셜 하드웨어, 소셜 통합, 가상 현실 등 다양한 주제를 둘러보세요. Facebook의 글로벌 개발자 교육 및 연결 프로그램에 대해 알아보세요. developers.facebook.com 페이스북으로 로그인 하는 방법은 평소와 같다. 1. facebook 로그인 버튼을 누르면 /auth/facebook로 이동하여 로그인 요청 2. facebook 로그인 (콜백 함수 실행 안 됨) 3. ..
Node, Nest, Deno/🔑 JWT, Passport.js 2020. 4. 8. 03:41

Socket.IO Namespace, Room

socket.io/docs/v4/namespaces/ Namespaces A Namespace is a communication channel that allows you to split the logic of your application over a single shared connection (also called “multiplexing”). IntroductionEach namespace has its own: ev socket.io 각 view 단에서 socket 연결 부분을 가져와봤습니다. 메인 페이지에 들어가자마자 소켓이 보내주는 실시간 메세지를 모두 받을 필요는 없습니다. 불필요한 일이죠. 때문에 Socket.IO에서 "네임 스페이스"란 것을 활용합니다. 말 그대로 이름이 붙은 공간이며 ..
Node, Nest, Deno/⚡ ws , socket.io 2020. 4. 7. 21:32

window 객체

🧷 window.navigator navigator는 대체로 (전부는 아니지만) Web API를 사용하기 위한 것입니다. (https://developer.mozilla.org/ko/docs/Web/API/MediaDevices) 음성 녹화, 영상 녹화, 화면 공유, 위치 정보 받기 등이 가능합니다. 영상 녹화 : (https://darrengwon.tistory.com/516) 음성 인식 : (https://darrengwon.tistory.com/242) 위치 정보 : (https://darrengwon.tistory.com/219) navigator.geolocation 관련 메서드를 사용하면 된다. navigator.geolocation.getCurrentPosition(success[, erro..
Programming Language/🟨 Javascript 2020. 4. 7. 05:38

[mo.js ]mo.js - 모션그래픽 라이브러리

mojs/mojs The motion graphics toolbelt for the web. Contribute to mojs/mojs development by creating an account on GitHub. github.com mo.js mojs.github.io 간단한 애니메이션은 직접 구현할 수 있겠지만 대개 라이브러리를 이용하는 게 편하도 더 화려하다. 웹 페이지내 구현되는 모션 그래픽 라이브러리 중 가장 유명하다고 할 수 있는 mo.js를 살펴보자. 🧷 설치 npm으로 설치 가능하지만 npm 주간 다운로드 수를 보면 처참하다. 1000이 안 넘는다. 대부분 CDN을 사용하고 있는 듯하니 CDN을 활용하자. 주의할 점은 script를 body 태그의 상단부에 넣어야 한다는 점이다. npm..
Programming Language/🟨 Javascript 2020. 4. 7. 05:35

Fragment(#) 사용하기, Hashbang(#!)

https://darrengwon.tistory.com/200 I. HTTP: 웹의 기초 | 1. HTTP 개관, 2. URL과 리소스 번역가의 다음 글을 참고해서 앞으로 며칠 간 HTTP 완벽 가이드를 읽으며 내용을 정리하려고 합니다. 웹 프로그래머를 위한 HTTP 완벽 가이드 읽는 법 HTTP 완벽가이드는 이름 그대로 HTTP를 매우 자세히 다루고.. darrengwon.tistory.com 프래그먼트가 무엇인지는 위를 참고합시다. One Two Three oneLorem ipsum dolor, sit amet consectetur adipisicing elit. Expedita sunt sint quae, cumque suscipit explicabo voluptatum blanditiis omni..
웹 전반, 브라우저/HTML, CSS 2020. 4. 7. 04:21