나도 개발자 시켜주세요

🗣️ 프로젝트 소개 TalkFlow-KR : chat-gpt를 활용한 회화 서비스 개발 ⏰ 개발 기간 2023.05.02 ~ 2023.05.15 ⚙️ 개발 환경 ront-End : React, OpenAI(text-davinci-003모델 사용), STT(Speech-to-Text, React-Speech-kit API 사용) Back-End : Node.js Server : Mysql ✍ TalkFlow 기능 - stt api 사용해서 음성 데이터 처리 - OpenAI gpt-3 모델 사용 ✍ 코드 기술 데이터베이스 설계 AQueryTool 을 사용해서 초기 설계 후 VScode extension 으로 MySQL DB 연결 설정 파일 ('config/config.json')에서 데이터베이스 연결 정보를..

🗣️ 프로젝트 소개 양방향 통신을 위한 웹 소켓 기술을 활용하여 채팅 기능 구현 ✍ 기능 채팅 기능 보낸 시간 채팅 라인 수 확인 대화 상대 목록 공백 입력 X ✍ 코드 기술 static index.css my-chat 사용자가 보낸 채팅 메시지는 오른쪽 div 요소에 메시지 내용과 함께 사용자의 닉네임 출력 other-chat 상대방이 보낸 채팅 메시지 왼쪽 index.js 채팅 애플리케이션의 프론트엔드 코드 Socket.io 소캣 객체 생성 socket.on(' ', ()=>{...}); 소켓에 연결되었을 때 실행할 이벤트 핸들러 등록 views chat.ejs chat.js node.js, Socket.io 로 클라이언트와 서버 간의 양방향 통신을 구현 express 모듈 사용 클라이언트가 웹페이지..

더보기 ⚙️ 네트워크 지식이 필요한 부분이었다고 생각한다. 처음 듣는다면 정말 멍 때리고 있을 것 같다. 학교 수업 좀 더 열심히 들을 걸 후회한다. 오늘도 뼈저리게 느끼고 가는 전공지식의 중요성...🤣 그렇지만 통신에 대해 빠져버리니 끝도 없이 공부할 게 계속해서 나온다. 더 깊게 공부하는 것이 맞는지, 코드를 구성하기 위한 지식만 이해하고 넘어가는 게 맞을까라는 의문이 든다. 이해는 되지만,코드는 내 맘대로 안 짜져지는 슬픔이 있었기에 이론을 한 번 더 정리해보고 넘어가는 것도 많은 도움이 될 것 같다. 소켓 소켓은 프로그램이 네트워크 상에서 데이터를 주고 받을 수 있도록 서버랑 클라이언트를 연결해주는 도구이다. 휴대폰을 충전하고자 콘센트 구멍을 찾고 있었다. 그러나 구멍이 없는 벽에 코드를 넣는다 ..

더보기 🍪 특정 사이트에 들어가는 순간 보이는 팝업 창은 모두 닫아버리는 나였다. 눈에 거슬리던 것들이 cookie 라니,, 한 두 개의 팝업이면 모를까 , 여러 개면 더욱더 거추장스럽다. 나처럼 보기 싫은 사람들을 위한 첫 화면에서 많은 쿠키가 있다면 모든 쿠키를 한 번에 제거할 수 있는 방법을 개발하면 좋을 것 같다. Cookie 웹 브라우저 ( 클라이언트)에 저장되는 키와 값(이름, 값, 만료일, 경로 정보)이 들어있는 작은 데이터 파일이다. 개발자 도구 Appliction > Cookie > 확인 가능 ex. 자동 로그인, 안내문의 "☐ 오늘 그만 보기" 동작 방식 클라이언트가 페이지를 요청한다. 서버에서 쿠키를 생성한다. http 헤더에 쿠키를 포함하여 보내고, 만료기간이 끝나지 않았다면 쿠키를..

더보기 📂 이 모든 것을 알고 나면 편안해지는 게 맞겠죠? ORM 패키지인 Sequelize를 배우고 정리해봤다. 더 자세한 것을 알기 위해서는 공식 문서를 읽어보는 것이 정답일 수도 있겠다. 문제가 생긴다면 가장 빠른 해결 방법은 구글링이라 생각한다. 이전에 sql문을 작성할 때는 실수가 잦았는데, sequelize를 사용하니 좀 더 편리하다는 생각이 들었다. Sequelize ORM 라이브러리 중 하나로 데이터베이스의데이터를 자바스크립트 구문을 통해 sql 문으로 변환한다. 이를 활용하면 sql 언어를 사용하지 않아도 DB 설정이 가능하다. 많은 RDBMS를 지원하고 promise 기반으로 구현되었기에 비동기 로직을 편하게 작성할 수 있다는 장점도 있다. 기존에는 SQL문 쿼리를 작성해서 CRUD를 ..

더보기 📂 프로젝트 생성만 N번째, 이제는 눈감고도 칠 것 같지 않다. 이제 조금 늘었다는 생각이 드는 건 npm install 에서 install 다 안치고 i 만 쳐버린다. 이 자신 정말 장하다 장해! 저번 시간에 배운 mvc 방식에 mysql 을 연결하여 사용하는 방법을 알아봤다. 아직 mvc도 잘 모르겠는데 내가 어떻게 mysql 연결까지 하지 라는 생각을 했지만 또 질질 끌려가고 있다. 📂 프로젝트 폴더 구조 controller Cvisitor.js View 와 Model 연결 부분 model Visitor.js 데이터 처리 node_modules routes index.js 경로 설정 views 404.ejs index.ejs visitor.ejs UI 관련 처리 .gitignore app.j..

body-parser 데이터 처리에 도움이 되는 라이브러리 Post로 정보를 전송할 때 요청의 req.body로 받을 수 있음. express 버전 4부터 내장되어 있어 따로 설치가 필요X 단점, 멀티파트 데이터(이미지, 동영상, 파일 등) 처리X => multer 사용 파일 업로드 multer : 클라이언트에서 서버로 데이터 전송을 할 때 사용, 파일 선택 버튼 {userfile: ' /png', title: ' '} //설치 npm install multer //app.js에 multer 불러오기 const multer = require('multer'); 클라이언트 준비 form 태그에 enctype = "multipart/form-data"를 반드시 설정해야 동작한다. 파일 업로드 경로 설정 co..

더보기 💡MVC 구조 어디선가 들어본 것 같은데 배운 적은 없는 구조 혼자서 코드를 짜는 게 아니라 협업에 있어서 도움이 되는 백엔드 구조 방식에 대해 배웠다. 글을 다시 보니까 오타도 보이고, 수정할 부분이 많이 보인다. 이제는 이론보다는 코드의 구조적인 면을 더 깊게 파악해야되서 글로 정의하기가 어렵다. 그냥 어렵다. 더 많은 시도가 구조를 파악하는데 도움이 될거라 생각한다. MVC (Model View Controller) 소프트웨어 설계(데이터 및 논리 제어), UI를 구현하는데 사용되는 디자인 패턴이다. => 상황에 따라 자주 쓰이는 설계 방법을 정리한 코딩 방법론 mvc 이용 웹 프레임 워크 : spring(java), django(python), express(javascript), ruby..

✏️ 계속 누적되는 수업 내용에 하루라도 밀리면 안되겠다는 생각이 들었다.요청 방식에 따라 전송방식이 어떻게 달라지는지 직접 코드로 확인했다. 아무래도 백 다루는 것에서 더 많은 흥미를 가지고 공부하게 된다. + 동기 방식 vs 비동기 방식 더보기 동기 방식 : 하나 밖에 일을 못한다. 비동기 방식 : 서버에 데이터를 보내고 응답을 기다리는 동안 다른 처리 가능 동적 폼 전송 데이터를 input, button의 type 이 submit 인 속성들로 전송 시 페이지 이동이 일어난다. 최근 페이지를 보면 모든 동작에 있어서 페이지 이동이 일어나지 않는 부분도 있다. 예를 들어 로그인 화면에서 아이디나 비밀번호가 틀렸을 때, 페이지 이동이 되는 것이 아닌 비동기 HTTP를 사용해 같은 페이지 안에서 동작이 이..

✏️5주 차 수업 처음 배우는 것도 있었고, 3주 차 때 배웠던 내용도 있어서 복습하는 시간이었다. 이번 시간 아니었다면, 1차 프로젝트 종료와 동시에 node 내 머릿속에서 사라졌을 것이다. 수업시간 처음부터 끝까지 다 처음 듣는 내용만 배우는 것보다 전에 했던 내용을 복습하면서 진행하니까 다급하게 따라가야겠다는 생각도 안 들어서 수업에 더 집중할 수 있었다. 계속 사용할 내용이라 더 신경 써서 수업해 주신 듯하다. 내 컴공 지식 여기와서 하나도 쓸모가 없구나 하고 있었는데, 백엔드를 보니 드디어 빛을 바랄 수 있겠구나 라는 생각이 들었고, 확실히 프론트 수업할 때보다 더 재밌어진 것 같다. 노베이스로 여기 왔다면 아마 탈출하지 않았을까. 강사님이 수업 중간중간마다 git push 하자고 해주셔서 까먹..