분류 전체보기 (46) 썸네일형 리스트형 디자인 패턴 - 구조(Structural)패턴 - Adaptor Adaptor 패턴은서로 다른 인터페이스를 가진 클래스들을 함께 사용할 수 있도록 하는 패턴이라고 한다.클래스의 인터페이스를 다른 인터페이스로 변환하여 함께 작동하도록 해준다고 한다. 구조가 다른 Tiger 클래스를 Animal 추상클래스를 이용하여 사용하고 싶을 때,Tiger 클래스의 구조를 변경할 수 없을 때,이런 경우에 Animal 클래스를 상속받고, Tiger 객체를 필드로 갖게하여TigerAdapter 클래스를 정의할 수 있다.이런식으로 사용하면 User는 Animal을 통해 Tiger 클래스를 사용할 수 있다고 한다.먼저 Animal 클래스를 정의하는데필요에 따라 추상클래스가 아니라 인터페이스로 정의할 수도 있다.하지만 아래 코드에서는 name이라는 필드를 가지고 있기 때문에 추상클래스로 정.. 디자인 패턴 - 행위(Behavioral)패턴 - Template Template 패턴은상위 클래스에서는 알고리즘의 뼈대를 정의하고 구체적인 단계는 하위 클래스에서 정의하는 패턴이라고 한다.알고리즘의 구조를 변경하지 않고 알고리즘의 특정 단계들을 재정의할 수 있다고 한다. 미리 선언해놓은 Article에서는 구체적인 코드없이 순서(단계)적으로 실행만하고,하위 Article에서 구체적인 코드를 구현하여필요에 따라 다른 동작을 하도록 구조를 잡는 것 같다. 먼저 Aticle class는 실제 데이터를 얻는 class이다.아래 코드에서는 제목, 내용, 밑바탕 글을 얻을 수 있다.package Template;import java.util.ArrayList;public class Article { private String title; private ArrayListSt.. 디자인 패턴 - 행위(Behavioral)패턴 - Strategy Strategy 패턴은문제 해결하는 데 있어 다양한 알고리즘이 적용될 수 있는 경우에 알고리즘을 별도로 분리하는 패턴이라고 한다.특정 객체에 종속되지 않으며 알고리즘에 대한 확장과 변경이 용이해진다고 한다. SumPrinter는 출력을 하는데,SumStrategy가 반환하는 합계 값을 출력한다.실제 동작에 대해서는 SimpleSumStrategy와 GaussSumStrategy에서 구현한다.이 구조를 통해 필요에 따라 일련의 동작 중에서 다른 알고리즘을 적용하여 동작할 수 있다고한다.추후에 SumStrategy를 통해서 새로운 알고리즘을 구현해도,SumPrinter는 실제 알고리즘에 대한 정보를 가지고 있지 않기 때문에SumPrinter의 사용방식이 바뀌지 않게 되는 장점이 있다고 한다. 먼저 Sum.. 디자인 패턴 - 행위(Behavioral)패턴 - Iterator Iterator 패턴은내부 구현을 노출시키지 않고 집약된 객체에 접귾고 싶은 경우에 적용하는 패턴이라고 한다.집합 객체에 대해 다양한 탐색 경로를 사용할 수 있고 서로 다른 집합 객체 구조에 대해서도 동일한 방법으로 접근할 수 있다고 한다.동일한 형태의 데이터 항목을 여러개 가지고 있는 것을 Container 또는Aggregator라고 한다 구성 데이터를 접근하는 방법은 어떤 데이터인지에 따라 다르게 적용된다. 다양한 데이터를 동일한 방식으로 가져오는 방법을 만드는 것을 Iterator 패턴이라고 한다.클래스 다이어그램을 보면,Aggregator는 Iterator 객체를 생성한다 라고 되어있다.iterator()가 Iterator 객체는 만들어서 반환해주는 메소드이다.public interface Agg.. nodejs express CRUD 만들기 4(DELETE) list.ejs파일에 delete버튼을 span태그로 하나 추가했다.dataset을 통해서 데이터를 입력해주었다.dataset은 태그의 속성으로 data-뒤에 이름을 하나 정해서 값을 넣어두면script에서 가져다 쓰기 좋다.post의 갯수만큼 데이터들이 생길 것이고 거기에 맞춰서 eventListener를 달아주었다.값은 e.target.dataset.id로 가져왔는데, html에서 선언한 span의 속성 중 data-id의 값을 가져온 것이다.data-id가 아니라 data-user라고 이름을 정했으면 e.target.dataset.user에 값이 들어있을 것이다.여기서 fetch를 통해서 query에 값을 하나 넣어서 보냈는데, 다른 방식으로도 값을 보낼 수 있다.list.ejs .. nodejs express CRUD 만들기 3(UPDATE) edit.ejs파일을 하나 생성하였다. 수정하기 " style="display: none" /> " /> " /> 전송 db에 클릭한 게시물의 정보를 요청하는 서버코드결과적으로 클릭한 게시물의 id와 같은 데이터를 가지고 왔고,post안에는 _id, title, content가 들어있다.그 이후 PUT요청을 할 것인데, form태그는 기본적으로 POST와 GET요청만 할 수 있다.POST를 이용해도 기능은 동작하게 할 수 있지만,요즘(?)은 아니지만,REST API라던가 RESTful API에 맞게 하려면 수정 동작을 할 것이기 때문에 PUT요청을 날려야 한다.이 때, method-override라는 것을 사용한다.라.. nodejs express CRUD 만들기 2(READ) nodejs express로 db에서 데이터 읽어오기리스트 페이지에 있는 데이터를 클릭했을 때, 상세 페이지로 접근하는 기능을구현하기 위해서는, 상세 페이지에 접근 했을 때, 해당되는 데이터를 db에서 읽어와야한다.리스트페이지리스트페이지에서는 페이지에 접근했을 때 post에 대한 모든 데이터를 가져온다.그에 따라서 상세페이지로 접근할 수 있는 a태그의 href속성에 ejs문법을 활용하여값을 입력하였다. "> "> ">✏️ ">🗑️ ">다음 ```리스트페이지 서버코드app.get('/list', async (req, res) => {try { let result = await db.colle.. nodejs express CRUD 만들기 1(CREATE) ejs 이용해서 create 동작을 만드는 방법write.ejs 생성 글쓰기 전송 form태그를 이용하면 쉽게 할 수 있다.form태그 내부의 button태그 type을 summit으로 내놓으면 클릭했을 때,form태그 내부의 데이터가 action의 경로로 method에 적힌 POST 요청으로 날아가게 된다.이 때 데이터는 request.body에 객체 형태로 담기게 되는데,데이터의 이름은 input 태그의 name속성에 담긴 이름과 동일하게 들어온다.그래서 서버에서 request.body.title, request.body.content로 접근이 가능하다.ap.. 이전 1 2 3 4 ··· 6 다음
