다비's IT

redux-persist redux toolkit만 적용했을 경우, 페이지를 이동하거나 새로고침 시 Store 값이 초기화된다. redux-persist 라이브러리를 활용하면 LocalStorage와 SessionStorage의 storage를 redux에서 사용할 수 있게 된다. Config.js LocalStorge 사용 시 "redux-persist/lib/storage" SessionStorage 사용 시 "redux-persist/lib/storage/session" 에서 import persisConfig = {} : 새로운 persist 선언 key : reducer의 어느 지점에서부터 데이터를 저장할 것 인지 storage : 웹의 localStorage 혹은 sessionStorage 지..

사용 전 준비 # yarn 사용 시 yarn add redux react-redux @reduxjs/toolkit # npm 사용 시 npm install redux react-redux @reduxjs/toolkit Redux이란? 먼저 Redux는 상태 관리 라이브러리 중 하나로 현재까지 가장 많이 쓰이고 있다. Redux를 사용하지 않으면 한 컴포넌트의 함수를 props 형태로 다른 컴포넌트로 전달하고, 또 그것을 props 형태로 다른 컴포넌트로 전달하는 과정을 반복해야한다. 이런 복잡한 구조는 불필요한 props 전달로 유지보수 또는 props 추적을 힘들게하는 Props drilling을 야기한다. 상태 관리 라이브러리는 이러한 문제들을 해결하기 위해 고안되었다. Redux는 Reducer와 ..

React Hook이란? React Hook이란, React 버전 16.8부터 React 요소로 새로 추가되었음. Hook이 나오기 전까지는 State 값 접근, lifecycle 구현을 사용하기 위해 Class 컴포넌트 선언을 해줘야했음. 또한 Function 컴포넌트는 한번 호출되고 메모리상에서 사라져 State 값 접근과 lifecycle 구현이 불가능. 기존의 class component를 사용하는 React 방식 import "./style"; import { Component, render } from "preact"; export default class App extends Component { state = { count: 0 }; modify = (n) => { this.setState..

ORM(Object Relational Mapping) ORM이란 객체와 관계형 데이터베이스의 데이터를 자동으로 매핑해주는 것을 말한다. 즉, 객체 지향 프로그래밍의 클래스를 관계형 데이터베이스이 테이블에 매핑해준다. ORM을 이용하면 데이터베이스 종류에 상관없이 일관된 코드를 유지할 수 있어서 프로그램을 유지 보수하기 편리하다. 또한 내부에서 안전한 SQL 쿼리를 자동으로 생성해 주므로 개발자가 달라도 통일된 쿼리를 작성할 수 있고 오류 발생률도 줄일 수 있다. Flask ORM 라이브러리 사용하기 SQLAlchemy는 가장 많이 사용하는 파이썬 ORM 라이브러리이다. 파이썬 모델을 이용해 테이블을 생성하고, 칼럼을 추가하는 등의 작업을 위해 Flask-migrate 라이브러리도 사용할 것이다. 아래와..

라우트 함수란? flask에서는 @app.route('/')와 같이 애너테이션을 통해 url을 매핑한다. 이때 @app.route와 같은 애너테이션으로 매핑되는 함수를 라우트 함수라고 한다. 블루프린트(Blueprint)란? Flask는 Django와 달리 url들을 파일 단위에서 따로 관리하지 않고, controller의 endpoint 함수에 데코레이터를 붙여서 관리한다. 라우트함수들은 기능이 필요할 때마다 계속 추가되어야하기 때문에 create_app 함수내에 함수가 많을 경우 번거로워질 수 있다. 이때 블루프린트(Blueprint)라는 클래스를 사용하면 라우트 함수들을 보다 더 구조적으로 관리할 수 있다. Blueprint 사용하기 C:\프로젝트 경로\views\main_views.py에서 임의로..

1. 회원가입 페이지로 연결되는 링크 추가 이전 게시물에서 만든 login.html 템플릿에 아래 코드를 추가하여 회원가입 페이지로 연결되는 링크를 추가한다. 로그인 또는 계정을 만드세요. 2. URL 매핑 login.html 템플릿에 {% url 'common:signup' %} 태그를 추가했으므로 이것에 대응되는 URL 매핑을 urls.py에 추가해주어야한다. 아래와 같이 추가해주면 회원가입 링크 클릭 시 views.signup 함수가 실행된다. from django.urls import path from django.contrib.auth import views as auth_views from . import views app_name = 'common' urlpatterns = [ path('l..

이번에는 로그인, 로그아웃 기능을 구현해볼 것이다. Django에서 로그인, 로그아웃을 도와주는 앱은 django.contrib.auth이다. 이 앱은 프로젝트 생성 시 settings.py에 자동으로 추가된다. INSTALLED_APPS = [ (... 생략 ...) 'django.contrib.auth', (... 생략 ...) ] 1. common 앱 생성 먼저 로그인, 로그아웃 기능을 구현할 앱을 추가해줄 것이다. 현재까지 게시판 기능을 구현한 'notes' 앱만 구현했으므로, 이제는 '공통 기능을 가진 앱'을 추가하여 구현할 것이다. 터미널에 아래와 같이 입력해서 common 앱을 생성하자. > django-admin startapp common 그리고 settings.py에 'common.ap..

1. 템플릿 필터 템플릿 필터란 템플릿 태그에서 | 문자 뒤에 사용하는 필터를 말한다. 예를 들어 아래 default_if_none은 템플릿 필터이다. {{ form.subject.value|default_if_none:'' }} 2. 게시물 번호 이전 게시물에서 구현했던 '페이징' 기능에는 아직 문제점이 하나 있다. 모든 페이지에서 게시물 번호가 항상 1부터 시작된다는 점이다. 이제 템플릿 필터를 활용하여 이 문제를 해결해볼 것이다. 먼저, 최근 게시물이 먼저 보여야하므로 게시물의 번호를 역순으로 정렬해야하고, 페이지별 게시물의 번호를 역순으로 정렬하려면 아래와 같은 공식을 적용해야한다. 번호 = 전체건수 - 시작인덱스 - 현재인덱스 + 1 시작 인덱스: 페이지 당 시작되는 게시물의 시작 번호 현재 인..

1. 대량 테스트 데이터 만들기 - 장고셸 사용 페이징(Paging) 실습을 위해 먼저 대량의 테이터를 만들 것이다. python manage.py shell 명령어로 장고셸을 실행해고 다음과 같이 한줄씩 입력한다. 이제 장고 셸을 종료하고 로컬 서버를 실행해보면 아래와 300개 이상의 데이터가 한 페이지에 보여진다. 따라서 이러한 문제를 해결하기 위해 페이징(paging) 처리가 반드시 필요하다. 2. views.py - Paginator 클래스 활용 장고에서 페이징을 처리하기 위해선 Paginator 클래스를 사용해야한다. 아래와 같이 Paginator 클래스를 사용하여 index 함수에 페이징 기능을 적용한다. from django.shortcuts import render, get_object_o..

1. 질문 등록하기 버튼 생성 폼 실습을 하기 위해 먼저 질문 등록하는 부분을 구현해주어야한다. 먼저 question_list.html에 "질문 등록하기"버튼을 만들어준다. 이 버튼을 클릭할 경우 question_create 별칭에 해당하는 URL이 호출되므로 해당 URL 별칭을 가진 URL 매핑을 추가해야한다. 질문 등록하기 2. URL 매핑 추가 /notes/urls.py에 다음과 같이 url 매핑을 추가한다. 해당 url이 요청되었을 경우 views.question_create 함수가 호출되므로 이제 views.py에서 question_create 함수를 작성해주어야한다. urlpatterns = [ (... 생략 ...) path('question/create/', views.question_cr..