728x90 반응형 SMALL App Programming183 [Django] User Logout views.py from django.contrib.auth import authenticate, login, logout def logoutUser(request): logout(request) return redirect('home') urls.py from django.urls import path from . import views urlpatterns = [ path('login/', views.loginPage, name = "login"), path('logout/', views.logoutUser, name = "logout"), path('', views.home, name = "home"), path('room//', views.room, name = "room"), path('crea.. 2023. 3. 9. [Android Studio] 웹뷰 (WebView) 웹뷰 (WebView) 웹뷰(WebView)란 프레임워크에 내장된 웹 브라우저 컴포넌트로 뷰(View)의 형태로 앱에 임베딩하는 것을 말한다. AndroidManifest.xml 인터넷 관련 권한 추가, http 사이트 접근 허용 설정 추가한다. 만약, 주소를 http로 사용하는데 android:usesCleartextTraffic="true" 를 추가해주지 않는다면 net:ERR_CLEARTEXT_NOT_PERMITTED 에러가 출력된다. xml java import androidx.appcompat.app.AppCompatActivity; import android.os.Bundle; import android.webkit.DownloadListener; import android.webkit.Web.. 2023. 2. 23. [React] 회원 가입 폼 react-router-dom 리액트에서 페이지를 전환하기 위해 사용하는 모듈이다. /code/web # npm install react-router-dom@6 CodePen 코드펜은 사용자가 만든 HTML, CSS, 자바스크립트 코드 조각을 테스트하고 시연하기 위한 온라인 커뮤니티이다. Home.tsx src 폴더에서 pages 폴더를 만들고 제일 먼저 보여줄 home.tsx 페이지를 생성한다. function Home = () => { return ( Home ) } export default Home; User.tsx 사용자 페이지를 보여주는 User.tsx를 생성한다. function User = () => { return User } export default User; Profile.tsx c.. 2023. 2. 23. [Django] 프론트엔드 페이지 프론트엔드 컨테이너를 확인한다. docker ps -a 컨테이너를 삭제하고 생성하는 것을 반복하여 서비스가 제대로 배포되는지 확인할 수 있다. docker rm project-01 project-db 마찬가지로, 이미지도 삭제한다 (이미지를 사용하는 컨테이너가 없어야 함). docker images docker rmi project:test docker run -d -p 9999:5432 -e POSTGRES_DB=service -e POSTGRES_USER=admin -e POSTGRES_PASSWORD=1234 --name project-db --net project postgres docker build -t project:test . # window docker run -it -p 9998:800.. 2023. 2. 22. [Django] 시리얼라이저 (Serializer) 시리얼라이저 (Serializer) Serializer는 Django에서 사용하는 파이썬 객체나 queryset 같은 복잡한 객체들을 REST API에서 사용할 JSON과 같은 형태로 변환해주는 어댑터 역할을 한다. 쿼리셋, 모델 인스턴스 등의 complex type (복잡한 데이터)를 JSON, XML등의 컨텐트 타입으로 쉽게 변환 가능한 python datatype으로 변환시켜 준다. Deserialize은 받은 데이터 (크롤링시 parse 사용 ➡ python datatype)를 validating한 후에 parsed data를 complex type으로 다시 변환한다. serializer.py users 프로젝트에 serializer.py를 생성한다. from rest_framework impor.. 2023. 2. 22. [Django] REST API REST API 장고에서 클라이언트 (사용자) 인증이나 컨텍스트 (세션, 로그인 정보)등을 직접 관리하는 REST API 툴킷이 존재한다. docker run -it -p 9998:8000 -p 9997:3000 -v ${PWD}:/code --name project-01 --net project project:test 장고 패키지를 설치한다. /code # pip install django /code # pip install djangorestframework /code # pip install psycopg2-binary /code # pip install Pillow /code # pip freeze 다음을 수행하면 간단한 형태의 프로젝트가 생성된다. /code # django-admin start.. 2023. 2. 21. [Django] 프로젝트 생성 깃 저장소 (Git Repository) git init git config user.name "닉네임" git config user.email "이메일" gitignore gitignore은 프로젝트 작업시 로컬 환경의 정보나 빌드 정보등 원격 저장소에 관리되지 않는 파일들에 대해서 지정하여 원격 저장소에 실수로 올라가지 않도록 관리하는 파일이다. 정의한 정보들에 해당하는 파일들에 대하여 git track하지 않도록 설정하는 역할을 한다. https://www.toptal.com/developers/gitignore에서 프로젝트에 필요한 파일을 얻을 수 있다. # Created by https://www.toptal.com/developers/gitignore/api/django,python,node,.. 2023. 2. 20. [React] 템플릿 언어 (2) 폼 (Form) 양식 (form)은 웹 어플리케이션에서 사용자로부터 데이터를 입력 받기 위해서 필수적인 기능이다. 다시 말해, 리액트에서 검증을 위한 도구이다. npm install react-form-hook register handleSubmit errors getValues setValue 검증 required min, max minLength, maxLength pattern axios 모듈 서버로 요청을 보내기 위한 도구로 axios는 비동기 http 요청이다. axios.defaults는 모든 요청에 적용될 값을 지정할 수 있다. npm install axios baseURL headers common : 모든 요청에 대한 헤더 post : 포스트 요청에 대한 헤더 정의 withCredenti.. 2023. 2. 20. [React] 템플릿 언어 (1) 템플릿 언어 장고 프레임워크에서 파이썬 변수 및 문법을 html 안에서 쓸 수 있도록 장고에서 제공해주는 언어이다. JSX (JavaScript XML) 리액트에서 사용하는 자바스크립트를 확장한 언어이다. HTML 태그와 컴포넌트로 컴포넌트의 구조를 표현한다. 중괄호 ({,})에 자바스크립 표현식을 사용할 수 있다. HTML과 다르게 클래스 적용을 위해서는 className을 사용해야 한다. 컴포넌트는 반드시 루트 요소 하나를 반환해야 한다. 훅 (Hook) Hook은 React 버전 16.8부터 React 요소로 새로 추가되었다. Hook을 이용하여 기존 Class 바탕의 코드를 작성할 필요 없이 상태 값과 여러 React의 기능을 사용할 수 있다. 컴포넌트 코드를 간단하게 해준다. useState 상.. 2023. 2. 20. [React] 프로젝트 구조 프로젝트 구조 npx create-react-app web --template typescript npm start : 프로젝트 실행 npm build : 프로젝트 빌드 프로젝트 확인 : 크롬 주소창에서 localhost:3000 SPA (Single Page App) 싱글 페이지 애플리케이션은 서버로부터 완전한 새로운 페이지를 불러오지 않고 현재의 페이지를 동적으로 다시 작성함으로써 사용자와 소통하는 웹 애플리케이션이나 웹 사이트를 말한다. 기존 앱은 전체 페이지를 서버에서 받아왔다. SPA는 처음 필요한 데이터를 가져오고 페이지 전환없이 일부를 렌더링한다. 컴포넌트 컴포넌트는 리액트로 만들어진 앱을 이루는 최소한의 단위를 말한다. 사용자 정의 태그 클래스 기반 컴포넌트 함수 기반 컴포넌트 2023. 2. 20. 이전 1 ··· 3 4 5 6 7 8 9 ··· 19 다음 728x90 반응형 LIST
