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

전체보기 (1478)

[경기/망포] 신동카페거리 브런치가 맛있는 인스타감성 카페 ‘커피샵974 (coffee#974)’ 가격 및 운영정보

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

안녕하세요 범범조조입니다. 오늘은 망포역 신동카페거리에 위치한 브런치 맛집 카페 ‘커피샵974’를 소개합니다. 이곳은 인스타 감성이 뿜뿜하고 브런치 맛집으로 소문난 카페인데요, 신동의 많은 카페들 중에서 연주회를 보며 식사를 즐길 수 있는 유일한 카페라고 합니다. 꼭 한번 방문하셔서 맛있는 커피도 맛보시고 감성도 채우시는 시간 가져보시길 바라요! *광고 없는 솔직한 내돈내산 리뷰 시작합니다~!* 위치 및 운영정보 [주소] 경기도 수원시 영통구 권선로882번길 107-52 1층 101호 [전화번호] 031-202-0070 [운영시간] 화~토 오전10시30분~오후9시30분 라스트오더 오후9시 매주 월요일 휴무 [주차] 주차구역 협소 (신동제1공영주차장 이용가능) [기타] 반려동물동반 가능 예약 가능 포장 가..

[서울/천왕] 싱싱한 스시가 맛있는 천왕역 초밥맛집 ‘스시쿠야 천왕점’ 가격 및 운영정보

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

안녕하세요 범범조조입니다. 오늘은 7호선 천왕역에 위치한 초밥맛집 ‘스시쿠야 천왕점’을 소개합니다. 스시쿠야 천왕점은 2022년 KCIA한국소비자산업평가에서 초밥/생선회 부문1위를 차지한 매장이라고 하는데요, 작년에 맛있게 먹었던 좋은 기억을 가지고 다시 방문해 여전히 맛있게 먹고 왔답니다. *광고 없는 솔직한 내돈내산 리뷰 시작합니다~!* 위치 및 운영정보 [주소] 서울시 구로구 오류로 20 새롬스타빌 105호 [전화번호] 02-2618-3330 [운영시간] 월~토 오전 10시40분~익일 오전 1시30분 브레이크타임 오후3시 매주 일요일 휴무 [주차] 새롬스타빌 지하주차장 이용가능 (상가 매장 이용 시 주차무료) [기타] 배달 가능 (어플 이용) 포장 및 택배 가능 무선 인터넷 사용가능 외관 및 내부 ..

[Blazor] 모범사례 3- CSS를 사용한 구성 요소 파일 및 스타일 지정

웹 프로그래밍/Blazor 범범조조 2022. 11. 20. 21:24

Blazor 세 번째 모범사례는 CSS를 사용한 구성 요소 파일 및 스타일 지정 입니다. 쉽게 얘기하면, 컴포넌트, C# 코드, CSS 영역을 모두 분리하는 구조를 의미합니다. 다음과 같은 구조입니다. 위처럼 컴포넌트, C# 코드, CSS 영역 을 나눠서 개발을 진행하는 것이 좋습니다. 예제로 AKButton.razor, AKButton.razor.cs, AKBUtton.razor.css 프로젝트 파일에 다음 코드들을 추가하였습니다. 3.1 AKButton.razor @namespace AKLab01.Blaozr.Components AKButton Button Secondary Outline Primary 3.2 AKButton.razor.cs namespace AKLab01.Blaozr.Componen..

[Blazor] 모범사례 2 - 구성 요소에 대한 명확한 폴더 및 네임스페이스 구조

웹 프로그래밍/Blazor 범범조조 2022. 11. 20. 00:27

Blazor 두 번째 모범사례는 구성 요소에 대한 명확한 폴더 및 네임스페이스 구조를 갖는 것 입니다. 즉, 1번에서 생성한 Razor 클래스 라이브러리에 앞으로 추가된 Components 폴더를 만들고 하위 디렉터리로 Button, DataGrid 등등.. 명확하게 폴더를 나누고 네임스페이스를 지정해 주는 것입니다. 2.1 하위 Components 폴더 생성하기 1번에서 생성했던, Razor 클래스 라이브러리에 Components 라는 폴더를 생성합니다. 그리고 하위 폴더에는 Button, DataGrid 2개의 폴더를 생성합니다. 테스트를 진행하기 위해, Button 폴더에 AKButton.razor 컴포넌트를 생성합니다. 2.2 Components/Button/AKButton.razor 에 네임스페..

[Blazor] 모범사례 1 - Razor 클래스 라이브러리 프로젝트에 앱 구성 요소 넣기

웹 프로그래밍/Blazor 범범조조 2022. 11. 19. 22:24

Blaozr 모범사례 첫 번째는 Razor 클래스 라이브러리 프로젝트를 생성 후, 프로젝트 앱에 구성 요소 넣는 방법 입니다. Razor 클래스 라이브러리 생성 및 참조 방법은 아래 이미지를 참고하시면 됩니다. 1.1 Razor 클래스 라이브러리 생성 Razor 클래스 라이브러리 생성합니다. 1.2 프로젝트 구조 모습 Razor 클래스 라이브러리 생성 완료된 프로젝트 구조 모습은 다음과 같습니다. 1.3 Blazor Server 프로젝트에 클래스 라이브러리 참조 Razor 클래스 라이브러리 생성 완료 되었으면, Blazor Server 프로젝트에 앞서 생성한 Razor 클래스 라이브러리를 참조합니다. 1.4 _Layout.cshtml 에 Razor 클래스 라이브러리 링크 추가 참조가 완료 되면, _Lay..

[Blazor] CircleButton Rotate Animation 적용하기

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

개요 현재 Blazor 에서 TodoList 기능을 개발하고 있습니다. 여기서 Todo 목록을 추가하기 위한 CircleButton 을 생성하였습니다. CircleButton 을 클릭할 때, 45도 회전각을 주어 회전하는 Animation 을 주고 싶었고, 어떻게 개발 진행했는지에 대해서 정리 진행합니다. CircleButtonComponent.razor 컴포넌트 CircleButtonComponent.razor 컴포넌트 코드는 다음과 같습니다. @ButtonContent @code { [Parameter] public bool IsClicked { get; set; } [Parameter] public string? ButtonContent { get; set; } [Parameter] public E..

[Blazor] Image Resource 경로 설정 방법

웹 프로그래밍/Blazor 범범조조 2022. 11. 18. 03:59

개요 Blazor 같은 경우, 일반 경로에 Images 폴더 생성후 해당 디렉터리에 Image 파일들을 넣어서 불러오게 되면 이미지 Load 가 되지 않습니다. 때문에 잊어버림을 방지하고자 Blazor Image Resource 경로 설정 방법 정리 합니다. wwwroot 하위 디렉터리에 images 폴더 생성 Blazor 에서는 Image 폴더를 wwwroot 하위 디렉터리에서 생성해 주어야 합니다. 다른 영역에서 Image 폴더를 생성 후, URL 에 해당 경로를 입력하게 되면 인식하지 못해 이미지를 불러오지 못합니다. 때문에, 반드시 wwwroot 하위 디렉터리에 Image 디렉터리를 생성 후, Image 들을 넣어 주어야 합니다. 아래 이미지와 같은 경로에 Image 디렉터리를 생성해 주면 됩니다..

[Blazor] 원형 버튼 만들기

웹 프로그래밍/Blazor 범범조조 2022. 11. 17. 21:50

개요 Blazor 원형 버튼 만드는 방법에 대해서 정리 진행합니다. 원형 버튼 만든 이유 현재 TodoList 를 만들면서, Blazor 개념을 익히고 있습니다. 여기서 단순 버튼보다, 보다 새로운 버튼을 만들고자 원형 버튼으로 변경하고 싶어서 만들어 보게 되었습니다. 원형 버튼 컴포넌트 재사용을 위해서 원형 버튼 컴포넌트를 따로 만들어 주었습니다. CircleButtonComponent.razor 라는 컴포넌트 프로젝트 하나 생성해 주었고 다음과 같이 코드를 작성 진행하였습니다. @ButtonContent @code { [Parameter] public bool IsClicked { get; set; } [Parameter] public string? ButtonContent { get; set; } ..

[Blazor] 부모 컴포넌트에서 자식 컴포넌트 주입 받기

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

개요 Blazor 에서 부모 컴포넌트에서 자식 컴포넌트 자체를 주입받는 방법에 대해서 정리 진행합니다. ChildContenr(자식 콘텐츠) Razor 구성 요소는 자식 콘텐츠를 RenderFragment 로 캡처하고 해당 콘텐츠를 구성 요소 렌더링의 일부로 렌더링 할 수 있습니다. 자식 콘텐츠를 캡처하려면 RenderFragment 형식의 구성 요소 매개 변수를 정의하고 이름을 ChildContent 로 지정하여 사용하면 됩니다. ChildContentComponent.razor Component with child content @ChildContent @code { [Parameter] public RenderFragment ChildContent { get; set; } } 위와 같이 자식 컴포넌..

[Blazor] MouseOver, MouseOut 이벤트 적용하기

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

개요 Blazor 에서 MouseOver, MouseOut 이벤트를 적용하는 방법에 대해서 정리 진행합니다. MouseOver, MouseOut 이벤트 사용이 필요한 부분 MouseOver, MouseOut 이벤트 사용이 필요한 부분은 개발을 진행하다 보면 많이 있습니다. 저 같은 경우는 TodoList 를 만들면서, List 항목에 Mouse 를 올려두면 삭제(휴지통) 이미지가 뜨고, 다시 리스트 항목을 벗어나면 삭제(휴지통) 이미지가 사라지도록 하기 위해서 MouseOver, MouseOut 이벤트를 사용하였습니다. 그럼 Blazor 에서 실제로 어떻게 MouseOver, MouseOut 이벤트를 선언하여 사용하는지 예제 코드를 통해 알아보도록 하겠습니다. TodoListComponent.razor ..

[Blazor] 삼항 연산자를 이용한 Class CSS 속성

웹 프로그래밍/Blazor 범범조조 2022. 11. 17. 00:06

개요 Blazor 에서 삼항 연산자를 이용하여 Class CSS 속성을 변경하는 방법에 대해서 알아봅니다. Class 속성에서 삼항 연산자 사용이 필요한 경우 Blazor 에서 ToDoList 를 개발하던 중, Check 값에 따라서 Text Color 값을 변경해야 할 일이 있었습니다. Check 가 되어 있으면 검은색의 Text, Check 가 해제되어 있으면 회색의 Text 로 변경되도록 개발해야 하는 경우가 있었는데, 이럴 때 Class 속성에서 삼항 연산자를 통해 2개의 CSS 속성 값을 적용해 줄 수 있습니다. 예제 코드를 통해서 어떻게 사용하는지 보여드리겠습니다. TodoListComponent.razor TodoListComponent.razor 컴포넌트는 ToDoList 의 데이터를 표시..

[Blazor] Keyboard Enter Event 구현

웹 프로그래밍/Blazor 범범조조 2022. 11. 16. 20:58

개요 Blazor 에서 Button 컴포넌트에 Enter Key 이벤트를 구현하는 방법에 대해서 정리 진행합니다. Keyboard Enter Key Event 구현 방법 Blazor 에서 Keyboard Enter Key Event 를 구현하는 방법은 구글링을 하면 여러 방법들이 나오게 됩니다. 여기서 저는 많은 사람들이 권장? 하는 방법으로 Enter Key 이벤트를 구현해 보았습니다. 제가 사용한 방법은, HTML 태그에서 form 태그를 사용한 방식입니다. form 태그를 사용하게 되면, form 태그 안에 있는 자식 요소 태그들의 키 이벤트를 브라우저가 작업을 수행해 줍니다. 해당 정보는 StackOverFlow 에서 찾은 내용입니다. 시나리오 그럼, 실제 Enter 키 이벤트가 정상적으로 동작하..

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

Sidebar

Copyright © BeomBeomJoJo All Rights Reserved

Designed by JB FACTORY

티스토리툴바