| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 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 | 31 |
- Baekjoon
- javascript
- 알고리즘 풀이
- Algorithm
- 파이썬 알고리즘
- java
- API
- web
- 알고리즘
- AWS
- form
- MAC
- Django
- 알고리즘 문제
- 알고리즘 연습
- HTML
- django widget
- es6
- js
- 백준
- c++
- django rest framework
- react
- 파이썬
- 장고
- PYTHON
- DRF
- django ORM
- Git
- CSS
- Today
- Total
목록분류 전체보기 (341)
수학과의 좌충우돌 프로그래밍
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 가 등장하기 전 웹 어플리케이션은 여러 페이지로 구성하였습니다. 쉽게 말해 로그인 페이지, 회원가입 페이지, 글 작성 페이지 등이 있고 사용자가 새로운 페이지에 대한 요청을 보내면 서버로부터 리소스를 전달받아서 이를 렌더링하는 방식으로 동작하였습니다. 하지만 시간이 지나 웹에서 점점 더 많은 정보를 제공하게 되었을 뿐만 아니라 스마트폰의 보급으로 컴퓨팅 파워가 낮은 모바일 기기를 통한 웹 어플리케이션접속도 빠르게 증가하였습니다. 이는 속도 저하로 귀결되었습니다. 그래서 렌더링 하는 역할을 서버에게 넘기지 않..
2차 과제는 1차 과제에 비해 규모가 좀 있어서 여러 포스팅으로 나누어서 올릴려고 했지만 실패했습니다. 1차 과제 때와 마찬가지로 구현한 방법과 그에 대한 코드 리뷰를 중심으로 포스팅 하도록 하겠습니다. 2차 과제는 Auth 서버였고 필요한 기능은 다음과 같습니다. 가입, 로그인 페이지 유저 관리 페이지 인증 서버 (API) MySQL DB 사용 Password Encryption 캐시 E-Mail 인증 비밀번호 찾기 가입, 로그인 페이지 가입, 로그인 페이지는 html,css,js 를 통해 구현하였습니다. API 서버와의 통신은 fetch 를 통해 진행하였습니다. 항상 API 서버만 개발하고 클라이언트 쪽은 팀원과 협업을 통해 진행하였어서 놓치는 부분이 많았습니다. 특히 request headers 부..
일반적으로 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 이라는 키워..
react 는 대부분이 새로운 개념없이 javascript 코드로 이루어져 있습니다. 하지만 새롭게 알아야하는 개념도 물론 존재하죠. react 를 시작하기 전에 react 에서 새롭게 등장한 개념, JSX 를 살펴봅시다. JSX JSX 에 대해서 알아보도록 하겠습니다. const element = Hello, World!; 주어진 변수는 바로 JSX 입니다. 어떤 것인지 이해가 가시나요? JSX 는 javascript 와 XML 의 합성어로서 자바스크립트 문법의 확장판으로서 UI 가 실제로 어떻게 보일지를 설명해줍니다. 위에서 설명 했듯이 javascript, XML 을 합쳤기 때문에 두 언어의 장점을 모두 취하고 있습니다. XML 과 같이 마크업 되어 있기 때문에 구조를 한 눈에 알아보기 쉽고 jav..