우리가 만든 코드를(우리가 아니라 내가 혼자 만들긴 함ㅋ) 다음 순서로 살펴볼 것이다.  저번에 프론트엔드를 봤으니 이번에는 백엔드를 볼 거다.    💡 server.jsExpress와 SQLite를 사용해서 간단한 서버를 만들었다. const express = require("express");const bodyParser = require("body-parser");const db = require("./db/db"); // SQLite 설정 모듈const app = express();const PORT = 3000;app.use(bodyParser.json());app.use(express.static("../frontend"));// To-Do 목록 가져오기app.get("/api/todos",..

우리가 만든 코드를(우리가 아니라 내가 혼자 만들긴 함ㅋ) 다음 순서로 살펴볼 것이다.     💡 index.html프론트엔드의 기본 UI와 구조를 정의한다. 특별한 건 없다.  To-Do List Add Task  분해해서 보면,  첫 번째 줄은 HTML5 문서임을 선언한다.이는 HTML의 가장 최신 버전이고 따로 버전 번호를 명시하지 않아도 된다. 꾸준히 업데이트되지만 버전 번호가 바뀌지도 않는다. 두 번째 줄은 영어로 작성됨을 말한다.한국어로 바꾸려면 `ko`라고 입력하면 된다. `en`이라 쓰여있어도 한국어를 문서에 작성할 수 있다. `lang` 속성은 검색 엔진이나 스크린 리더 같은 도구들이 문서의 기본 언어를 알 수 있도록 알려주..

이제 본격적으로 풀스택 애플리케이션을 만들어 보자! 예시로 투두 리스트 애플리케이션을 만들어 볼 것이다. 프론트엔드 HTML & JavaScript백엔드 Node.js & ExpressDB SQLite 요렇게 사용할 예정~  각각의 파일이 어떤 역할을 하는지는 우리의 chatGPT가 친절히 설명해 준다. 이건 백엔드  이건 프론트  폴더 기본 구조를 만들고 npm init을 했더니 이렇게 나왔다.  npm init은 Node.js 프로젝트를 초기화할 때 사용하는 명령어로, 프로젝트의 메타데이터를 담고 있는 package.json 파일을 생성한다. 여기서 npm install을 통해 이것저것 패키지를 설치하면 node_modules 폴더와 package-lock.json 파일이 생성된다.node_modul..

💡 메시지 브로커서로 다른 앱이나 시스템들이 메시지를 주고받을 수 있도록 중간에서 연결해주는 소프트웨어다. 주요 특징으로는 비동기식 통신, 메시지 큐, 프로듀서와 컨슈머, 확장성과 내구성 등이 있다.  앱들이 서로 직접 연결되는 것이 아니라 메시지 브로커를 통해서 주고받기 때문에 한쪽에 에러가 발생해도 다른 쪽은 잘 작동한다. 예시로는 RabbitMQ, Apache Kafka, Amazon SQS가 있다.    💡 보안 OAuth(Open Authorization)는 서드파티 앱이 사용자의 정보를 저장하지 않고도 접근을 허용하게 해주는 인증 프레임워크다. 어떤 사이트에 로그인 할 때 구글 로그인을 사용할 수 있다. 해당 사이트에 비밀번호가 저장되지 않기 때문에 보안 리스크가 크게 줄어든다. JWT(J..

💡 백엔드의 인프라 및 클라우드 서비스서버와 DB를 어디에 호스팅하고 어떻게 관리할지를 결정한다. 기능이 많고 확장성이 있기 때문에 대부분의 서비스가 클라우드를 기반으로 운영된다. 다음 장점이 있다. 🔎 호스팅: 웹이나 앱을 인터넷에 올려 다른 사람들이 접속할 수 있도록 만드는 것 확장성: 트래픽이 늘어날 때 서버 용량을 쉽게 늘릴 수 있다비용 절감: 필요한 만큼 사용하고 비용을 지불할 수 있다안정성: 데이터 백업과 보안을 클라우드 서비스 제공자가 하기 때문에 안정성이 높다  🍉 AWS (Amazon Web Services)  🍉 Microsoft Azure🍉 Google Cloud Platform (GCP)  🍉 Heroku 간단한 배포와 관리가 가능한 PaaS로 소규모 프로젝트와 스타트업에..

💡 백엔드에 많이 사용되는 언어와 프레임워크백엔드 프로그래밍 언어는 서버에서 데이터를 처리하고, 클라이언트와의 통신을 관리하며, 데이터베이스와 상호작용하는 기능을 제공한다.  🍉 JavaScript (Node.js) JavaScript는 원래 브라우저에서 등장했으나 Node.js 덕분에 서버에서도 사용할 수 있게 되었다. 게다가 Node.js는 비동기 처리에 특화되어 있는데(원래 JavaScript도 비동기 처리가 가능했으나 Node.js 덕분에 훨씬 효율적) 이는 여러 사용자가 동시에 접속하는 것을 가능하게 만들었다.  🍉 Python (Django, Flask) Python은 코드가 직관적이라 유지 및 보수가 쉽고 복잡한 웹 앱도 빠르게 개발할 수 있다. 특히 데이터 과학 및 인공지능 관련 도구..

프론트엔드와 백엔드에 대해 가볍게 짚고 넘어가자.  이 둘은 웹이나 앱을 개발할 때 주요한 두 가지 부분을 담당한다. 프론트엔드는 말 그대로 앞면(front)을 담당한다. 웹사이트나 앱에서 사용자가 실제로 보는 화면을 만드는 부분이다. 웹사이트를 켰을 때 디자인, 버튼, 텍스트 등 눈에 보이는 모든 요소가 프론트엔드로 구성된 것이다. 대표적으로 HTML, CSS, JavaScript가 있는데, HTML은 건물의 뼈대 같은 역할로, 웹 페이지의 기본 구조를 담당한다. CSS는 건물의 인테리어와 같은 역할로, 웹사이트의 색깔, 레이아웃 등을 담당한다. JavaScript는 건물로 따지자면 전기를 넣어 자동문이 작동하게 되는 것으로, 버튼을 클릭했을 때 페이지가 바뀌거나 요소가 움직이는 등 인터랙션을 가능하게..

이전 글과 아주 비슷하다.https://kaist2015.tistory.com/63 네이버 오픈 API 사용해서 "검색" 데이터 긁어오기https://developers.naver.com/main/ NAVER Developers네이버 오픈 API들을 활용해 개발자들이 다양한 애플리케이션을 개발할 수 있도록 API 가이드와 SDK를 제공합니다. 제공중인 오픈 API에는 네이버 로그인, 검kaist2015.tistory.com 이번에는 여기서 긁어오자.https://www.data.go.kr/ 공공데이터 포털국가에서 보유하고 있는 다양한 데이터를『공공데이터의 제공 및 이용 활성화에 관한 법률(제11956호)』에 따라 개방하여 국민들이 보다 쉽고 용이하게 공유•활용할 수 있도록 공공데이터(Datasewww.d..

https://developers.naver.com/main/ NAVER Developers네이버 오픈 API들을 활용해 개발자들이 다양한 애플리케이션을 개발할 수 있도록 API 가이드와 SDK를 제공합니다. 제공중인 오픈 API에는 네이버 로그인, 검색, 단축URL, 캡차를 비롯 기계번역, 음developers.naver.com 여기에 들어가면 네이버 오픈 API들을 쓸 수 있다.  오픈 API 목록은 다음과 같다.  여기서 "검색" API를 활용해서 네이버의 데이터를 끌어오자!!API를 사용하지 않고 자체적으로 크롤링을 할 수도 있는데 그럴 경우 너무 빠르게 크롤링을 하면 디도스 공격 들어온 줄 알고 IP를 차단해 버린다(..) 그걸 방지하려고 느리게 할 수도 있는데 그럼 또 너무 느리게 걸린다. 그..