본문 바로가기

전체 글

 (271)
[Node.js] 2. Express 프레임워크로 REST API 서버 구축 개요 저번 문서에서 REST API가 무엇인지 대략 파악하였다. 이제부터는 Express 프레임워크를 이용하여 REST API를 실제 구축할 예정이다. 설치 및 버젼 node.js: v12.16.2 npm: 6.14.4 postman 설치: 개발한 API의 테스트를 쉽게 할 수 있는 어플리케이션 기본 세팅 npm init npm install express npm init이후 Express 프레임워크를 사용하기 위해 설치준다. 기본 코드 const express = require("express") const bodyParser = require("body-parser") const server = express(); server.use(bodyParser.json()) const users = [ { ..
[Node.js] 1. 개요 - REST API 서버 구축 REST REST는 Representational state transfer의 약어이다. HTTP URL을 통해 자원을 명시하고, HTTP Method인 POST, GET, DELETE, PUT을 통해 해당 자원에 대한 CRUD(CREAT, READ, UPDATE, DELETE) 작업을 수행한다. 안드로이드 카테고리에서 Retrofit이라는 REST API를 쉽게 이용하게 하는 라이브러리이다. 구성요소 자원을 명시하고 자원에 대한 작업을 수행하기 위해 아래와 같은 구성요소가 필요하다. 1. 자원(Resource): URL 모든 자원은 고유한 ID를 포함하고 있다. 이는 자원은 서버에 존재하게 되고, ID는 이러한 자원을 구별하기 위해 사용된다. 이러한 자원을 구별하는 ID는 HTTP URL로 구분한다. ..
[안드로이드] 예제: MVVM+AAC를 이용한 RecyclerView 10 - Swipe, Drag&Drop으로 아이템 삭제 및 순서 변경 버그 픽스 개요 이전 문서의 개발까지에서는 두 동작을 각각 수행하면 전혀 문제가 없었다. 예를들어 Drag&Drop하고 리스트를 업데이트하거나 swipe만 하여 아이템을 삭제하거나. 하지만 리스트를 업데이트 한 뒤 스와이프하여 삭제하면 애니메이션이 의도대로 움직이지 않는다. 따라서 이번 문서에서는 해당 문제를 다룬다. 문제점 기존의 이동과 삭제하는 경우의 코드를 살펴보자. override fun onItemMove(fromPosition:Int, toPosition:Int) { if(!set) { list.addAll(currentList) set=true } val temp = list.get(fromPosition).itemOrder list.get(fromPosition).itemOrder=list.get(t..
[안드로이드] 예제: MVVM+AAC를 이용한 RecyclerView 9 - Swipe, Drag&Drop으로 아이템 삭제 및 순서 변경 개요 이번 문서에서는 ItemTouchHelper를 이용하여 프래그먼트에 추가된 아이템을 스와이프하여 삭제하거나 드래그&드랍으로 순서를 변경하는 예제를 다룬다. 과정 model 수정 DAO 수정 Repository 및 ViewModel 수정 ItemTouchHelper 구현 ListAdapter 수정 Fragment 수정 1. model 수정 먼저 기존의 Todo.kt에서 순서를 나타내기 위해 itemOrder 필드를 추가한다. 또한, 후에 리스트를 정렬하기 위해 Comparable 인터페이스를 상속받아 구현한다. Todo.kt data class Todo ( //autoGenerate는 null을 받으면 ID 값을 자동으로 할당해줌 @PrimaryKey(autoGenerate = true) var id..
[안드로이드] 예제: MVVM+AAC를 이용한 RecyclerView 8 - Navigation 컴포넌트 활용 개요 이번 문서에서는 과거 문서에서 다룬적이 있는 navigation 컴포넌트를 활용하여 아래와 같은 UI로 바꿀 예정이다. 첫번째 프래그먼트의 영화 아이템을 클릭하면 다이얼로그가 나오고, 다이얼로그의 추가 버튼을 클릭하면 보고 싶은 영화 목록에 추가된다. 보고 싶은 영화 목록은 두번째 프래그먼트이다. 그리고 추가로 이전 문서의 경우 리사이클러뷰의 아이템의 overview를 보면 글이 오른쪽 끝에서 잘린 문제가 있었는데 이 또한 해결한다. 개발과정 프래그먼트 생성 네비게이션 설정 및 생성 리사이클러뷰 어답터 설정 레이아웃 픽스 1. 프래그먼트 생성 프래그먼트의 전반적인 로직은 기존 MainActivity와 같아야 한다. 영화 목록을 보여주는게 핵심 역할이다. 주목할 부분은 onCreateView 부분이다..
[안드로이드] 예제: MVVM+AAC를 이용한 RecyclerView 7 - Retrofit을 통해 영화 정보를 얻어온 후 리사이클러뷰에 보여주기 개요 지난 문서까지 Todo리스트를 추가하였고, 잠깐 Retrofit 예제를 수행했다. 이번엔 둘을 결합하여 retrofit으로 영화 정보를 얻어온 뒤 리사이클러뷰에 뿌려주는 예제이다. 마찬가지로 livedata, databinding 등을 활용한다. 개발 과정 Retrofit으로 데이터 얻어오기 RecyclerView 관련 코드 수정 및 추가 그 외 소스 코드 수정 1. Retrofit으로 데이터 얻어오기 이전 문서에서 관련된 내용을 설명했으므로 자세한 설명은 생략한다. MovieService 인터페이스 package com.example.sampleapp.retrofit import androidx.lifecycle.LiveData import retrofit2.Call import retrofit2..
[안드로이드] 예제: Retrofit 라이브러리를 사용하여 영화 정보 얻어오기 Retrofit Retrofit은 안드로이드에서 사용되는 Type-safe한 HttpClient 라이프러리이다. Type-safe란, 요청을 통해 전달받은 데이터를 프로그램에서 사용하는 형태의 객체로 받을 수 있음을 의미한다. Retrofit은 개발자에게 추상화를 제공한다. 만약 Retrofit이 없다면 개발자는 연결, 캐싱, 실패시 대응, 쓰레딩, 응답 분석, 오류 처리 등의 과정이 필요하다. Retrofit의 사용 방법 데이터 모델 생성 인터페이스 인더페이스 구현체 생성 구현체를 이용하여 데이터 요청 종속성 추가 retrofit을 사용하기 위한 기본적인 라이브러이이다. implementation 'com.squareup.retrofit2:retrofit:2.7.2' implementation 'com..
[안드로이드] 예제:MVVM+AAC를 이용한 RecyclerView 6 - ListAdapter ListAdapter 기존의 RecyclerView.Adapter는 RecyclerView에 데이터 목록을 표현하기 위한 기본 클래스이다. 추가로 백그라운드 쓰레드에서 기존 리스트와의 비교하는 연산까지 포함한다. ListAdapter는 AsyncListDiffer를 좀더 편리하게 사용할 수 있는 wrapper라고 보면 된다. 더 적은 코드로 효율적인 구현이 가능해진다. ListAdapter는 내부적으로 읽기만 가능한 불변 객체만 다룬다. 예를들어 ListAdpater로 전달받은 리스트 중 특정 항목을 수정, 추가, 삭제하는 것이 불가능하다는 말이다. 대신 추가, 수정, 삭제와 같은 변경이 반영된 새로운 리스트를 다시 ListAdpater로 제출해야 한다. 이 기능을 하는 함수는 submitList(val..

티스토리툴바