본문 바로가기
728x90

Programming

[01. D3.js] 004. D3-Selection D3.js의 d3-selection 모듈은 DOM 요소를 선택하고 조작하는 기능을 제공한다. D3.js는 데이터를 바인딩하고, SVG 및 HTML 요소를 동적으로 생성하는 데 강력한 도구이며, d3-selection은 그 기초가 되는 핵심 개념이다. 1. 단일 요소 선택 (select) 1 2 3 d3.select()는 첫 번째로 매칭되는 요소만 선택한다.  3개의 요소들 중에서 첫 번째만 데이터를 바꾼다. 2. 여러 요소 선택 (selectAll)  3. 속성 및 스타일 변경d3.select("svg") .attr("width", 500).attr("height", 300); 위와 같이 attr를 통해 속성을 변경할 수 있다. 그리고 아래와 같이 style 또한 변경이 가능하다.d3.select.. 더보기
[02. Django-allauth] 006. Custom 로그인 구현한 로그인 화면을 통해 로그인을 하면 Home화면으로 리다이렉팅 된다. 로그인 하기 직전 페이지로 돌아오지 않는다. 그리고 로그인 할 때 마다 이전 글 [그림 2.5]와 같은 로그인 화면에서 매번 로그인해야 해서 번거롭다. 로그인 하는 코드를 조금 수정하면 이런 불편함을 해소할 수 있다. url.pyurlpatterns = [ # allauth path('accounts/google/login/', views.google_login, name='google_login'), path('accounts/google/login/callback/', views.google_callback, name='google_callback'), path('accounts/facebook/login.. 더보기
[02. Django-allauth] 005. Naver 로그인 Naver로그인 기능을 추가하기 위해선 Naver 개발자 사이트에 앱을 등록하고 인증키 등을 받아야 한다. https://developers.naver.com/apps/ [그림 2.4]와 같이 위 사이트에서 등록하고 발급받은 ID와 Key정보(내 애플리케이션>개요)를 Naver Provider에 입력한다. 로그인 버튼을 아래와 같이 연결한다.  그리고 버튼을 클릭하면 관련 화면이 뜨고 계속하면 로그인 된다. 더보기
[02. Django-allauth] 004. Kakao 로그인 Kakao로그인 기능을 추가하기 위해선 Kakao 개발자 사이트에 앱을 등록하고 인증키 등을 받아야 한다. https://developers.kakao.com/  [그림 2.4]와 같이 위 사이트에서 등록하고 발급받은 ID(REST API 키)와 Key(카카오 로그인>보안)정보를 Kakao Provider에 입력한다. 로그인 버튼을 아래와 같이 연결한다.  그리고 버튼을 클릭하면 관련 화면이 뜨고 계속하면 로그인 된다. 더보기
[02. Django-allauth] 003. Facebook 로그인 Facebook로그인 기능을 추가하기 위해선 Facebook 개발자 사이트에 앱을 등록하고 인증키 등을 받아야 한다. https://developers.facebook.com/apps/  [그림 2.4]와 같이 위 사이트에서 등록하고 발급받은 ID와 Key정보(앱 설정>기본 설정)를 Facebook Provider에 입력한다. 로그인 버튼을 아래와 같이 연결한다.  그리고 버튼을 클릭하면 관련 화면이 뜨고 계속하면 로그인 된다. 더보기
[02. Django-allauth] 002. Google 로그인 Google로그인 기능을 추가하기 위해선 Google 클라우드 콘솔에 사이트를 등록하고 인증키 등을 받아야 한다. https://console.cloud.google.com/apis/dashboard 새 프로젝트를 생성하여 아래 정보들을 입력해서 클라이언트ID와 보안 비밀번호를 생성한다.   Django의 관리자 페이지에서 Social applications 에 Google 로그인 정보를 추가해준다. Client id에 위에서 생성한 클라이언트 ID를 Secret key에 클라이언트 보안 비밀번호를 입력한다.  기본 셋팅이 완료되었다. 이제 로그인 페이지에 아래 로그인 링크를 하나 추가한다.  urls.py 파일에 allauth.urls를 연결해주면 된다.urlpatterns = [... # all.. 더보기
[02. Django-allauth] 001. 로그인 화면 추가 최근엔 SNS 로그인이 필수로 자리매김했다. 복잡한 가입절차 없이 기존에 가지고 있는 대표적인 SNS정보를 통해 바로 가입 및 로그인이 되기 때문에 편리하다. pip install django-allauthpip install pyjwt 위 두개의 라이브러리를 설치한다. 그리고 setting.py 안에INSTALLED_APPS = [ ...'django.contrib.sites', # 필수 'allauth', 'allauth.account', 'allauth.socialaccount', # 사용할 소셜 제공자(provider) 추가 'allauth.socialaccount.providers.google', 'allauth.socialaccount.providers... 더보기
[01. Django] 010. 데이터 요청/응답(Frontend ↔ Backend) Frontend는 사용자가 직접 보고 상호작용하는 부분으로 사용자 인터페이스(UI)를 담당한다. 브라우저에서 실행되며 웹사이트나 애플리케이션의 외관과 동작을 설계한다. 반면 Backend는 사용자에게 보이지 않는 서버 측 작업을 담당하며, 데이터베이스, 서버, 애플리케이션 로직 등으로 구성된다. 요청에 따라 데이터를 처리하고 결과를 Frontend로 반환한다. Django는 Backend 프레임워크 중 하나이다. Frontend(여기서는 웹사이트)에서 데이터를 요청하는 방법과 Django에서 응답하는 방법에 대해 알아보자. 웹사이트에서 다음과 같이 ajax를 통해 요청을 할 수 있다. 여기서 csrftoken 을 같이 전송하는 것이 보인다. AJAX 요청에서 CSRF Token을 삽입하는 이유는 서버 측.. 더보기
[01. Django] 009. MTV Django의 MTV는 Model-Template-View의 약자로, 웹 애플리케이션을 설계할 때 사용하는 아키텍처 패턴이다. Django는 이 패턴을 기반으로 웹 애플리케이션의 구조를 구성하며, 이는 사용자 요청을 처리하고 응답하는 전체적인 흐름을 정의한다. 1. Model (모델)- 역할: 데이터베이스와 상호작용하는 로직을 처리하는 역할. 데이터의 구조를 정의하고, 데이터베이스에 저장할 데이터를 다룸.- 구현: Django의 모델은 Python 클래스를 사용해 정의되며, 데이터베이스 테이블과 매핑. 각 클래스는 데이터베이스의 필드로 변환될 속성들을 가지고 있음.from django.db import modelsclass Database_Info(models.Model): db_name = mod.. 더보기
[01. D3.js] 003. D3-Axis 차트의 scale을 정했다면 axis로 그려 차트를 보기 편하게 하자.  선형 scale로 위와 같이 코드를 짠다. 이제 축을 원하는 방향에 그리면 된다. axisTop(scale)축을 아래에 그리고 스케일을 축 위에 그린다. const gx = svg.append("g") .attr("transform", `translate(10,${height - margin.bottom})`) .call(d3.axisTop(x));  axisRight(scale)축을 왼쪽에 그리고 스케일을 축 오른쪽에 그린다. const gx = svg.append("g") .attr("transform", `translate(10,${margin.bottom})`) .call(d3.axisRi.. 더보기
728x90

티스토리툴바