강디너의 개발 일지

리팩토링 목표 1. 비동기 함수 정리 2. 쓸모없는 코드 삭제 3. 나중에 다시 봐도 바로 이해가 될 정도로 코드 정리 4. async & await 익숙해지기 현재 사용하고 있는 API는 2가지 입니다. - 파파고 언어 감지 API - 네이버 번역 API // 함수 시작 papago(text).then( function(data: any){ translationText(editor, data.langCode); } ); var data = new FormData(); data.append("json", JSON.stringify({'query' : text})); // papago API function papago(text: any){ return new Promise( function(resolve..

A 컴포넌트에서 B 컴포넌트로 데이터를 전달해보겠습니다. Root 컴포넌트입니다. user_id 를 A 컴포넌트에서 받는 작업을 먼저 해줍니다. state = { user_id: '' } getData = (data) =>{ this.setState({user_id: data}); } render(){ return( ) } A컴포넌트 입니다. 아래와 같이 해주면 testFunction이 실행될 때 Root의 user_id는 test 로 값이 바뀝니다. testFunction = () =>{ this.props.fromParent('test'); } B 컴포넌트로 보낼려면 Root 컴포넌트를 수정해야합니다. componentB 로 user_id를 보냅니다. state = { user_id: '' } get..

준비물 Front-end 파일 (빌드된것) Back-end 파일 AWS Nginx 까지 띄운 것 Putty (원격접속) 환경 Window 10 1. Front-end Build 빌드가 끝난 후 dist 폴더가 만들어졌는지 확인해주세요 2. 압축도 해줍니다. 3. 자신의 EC2 에 파일을 전송합니다. pscp -i C:\path\my-key-pair.ppk C:\path\Sample_file.txt ec2-user@public_dns:/home/ec2-user/Sample_file.txt 참조 : https://docs.aws.amazon.com/ko_kr/AWSEC2/latest/UserGuide/putty.html 4. 확인하기 ! 5. 압축 해제 unzip vue-project.zip (사진은 생략)..

AWS EC2에서 Nginx 를 설치해서 웹서버를 띄워보겠습니다. 1. AWS 가입... 인증 1달라...! 2. https://aws.amazon.com/ko/getting-started/tutorials/launch-a-virtual-machine/ 에서 학습하면서 인스턴스 만들기 ! - 인스턴스 만들면 기본적인 리눅스가 뜹니다 ! 3. ssh ~~~~ 어쩌구 저쩌구로 로그인합니다 로그인 완료 이제 본격적인 시작입니다.sudo yum 을 업데이트 해달라고 하니.. 업데이트 한번 해주시고 (안해도 상관없음) sudo yum install nginx설치하다가 중간에 물어보는게 있는데 y 누르시면 됩니다. 설치가 완료 되셨으면 sudo service nginx start 를 하시면 ! 짠 ! 하지만 끝이 ..

Firebase 이용해서 Hosting, Database 사용하기 ! https://translator-c4119.firebaseapp.com/ Vscode 플러그인에서 데이터를 받은지... 한달 ?하지만 데이터가 많이 쌓이지 않는다... 테스트 할때 보니 170개 가량... 쥬륵 만들었던 과정을 끄적끄적 해보겠습니다. 우선가이드 - https://firebase.google.com/docs/hosting/quickstart?authuser=0 요약하자면node 를 설치하고 firebase-tools 를 설치하고 firebase login 하고 firebase init 으로 시작합니다. 그리고 firebase deploy 를 하면 배포가 됩니다. - 끝... 호스팅은 생각보다 쉽습니다. (데이터베이스 연..

프론트부터 배포까지 기획_v5 1. AWS 가입2. AWS 에 Linux 셋팅3. Nginx 설치4. vue, express 셋팅5. docker 설치6. docker 이미지 만든거 불러오기 (도커허브에 올려야겠다 미리) 7. 다 연동시키기 8. jenkins 셋팅?

프론트부터 배포까지 기획_v4 v_4 jenkins 이용해서 자동화 배포 하고 싶다.. AWS 를 셋팅을 먼저 하고, 배포를 한번 하고, 자동화 배포를 하는게 순서인지 앞으로 더 찾아보려고 한다.

번역기 플러그인을 만들고... vscode 를 쓰는 사람들은 대부분 ? 개발자니깐... 어떤 영어를 번역하는지 보고싶었다. 보려면 DB가 필요한데... 항상 켜져있어야하고... 흐음.. 하다가 찾은게 파이어베이스 !vscode 가 electron 기반이라고 듣고 electron 은 node 기반이니깐 firebase node 쪽을 써보면 되겠다 ! 싶어서 개발 착수 ...! 가이드를 보며 열심히 따라 했다. node 쪽은 admin(관리자) 로 개발 해야하며, 가이드가 너무 잘나와있어서 막 오랜시간 삽질을 안했다. 여기서 serviceAccount 는 구글에서 json 파일을 준다. 그곳에 API 키라든지 토큰이라든지 등등.. 중요한건 다들어가있다. db에 translate 라는 큰 가지를 만들고그 아래..

준비물 1. express 서버 키기 2. mysql 서버 키기 3. Vue 서버 키기 *설치 모듈* 서버와 통신하기 위한 axios 설치 상태 관리를 위한 Vuex 설치 Login 기능 만들기 + 인증 1. axios를 main.js 에 넣어서 전역으로 쓸수 있게 합니다. 2. 로그인을 해봅시다. loginSubmit: function() { console.log("로그인"); this.$Axios.post(`http://127.0.0.1:3000/auth/login`, { id: this.user_id, pwd: this.user_pwd}).then( res=> { console.log(res); this.$router.push("/"); } ) }, 리턴값이 이쁘게 나오는 것을 볼 수 있습니다. 3..

JWT 으로 로그인 인증을 하겠습니다. 우선 jsonwebtoekn 모듈을 다운받겠습니다. 이 모듈은 jwt를 편하게 만들수 있도록 도와줍니다. JWT 로그인 1. user 테이블에서 user_pwd를 가져온 뒤 2. hash 해서 hash 한 값과 가져온 값과 비교 하고 맞으면 3. Token 을 만듭니다. 토큰이 성공적으로 만들어지면 성공 메시지와 함께 토큰을 보내줍니다. app.post('/auth/login', (req, res) => { // 로그인 인증 User.user_id = req.body.id; User.user_pwd = req.body.pwd; let jwt_secret = 'DinnerKang'; console.log(req.body.id); if (User.user_id) { c..