개발공부 끄적이는 블로그...

const set = new Set();

set.add('1');
set.add('2');
set.add('3');

Set 객체 생성 후

console.log(set);

출력 해보면 

console.log(...set);

출력 해보면

...을 인자 앞에 붙이면 반복 가능한 객체를 하나씩 펼쳐서 리턴한다고 한다.

이 방법을 전개 구문( 또는 전개 연산자) 라고 한다.

이 전개 구문을 활용해여 Set을 Array 형태로 바꾸려면 배열 안에 전개 구문을 사용하면 된다.

console.log([...set]);

출력 해보면

배열 형태로 출력이 된다.

DI(Dependency Injection)

번역을 하면 '의존 주입' 이다. 이 단어를 이해하기 위해선 '의존' 이라는 단어의 뜻을 알아야한다.

네이버에 의존 을 검색하면

이렇게 나온다.

이 뜻을 Spring의 관점으로 해석하면  A클래스가 B클래스의 메소드를 실행한다. 로 정의할 수 있다.

다음은 코드의 예시이다.

//MemberDTO : 사용자 정보를 저장하는 객체
//MemberDao : 사용자 정보를 저장하기 위해 DB와 연결하는 클래스
public class MemberRegisterService{

    private MemberDao memberDao;
    
    ...
    public void regist(MemberDTO memberDTO){
    	memberDao.regist(memberDTO); 
    }
    ...
}

회원가입을 처리하는 코드이다. 

MemberRegisterService 클래스는 MemberDao 객체의 regist 메소드를 이용해 DB에 사용자 정보를 저장한다.

여기서 눈여겨볼 점은 MemberRegisterService 클래스가 사용자 정보를 저장하기 위해 MemberDao 클래스를 사용한다는 점이다. 

이렇게 한 클래스(MemberRegisterService)가 다른 클래스(MemberDao)의 메소드를 실행하는 것을 '의존' 이라고 한다.

특히 웹 개발에 흔히 사용하는 Spring MVC 패턴은 Model / View / Controller로 기능별로 구분을 해놓은 디자인 패턴

이기 때문에 Spring MVC 패턴을 이용해 웹페이지를 만들 때 의존성 주입은 거의 필수적라고 할 수 있다.

-틀린 내용 피드백은 언제나 환영합니다-😊

WPF

Windows Presentation Foundation 의 약자로 MS에서 개발한 데스크톱 애플리케이션을 만드는 UI 프레임워크.

주 언어로 C#을 사용하고 ASP.NET / Windows Forms 를 사용하여 .NET으로 애플리케이션을 빌드할 수 있다.

WPF는 XAML(Extensible Application Markup Language)를 사용하여 UI를 표현하고 C#으로 로직을 짠다고 생각하면 된

다.

WPF? Winform?

보통 MS에서 개발한 애플리케이션 프레임워크를 생각한다면 Winform이 가장 많이 생각이 난다.

Winform과 WPF는 데스크톱 애플리케이션을 개발하는데 쓰이는 프레임워크로 기능은 동일하지만 UI부분에서 차이가 난다고 한다.

Winform은 Window에 맞춰 제작되기에 Window스러운 UI를 제작할 수 있고, 

WPF는 XAML를 사용하기 때문에 Window 이외의 더 다양한 UI를 제작 할 수 있다고 한다.

이 외에 차이점이 많다고 하지만 이 정도만 알고 넘어가도 될 것 같다. 기능은 비슷하니까.

WPF 프로젝트 생성하기

이제 WPF 프로젝트를 생성 할 것 이다.

툴은 Visual Studio 2022이다.

1) Visual Studio 2022 실행 후 새 프로젝트 만들기 -> WPF 검색 -> WPF 애플리케이션 선택 후 다음.

2) 프로젝트 이름 입력 후 다음

3. 닷넷 프레임워크 버전 선택 후 만들기.

WPF 프로젝트 구성

프로젝트를 생성하면 아래 화면처럼 구성된다.

프로젝트를 보면 MainWindow.xaml / App.xaml / AssemblyInfo.cs  이렇게 3개의 파일이 생성된다.

생성된 모든 xaml 파일에 xaml.cs 파일이 포함된걸 볼 수 있는데

xaml 파일은 앱 논리와 이벤트 처리를 담당하는 xaml.cs 파일이 따로 있다고 한다.

1. MainWindow.xaml / MainWindow.xaml.cs

MainWindow.xaml는 처음 프로젝트를 생성 시 초기화면 UI를 담당하는 페이지이다. 

xaml 언어를 사용하여 직접 요소를 추가하거나 Visual Studio에서 제공하는 디자인 도구를 사용해 요소를 추가 할 수 있다. 

<Window x:Class="MyFirstWPF.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:MyFirstWPF"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">

간단하게 보면 x:Class 는 xaml에 사용 할 클래스를 지정하는 것이라고 보면 된다. 

x:Class="MyFirstWPF.MainWindow"에서 MyFirstWPF는 C#의 namespace 이름 , MainWindow는 namespace 안의 클래스 이름 이라고 보면 될 것 같다.

xmlns는 C#에서 using 구문이라고 생각하면 될 듯 하다.

Title은 프로젝트를 실행했을 때 나오는 Window창의 크기를 설정하는 것 같다.

MainWindow.xaml.cs는 MainWindow 페이지에서 로직 처리를 담당하는 페이지이다. 

여기에서 필요한 메소드를 생성하고 DB 연결하는 로직을 생성하는 작업을 하는 것 같다.

2. App.xaml

App.xaml는 앱 전체에 사용되는 리소스를 선언하는 파일이라고 한다. 

 xmlns 속성은 해당 문서를 위한 XML 네임스페이스(namespace)를 명시합니다 .

라고 하는데 애플리케이션에 대한 설정들을 명시해 놓은 것이다.

x:Class="MyFirstWPF.App"에서 MyFirstWPF는 namespace, App은 namespace 안의 클래스 이름이다.

App 클래스는 App.xaml.cs 파일에 있다.

StartupUri 는 말 그대로 스타트할 URI를 설정하는 것 같다. 처음 생성한 것이라서 기본으로 생성된 페이지가

스타트 URI로 설정됐는데 나중에 바꾸면 될 듯 하다.

3. AssemblyInfo.cs

AssemblyInfo.cs 파일은 제품 이름, 설명, 상표, 저작권에 대한 어셈블리 정보를 써놓는 파일이라고 한다.

이 파일을 따로 설정 해 놓지 않으면 파일 속성의 세부 정보 탭에 이름, 설명, 버전(0.0.0.0) 등이 표시되지 않는다고 한다.

이렇게 간단하게 WPF에 대해 알아보았다.

다음은 DB와 연결하는 과정에 대해 올리겠다.

우리나라에서 Blazor를 쓰는 곳이 많이 없다보니 검색을 해도 찾기가 매우 힘들다.

몇 시간을 검색해서 찾은 것을 적어놓는다.

Blazor에서 페이지로 파라미터를 넘기는 방법.

@page "/test"
<h3>Test1</h3>
<input @bind = "testParam" />
<a href = "/test2/@testParam">gogo</a>

@code {
	int testParam { get; set; }
}

페이지 이름을 /test로 설정하고 

파라미터를 입력받아 /test2로 넘기는 상황이다.

@code로 testParam getter setter를 설정해놓고 

href를 설정해놨다.

파라미터를 11로 입력하고 gogo를 누르면 /test2페이지로 이동한다.

/test2 페이지이다.

@page "/test2/{testParam}"
<h3>test2</h3>
test1에서 넘어온 파라미터 값 : @testParam
@code {
	[Parameter]
	public int testParam { get; set; }
}

URL을 통해 넘어온 파라미터를 출력하는 코드를 위에처럼 작성했다. 

그런데 자꾸 에러가 발생한다.

Unable to set property 뭐시기 하면서 파라미터 값이 안넘어간다.

이 에러에서 중요하게 봐야 할 것이 있다.

파라미터 타입이 설정이 안됐던 것이다.

해결하는 방법은 @page에서 넘어오는 파라미터의 타입을 지정해주면 된다.

@page "/test2/{testParam:int}"
<h3>test2</h3>
test1에서 넘어온 파라미터 값 : @testParam
@code {
	[Parameter]
	public int testParam { get; set; }
}

testParam : int 를 작성해서 타입을 지정해주면 된다.

그럼 아주 잘 넘어온다.

코딩의 세계는 정말 험난하다.

REST API에 대해 알아보자.

이전 글을 참고하여 Springboot를 이용해 간단한 REST API를 만들어보고자한다.

사용툴 : Eclipse

Eclipse에 Springboot 개발 환경 구축 방법은 생략.

프로젝트 생성하기

1) New Project -> Spring Starter Project

2. Maven으로 제작 할 예정이다. Type = Maven으로 설정.

    이름들은 알아서 설정.

   Gradle은 나중에 한번 제작 해볼 예정.

3. dependency를 추가해준다.

Spring Web) Spring MVC를 사용하는 RESTful API 웹 애플리케이션 구축에 사용된다. 기본으로 Tomcat 내장 서버가 포함된다.

Mybatis Framework) Mybatis를 사용하기 때문에 추가.

MariaDB Driver) MariaDB를 사용하기 때문에 추가.

(*Spring Boot DevTools : 설정을 더 쉽게 해주는 거라는데 적용이 안되서 제외)

Finish를 누르게 되면 프로젝트가 생성된다. 생성하게 되면 dependency들을 다운받고난 후 이런 구조의 프로젝트가 생성된다.

application.properties.xml에 MariaDB와 Mybatis 설정을 해줘야한다.

# MariaDB
spring.datasource.driver-class-name=org.mariadb.jdbc.Driver //사용할 DB 드라이버 설정
spring.datasource.url=jdbc:mariadb://localhost:3306/(DB이름) //DB 주소
spring.datasource.username=(DB아이디) //DB 아이디
spring.datasource.password=(DB비밀번호) //DB 비밀번호


# Mybatis
mybatis.mapper-locations:mapper/DBMapper.xml //Mapper.xml 경로 설정

설정해주고 난 후 Springboot가 잘 구동되는지 확인한다.

프로젝트 오른쪽 클릭 -> Run As -> Java Application

(본인이 설정했던 이름)Application - (이름) 이 들어간 클래스를 선택하고 OK.

이제 Mybatis를 이용하여 DB와 연결한 후 REST 작업을 한다.

REST 작업

spring MVC 구조에 맞게 패키지를 생성한다.

HTTP Method는 대표적으로 GET,POST,PUT,DELETE가 있는데 4개의 Method를 다 올리긴 양이 많아서 GET 방식만 작성한다.

사용할 DB 테이블(language)

DTO

데이터를 담을 객체를 생성해준다. (getter,setter 필수)

package springboot.dto;

import java.util.Date;

public class language {
	private int language_id;
	private String name;
	private Date last_update;
	public int getLanguage_id() {
		return language_id;
	}
	public void setLanguage_id(int language_id) {
		this.language_id = language_id;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public Date getLast_update() {
		return last_update;
	}
	public void setLast_update(Date last_update) {
		this.last_update = last_update;
	}
	@Override
	public String toString() {
		return "language [language_id=" + language_id + ", name=" + name + ", last_update=" + last_update + "]";
	}
	
	
}

Controller

@RestController : Spring MVC @Controller에 @ResponseBody가 추가 된 것이다. 이 어노테이션을 사용하면 모든 객체를 JSON형태로 반환해준다.

GET 방식의 /language URI에 요청하면 language타입의 List를 반환해준다. 물론 JSON 형태로.

@RestController
public class lanController {
	@Autowired
    lanService service;
    
    @RequestMapping(value = "/language", method = RequestMethod.GET)
    public List<language> getLan(){
    	return service.getLan();
    }
}

Service

비즈니스 로직과 관련되어 있기 때문에 @Service 어노테이션 사용.

param : POST/PUT 등의 Method 실행 시 넘어오는 파라미터를 담을 공간.

package springboot.service;

import java.util.HashMap;
import java.util.List;
import java.util.Map;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import springboot.dto.language;
import springboot.mapper.lanMapper;

@Service
public class lanService {

	@Autowired
	lanMapper mapper;
	Map<String,Object> param = new HashMap<String,Object>();
    
	public List<language> getLan() {
		return mapper.getLan();
	}
}

Mapper

생성한 interface를 Mapper로 지정하기 위해 @Mapper 어노테이션 사용.

package springboot.mapper;

import java.util.List;
import java.util.Map;

import org.apache.ibatis.annotations.Mapper;

import springboot.dto.language;

@Mapper
public interface lanMapper {
	
	List<language> getLan();
    
}

DBMapper.xml (src/main/resource/mapper/DBMapper.xml)

namespace : Mapper로 설정해준 경로를 넣어준다. 

id : Mapper에서 설정한 메소드 이름.

result Type = 반환할 객체 타입 설정. 

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
  "http://mybatis.org/dtd/mybatis-3-mapper.dtd">

<mapper namespace="springboot.mapper.lanMapper">
	<select id="getLan" resultType="springboot.dto.language">
		SELECT * FROM language
	</select>
</mapper>

이 후 Postman 프로그램으로 URL을 입력 후 테스트해본다.

잘불러진다.

우연치않게 REST API에 대해 알아보게 되었다.

정리 할 겸 포스팅을 해본다.

REST API에 대해 알아보기 전 REST란 무엇인가를 살펴보자.

REST

REST : "Represantational State Transfer"의 약자.

자원을 이름으로 구분하여 해당 자원의 상태를 주고 받는 모든 것을 의마한다.

즉, *HTTP URI을 통해 자원(Resource)을 명시하고

HTTP Method(GET,POST,PUT,DELETE)를 통해 해당 자원의 CRUD Operation을 적용하는 것을 뜻한다.

(*HTTP : 클라이언트와 서버 간의 통신을 위한 프로토콜. 통신 규약)

여기서의 CRUD Operation은 컴퓨터 소프트웨어의 기본적인 데이터 처리 기능을 말한다.

1. CREATE : 데이터 생성(POST)

2. READ : 데이터 조회(GET)

3. UPDATE : 데이터 수정(PUT)

4. DELETE : 데이터 삭제(DELETE)

REST 구성 요소

1. 자원(Resource) : URI

• 모든 자원에는 고유한 ID가 존재하고 이 자원은 Server에 존재한다.
• 자원을 구별하는 ID는 [ex) '/board/{board.no}'] 와 같은 HTTP URI이다.
• Client는 URI를 이용하여 자원을 지정하고 해당 자원에 대한 조작은 설정한 URI를 통해 Server에 요청한다

2. 행위(Verb) : HTTP Method

• HTTP 프로토콜의 Method(GET,POST,PUT,DELETE)를 이용한다. 

3. 표현(Representation)

• Client가 자원에 대해 조작 요청을 하면 Server는 이에 적정한 응답을 보낸다.
• 자원은 JSON, XML, TEXT, RSS 등 여러 형태의 응답으로 나타낼 수 있다. (JSON을 많이 쓴다고 한다.)

REST 특징 

1. Server - Client 구조를 가진다.

• 자원이 있는 쪽을 Server, 자원을 요청하는 쪽을 Client  
  
  • Server : API를 제공하고 비즈니스 로직 처리 및 저장을 담당한다.
  • Client : 사용자 인증, 세션, 로그인 정보 등을 담당한다.

2. 무상태성(Stateless)

• 작업을 위한 상태정보를 따로 저장하고 관리하지 않기 때문에 들어오는 요청만을 단순히 처리하면 된다.
• 서비스의 자유도가 높아지고 서버에서 불필요한 정보를 관리하지 않음으로써 구현이 단순해진다.

3. 캐시 가능(Cacheable)

• HTTP라는 기존 웹 표준을 사용하기 때문에 웹에서 사용하는 기존 인프라를 활용할 수 있고 이에 따라 HTTP가 가진 캐싱 기능을 적용할 수 있다.

4. 자체 표현 구조(Self-descriptiveness)

• REST API 메시지만 보고도 이를 쉽게 이해할 수 있는 자체 표현 구조로 되어있다. 

REST API

위의 REST의 원리를 기반으로 만들어진 API를 REST API라고 한다.

그럼 이 REST API를 설계하는 방법에 대해 알아보자.

REST API 설계 규칙

1. URI는 정보의 자원을 표시해야 한다.

• 동사보다 명사를 , 대문자보단 소문자를 사용해야한다. Ex) /Board -> /board

2. URI 마지막 문자에 / 는 사용하지 않는다.

• Ex) /board/ -> /board

3. 자원에 대한 행위는 HTTP Method로 표현한다.

• Ex) /board/write -> POST /board    
• Ex) /board/list -> GET /board
• Ex) /board/info?no=1 -> GET board/1

4. 언더바(_)보단 하이픈(-)을 사용한다.

• Ex) /test_page -> /test-page

5. CRUD를 나타대는 동사는 URI에 사용되면 안된다.

• Ex) /board/delete?no=1 -> DELETE /board/1

게시판 REST API 설계 예시)

*프로젝트 만들면서 몰랐던거 복습.

HttpSession은 간단하게 말해서 입력한 정보들(로그인 사용자 정보)을 서버에 저장하는 기술이다.

Session값 저장은 이런 식으로 했다.

User DTO

public class User {
private String id;
    private String pw;
    private String name;
    private String nickname;
    private Date birth;
    private String email;
    
    //getter,setter,toString 생략
}

Controller

@PostMapping("/login")
public ModelAndView login(HttpSession session, User user){
    
    //로그인 과정 생략
    ......
    session.setAttribute("login", user);
    ......
    //생략
    

}

View단에서 입력받은 정보들을 User 객체에 저장하고 Attribute의 이름을 "login"으로 지정하고 session에 저장했다.

저장한 session을 출력해보면 저장이 잘 된 것을 알 수 있다.

출력 코드는 getAttribute("속성명");

여기서 "login" 속성에 User객체로 저장되어 있는 요소들 중 nickname을 가져와보자.

User user = (User)session.getAttribute("login");

Session 이름이 "login"인 속성을 (User)로 형변환 한 후 User 객체에 다시 집어넣어줬다.

그 후 User에 저장된 nickname을 리턴하면 된다.

System.out.println(user.getNickname());

잘 불러와진다.

끝~

CKEditor5 적용 방법은 CKEditor5 적용법  << 클릭

<form:textarea path = "content" id = "input_content" placeholder = "내용을 입력해주세요."/>

<script>
ClassEditor
    .create(document.querySelector('#input_content'))
    .catch(error => {
    	console.error(error);
    })
</script>

CKEditor5가 적용된 textarea에 텍스트 값을 집어 넣으려고 한다.

1시간을 구글링해서 겨우 찾은 결과.

구문 1개만 추가해주면 된다 .then

<script>
ClassEditor
    .create(document.querySelector('#input_content'))
    .then( editor => {
    	editor.setData('하이하이');
    })
    .catch(error => {
    	console.error(error);
    })
</script>

setData() : editor 안에 내용 설정.

(※참고 : set이 있다면 get도 있을터.)

getData() : editor 안의 내용 불러오기.

끝.

이걸 활용해서 게시물 수정할 때 작성했던 내용 가져오는데 썼다.