[blazor] 추천 사이트 및 사용 기술 출력 Component로 만들고 출력 하기

1. 추천 사이트 및 사용기술 Component를 in memory방식으로 만들고 index페이지에서 Component를 불러와 출력.
2. 프로젝트에 fontawesome 적용 하기.
3. 깃허브 소스 경로

---

1. fontawesome적용 하기.

1. google.com에서 fontawesome검색 awesome 주소 해당 사이트에서 free버전 다운로드.
2. 압축 해제 후 프로젝트 wwwroot경로에 css,js폴더 붙여 넣기.
3. _Layout.cshtml에 link 추가

---

2. Site, Tech 모델 만들기.

1. HyeongGyu_Project.Models 프로젝트에 Site, Tech 모델 만들기.
2. 사용할 프로젝트에서 해당 프로젝트 참조 및 using문 추가.

• Site.cs

namespace HyeongGyu_Project.Models
{
    public class Site
    {
        public int Id { get; set; }
        public string Title { get; set; }
        public string Description { get; set; }
        public string Url { get; set; }
    }
}

• Tech

namespace HyeongGyu_Project.Models
{
    public class Tech
    {
        public int Id { get; set; }
        public string Title { get; set; }
      

    }
}

---

3. Component만들기.

1. Components/Home 폴더 생성.
2. SiteListComponent.razor, TechListComponent.razor 생성.
3. 각 페이지별 해당 하는 모델 적용 및 List 만들고 출력 하는 페이지 만들기.

• SiteListComponent.razor

a테그 target="_blank"는 url클릭시 사이트 출력 방식을 지정.
1. _blank
링크된 문서를 새로운 윈도우나 탭(tab)에서 오픈함.
2. _self
링크된 문서를 링크가 위치한 현재 프레임에서 오픈함. 기본값으로 생략 가능.
3. _parent
링크된 문서를 현재 프레임의 부모 프레임에서 오픈함.
4. _top
링크된 문서를 현재 윈도우 전체에서 오픈함.
5. 프레임 이름
링크된 문서를 명시된 프레임에서 오픈함.
참고사이트

<ul>
    @foreach(var site in siteList)
    {
        <li><a href="@site.Url" target="_blank">@site.Title (@site.Description)</a></li>
    }
</ul>

@code {
    private List<Site> siteList;

    public List<Site> SiteList
    {
        get { return SiteList; }
        set { SiteList = value; }
    }

    protected override void OnInitialized()
    {
        siteList = new List<Site>() {
            new Site() { Id = 1, Title = "네이버" , Description = "검색사이트" , Url ="https://naver.com"}
            ,new Site() { Id = 2, Title = "깃허브" , Description = "내깃허브사이트" , Url ="https://github.com/kjin0204"}
            ,new Site() { Id = 3, Title = "velog" , Description = "내블로그" , Url ="https://velog.io/@kjin0202"}
            ,new Site() { Id = 4, Title = "닷넷데브" , Description = "c# 관련 커뮤니티" , Url ="https://forum.dotnetdev.kr/"}
        };

    }


}

• TechListComponent.razor

<ul>
    @foreach(var tech in techList)
    {
        <li>@tech.Title</li>
    }
</ul>

@code {
    private List<Tech> techList;

    public List<Tech> TechList
    {
        get { return techList; }
        set { techList = value; }
    }

    protected override void OnInitialized()
    {
        techList = new List<Tech>() {
            new Tech() { Id = 1, Title = "blazor"}
            ,new Tech() { Id = 2, Title = "azure"}
            ,new Tech() { Id = 3, Title = "c#"}
            ,new Tech() { Id = 4, Title = "Dotnet"}
        };

    }


}

---

4. Index페이지에서 생성한 Component 출력

1. Index.razor페이지에서 하단부에 생성한 Compnent를 출력.

• 페이지 하단부에 아래 코드 추가.

    <div class="container px-5 my-5">
        <div class="row gx-5">
            <div class="col-lg-6 mb-0">
                <h4><i class="fa fa-wrench"></i>현재 사이트에 사용된 기술</h4>
                <HyeongGyu_Project.Components.Home.TechListComponent>
                </HyeongGyu_Project.Components.Home.TechListComponent>
            </div>
            <div class="col-lg-6 mb-0">
                <h4><i class="fa fa-sitemap"></i>추천 사이트</h4>
                <HyeongGyu_Project.Components.Home.SiteListComponent>
                </HyeongGyu_Project.Components.Home.SiteListComponent>
            </div>
        </div>
    </div>