본문 바로가기

Web

(11)
비동기 처리, 콜백 함수(callback) 웹 개발에서는 종종 시간 지연이 일어남 서버에서 데이터를 가져온 후 화면에 표시를 해야 하는데 자바스크립트의 특성에 따라 바로 화면에 표시하는 코드를 실행하려고 함 데이터를 가져온 후 표시하는 작업을 해라 라고 지정해주는 게 비동기 처리임 예시>       시간이 얼마나 걸리든 상관없이 displayB 함수가 실행된 다음 displayC 함수가 실행됨 함수 안에 매개변수로 들어가는 함수를 콜백 함수(callback)라고 함          자바스크립트에서 비동기를 처리하는 방법1. 콜백 함수: 여러 개 반복해서 매개변수로 들어가면 복잡해질 수 있음2. 프로미스: 성공 시 실행 코드, 실패 시 실행 코드가 정해져 있음3. async/await: 실행 순서 제어
Node.js, npm, 모듈 ... - 고객(클라이언트)이 메뉴(웹 사이트)를 보고 음식(정보)을 주문하면 주방(서버)에서 음식(정보)을 만들어 고객에게 제공- Node.js는 주방에서 더 쉽고 빠르게 음식을 만들 수 있도록 도와주는 요리사 Node.js의 장점기존에 알고 있던 자바스크립트를 확장해서 백엔드 개발을 할 수 있다는 것즉, 하나의 언어로 풀스택 개발이 가능 서버를 만든다는 것서버는 클라이언트의 요청을 받아 무엇인가를 처리해서 되돌려주는 컴퓨터서버를 만든다는 건 컴퓨터를 만드는 것이 아니라 서버 컴퓨터에서 돌아가는, 실행되는 프로그램을 만드는 것필요한 서비스를 위한 프로그램을 만듦 Node.js는 Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임이다.=> Node.js를 사용함으로 인해 자바스크립트..
[배포] WSGI, uWSGI aws로 django와 react로 만든 웹 사이트를 배포하려고 하는데 uwsgi 부분이 잘 와닿지 않음 uWSGI는 웹 애플리케이션을 위한 서버 게이트웨이 인터페이스(WSGI) 서버Python 웹 애플리케이션과 웹 서버(Nginx, Apache, ...) 사이의 중간 계층 역할을 함 WSGI(Web Server Gateway Interface): 웹 서버(Nginx, Apache, ...)와 웹 애플리케이션(Django, Flask, ...) 사이에서 데이터를 주고받기 위한 표준 인터페이스 > ChatGPT의 비유에 의하면..웹 서버: 레스토랑의 웨이터로 손님(웹 브라우저)로부터 주문을 받아 주방(웹 애플리케이션으로 전달)웹 애플리케이션: 레스토랑의 주방으로 주문받은 음식을 준비해서 웨이터에게 돌려줌W..
[Django] Django, PostgreSQL 연동하기 1. PostgreSQL 설치    본인 OS 환경에 맞게 postgresql 설치 2. DBeaver 설치 (DB를 더 편하게 보기 위한 도구, Option)DBeaver는 SQL 클라이언트이자 데이터베이스 관리 도구 이런 식으로 관계도도 볼 수 있고 데이터도 볼 수 있고사용자 권한도 확인 가능             3. postgres 쉘 접속DB, USER, PASSWORD 생성 후 USER에 권한 부여  4. Django 프로젝트 설정# 프로젝트 settings 파일DATABASES = { 'default': { 'ENGINE': 'django.db.backends.postgresql', 'NAME': '', 'USER': '', 'PASSW..
[배포] React, Django 배포 - 프레임워크, 동작 과정 정리 프론트엔드 react, 백엔드 django 로 개발한 웹사이트를 배포하려고 함Reactnpm run build 하면 디렉토리 내 build 폴더가 생성되고, 배포 버전 파일들이 만들어짐 Nginx:HTTP 및 리버스 프록시 서버, 메일 프록시 서버 및 일반 TCP/UDP 프록시 서버- 웹 서버(web server)는 HTTP 또는 HTTPS를 통해 웹 브라우저에서 요청하는 HTML 문서나 오브젝트(이미지 파일 등)을 전송해주는 서비스 프로그램- 주된 기능은 웹 페이지를 클라이언트에게 전달하는 것WSGI(Web Server Gateway Interface): 웹 서버와 웹 애플리케이션의 인터페이스를 위한 파이썬 프레임워크- WSGI 요청을 처리하려면 서버단에서 환경정보와 콜백함수를 애플리케이션단에 제공해야..
[Django, React] 로그인, 회원가입 연동 (2) 회원가입에서는 토큰을 생성하지 않고 걍 입력받은 유저 정보만 장고로 넘겨줌 React의 signup.js const data = { username, password }; try { await Axios.post("http://localhost:8000/accounts/signup/", data); notification.open({ message: "회원가입 성공", description: "로그인 페이지로 이동합니다.", icon: , }); 로그인 시 토큰 생성 React의 login.js const onFinish = (values) => { async function fn() { const { username, password } = values; #form에서 받아온 입력값 const data..
[Django, React] 로그인, 회원가입 연동 (1) simplejwt를 사용했는데 어떻게 인증되는 건지 궁금함 내 프로젝트의 views.py from django.contrib.auth import get_user_model from django.shortcuts import render from rest_framework.permissions import AllowAny from rest_framework.generics import CreateAPIView from .serializers import SignupSerializer class SignupView(CreateAPIView): model = get_user_model() serializer_class = SignupSerializer permission_classes = [AllowAny]..
[Django] JWT 인증 JSON Web Token(JWT)은 토큰 기반 인증에 사용할 수 있는 상당히 새로운 표준이다. 내장된 TokenAuthentication 체계와 달리, JWT 인증은 토큰을 검증하기 위해 데이터베이스를 사용할 필요가 없다. JWT 인증 패키지는 플러그 가능한 토큰 블랙리스트 앱뿐만 아니라 일부 기능을 제공하는 djangorestframework-simplejwt이다. Simple JWT는 Django RESTFramework를 위한 JSON 웹 토큰 인증 백엔드를 제공한다. settings.py에 추가 REST_FRAMEWORK = { ... 'DEFAULT_AUTHENTICATION_CLASSES': ( ... 'rest_framework_simplejwt.authentication.JWTAuthen..