분류 전체보기

    SW개발/Django

    [Django]Django REST Framework 튜토리얼 1 (Serialization)

    이번 포스팅에서는 DRF의 Serialization 공식 문서를 공부하면서 번역해보려고 한다. 해석에 틀린 내용이 있을 수 있으니 이해가 안가는 부분은 아래의 공식문서를 참조하기 바란다. DRF Serialization tutorial 공식 Documentation Introduction 이 튜토리얼에서는 pastebin 같이 code를 highlighting 할 수 있는 간단한 Web API를 만드는 방법을 다룬다. 그 과정에서 REST framework를 구성하는 다양한 컴포넌트들을 소개하고, 모든 것들이 어떻게 결합되는지에 대한 포괄적인 이해를 도울 것 이다. 이 튜토리얼은 상당히 심층적이므로 시작하기 전에 간단한 맥주와 쿠키를 가져와야 한다! 만약 quick overview를 원한다면 quicks..

    [Django]Django REST Framework 튜토리얼 (Quickstart)
    SW개발/Django

    [Django]Django REST Framework 튜토리얼 (Quickstart)

    DRF를 사용해보기에 앞서 간단하게 API를 만들어볼 수 있는 DRF 공식 튜토리얼을 번역하면서 따라해볼 것이다. 학습하면서 진행하는 것이기에 해석에 오류가 있을 수 있다. 헷갈리는 부분은 아래의 공식 Documentation을 참고하자. DRF Tutorial 공식 Documentation Quickstart 우리는 관리자가 시스템에서 사용자와 그룹을 보고 편집할 수 있는 기능을하는 간단한 API를 만들 것이다. Project setup 장고 프로젝트의 이름을 tutorial, app의 이름을 quick start로 생성하자. # 프로젝트 디렉토리 생성 mkdir tutorial cd tutorial # 패키지 의존성을 독립적으로 사용하기 위한 파이썬 가상환경 생성 python3 -m venv env ..

    [Django, Vue]Django + Vue CRUD 구현 5 - Front end
    SW개발/Django

    [Django, Vue]Django + Vue CRUD 구현 5 - Front end

    드디어 CRUD중 마지막 기능인 Update를 구현해 볼 것이다. update 버튼을 누를 시 수정할 수 있는 폼이 등장하고, 데이터를 수정하고 Save 버튼을 누르면 장고 백엔드 서버로 PATCH method를 보내는 것을 구현하려고 한다. 먼저 수정하는 폼은 update 버튼을 누를 시에만 구현되도록 할 것이기 때문에 이를 체크하는 is_hidden 이라는 플래그 변수를 활용하려고 한다. 장고의 model 에 is_hidden 필드는 존재하지 않기에 vue 에서 플래그 데이터(is_hidden)를 추가해주는 작업을 할 것이다. App.vue // App.vue 수정 // template 수정

    [Django, Vue]Django + Vue CRUD 구현 4 - Front end
    SW개발/Django

    [Django, Vue]Django + Vue CRUD 구현 4 - Front end

    이전 포스팅에서 Create 기능에 대한 부분을 완벽하게 구현해 두었다. 지금부터는 Delete 기능을 구현해볼 것이다. Content.vue // Content.vue 수정 user CRUD create clear 이름 : {{ data.username }} 나이 : {{ data.age }}세, 거주지: {{ data.city }} Delete methods: { sendForm: function() { axios({ method: "POST", url: url, data: this.data, }) .then((response) => { this.userList = response.data; }) .catch((error) => { console.log("Failed to get userList", ..

    [Django, Vue]Django + Vue CRUD 구현 3 - Front end
    SW개발/Django

    [Django, Vue]Django + Vue CRUD 구현 3 - Front end

    이전 포스팅에서 Create 기능을 구현하였지만 새로고침을 하지 않을 경우 추가된 데이터를 조회할 수 없는 상태이다. 실제로 서비스하는 환경이라면 무조건 고쳐야할 사항이므로 수정해보겠다. App.vue // App.vue의 mounted 부분 mounted() { // DOM 객체 생성 후 DRF 서버에서 데이터를 가져와 userList에 저장 axios({ method: "GET", url: url }) .then(response => { this.userList = response.data; console.log("Success", response); }) .catch(error => { console.log("Failed to get userList", error.response); }); }, A..

    [Django, Vue]Django + Vue CRUD 구현 2 - Front end
    SW개발/Django

    [Django, Vue]Django + Vue CRUD 구현 2 - Front end

    지금까지 Vue 에서 등록된 유저의 목록을 보여주는 Read 기능을 구현하였다. 조금씩 부분을 나눠 수정했던 일이 많았기에 Create 기능을 만들기 전에 통합된 코드를 한번 보여주고 갈 것이다. App.vue // App.vue Vuetify 레이아웃 변경 Vuetify 는 12구획으로 나누어진 Grid system을 지원한다. 즉, 하나의 열(row)는 12개의 컬럼(column) 으로 구성된다는 뜻이다. 따라서 우리는 이것을 사용하여 layout을 변경해볼 것이다. Grid system에서는 다음과 같은 세가지 컴포넌트가 존재한다. v-flex가 가장 하위 컴포넌트이다. v-container : 중앙 중심의 페이지에 적용됨, 컨텐츠를 담을 컨테이너를 의미함 v-layout : 각 섹션을 분리하는데 ..

    [Django, Vue]Django + Vue CRUD 구현 1 - Front end
    SW개발/Django

    [Django, Vue]Django + Vue CRUD 구현 1 - Front end

    이전 까지의 작업을 통해 이제 우리는 DRF Server 에서 데이터를 GET 할 수 있게 되었다. 이번 포스팅에서는 GET을 포함한 CRUD 기능을 구현해볼 것이다. 데이터를 가져왔으니 화면에 가져온 데이터를 출력해야 할 것이다. 데이터를 가져오는 방법에는 다양한 방법들이 존재하는데 여기서는 mounted를 사용하여 페이지 로드 시 데이터를 가져오는 방법을 택할 것이다. App.vue // App.vue mounted 를 활용하여 DOM 객체가 생성된 후에 DRF server로부터 userList를 가져와서 저장해주는 코드를 App.vue 에 작성하였다. methods 부분에서는 아직 구현하지는 않았지만 추후에 CRUD 로직을 구현하기 위한 메소드들을 미리 선언해 두었다. userList : [] 부분..

    [Django, Vue]Django + Vue 연동하기 3 - Front end
    SW개발/Django

    [Django, Vue]Django + Vue 연동하기 3 - Front end

    이전 포스팅에서는 CRUD를 위한 화면을 구현하였다. 이전에 구성했던 장고의 모델은 username, age, city로 이루어져 있으니 입력화면도 이와 같이 수정할 것이다. Content.vue // components/Content.vue 파일 수정 User CRUD create clear Title content 약간의 코드를 수정하여 입력을 받는 명과 입력받는 개수를 장고 모델에서 선언한 것과 동일하게 해주었다. 이제부터는 백엔드 서버와 통신하기 위해 axios를 이용해 볼 것이다. (장고 서버는 running 상태여야 함) axios 란? axios는 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리이다. 즉, 우리가 만든 장고 백엔드서버와 프론트엔..

    [백준]15649번 N과 M (1) - 백트래킹
    SW개발/코딩테스트

    [백준]15649번 N과 M (1) - 백트래킹

    https://www.acmicpc.net/problem/15649 15649번: N과 M (1) 한 줄에 하나씩 문제의 조건을 만족하는 수열을 출력한다. 중복되는 수열을 여러 번 출력하면 안되며, 각 수열은 공백으로 구분해서 출력해야 한다. 수열은 사전 순으로 증가하는 순서로 출력해 www.acmicpc.net n, m = map(int, input().split()) visited = [False] * n arr = [] def dfs(cnt): # 수열이 m 자리수가 되면 종료 if cnt == m: print(*arr) # 리스트내의 모든 원소 출력 return for i in range(n): if visited[i]: # 이미 사용한 수라면, 방문했다면 continue arr.append(i ..

    [Django, Vue]Django + Vue 연동하기 2 - Front end
    SW개발/Django

    [Django, Vue]Django + Vue 연동하기 2 - Front end

    지난번 포스팅에서는 Vue를 사용하기 위한 여러 환경들에 대한 설치를 완료하였다. 이번 포스팅부터는 실제로 Vue 컴포넌트들을 하나씩 작성해보며 간단하게 프론트엔드 작업을 진행할 것이다. Vue src 디렉토리 구조 leffept@MacBookPro src % tree # tree 명령어로 Vue 프로젝트의 src 폴더의 디렉토리 구조 확인. . ├── App.vue ├── assets │ ├── logo.png │ └── logo.svg ├── components │ └── HelloWorld.vue ├── main.js └── plugins └── vuetify.js Vue-cli로 생성한 프로젝트의 디렉토리중 중요한 것들만 조금 설명해보겠다. build/ : webpack 빌드 관련 설정이 모여 있..

티스토리툴바