셩잇님의 잡동사니

🦮 Blazor 입문  지난 시간에는 Blazor의 SPA의 개념에 대해서 상세하게 학습하는 시간을 가져보았다. SPA는 Single Page Application으로 갱신이 필요한 일부분만 갱신 처리해주는 개념이었다. 이후 Router를 통해 URI 요청이 올 경우 어떠한 컴포넌트를 보여줘야 하는지 규칙을 설정하는 것 까지 알아보았다.  이번 시간에는 Form, Validation의 개념에 대해서 학습하는 시간을 가져보며, 이 또한 직접 실습하며 페이지를 제작해보도록 한다.  🏄‍♀️ Form  이번 시간에는 기존에 사용하던 BlazorStudy 프로젝트를 활용하여 학습할 것이다. 이번에는 FetchData를 통해 Form을 만들고, 만든 Form을 활용하여 기존에 있던 WeatherForecast..

🦮 Blazor 입문  지난 시간에는 Blazor의 Dependency Injection의 개념에 대해서 학습하는 시간을 가져보았다. Dependency Injection는 말 그대로 의존성 주입을 뜻하는데, Program에 내가 사용할 서비스를 AddSingleton으로 처리하여 특정 서비스를 new를 통해 새롭게 생성하는 것이 아닌 임의로 지정하여 이를 처리할 수 있었다. 이 후 ASP.NET 차원에서 PaymentSevice까지 생성자에서 자동으로 특정 서비스를 찾는 것 까지 살펴보았다. 마지막으로 Program에서 사용되는 Singleton, Transient, Scoped  서비스의 생명주기까지 파악해보았다. 이번 시간에는 SPA 구조, Router의 개념에 대해서 학습하는 시간을 가져보며, ..

🦮 Blazor 입문  지난 시간에는 Blazor의 Templated Component의 개념에 대해서 학습하는 시간을 가져보았다. Templated Component는 말 그대로 템플릿 컴포넌트 인데, 여기서 말하는 템플릿은 C#의 제네릭과 동일하다는 의미를 가진다. 따라서 Templated Component를 사용하여 붕어빵처럼 컴포넌트를 찍어낼 수 있다. 이 때에 RenderFragment를 사용하고, 타입을 선언하는 것을 razor에서는 @typeparam을 통해 대체하는 것 까지 알아보았다. 이번 시간에는 Dependency Injection 라는 개념에 대해서 학습하는 시간을 가져보며, 이 또한 직접 실습하며 페이지를 제작해보도록 한다.  🏄‍♀️ Dependency Injection  ..

🦮 Blazor 입문  지난 시간에는 Blazor의 Cascading Parameter의 개념에 대해서 학습하는 시간을 가져보았다. Cascading Parameter을 사용하여 User에 있는 List 형태의 _options을 ShowUser에서도 사용하였으며, 아울러 부모-자식 관계를 넘어 손자, 증손자까지에게도 이를 적용할 수 있는 것에 대해서 알아보았다. 이번 시간에는 Templated Component 라는 개념에 대해서 학습하는 시간을 가져보며, 이 또한 직접 실습하며 페이지를 제작해보도록 한다.  🏄‍♀️ Templated Component  Templated Component. 단어 그대로 직역하자면 '템플릿 컴포넌트'이다. 여기서 말하는 템플릿의 개념은 C++ 개발자라면 대충 눈치를 ..

🦮 Blazor 입문  지난 시간에는 Blazor의 Parameter, Ref, EventCallback 등 다양한 개념에 대해서 학습하는 시간을 가져보았다. 파라미터User와 ShowUser 컴포넌트를 넘나들며 기존에 사용하던 _users 데이터를 ShowUser에서도 사용할 수 있도록 설정하였다. 이후 Ref, Action, EventCallback을 사용하여 부모-자식 관계인 User와 ShowUser 컴포넌트 사이 사용되는 함수를 서로 참조하면서 사용할 수 있도록 설정해보았다. 이번 시간에는 Cascading Parameter 라는 개념에 대해서 학습하는 시간을 가져보며 이 또한 직접 실습하며 페이지를 제작한다.    🏄‍♀️ Cascading Parameter  이어서 알아볼 내용은 Casc..

🦮 Blazor 입문  지난 시간에는 Blazor의 Binding의 추가적인 내용에 대해서 학습하는 시간을 가졌다. 첫 번째 내용은 HTML의 속성에도 바인딩 할 수 있는 것과 두 번째 내용으로는 conditional atrribue 속성 자체에도 조건을 붙일 수 있다는 것이다. 이번 시간에는 Parameter, Ref, EventCallback 등 다양한 개념에 대해서 학습하는 시간을 가진다. 이번에도 직접 실습해보며 페이지를 제작해보자.    🏄‍♀️ Parameter, Ref, EventCallback   우리가 지금까지 페이지를 만들 때 보면 레이저 컴포넌트를 활용해 페이지를 만들 수 있었다. 그리고 이러한 컴포넌트라는 말에서 비롯하여 여러 스크립트를 부품화하여 조립해 페이지를 구성한 것을 알..

🦮 Blazor 입문  지난 시간에는 Blazor의 Binding을 User.razor 스크립트를 통해 실습해보며 간단한 페이지를 제작하는 시간을 가져보았다. 이번 시간에는 일전에 학습한 Binding의 추가적인 내용에 대해서 보충하는 시간을 가진다. 마찬가지로 이번에도 직접 실습해보며 간단한 페이지를 제작하는 시간을 가져보며 학습해보도록 한다.    🏄‍♀️ Binding 보충  Binding은 HTML의 속성(attribue)에도 바인딩 할 수 있다. 따라서 기존에 작성한 User.razor 스크립트의 유저 추가 class의 버튼을 아래와 같이 변경하여 사용할 수 있다. @page "/user"... Add a User @code{ // 유저 데이터 생성 List..

🦮 Blazor 입문  지난 시간에는 Blazor 서버 앱 프로젝트를 새롭게 만들어 Binding을 하기 위한 테스트 페이지를 만들고, 간단한 기능을 Binding 하여 테스트해보았다. 이번 시간에는 일전에 학습한 Blazor의 Binding을 실습해보며 간단한 페이지를 제작하는 시간을 가져보며 학습해보도록 한다.    🏄‍♀️ Binding 실습   먼저, 기존에 기사용하던 Binding.Razor 스크립트를 다시 사용하는 것이 아닌, 새로운 레이저 스크립트인 User.Razor를 만들어주도록 하자. 기존의 스크립트는 지워버리고 User.Razor 스크립트를 작성하도록 하자. @page "/user"Online Users@code{ }  먼저 일전에 말했던 것과 마찬가지로 라우팅 페이지를 설정해주고..

🦮 Blazor 입문  지난 시간까지 ASP.NET Core의 MVC, Razor Pages, WebAPI, Blazor Server, Client, SPA 등 다양한 프로젝트를 분석하며 어떻게 동작하고 실행되는지 살펴보았다. 그 중에 몇몇 프로젝트들은 HelloEmpty 프로젝트에 실질적으로 따라하며 적용해 이를 확인하였다. 이번 시간부터는 ASP.NET Core에서 기본적으로 학습한 Blazor를 조금 더 깊게 배워보는 시간을 가지며 그 첫 단계로는 Binding의 개념부터 학습한다.   🏄‍♀️ Binding   먼저, 기존에 기사용하던 프로젝트를 다시 사용하는 것이 아닌, 새로운 프로젝트를 만들어주도록 하자. 기존의 프로젝트는 MVC, Razor Pages, WebAPI, Blazor Serv..

🔖 ASP.NET Core 둘러보기  지난 시간에는 .NET Core의 Web Blazor Server 프로젝트를 분석하며 어떻게 동작하고 실행되는지 살펴보았다. 이 전까지는 모두 HelloEmpty 프로젝트에 실질적으로 따라하며 적용해 이를 확인했는데, Blazor Server의 경우 해야할 작업의 양이 너무 많아, 빈 프로젝트에 적용하지 않고 단순히 동영상을 보면서 어떻게 동작되고, 실행되는지 분석했다. 이번 시간에는 Blazor Client와 SPA라는 개념에 대해서 학습한다.    🧩 Hello Blazor Client + SPA   Blazor Client 프로젝트의 경우, 우리가 다른 프로젝트에서 확인했던 startup 스크립트가 보여지지 않는다는 특징이 있다. 왜냐하면 Blazor Cli..

🔖 ASP.NET Core 둘러보기  지난 시간에는 .NET CORE의 WebAPI 프로젝트를 분석하며 빈 프로젝트인 HelloEmpty 프로젝트에 분석한 내용을 따라치며 적용하는 시간을 가져보았다. WebAPI 프로젝트는 View가 존재하지 않는 형태의 방식인데, View는 유니티 등과 같이 다양한 프론트 프로그램에 연결하여 사용한다. 따라서 WebAPI는 서버에서 Json과 같은 데이터만 전달하는 형태로 사용된다. 이번 시간에는 일전에 WebAPI를 보고 분석한 뒤 HelloEmpty 프로젝트에 적용한 것과 같이 Blazor Server 프로젝트를 분석하여 적용해보자.   🧩 Hello Blazor Server   😅... Blazor Server 프로젝트는, 빈 Empty 프로젝트에 적용하기 ..

🔖 ASP.NET Core 둘러보기  지난 시간에는 .NET CORE의 Razor Page 프로젝트를 분석하며 빈 프로젝트인 HelloEmpty 프로젝트에 분석한 내용을 따라치며 적용하는 시간을 가져보았다. Razor Page는 MVC가 아닌 MVVM을 통해 페이지와 클래스가 서로 1:1 매핑이 되어 있어 index.cshtml 내부에 asp-controller와 asp-action을 적어주지 않아도 됐었다. 이번 시간에는 일전에 Razor Page를 보고 분석한 뒤 HelloEmpty 프로젝트에 적용한 것과 같이 WebAPI 프로젝트를 분석하여 적용해보자.   🧩 Hello WebAPI   먼저 이전 시간과 마찬가지로 기존에 Razor Page 프로젝트를 따라하기 위해 만들었던 Pages 폴더를 지..

🔖 ASP.NET Core 둘러보기  지난 시간에는 .NET CORE의 MVC 프로젝트의 Views 폴더 산하에 있는 Index.cshtml을 직접 작성해보는 시간을 가졌다. 이를 작성하며 골뱅이(@)를 통해 컨트롤러와 모델에 있는 내용을 뷰에 치환하는 것을 알았으며, 레이저 뷰 가져오기를 임포트 통해 이를 처리해야 하는 것 까지 알아보았다. 이번 시간에는 MVC를 모두 마치고 일전에 MVC를 HelloEmpty 프로젝트에 이식한 것과 같이 Razor Pages를 빈 Empty 폴더에 이식하는 작업을 한다. 이어서 학습하도록 하자. 😀   🧩 Hello Razor Page  먼저 기존에 MVC 프로젝트를 따라하기 위해 만들었던 Controller와 Model 폴더는 모두 삭제하여 스크립트를 지워주도..

🔖 ASP.NET Core 둘러보기  지난 시간에는 .NET CORE의 MVC 프로젝트를 바탕으로 HelloEmpty를 채워나가며 MVC 패턴 방식이 어떻게 동작하는지 살펴보았다. 따라서 Controller와 Models, Views 폴더를 만들고 각자 해당하는 스크립트를 생성하여 작성하였다. 이번 시간에는 Views 폴더 산하에 있는 Index.cshtml을 이어서 작성하여 학습하도록 하자.   🧩 HelloMVC  Index.cshtml의 기존 내용은 모두 삭제하고 MVC 프로젝트에 있는 Index.cshtml을 참고하도록 하자. 해당 파일을 열어보면 우리가 일전에 배웠던 HTML 태그가 들어있는 것을 볼 수 있다. @{ ViewData["Title"] = "Home Page";} We..

🔖 ASP.NET Core 둘러보기  지난 시간에는 ASP.NET CORE 학습 전 여러 프로젝트를 만들어보며 세팅하는 법에 대해서 알아보았다. 이번 시간에는 본격적으로 MVC에 대해서 학습하도록 하자.  🧩 HelloMVC  루키스님의 영상은 .Net Core 3.1을 사용하여서 영상의 내용 일부가 나와 다른 것이 있었다. 먼저 새로 생성한 6개의 프로젝트를 일일히 열어서 확인 할 경우 각 프로젝트들은 program - startup이 짝이 지어져있지만, 나의 경우 startup이 생략되고 이 모든 내용이 program의 들어있었다. 관련해서 다른 학습자도 다음에 학습할 사용자들을 위해 메모를 남겨놓기도 했다.   그렇지만 VS 2022, NET 8.0으로 강의를 수강하고 있는 내가 보았을 때 단지..

🔖 ASP.NET Core 둘러보기  지난 시간에는 고급 C# 문법 중 하나인 LINQ에 GROUP BY, JOIN 등 기본적인 문법 보다는 조금 더 어려운 개념에 대해서 학습하였다. 이번 시간에는 ASP.NET CORE의 대해서 학습하기 전 프로젝트를 세팅 하도록 하자.  🧩 환경설정  먼저 5가지의 프로젝트를 몽땅 만들어 볼것이기에, 길을 잃지 않고 잘 설치하도록 하자. 참고로 루키스님은 2019 버전을 사용하였지만, 나는 2022버전을 사용하여 설치하는 방법이 달랐다. 나는 2022버전으로 설치했으니 참고바란다. 😎 1. HelloMVC (ASP.NET Core 웹앱(Model-View-Controller)  2. HelloRazor (ASP.NET Core 웹앱)  3. HelloWebAPI..

🚀 고급 C# 문법  지난 시간에는 고급 C# 문법 중 하나인 LINQ에 대해서 학습하였다. LINQ는 RDBMS의 SQL과 굉장히 유사한 것을 볼 수 있다. 지난 시간에는 LINQ의 기초적인 문법에 대해서 학습하였다면 이번 시간에는 GROUP BY, JOIN 등에 대해서 학습하도록 하자.  👑 LINQ  C#에서의 이중 for문과 같이 LINQ에서도 이중 from을 통해 이중 반복문을 만들 수 있다. 먼저 이를 테스트하기 위해 플레이어 클래스에 아이템을 새롭게 추가하도록 하자. 이 후, 단순히 아이템은 id를 통해 관리한다고 가정하고 player의 아이템 데이터도 설정해주도록 하자.   public class Player { public ClassType ClassType {..

🚀 고급 C# 문법  지난 시간에는 고급 C# 문법 중 하나인 Async, Await의 개념과 활용에 대해서 학습하였다. 물론 한번 보았다고 모든 걸 다 이해할 수 있는 내용은 아니었지만, 적어도 비동기를 통해 프로세스 주도권을 옮기며 처리하는 개념은 이해하였다. 이번 시간에는 마찬가지로 고급 C# 문법 중 하나인 LINQ에 대해서 학습하도록 하자.  👑 LINQ  LINQ는 RDBMS의 SQL 문법과 굉장히 유사한 부분이 많으며, 데이터를 다룰 때 특히 유용하게 사용되는 개념이다. 이번 시간에는 예제를 통해 LINQ가 왜 중요하고, 언제 유용한지에 대해서 알아보도록 하자.  public enum ClassType{ Knight, Archer, Mage}public class Play..

🚀 고급 C# 문법  지난 시간에는 CSS의 Box Model을 학습하며 Margin, Border, Padding 등 컨텐츠의 표시 영역에 관한 내용에 대해서 학습하였다. 이번 시간부터는 고급 C# 문법 중 하나인 Async, Await에 대해서 학습하도록 하자.  👑 Async, Await  Async, Await는 Part.4 게임 서버를 수강했다면 알 수 있는 비동기 프로그래밍 문법임을 바로 알 수 있다. 하지만 꼭 '비동기= 멀티스레드'의 개념이 성립하는 것은 아니다. 예를 들어 유니티의 코루틴만 보더라도 일종의 비동기로 동작하지만, 이는 싱글 스레이드이기 때문이다.  실상에서 예를 든다면 우리가 커피숍을 간다고 생각해보자. 매장에 방문하면 커피를 만들어주는 직원도 있고, 주문을 받는 직원이..

🌐 웹 기초  지난 시간에는 CSS의 사용 이유와 기본 문법, Selector를 통한 다양한 적용 방법들에 학습하였다. 이번 시간에는 CSS의 Box Model을 학습하여 Margin, Border, Padding 등 영역에 관한 내용에 대하여 학습하도록 하자.  🚂 CSS  이전 시간과 마찬가지로 CSS를 학습하기 전에 앞서, CSS의 정보를 한눈에 볼 수 있도록 정리한 사이트 https://www.w3schools.com/css/default.asp 를 통해 어떻게 사용하는지 확인하고 이를 실습한다.  Box Model  Box 모델은 각각의 컨텐츠들의 영역을 구분하는 역할을 한다. 따라서 보더, 마진, 패딩은 각자의 범위 내애서 컨텐츠들의 크기를 얼만큼 설정하여 보여줄 것을 나타낸다.    또한..