Phot_o_matic Programming

seeder - fakerjs로 가짜 데이터 생성해서 뿌릴 sequelize로 뿌려주었다 google translate api - 지정해줘야 하는 것 // Instantiates a client const translate = new Translate( { projectId: 'your project id', keyFilename: 'path of your service acount json file' } ); //projectId eg my-project-0o0o0o0o' // keyFilename eg my-project-0fwewexyz.json https://www.lostsaloon.com/technology/how-to-view-edit-and-delete-an-environment-varia..

Programming/Hello, stranger 2019. 7. 18. 23:21

로컬 클라이언트에서 로컬 서버를 거쳐, aws의 rds의 데이터베이스를 조회하고 사용할 수 있게 만드는 것이 이 날의 목표였다. 1) 로컬 클라이언트 리액트를 사용하여, 각 endpoint별 page와 내부 component 생성 react-router-dom을 사용하여 내장되어 있는 Route,Redirect, Link, Switch component로 endpoint에 맞게 분기 2) 서버와 데이터베이스 연동 server 코드의 config 중 development 환경의 정보를 aws에 맞게 수정한다 그 후, 서버를 켜면 자동으로 aws에 연결되어 workbench로도 스키마 확인이 가능해진다 3) 클라이언트에서 SignIn, SignUp 각각에 대하여 request 보냈을 때에, 제대로 된 정보를..

Programming/Hello, stranger 2019. 7. 13. 13:15

React tool chain, create-react-app 이번 프로젝트의 클라이언트 구성에서 React.js를 사용함에 있어, 많은 툴체인 중 하나인 create-react-app를 적용하였다. React를 배우고 있는 중이거나, 신규 싱글 페이지 앱을 만들 때 사용하라고 공식 홈페이지에서도 추천하고 있다. 다른 성격의 프로젝트를 진행하거나, 다른 툴체인이 궁금하다면 아래의 링크를 참고하면 좋겠다. 새로운 React 앱 만들기 프로젝트 생성과 라이브러리 설치 cretate-react-app npm install react-router-dom (브라우저에서 사용되는 리액트 라우터) npm install cross-env --dev (프로젝트에서 NODE_PATH를 사용해 절대경로로써 파일을 불러오기 ..

Programming/Hello, stranger 2019. 7. 12. 21:47

socket.io 적용을 위해서, 서버와 데이터베이스, 그리고 클라이언트와 서버의 연동을 생각해보았다. 클라이언트 클라이언트의 프로토타이핑을 빠르고 강력하게 하기 위해서 어떤 툴과 서비스들이 있는지 찾아보았다. 1) react studio - tool이 무료, 생성한 컴포넌트의 코드 추출 가능, 하지만 최신 기기들에 대한 최적화 미흡 2) supernova studio - tool은 유료, sketch 파일을 불러와서 컴포넌트로 변환 가능, 코드 추출 가능 socket.io 내일 작업할 예상 flow 1) 클라이언트에서 socket.emit 2) 서버에서 socket.on으로 받아서, callback으로 데이터베이스에 정보 요청하고, 3) 데이터베이스로부터 응답받은 정보를 클라이언트로 socket.emi..

Programming/Hello, stranger 2019. 7. 11. 23:16

socket.io란? 실시간 웹 응용 프로그램을위한 JavaScript 라이브러리이다. 웹 클라이언트와 서버 간의 실시간 양방향 통신을 가능하게 한다. 브라우저에서 실행되는 클라이언트 측 라이브러리와 Node.js 용 서버 측 라이브러리로 구분되어 있다. install 라이브러리이므로 npm을 이용하여 설치가 가능하다. - npm install socket.iosocket.emit(event, callback1) & socket.on(event, callback2) socket.io는 동일한 event명을 가진 socket끼리의 상태 공유 및 통신으로써 동작된다. socket.emit을 통하여 callback1과 같이 어떤 함수가 실행되거나 결과로써의 값이 존재하게 되면, 동일한 event명을 가진 so..

Programming/Hello, stranger 2019. 7. 10. 23:11

Programming/Hello, stranger 2019. 7. 9. 13:36

Hello, stranger Google Translate API를 통하여, 실시간으로 번역이 가능한 글로벌 채팅 앱 서비스를 기획하여 프로젝트를 진행하였다. 서비스를 이루는 구조와 스킬의 대략적인 도식은 아래와 같다. 서비스 전체 구조 목적 글로벌 채팅 앱은 많지만, 타국간 채팅에서 언어의 장벽은 외부 번역기를 거치는 불편한 과정이 있어야만 원활한 소통이 가능하였다. 이런 불편함을 해소하고, 스스로가 관심있어 하는 국가 거주민 혹은 언어 사용자와의 대화를 편리하게 하는 것에 목적이 있다. 구현할 기능 - 국가 및 언어별 채팅방 운영 - 원하는 언어로의 번역 - 채팅 기록 확인 - 프로필 사용할 기술 1. 서버 nodejs express socket.io AWS EC2 AWS EC2 상에서 배포가 되도록..

Programming/Hello, stranger 2019. 7. 8. 20:01