| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | 6 | |
| 7 | 8 | 9 | 10 | 11 | 12 | 13 |
| 14 | 15 | 16 | 17 | 18 | 19 | 20 |
| 21 | 22 | 23 | 24 | 25 | 26 | 27 |
| 28 | 29 | 30 |
- django widget
- django ORM
- 파이썬
- 백준
- 알고리즘
- form
- es6
- MAC
- django rest framework
- web
- CSS
- PYTHON
- Django
- Baekjoon
- 알고리즘 문제
- js
- 알고리즘 풀이
- DRF
- HTML
- 파이썬 알고리즘
- 장고
- Git
- Algorithm
- react
- AWS
- java
- API
- javascript
- c++
- 알고리즘 연습
- Today
- Total
목록웹프로그래밍 (163)
수학과의 좌충우돌 프로그래밍
django rest framework 를 사용하여 rest API 서버를 만들다보면 serializer 를 사용하지 않을 수 가 없습니다. 기본적으로 model 에 등록된 필드 값들은 Meta 클래스에 추가줌으로서 다뤄줄 수 있지만 커스텀 필드를 정의하는데 있어서는 새로운 방법이 필요합니다. 이번 포스팅에서는 간단하게 Custom Field 만드는 법에 대해서 알아보도록 하겠습니다. SerializerMethodField SerializerMethodField 를 사용하여 쉽게 커스텀 할 수 있습니다. SerializerMethodField 는 read-only field 로 값을 저장하거나 수정할 때는 사용되지 않고 조회할 때만 사용합니다. 인자로는 method_name 로 해당 필드값에 대해 정의하..
Django-Authentication-Permissions [Django] Authentication 과 Permissions DRF 에서의 접근제한을 알아보도록 하겠습니다. 우선 기본적으로 접근제한을 제외한 기본적인 코드들에 대해서는 설명을 생략하겠습니다. 앞의 포스팅들을 참고해주세요. 현재 까지의 진행 상황은 다음과 같습니다.. ssungkang.tistory.com 저번 포스팅에서 django rest framework 에서의 Authentication과 Permissions 에 대해서 알아보았습니다. 이번 포스팅에서는 APIView에서 Permissions 을 사용해보도록 하겠습니다. Custom Permission 우선 사용할 두 개의 Custom Permission을 만들어보겠습니다. 여러 ..
django 와 react 를 통해 프로젝트를 진행하고 있는데 두 서버를 연결하는데 있어서 몇 가지 문제점이 발생하였습니다. django CORS [Django] CORS, Cross-Origin Resource Sharing CORS 란? 제목에서 알 수 있듯이 CORS 는 Cross-Origin Resource Sharing 의 줄임말입니다. Cross-Origin Resource Sharing 는 한국어로 교차 출처 리소스 공유라고 하며 웹 페이지 상의 제한된 리소스를 최초 자.. ssungkang.tistory.com 첫 번째 문제점은 위의 블로그에 정리한 것처럼 포트 번호가 다른 두 서버간의 발생하는 문제점이었고 django 에서 포트 3000번도 허락해줌으로서 해결하였습니다. 이번 포스팅에서는..
CORS 란? 제목에서 알 수 있듯이 CORS 는 Cross-Origin Resource Sharing 의 줄임말입니다. Cross-Origin Resource Sharing 는 한국어로 교차 출처 리소스 공유라고 하며 웹 페이지 상의 제한된 리소스를 최초 자원이 서비스된 도메인 밖의 다른 도메인으로부터 요청할 수 있게 허용하는 구조입니다. django 같은 경우, 기본적으로 8000 포트를 사용하고 있기 때문에 다른 포트를 사용하는 프론트 서버와 통신을 막고 있습니다. 따라서 CORS 를 설정하지 않은 상태로, 프론트 서버에서 통신을 요청하면 다음과 같은 에러를 확인할 수 있습니다. Access to fetch at 'http://localhost:8000/auth/login' from origin '..
이번 포스팅에서는 MSA 에 대해서 알아보도록 하겠습니다. MSA 는 micro service architecture 의 줄임말로서 하나의 큰 어플리케이션을 여러 개의 작은 어플리케이션으로 나눠 만드는 아키텍쳐 입니다. MSA 가 등장하기 이전에는 하나의 서비스는 하나의 어플리케이션으로 만드는 것이 일반적이었죠. 이를 Monolithic architecture, 모놀리식 아키텍쳐 라고 합니다. MSA 에 대해서 자세히 알아보기 전에 모놀리식 아키텍쳐 에 대해서 알아보고 왜 MSA 가 등장하게 되었는지 알아보도록 하겠습니다. Monolithic Architecture Monolithic 의 뜻을 사전에 검색해보면 단단히 짜여 하나로 되어 있는 라는 의미라는 걸 알 수 있습니다. 말 그대로 하나의 프로젝트에..
SPA 란? SPA 란 Single Page Application의 약자로 말 그래도 해석해보면 페이지가 한 개인 어플리케이션이라는 뜻입니다. 여기서 페이지가 하나라는 의미가 무슨 의미일까요? SPA 가 등장하기 전 웹 어플리케이션은 여러 페이지로 구성하였습니다. 쉽게 말해 로그인 페이지, 회원가입 페이지, 글 작성 페이지 등이 있고 사용자가 새로운 페이지에 대한 요청을 보내면 서버로부터 리소스를 전달받아서 이를 렌더링하는 방식으로 동작하였습니다. 하지만 시간이 지나 웹에서 점점 더 많은 정보를 제공하게 되었을 뿐만 아니라 스마트폰의 보급으로 컴퓨팅 파워가 낮은 모바일 기기를 통한 웹 어플리케이션접속도 빠르게 증가하였습니다. 이는 속도 저하로 귀결되었습니다. 그래서 렌더링 하는 역할을 서버에게 넘기지 않..
일반적으로 javascript 로 API 데이터를 가져오기 위해서 fetch 와 axios 중 하나를 사용합니다. 둘 다 장단점이 존재하여 우월을 가리기 힘들지만 이번 포스팅에서는 axios 를 사용하여 네트워크 통신을 하도록 하겠습니다. API 로는 YTS 에서 만든 영화 API 를 사용하도록 하겠습니다. https://yts.lt/api/v2/list_movies.json Axios axios 를 사용하기 위해서는 설치와 import 가 필요합니다. > npm install axios // src/App.js import axios from "axios"; // 생략 react 에서 API 데이터를 가져오는 부분은 componentDidMount() 메소드에서 구현을 합니다. state 에 movie..
현재까지 class component의 메소드는 render 만을 접해보았습니다. 하지만 단순히 render 말고 다른 메소드들을 가지고 있는데 바로 life cycle method 입니다. 이 때 life cycle 이라 함은 component 가 생성되고 사라지기 까지의 생명주기를 말합니다. life cycle method 은 그 때 실행되는 함수들이죠. 이번 포스팅에서는 life cycle method 에 대해서 알아보도록 하겠습니다. mounting mount 는 component가 생성되는 것을 의미합니다. 반대로 unmount 는 component 가 제거 되는 것을 의미하죠. unmount 는 아래서 살펴보도록 하겠습니다. constructor() 가장 먼저 실행되는 메소드는 construn..
저번 포스팅에서 살펴봤듯이 component를 만드는 방법은 function 을 이용하는 방법과 class 를 이용하는 방법이 존재합니다. 이번 포스팅에서는 class component 를 알아보도록 하겠습니다. class component 이를 통해 component 를 생성하는 방법은 어렵지 않습니다. React.Component 를 상속받는 class 를 하나 선언하고 render 메소드 내에서 JSX 를 통해 return 을 해줍니다. react 는 자동적으로 class component 의 render 메소드를 실행하게 됩니다. import React from 'react'; class App extends React.Component { render() { return Hello World; ..
JSX 와 Component [React] JSX 와 Component react 는 대부분이 새로운 개념없이 javascript 코드로 이루어져 있습니다. 하지만 새롭게 알아야하는 개념도 물론 존재하죠. react 를 시작하기 전에 react 에서 새롭게 등장한 개념, JSX 를 살펴봅시다. JSX JSX.. ssungkang.tistory.com 저번 포스팅에서 Component 에 대해서 알아보았습니다. 이번 포스팅에서는 Component 를 통해서 정보를 보내는 방법을 알아보겠습니다. Props component 태그 안에 key 와 value 값을 명시함으로서 Child Component에 데이터를 넘길 수 있습니다. 그리고 이 데이터를 props 라고 합니다. 아래 예시는 name 이라는 키워..