'분류 전체보기' 카테고리의 글 목록 (13 Page)

전체보기 (1478)

[Blazor] CSS 격리

웹 프로그래밍/Blazor 범범조조 2022. 11. 16. 19:56

CSS 격리 Blazor 에서 Component 별로 CSS 를 격리 시킬 수 있습니다. Blazor 에서 같은 경로에 Component 와 이름이 같은 CSS 파일을 자동으로 Load 하여 Component 에 Scope CSS 로 적용시킵니다. CSS 격리 조건 CSS 격리를 하기 위해서는 Component 와 같은 경로에 존재해야 합니다. 또한, Component와 같은 파일명으로 작성되어야 합니다. 예시) LifeCycle.razor -> LifeCycle.razor.css 적용 결과 다음과 같이 나타납니다. Css의 영향을 받은 버튼은 Css Scope 내에 존재하는 Component이고 영향을 받지 않는 Component는 Scope 밖에 있는 Component 입니다.

[Blazor] 매개변수 여러개인 경우 EventCallBack 을 이용한 부모-자식 Component 값 전달하는 방법

웹 프로그래밍/Blazor 범범조조 2022. 11. 15. 22:32

개요 EventCallBack 메서드를 이용하여 부모, 자식 간의 Component 값을 전달할 수 있습니다. 만약, EventCallBack 메서드를 통해 전달해야 하는 타입이 여러개인 경우 어떤 방식으로 전달하는지 예제를 통해 내용 정리 진행합니다. 시나리오 ToDoList 를 만든다고 가정합니다. ToDoList 에서 List 항목을 입력하여 작성을 할 때, CheckBox 가 있습니다. 만약, CheckBox 의 onchange 이벤트에 2개 이상의 매개변수를 넘겨주어야 한다고 가정을 하고 어떤 식으로 N개 이상의 매개변수를 전달하는지 예제 코드를 작성합니다. TodoListComponent.razor TodoListComponent.razor 컴포넌트는 List 항목을 보여주는 자식 컴포넌트 입..

[Blazor] EventCallBack 을 이용한 부모-자식 Component 값 전달하는 방법

웹 프로그래밍/Blazor 범범조조 2022. 11. 15. 21:29

개요 EventCallBack 메서드를 이용하여 부모, 자식 간의 Component 값을 전달할 수 있습니다. 어떻게 전달하는지 예제를 통해 내용 정리 진행합니다. 시나리오 ToDoList 를 만든다고 가정합니다. input, button 태그를 통해 input 에 텍스트를 입력 후, button 을 클릭 할 때 해당 내용을 추가한다고 가정을 하고 기능을 만든다고 가정합니다. 여기서 InputComponent.razor, Todo.razor 2개의 컴포넌트를 만드는데 부모 컴포넌트는 Todo.razor 이고 자식 컴포넌트는 InputComponent.razor 입니다. Todo.razor - 부모 InputComponent.razor - 자식 InputComponent.razor InputComponen..

[Blazor] Fluxor - Effects

웹 프로그래밍/Blazor 범범조조 2022. 11. 15. 00:42

Effect란? Blazor Stores 에서는 State, Feature, Actions, Reducers 및 Effects 의 총 5가지 부분으로 구성되어 있습니다. 여기서 오늘은 Fluxor 에서 Effects 가 무엇인지에 대해서 알아보려고 합니다. Fluxor 에서 Effects 는 Dispatch 된 Action 이 순수하게 Reducer 방법으로 Store 외부의 리소스에 접근해야 할 때 사용됩니다. 일반적인 예는 API 에 HTTP 객체를 호출하는 것입니다. Reducer 메서드는 현재 상태 및 구독 중인 Action 만 접근할 수 있습니다. Effect 메서드는 외부 리소스에 액세스할 수 있으며, 새 상태를 방출하기 위해 Reducers에서 처리할 Acts 자체를 디스패치합니다. Effe..

[서울/천왕] 7호선 천왕역 이색디저트 카페 ‘메이로드 (mayroad)’ 가격 및 운영정보

-------[데이트&맛집]-------/맛집 추천 범범조조 2022. 11. 14. 20:04

안녕하세요 범범조조입니다. 오늘은 7호선 천왕역에 위치한 이색 디저트카페 ‘메이로드 (mayroad)’를 소개합니다. 이 카페에서는 입욕제를 똑 닮은 ‘컬러밤’이 가장 인기 있는 메뉴인데요, 서울에서 한번쯤 꼭 방문해 보셨으면 좋겠는 카페입니다. *광고 없는 솔직한 내돈내산 리뷰 시작합니다~!* 위치 및 운영정보 [주소] 서울시 구로구 오류로 37 [전화번호] 02-2060-7466 [운영시간] 월, 수, 목 오전10:30~오후22:00 화, 금, 일 오전11:30~오후21:00 [주차] 가게 앞 잠시 정차가능 (매장 정식 주차장X) 주차 시 천왕역환승센터 주차장 이용 [기타] 배달 가능 (어플 이용) 예약 주문 가능 포장 및 택배 가능 무선 인터넷 사용가능 외관 및 내부 매장 가운데의 소녀 모형을 기준..

[경기도/파주] 대형 베이커리 도넛 카페 ‘말똥도넛’ 가격&주차안내, 매장위치 및 운영정보

-------[데이트&맛집]-------/맛집 추천 범범조조 2022. 11. 12. 17:15

안녕하세요 범범조조입니다. 제가 디저트 중에 가장 좋아하는 것 중 하나가 도넛인데요, 유명프랜차이즈 도넛 외에도 많은 도넛카페를 찾아다니며 먹어본 중 베스트3 안에 꼽힌 베이커리 도넛 맛집으로 소문난 경기도 파주 대형베이커리 카페 '말똥도넛 디저트타운'을 소개하겠습니다. *광고 없는 솔직한 내돈내산 리뷰 시작합니다* 위치 및 운영정보 [주소] 경기 파주시 지목로 137 말똥도넛 [전화번호] 1877-0547 [운영시간] 매일 오전8시30분시~오후10시 [주차] 매장 내 제1,2,3 주차장 이용 가능 (매장 이용 시 주차요금 무료) [기타] 단체석 이용가능 포장 가능 무선 인터넷 사용가능 매장 내 남/녀 화장실 구분사용 외관 및 내부 메뉴 도넛을 주문하면 함께 나오는 칼과 포크인데요, 나무로 만들어져 나름..

[Blazor] 상태 관리 라이브러리

웹 프로그래밍/Blazor 범범조조 2022. 11. 9. 20:51

종류 Blazor 에서 상태를 관리해주는 라이브러리 종류는 다음과 같습니다. Fluxor (https://github.com/mrpmorris/Fluxor) ★792 Blazor-state (https://github.com/TimeWarpEngineering/blazor-state) ★361 Cortex.Net (https://github.com/jspuij/Cortex.Net) ★66 BlazorWithRedux (https://github.com/christoment/BlazorWithRedux) ★31 BlazorRealm (https://github.com/dworthen/BlazorRealm) ★12 rudder (https://github.com/kjeske/rudder) ★18 MSDN |..

[가볼만한 곳] 부천시가 관리하는 대형도서관 ‘부천시립 별빛마루도서관’ 이용방법 및 운영정보 (+이용 꿀팁공개!)

-------[데이트&맛집]-------/한국여행 범범조조 2022. 11. 9. 19:32

안녕하세요 범범조조입니다. 오늘은 부천시에서 관리하고 올해 7월에 신설된 대형 도서관 ‘부천시립 별빛마루도서관’을 소개하겠습니다. 이곳을 방문하며 책을 읽고 공부만 하는 곳이라고 생각했던 도서관이 복합문화공간의 역할을 할 수 있다는 것을 확인해보는 시간이 되었는데요, 리뷰 시작합니다! 위치 및 운영정보 [주소] 경기 부천시 옥길로 105 [전화번호] 032-625-9780 / 9781 [이용시간] ▪자료실 (평일) -종합자료실 오전9시~오후10시 -아동자료실 오전9시~오후6시 -전자정보실 오전9시~오후6시 (주말) 모든 공간 오전9시~오후 5시까지 이용 ▪학습실 주중, 주말모두 오전7시~오후10시까지 이용가능 [휴관일] 매주 월요일 및 일요일을 제외한 법정공휴일 (일요일이 법정공휴일과 겹치는 경우에는 휴..

[Blazor] 페이저 버튼 구현

웹 프로그래밍/Blazor 범범조조 2022. 11. 8. 21:49

개요 Blazor 에서 페이저 버튼 구현하는 방법에 대해서 정리 진행합니다. Blazor 코드 Blazor 에서 페이저 버튼을 구현하기 위해 부트스트랩 pagination CSS 클래스를 이용하여 표현 할 수 있습니다. 코드는 다음과 같습니다. 다음 코드에서는 Prev, Next 버튼을 추가 하였고, 해당 버튼 사이에는 Page 개수를 함께 표시 되도록 하였습니다. 또한, 현재 클릭된 페이지만 Button 이 활성화 되도록 하는 부분도 추가 되어 있습니다. 보다 자세한 내용은 https://getbootstrap.com/docs/4.0/components/pagination/ 에서 확인할 수 있습니다. Prev @for (int i = 0; i < PageCount; i++) { @(i+1) } Next..

[경기도/파주] 낙지볶음과 연포탕이 맛있는 경기도 파주맛집 '양순자 낙지마당' 가격 및 매장정보

-------[데이트&맛집]-------/맛집 추천 범범조조 2022. 11. 7. 13:59

안녕하세요 범범조조입니다. 오늘은 경기도 나들이를 다녀오며 만난 소문난 맛집 '양순자 낙지마당'을 소개하겠습니다. *광고 없는 솔직한 내돈내산 리뷰 시작합니다~!* 위치 및 운영정보 [주소] 경기도 파주시 광탄면 부흥로 112 [전화번호] 031-947-0086 [운영시간] 월~일 오전9시~오후9시 (라스트 오더 오후 8시30분) *매주 수요일 정기휴무* [주차] 가능 (현장 주차요원 안내중) [기타] 단체석 이용 가능 메뉴 포장 가능 예약가능 외관 및 내부 메뉴 느낀점 -메뉴들을 직접 먹어보고 느낀점- 1. 가격 메인 메뉴인 연포탕과 낙지볶음의 경우 2인 이상 주문을 해야 하는데요, 조리가 완료된 음식을 보면 2인분 보다 조금 적은 양인 듯 싶지만 낙지가 아니고 작은 문어인지 싶을 정도로 낙지의 크기가..

[Blazor] 동적 페이지 개수 구하기

웹 프로그래밍/Blazor 범범조조 2022. 11. 6. 17:20

개요 Blazor 에서 동적으로 페이지 개수(PageCount) 구하는 방법에 대해서 정리 진행합니다. 시나리오 현재 데이터베이스에서 Candidates 테이블에 총 9개의 Record 가 저장되어 있다고 가정합니다. 여기서 저는 한 페이지당, 3개의 데이터(PageSize = 3)를 보여준다고 하면 PageCount 는 3개의 데이터씩 총 9개의 Record 가 기록되어 있으니 PageCount 는 3이 됩니다. 여기서 만약, 소수로 떨어진다면 소수 값 그 이상의 값으로 무조건 반올림을 해 주어야지 정수 값으로 표현이 가능합니다. 위 시나리오 대로 동적으로 페이지 개수를 구하는 방법에 대한 로직을 작성 진행합니다. 동적 페이지 개수 구하는 로직 동적으로 페이지를 구하기 위한 C# 로직은 다음과 같습니다..

[Blazor] - 특정 페이지 ReDirection

웹 프로그래밍/Blazor 범범조조 2022. 11. 6. 12:19

개요 Blazor 에서 페이지를 생성 후, 페이지 ReDirection 을 할 수 있습니다. 예를 들어, 전체 보여주고자 하는 페이지는 현재 3페이지라고 가정 하였을 때 1, 2, 3 총 3개의 페이지가 있습니다. 여기서 첫 페이지는 1페이지고, 마지막 페이지는 3페이지 입니다. 그럼, 첫 페이지에서는 무조건 1페이지가 Default 로 보여지도록 ReDirection 하는 기능을 추가하고, 만약 사용자가 마지막 페이지 그 이상의 값으로 URL 값을 지정하게 되면 무조건 마지막 페이지인 3페이지가 ReDirection 되도록 하는 예제 코드를 작성해 봅니다. Blazor ReDirection 방법 Blazor 에서 ReDirection 하는 방법 중 하나는 NavigationManager 클래스를 이용하..

1
···
10
11
12
13
14
15
16
···
124

Sidebar

Copyright © BeomBeomJoJo All Rights Reserved

Designed by JB FACTORY

티스토리툴바