궤도

요즈음 공부를 하면 할 수록 내가 n달전 비바에서 어떤 끔찍한 짓을 해왔던 건지 매일매일 깨닫고 있어서 정리한다. 물론 난 지금 계속 공부를 하고 있으니 이 글은 점점 늘어날지도 모르겠다. 1. 말도 안되는 보안 교수님이 코드를 뜯어보셨다면...정말 큰일났을 것이다. 다행인지 아닌지 우리 서비스가 앱이라 url이 대놓고 보이진 않아서 모르고 넘어가셨다... 2. 프론트에 대한 맹신 서버 개발자는 클라이언트를 믿으면 안된다는 말이 있다더라. 난 몰랐다... 엄밀히 말하면 서로에 대한 신뢰는 아니겠다. 최근에 프론트쪽 코드를 보고 알게된 것인데, 내가 프론트를 너무 맹신한 나머지 내가 해야할 유효성 검사들을 프론트에서 다 하고 있더라 도대체 유저가 test_title을 입력 안했었으면 어쩔 생각이었는지?? ..

백엔드 서버를 호스팅하게 됐다. 여기저기 찾아보다가 Heroku를 선택...뭔가 이름이 일본어같다 싶더라니 정말 일본에서 만든거였다 와우 사실 에러가 생기면 굉장히 친절하게 알려주는 편인데 내가 보는 법을 몰라서 좀 헤맸었다. https://nhj12311.tistory.com/276 헤로쿠(heroku) 가입부터 node.js 배포까지 오늘은 헤로쿠 가입부터 node.js 배포까지 진행해보도록 하겠습니다. 간단하게 서비스를 띄울 무료 PaaS 서비스를 찾는다면 무조건 헤로쿠겠죠. 1. PaaS 서비스의 대표주자 헤로쿠(Heroku) 헤로쿠라는 nhj12311.tistory.com 이런 블로그 보고 했었다. 사실 노드 서버 올리기 전에 플라스크 서버를 먼저 올렸었는데 빌드는 성공하는데 앱이 열리지 않는 ..

https://myunji.tistory.com/391 [백엔드] 시험지 채점 알고리즘 만들기 (1) 오늘은 이 그림에서 7번을 구현할 것이다. 먼저 시험지를 촬영해서 욜로에 보내면...욜로는 우리가 설정한 클래스의 객체를 찾아낸다. 그리고 제이슨 형태로 결과를 반환하는데 뭐... label : OOO rec myunji.tistory.com 여기에서 이어진다. 저때는 모든 객관식을 찾은 희망편이었고 이제 절망편을 해야한다. 절망편에는 어떻게 되는지 간단하게 보여주자면 이게 이렇게 된다. 객체를 하나 찾아내지 못해 번호가 앞으로 다 땡겨져 올 것이기 때문이다... 우리가 계속 실험을 해봤는데 다행히 아무리 많이 못찾아도 한 문제당 2개 정도가 최대였다. 이제 보정을 해야한다. 번호 배치는 이럴 수도 있고..

오늘은 이 그림에서 7번을 구현할 것이다. 먼저 시험지를 촬영해서 욜로에 보내면...욜로는 우리가 설정한 클래스의 객체를 찾아낸다. 그리고 제이슨 형태로 결과를 반환하는데 뭐... label : OOO recognition word : OOO w : OOO h : OOO x : OOO y : OOO 객체마다 이런식으로 반환한다. 직접 보여주면 좋겠지만 내 담당이 아니라 여기서 보여주기가 좀 그렇다 우리가 찾아야 하는 클래스는 문제번호, 페이지번호, 객관식 체크 정보, 주관식 답안 정보인데 다른건 다 잘 찾는데 객관식 체크 정보를 아직도 몇 개씩 빠뜨린다. 그래서 백엔드에서 보정해줘야 한다. 일단은 객관식을 다 찾았다는 아주 희망적인 가정을 하고 알고리즘을 짜보겠다. 우리의 테스트 셋이다. 앞서 말했지만 ..

더보기를 누르면 접은 글이 나옵니다. VIVA를 이용해서 학생이 채점을 하려고 한다고 해보자 사진을 찍고 스캔 완료를 누르면...약간의 시간이 흐른 뒤 채점표를 받는다. 이 과정동안 백엔드에선 어떤 일이 일어날까? 먼저 프론트에서 사진을 찍고 백엔드에 보내준다. 그러면 백엔드에서 S3 bucket에 사진을 업로드 하고, 그 url을 프론트에 다시 돌려준다. routes/paper-upload.js var models = require('../models'); const express = require('express'); const multer = require('multer'); const multerS3 = require('multer-s3'); const aws = require('aws-sdk')..

우리 프로젝트에서 기술적으로 가장 중요한 부분은 채점 부분이다. 사용자가 사진을 찍어서 업로드한 뒤 채점 결과를 받기까지의 과정을 그림으로 나타내면 일단 이렇게 사진을 업로드 한 뒤 이런식으로 채점이 이루어질 것이다. 이미지 업로드는 저번에 해서 블로그에 글로도 올렸다. 그리고 욜로 학습 담당 팀원이 모델을 파이썬에 이식하는 건 성공했고 내가 그걸 플라스크에 이식하는 것까지 성공했다. 그럼 이제 리액트로부터 넘어오는 url을 플라스크까지 보내서 결과를 받아 다시 리액트에 보내는 과정을 해야 한다. 아직 욜로와 ocr api 연결부분을 하지 않아서 당장 채점 알고리즘을 만들 순 없고 오늘은 그냥 리액트-노드-플라스크 사이에서 데이터가 잘 오가는지만 확인하려고 한다. node.js 서버에서 다른 서버의 ap..

오늘은 프론트(react native)로부터 이미지를 받아와 저장할 것이다. 이렇게 찍히는 이미지들을 저장해야 하는 것인데...열심히 검색을 해보았다. krpeppermint100.medium.com/js-react%EC%97%90%EC%84%9C-express%EB%A1%9C-%EC%9D%B4%EB%AF%B8%EC%A7%80-%ED%8C%8C%EC%9D%BC-%EC%98%AC%EB%A6%AC%EA%B8%B0-multer-f398adf6dbdd [JS]React에서 Express로 이미지 파일 올리기(multer) 페이스북과 인스타그램과 같은 SNS는 물론 지금 사용하는 블로그부터 왠만한 웹 서비스는 이미지 업로드를 지원합니다. front-end에서 React를 사용하여 Express 서버로 이미지를 전..

지난번에 미니모의고사를 만들었다. 만들었으면 그걸 관리하는 페이지도 있어야 한다. 그러니 이번에는 사용자가 만든 시험지를 볼 수 있는 시험지 리스트를 만들어보자. 시험지 리스트 routes/test.list.js(시험지 리스트) //미니모의고사 가져오기 //localhost:3001/api/test/list?stu_id=samdol router.get('/', async function (req, res, next) { let result = await models.student.findOne({ where: { stu_id: req.query.stu_id } }); const user = result.dataValues.stu_sn; //사용자가 보유한 미니모의고사 let test_list = awai..