개인적인 개발팁 모음

 마리아DB 설치해 본 지가 몇년만인지 모르겠다. 전에도 이런 버전 체계였는지 모르겠지만, 다운받으려고 보니 Rolling Release 버전과 RC 버전이 있었다. 뭔지 고민하다가 chatgpt에게 물어보고 구글링 해보니 누군가가 친절하게 설명해놨군.

이 세상에는 친절한 사람이 많어.

https://wikidocs.net/277873

내가 이해한 바로는

1) Rolling Release - 지속적으로 새로운 기능이 추가되고 있는 버전 (현재 11.7.x)

2) RC(Release Candidate) : 정식버전으로 만들어지는 버전으로 기능추가보다는 버그 수정 위주의 버전 (현재 11.8.x)

그래서 RC 버전을 다운 받아서 설치하기로 함

1. 설치

귀찮으니 그냥 디폴트로 설치하자

수정전

수정 후

흠.... 설치가 끝나버렸네.

2. 접속 : Dbeaver를 설치해놓은 게 있어서 그놈으로 접속 시도

비밀번호만 넣어주고, 나머지는 그대로

희미해서 잘 보이진 않지만, Database 우클릭 > Create New Database

utf8mb가 뭔지 또 잠시 고민하다가 잠시 검색함 > DB 생성(이름 : test_database)

https://cirius.tistory.com/1769

2개의 테이블을 만들어본다 (tb_device, tb_log)

-- test_database.tb_device definition

CREATE TABLE `tb_device` (
  `id` bigint(20) NOT NULL AUTO_INCREMENT,
  `device_id` uuid DEFAULT NULL,
  `serial` varchar(100) DEFAULT NULL,
  `register_dt` date DEFAULT NULL,
  `enabled` bit(1) NOT NULL,
  PRIMARY KEY (`id`),
  UNIQUE KEY `tb_device_unique` (`device_id`),
  KEY `tb_device_id_IDX` (`id`) USING BTREE
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_uca1400_ai_ci;

-- test_database.tb_log definition

CREATE TABLE `tb_log` (
  `id` bigint(20) NOT NULL AUTO_INCREMENT,
  `device_id` bigint(20) DEFAULT NULL,
  `prod_id` varchar(100) NOT NULL,
  `log` varbinary(100) NOT NULL DEFAULT x'0000',
  `start_dt` datetime NOT NULL DEFAULT current_timestamp(),
  `end_dt` datetime DEFAULT NULL,
  KEY `tb_log_id_IDX` (`id`) USING BTREE,
  KEY `tb_log_tb_device_FK` (`device_id`),
  CONSTRAINT `tb_log_tb_device_FK` FOREIGN KEY (`device_id`) REFERENCES `tb_device` (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_uca1400_ai_ci;

1. 서버 프로젝트 생성

3. 빌드 종속성 설정을 한다

4. Program.cs를 다음과 같이 바꾼다

[변경 전]	[변경 후]

using Data.Models;
using HotChocolate.Types.Pagination;
using Microsoft.EntityFrameworkCore;

string ConnectionString = "Server=localhost:15432;Database=postgres;User ID=postgres;Password=";
var builder = WebApplication.CreateBuilder(args);

builder.Services.AddDbContext<postgresContext>(options =>
    options.UseNpgsql(builder.Configuration.GetConnectionString(ConnectionString)));

builder.Services
    .AddGraphQLServer()
    .RegisterDbContext<postgresContext>(DbContextKind.Synchronized)
    .AddFiltering()
    .AddProjections()
    .AddQueryType<Query>()
    .SetPagingOptions(new PagingOptions
    {
        MaxPageSize = int.MaxValue - 1,
        DefaultPageSize = int.MaxValue - 1,
        IncludeTotalCount = true,
    });

var app = builder.Build();

app.UseRouting();
app.UseEndpoints(endpoints =>
{
   endpoints.MapGraphQL();
});

app.MapGet("/", () => "Hello World!");
app.Run();

5. 아래와 같이 Schema 폴더생성 후 Query.cs 파일을 생성한다

6. Query.cs는 다음과 같이 작업한다

namespace Data.Models
{
    public partial class Query
    {
        [UsePaging]
        [UseProjection]
        [UseFiltering]
        public IQueryable<SeoulPopulation> GetSeoulPopulation(postgresContext dbContext)
        {
            return dbContext.SeoulPopulation;
        }
    }
}

7. 프로그램을 실행하면 다음과 같이 나타난다(포트번호는 바뀔수 있음)

8. https://localhost:7145/graphql/ 로 url을 바꾸면 아래와 같이 나타난다

9.CreateDocument버튼을 선택한 다음, 다음과 같이 나타낼수 있다 

1. Database 데이터 작성

2. 빈 프로젝트 생성

3. 데이터 프로젝트

살다보니 이런것도 해봐야 하는구나..

1. 일단 WPF 프로젝트 생성 (.NET 7.0으로 생성)

2. Nuget Package 아래 2개를 설치한다.(버전이 안 맞네???-_-;)

3. App.xmal.cs 파일에 다음과 같이 작업한다

private IHost webHost;

protected override void OnStartup(StartupEventArgs e)
{
	base.OnStartup(e);

	webHost = Host.CreateDefaultBuilder()
		.ConfigureWebHostDefaults(webBuilder =>
		{
			webBuilder.UseStartup<Startup>();
			webBuilder.UseUrls("http://*:5000;http://localhost:5001;https://hostname:5002");
		})
		.Build();

	webHost.Start();
}

protected override void OnExit(ExitEventArgs e)
{
	webHost?.Dispose();
	base.OnExit(e);
}

다음의 파일도 포함되어 있지않다면 포함시켜준다

using Microsoft.AspNetCore.Hosting;
using Microsoft.Extensions.Hosting;

4. 프로젝트에 Startup.cs파일을 추가해준다.

using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Hosting;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace Agent
{
	public class Startup
	{
		public void ConfigureServices(IServiceCollection services)
		{
			services.AddControllers();
			services.AddSignalR();
		}

		public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
		{
			if (env.IsDevelopment())
			{
				app.UseDeveloperExceptionPage();
			}

			app.UseHttpsRedirection();

			app.UseRouting();
			app.UseEndpoints(endpoints =>
			{
				endpoints.MapControllers();
				endpoints.MapDefaultControllerRoute();

				endpoints.MapHub<CommandHub>("/chathub");
			});

		}
	}
}

3. CommandHub 클래스도 추가해준다.

using Microsoft.AspNetCore.SignalR;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace Agent.Hubs
{
    public class CommandHub : Hub
    {
		public override async Task OnConnectedAsync()
		{

			await base.OnConnectedAsync();
		}
	}
}

4. 초기 구동 시 다음과 같은 창이 나타났을 때, 허용을 선택한다.

회사에서 라벨 프린터를 프로그램 해야 할 일이 있어 기록으로 남김(안친절함, 나만 알아보게끔 씀)

중고를 파는 곳이 있어서 구매하고, 라벨프린터 용지도 구매,(5"x7")

1. 아래의 사이트를 가니, 유틸리티 소프트웨어를 다운받으라고 한다

https://www.zebra.com/us/en/support-downloads/eula/unrestricted-eula.7b8a235653193b4c72c440110c25661656f56f5180957c98e7c0bc2144149cd156a1bc6e684725abae8eaa3b64ee1090eb44d0c7df0abb7f8ed97b5b3f7c9a5376e9eb05b8b828d41d895371710557b9df8c658334af4c49d754cef7dadf3fd445653285136f43b7.html#

2. 실행하고 다음다음 눌러서 설치함 (모델은 GK420d 선택했던걸로 기억)

3. 

1. Visual Studio 2019에서 콘솔 프로젝트 생성 후 Nuget 설치( Microsoft.EntityFrameworkCore.Tools )를 해보려 했으나 설치 실패

찾아보니 다음과 같이 .NET 6/.NET 7/.NET 8중에 하나를 선택해야 한다는데

Visual Studio 2019에서는 .NET 6.0을 생성할 수가 없다.

2. 그래서 귀찮지만 Visual Studio 2022를 설치한 뒤 아까 생성했던 프로젝트를 열어서 다음과 같이 .NET을 추가 설치하기로 함 

3. 프로젝트를 .NET 8.0으로 다시 만듦

4. 이제는 nuget 추가가 잘 됨

5. DB 공급자가 아래와 같이 제공한다고 하는데, MSSQL이 EF Core 6,7용이 있다는데, 내가 실행할려고 하는 놈은 .NET 8인데 하위호환 되길 바란다. neget 설치 : Microsoft.EntityFrameworkCore.SqlServer

6. 그런데, 막상 실행시키니 8.0버전이 있네

https://www.youtube.com/watch?v=ZyEYL-tKqyU

* Entity Framework

  - ORM(Object Relational Mapping) Framework 중 하나

  - Object : OOP의 Object(클래스의 인스턴스)

  - Relation : 관계형 데이터베이스

  - C# 클래스 - SQL Server 매핑 관계를 만들어서 서로 주고받게 하겠다 => ORM Tool

  - ORM Tool 중의 하나가 Entity Framework

  - .Net Core 에서 쓰는 Entity Framework Core라고 함

  - 다른 ORM Tool 도 많다

8. Nuget에서 Microsoft.EntityFrameworkCore.Design 도 설치해줌

9. 테이블의 구조를 클래스로 만들어준다

    [Table("Emp")] //테이블명이 클래스 이름과 다를 경우 지정해준다
    public class Employee
    {
        [Key] //primary key - 꼭 지정해야 하는 것은 아니다
        public int Id { get; set; } 
        public string Name { get; set; }
        public DateTime DOB { get; set; }
        public decimal Salary { get; set; }
    }

10. 데이터베이스의 구조를 클래스로 만들어준다

    //1. DB 골격을 만들어주는 Base Class : DBContext
    public class MyDbContext : DbContext
    {
        //2. Database가 Employee 테이블을 가지고 있다
        public DbSet<Employee> Employees { get; set; }

        //3. 이 Databse가 어떤 서버를 가르키고 있는지 표시
        protected override void OnConfiguring(DbContextOptionsBuilder optionsBuilder)
        {
            optionsBuilder.UseSqlServer("data source=(local);Integrated Security=SSPI;Persist Security Info=False;Initial Catalog=MyDB");
            base.OnConfiguring(optionsBuilder);
        }
    }

10. 서버를 연결 (보기 -> SQL Server 개체 탐색기)

      - 처음에는 이 메뉴가 안 나오는데,

       - 보기 > 서버탐색기 > 데이터 연결 > 우클릭 후 "연결 추가" > 아래의 창에서 계속 누르면 뭔가 설치하라고 나오는데, 설치하고 나면 

메뉴가 나타난다.

11. 도구 > Nuget 패키지 관리자 > 패키지 관리자 콘솔

* Add-Migration mig1 명령을 실행한다(mig1은 Migration 이름이다)

  - cs 파일은 데이터베이스를 만들고, 테이블을 만들고, 테이블을 수정하는 마이그레이션 과정들을 수행하기 위한, C# 파일을 자동으로 Entity Framework 이 생성하게 된다

12. 실제로 실행하기 해서 데이터베이스를 만들고, 테이블을 만들기 위해서는 새로운 명령을 내린다 (Update-Database)

* 명령 실행시 아래와 같은 에러가 나온다면 

* Connection String에 다음을 추가한다

* 그 후에 Update-Database 명령을 수행한 다음 새로고침을 하면 테이블이 생성되었음을 확인할 수 있다

** Entity Framework을 사용해서 insert, select해본다

13. Insert : 다음을 실행한다

MyDbContext db = new MyDbContext();
//Id는 자동생성이므로 입력하지 않는다
Employee emp = new Employee()
{
    Name = "Tom",
    DOB = new DateTime(1999, 5, 10),
    Salary = 50000
};
db.Employees.Add(emp);

Employee emp2 = new Employee()
{
    Name = "Jack",
    DOB = new DateTime(1999, 5, 10),
    Salary = 50000
};
db.Employees.Add(emp2);
//<--여기까지는 메모리에 저장
//-->다음은 DB에 반영
db.SaveChanges();

14. Select : 다음을 실행한다

MyDbContext db = new MyDbContext();
var emps = db.Employees.Where(x => x.Id > 1);
foreach(var emp in emps)
{
    Console.WriteLine(emp.Id + "," + emp.Name);
}

1. Potato 컴포넌트 만들기(별도로 또는 App.js안에)

1) src 폴더 밑에 Potato.js파일 만들기

2) Potato.js파일을 다음과 같이 작성

//jsx(HTML + javascript)를 이해하기 위한 import
import React from 'react'

//컴포넌트는 대문자로 작성해야 함
function Potato(){
    //이것은 html이 아니고 jsx이다
    return <h3>I love potato</h3>;
}

//이놈을 추가해야 함
export default Potato;

3) 생성한 컴포넌트는 App 컴포넌트 안에 넣어야 한다

4) 별도의 파일을 만들지 않고 App.js 파일 안에 바로 만들 수 있다

2. props 개념 : 컴포넌트에서 컴포넌트로 전달하는 데이터

import React from "react";

//fav항목을 출력함
function Food(props)
{
  //console.log(props);
  return <h1>I like {props.fav}</h1>;
}

function App() {
  return (
    <div>
      <h1>Hello</h1>
      <!-- fav, something, papapapa 를 넘겨줌 -->
      <Food fav="kimchi" something={true} papapapa={['hello',1,2,3,4,true]} />
    </div>
  );
}

export default App;

* 다음처럼 사용도 가능하다.

import React from "react";

function Food({fav})
{
  //console.log(props);
  return <h1>I like {fav}</h1>;
}

function App() {
  return (
    <div>
      <h1>Hello</h1>
      <Food fav="kimchi" />
      <Food fav="ramen" />
      <Food fav="samgiopsal" />
      <Food fav="chukumi" />
    </div>
  );
}

export default App;

2. map함수를 이용하여 배열의 반복처리하기

import React from "react";

function Food({name})
{
  //console.log(props);
  return <h1>I like {name}</h1>;
}

const foodILike = [
  {
    name : 'Kimchi',
    image : 'https://www.aeriskitchen.com/wp-content/uploads/2008/09/kimchi_bokkeumbap_02-.jpg'
  },
  {
    name : 'Samgyeopsal',
    image : 'https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.joongang.co.kr%2Farticle%2F21312352&psig=AOvVaw3Bz7tRPTThOyPi56cIMpua&ust=1683356757357000&source=images&cd=vfe&ved=0CBEQjRxqFwoTCOjUzN_O3f4CFQAAAAAdAAAAABAE'
  },
  {
    name : 'Bibimbap',
    image : 'https://t3.ftcdn.net/jpg/01/36/53/36/360_F_136533641_FDSXM9W8HovI4OWy8w1h28qEnyloF4LL.jpg'
  },
  {
    name : 'Doncasu',
    image : 'https://www.google.com/url?sa=i&url=https%3A%2F%2Fent.sbs.co.kr%2Fnews%2Farticle.do%3Farticle_id%3DE10004919274&psig=AOvVaw08cML932GYRJeeAFA4EQxD&ust=1683356874016000&source=images&cd=vfe&ved=0CBEQjRxqFwoTCPC2uJfP3f4CFQAAAAAdAAAAABAE'
  },
  {
    name : 'Kimbap',
    image : 'https://www.google.com/url?sa=i&url=https%3A%2F%2Fstock.adobe.com%2Fkr%2Fsearch%3Fk%3D%25EA%25B9%2580%25EB%25B0%25A5&psig=AOvVaw2eH7dvRcJuRRRf4bQSS9Aa&ust=1683356891119000&source=images&cd=vfe&ved=0CBEQjRxqFwoTCIjet6DP3f4CFQAAAAAdAAAAABAE'
  }
];

function App() {
  return (
    <div>
      {foodILike.map(dish => (<Food name={dish.name} />))}
    </div>
  );
}

export default App;

* 이미지까지 나오게 하려면

import React from "react";

function Food({name, picture})
{
  //console.log(props);
  return (
    <div>
      <h2>I like {name}</h2>
      <img src={picture} />
    </div>
  );
}

const foodILike = [
  {
    name : 'Kimchi',
    image : 'https://www.aeriskitchen.com/wp-content/uploads/2008/09/kimchi_bokkeumbap_02-.jpg'
  },
  {
    name : 'Samgyeopsal',
    image : 'https://mblogthumb-phinf.pstatic.net/MjAxODAxMTFfMjQz/MDAxNTE1NjY0NTUwMTQ2.WIRsiJ0-fogoxvHZpgnnR3jWZqnTO9BfgnjIkd5iAPIg.toj9m8hOTjZfenFhxc0KlgQyzbcTOhccR3y5ft9YwVUg.PNG.sungjin972/1.png?type=w800'
  },
  {
    name : 'Bibimbap',
    image : 'https://t3.ftcdn.net/jpg/01/36/53/36/360_F_136533641_FDSXM9W8HovI4OWy8w1h28qEnyloF4LL.jpg'
  },
  {
    name : 'Doncasu',
    image : 'https://media.istockphoto.com/id/1134158942/ko/%EC%82%AC%EC%A7%84/%EB%8F%BC%EC%A7%80%EA%B3%A0%EA%B8%B0-%EB%8F%88%EA%B0%80%EC%8A%A4.jpg?s=612x612&w=is&k=20&c=67QpYveG7XxF3qhduJbp7pJA96fCK8d217xBeTXz5V4='
  },
  {
    name : 'Kimbap',
    image : 'https://www.google.com/url?sa=i&url=https%3A%2F%2Fstock.adobe.com%2Fkr%2Fsearch%3Fk%3D%25EA%25B9%2580%25EB%25B0%25A5&psig=AOvVaw2eH7dvRcJuRRRf4bQSS9Aa&ust=1683356891119000&source=images&cd=vfe&ved=0CBEQjRxqFwoTCIjet6DP3f4CFQAAAAAdAAAAABAE'
  }
];

function App() {
  return (
    <div>
      {foodILike.map(dish => (<Food name={dish.name} picture={dish.image} />))}
    </div>
  );
}

export default App;

* map안의 임시 함수를 따로 뺄수도 있다

import React from "react";

function Food({name, picture})
{
  //console.log(props);
  return (
    <div>
      <h2>I like {name}</h2>
      <img src={picture} />
    </div>
  );
}

const foodILike = [
  {
    name : 'Kimchi',
    image : 'https://www.aeriskitchen.com/wp-content/uploads/2008/09/kimchi_bokkeumbap_02-.jpg'
  },
  {
    name : 'Samgyeopsal',
    image : 'https://mblogthumb-phinf.pstatic.net/MjAxODAxMTFfMjQz/MDAxNTE1NjY0NTUwMTQ2.WIRsiJ0-fogoxvHZpgnnR3jWZqnTO9BfgnjIkd5iAPIg.toj9m8hOTjZfenFhxc0KlgQyzbcTOhccR3y5ft9YwVUg.PNG.sungjin972/1.png?type=w800'
  },
  {
    name : 'Bibimbap',
    image : 'https://t3.ftcdn.net/jpg/01/36/53/36/360_F_136533641_FDSXM9W8HovI4OWy8w1h28qEnyloF4LL.jpg'
  },
  {
    name : 'Doncasu',
    image : 'https://media.istockphoto.com/id/1134158942/ko/%EC%82%AC%EC%A7%84/%EB%8F%BC%EC%A7%80%EA%B3%A0%EA%B8%B0-%EB%8F%88%EA%B0%80%EC%8A%A4.jpg?s=612x612&w=is&k=20&c=67QpYveG7XxF3qhduJbp7pJA96fCK8d217xBeTXz5V4='
  },
  {
    name : 'Kimbap',
    image : 'https://www.google.com/url?sa=i&url=https%3A%2F%2Fstock.adobe.com%2Fkr%2Fsearch%3Fk%3D%25EA%25B9%2580%25EB%25B0%25A5&psig=AOvVaw2eH7dvRcJuRRRf4bQSS9Aa&ust=1683356891119000&source=images&cd=vfe&ved=0CBEQjRxqFwoTCIjet6DP3f4CFQAAAAAdAAAAABAE'
  }
];

function renderFood(dish){
  return <Food name={dish.name} picture={dish.image}/>;
}

function App() {
  return (
    <div>
      {foodILike.map(renderFood)}
    </div>
  );
}

export default App;

* 그런데, 데이터에는 key값이 있어야 하고, img 태그에 alt 속성을 넣어서 경고를 없애자

import React from "react";

function Food({name, picture})
{
  //console.log(props);
  return (
    <div>
      <h2>I like {name}</h2>
      <img src={picture} alt={name} />
    </div>
  );
}

const foodILike = [
  {
    id : 1,
    name : 'Kimchi',
    image : 'https://www.aeriskitchen.com/wp-content/uploads/2008/09/kimchi_bokkeumbap_02-.jpg'
  },
  {
    id : 2,
    name : 'Samgyeopsal',
    image : 'https://mblogthumb-phinf.pstatic.net/MjAxODAxMTFfMjQz/MDAxNTE1NjY0NTUwMTQ2.WIRsiJ0-fogoxvHZpgnnR3jWZqnTO9BfgnjIkd5iAPIg.toj9m8hOTjZfenFhxc0KlgQyzbcTOhccR3y5ft9YwVUg.PNG.sungjin972/1.png?type=w800'
  },
  {
    id : 3,
    name : 'Bibimbap',
    image : 'https://t3.ftcdn.net/jpg/01/36/53/36/360_F_136533641_FDSXM9W8HovI4OWy8w1h28qEnyloF4LL.jpg'
  },
  {
    id : 4,
    name : 'Doncasu',
    image : 'https://media.istockphoto.com/id/1134158942/ko/%EC%82%AC%EC%A7%84/%EB%8F%BC%EC%A7%80%EA%B3%A0%EA%B8%B0-%EB%8F%88%EA%B0%80%EC%8A%A4.jpg?s=612x612&w=is&k=20&c=67QpYveG7XxF3qhduJbp7pJA96fCK8d217xBeTXz5V4='
  },
  {
    id : 5,
    name : 'Kimbap',
    image : 'https://www.google.com/url?sa=i&url=https%3A%2F%2Fstock.adobe.com%2Fkr%2Fsearch%3Fk%3D%25EA%25B9%2580%25EB%25B0%25A5&psig=AOvVaw2eH7dvRcJuRRRf4bQSS9Aa&ust=1683356891119000&source=images&cd=vfe&ved=0CBEQjRxqFwoTCIjet6DP3f4CFQAAAAAdAAAAABAE'
  }
];

function renderFood(dish){
  return <Food key={dish.id} name={dish.name} picture={dish.image}/>;
}

function App() {
  return (
    <div>
      {foodILike.map(renderFood)}
    </div>
  );
}

export default App;