셩잇님의 잡동사니

🦮 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 모델은 각각의 컨텐츠들의 영역을 구분하는 역할을 한다. 따라서 보더, 마진, 패딩은 각자의 범위 내애서 컨텐츠들의 크기를 얼만큼 설정하여 보여줄 것을 나타낸다.    또한..

🌐 웹 기초  지난 시간에는 HTML의 UI를 담당하는 Button과 Input 태그 등에 학습하였다. 이번 시간부터는 HTML이 아닌 CSS를 배워보도록 하자.  🚂 CSS  이전 시간과 마찬가지로 CSS를 학습하기 전에 앞서, CSS의 정보를 한눈에 볼 수 있도록 정리한 사이트 https://www.w3schools.com/css/default.asp 를 통해 어떻게 사용하는지 확인하고 이를 실습한다.  사용이유  CSS는 엄연히 Cascading Style Sheet로 웹사이트의 표현 방법을 정해주는 스타일 시트 언어이다. 그런데 CSS는 왜 생겨났을까? 바로 HTML 안에 태그(, , 등)와 비주얼 요소(span 등) 섞여버리기 시작하여, 태그 영역과 비주얼 요소의 영역 구분이 점차 힘들어지..

🌐 웹 기초  지난 시간에는 HTML의 DOCTYPE, HTML, BODY, HEAD 등 파일 구조 태그에 대해서 학습하였다. 이번 시간에는 HTML의 UI 요소인 Button과 Input 태그들에 대해서 배워보도록 하자.  🚂 Tag  이전 시간과 마찬가지로 HTML의 태그를 학습하기 전에 앞서, HTML의 태그를 한눈에 볼 수 있도록 정리한 사이트 https://www.w3schools.com/tags/tag_comment.asp를 통해 태그를 확인하고 이를 실습한다.  Button  onclick을 통해 클릭할 때 동작할 이벤트를 정의할 수 있다.다만, 해당 영역에 자바 스크립트를 넣어서 함수를 통해 동작하도록 설정할 수 있다.또한 버튼과 input의 차이점은 버튼 내부에는 , 과 같은 태그들을..

🌐 웹 기초  지난 시간에는 HTML의 리스트, 테이블 태그에 대해서 학습하였다. 이번 시간에는 HTML의 파일 구조 태그들에 대해서 배운다.   🚂 Tag  이전 시간과 마찬가지로 HTML의 태그를 학습하기 전에 앞서, HTML의 태그를 한눈에 볼 수 있도록 정리한 사이트 https://www.w3schools.com/tags/tag_comment.asp를 통해 태그를 확인하고 이를 실습한다.  DOCTYPE 은 도큐먼트의 타입을 뜻한다.따라서 모든 HTML의 문서는 DOCTYPE으로 시작 해야한다. --> 컴투스 공동 창업자 이영일 대표가 설립한 해긴은 ‘홈런 클래시’, ‘오버독스’, ‘익스트림 골프’, ‘플레이투게더’ 등 캐주얼한 매력을 극대화한 다양한 장르의 모바일게임을 개발 및 서비스하는 기..

🌐 웹 기초  지난 시간에는 HTML의 기초적인 태그에 이어 개행, 단락 구분, 이미지, 하이퍼링크 등 마찬가지로 기초적인 태그에 대해서 학습하였다. 이번 시간에는 지난시간과 마찬가지로 HTML의 태그들에 대해서 배운다.   🚂 Tag  이전 시간과 마찬가지로 HTML의 태그를 학습하기 전에 앞서, HTML의 태그를 한눈에 볼 수 있도록 정리한 사이트https://www.w3schools.com/tags/tag_comment.asp 를 통해 태그를 확인하고 이를 실습한다.  리스트, 테이블  html에서 리스트는 ol과 ul을 사용한다. ol은 ordered list와 unordered list를 뜻한다.ol의 경우 정렬된 리스트, ul은 정렬되지 않은 리스트를 뜻한다.ol은 번호로 데이터가 보여지..

🌐 웹 기초  지난 시간에는 HTML의 기초적인 태그인 주석, 볼드, 이탤릭, 크기 등 기초적인 태그에 대해서 학습하였다. 이번 시간에는 이번 시간에는 지난시간과 마찬가지로 HTML의 다양한 태그들에 대해서 배운다.   🚂 Tag  이전 시간과 마찬가지로 HTML의 태그를 학습하기 전에 앞서, HTML의 태그를 한눈에 볼 수 있도록 정리한 사이트인 https://www.w3schools.com/tags/tag_comment.asp 사이트를 통해 태그를 확인하고 이를 실습한다.  개행, 단락 구분, 이미지, 하이퍼링크 (개행)은 이 존재하지 않는다. --> 단락별로 수행하고자 할 때 사용된다. -->를 통해 이미지를 넣어준다. 여기서 alt는 이미지가 나타나지 않을 때 나오는 부가적인 요소이다. wi..