내 인생 이대로 ㅈ될 수 없다

반응형 웹이 필요했다.

평소에는 아무것도 보이지 않다가 작아지면 토글버튼이 생기고

토글 버튼 누르면 메뉴가 아래로 갱신되는 형태이다.

그러려면 자바스크립트를 쓸 수 밖에 없었고,

자바 스크립트를 사용하는 방법은 다음과 같았다.

@inherits LayoutComponentBase

<PageTitle>Changed</PageTitle>

<div class="wrapper">

    <header class="common-header">

    </header>

    <main>
        <article class="class-main">
            @Body
          
        </article>
    </main>

    <footer class="common-footer">

    </footer>
</div>

MainLayout.razor

@page "/"


<nav class="navbar">
    <div class="navbar__logo">
        <i class="fab fa-apple"></i>
        <a href="">자바스크립트 넣기</a>
    </div>
    <ul class="navbar__menu">
        <li><a href="">1</a></li>
        <li><a href="">2</a></li>
        <li><a href="">3</a></li>
        <li><a href="">4</a></li>
        <li><a href="">5</a></li>
    </ul>
    <ul class="navbar__links">
        <li> <i class="fab fa-facebook-square"></i></li>
        <li><i class="fab fa-instagram"></i></li>
    </ul>

    <button href="#" class="navbar__toggleBtn" @onclick="ToggleMenu"></button>
</nav>

@code {
    
}

index.razor

using Microsoft.AspNetCore.Components;
using Microsoft.JSInterop;

namespace Changed.Pages
{
    public partial class Index
    {
        [Inject]
        public IJSRuntime? JSRuntime { get; set; }

        private IJSObjectReference _jsModule;
        protected override async Task OnAfterRenderAsync(bool firstRender)
        {
            if (firstRender)
            {
                _jsModule = await JSRuntime.InvokeAsync<IJSObjectReference>("import", "./assets/js/main.js");
            }
        }
        public async Task ToggleMenu() =>
            await _jsModule.InvokeVoidAsync("Changed");


    }
}

index.razor.cs

return 값이있다면 

```InvokeAsynce<object>```를

return 값이 없다면

```InvokeVoidAsync()```를

쓰면된다.

export function Changed() {
    const toggleBtn = document.querySelector('.navbar__toggleBtn');
    const menu = document.querySelector('.navbar__menu');
    const links = document.querySelector('.navbar__links');

    toggleBtn.addEventListener('click', () => {
        menu.classList.toggle('active');
        links.classList.toggle('active');
    })
    

}

main.js

_Host.cstml에 작성하면 export를 따로 적지 않아줘도된다.

결과

참고

ASP.NET Core Blazor의 .NET 메서드에서 JavaScript 함수 호출 | Microsoft Learn

[Blazor] javascript import 방법 - 👨‍🏫 튜토리얼, 팁, 강좌 - 닷넷데브 (dotnetdev.kr)

반응형 헤더 만들기 (velog.io)

취업한 이후에 안쓰던 VS를 쓰고 있는데, 원래 그런거 신경쓰지 않지만, 테마가 너무 구려보여서 바꾸려고 찾아보니

생각보다 어떻게 적용하는지 글이 없어서 정보성으로 글을 하나 쓴다.

*vs2019버전으로 2022도 같을꺼라고 생각한다. 2012버전 이상만 적용 가능한것으로 확인했다(아닐수도 있음)

1.상단바에 확장 -> 확장관리로 들어간다

2.검색부분에 theme으로 검색한다.(원하는 테마가 있으면 그거 검색해도 무방) 

원하는거 다운로드한다.

3. vs 종료한다 

4.끄고나면 설치창뜸. 설치 다 되기전까지는 vs키면 설치진행안된다

5.

도구 -> 옵션들어간다

6.

환경 -> 색 테마에서 다운받은거 적용한다.

https://www.acmicpc.net/problem/2504

내 풀이

def solution():
    n = input().strip()
    stack = []
    sums=1
    result=0
    
    for i in range(len(n)):
        if n[i] == '[':
            sums *=3
            stack.append(n[i])
            
        elif n[i]=='(':
            sums *=2
            stack.append(n[i])
            
        elif n[i] == ']':
            if len(stack) == 0 or stack[-1] =='(':
                result=0
                break

            elif n[i-1] =='[':
                result += sums
                
            stack.pop()
            sums //=3
        else:
            if len(stack)==0 or stack[-1]=='[':
                result=0
                break
            elif n[i-1]=='(':
                result +=sums
            stack.pop()  
            sums //=2
    
    if stack:
        result= 0
    
    print(result)
(solution())

다른사람의 풀이

1학년때 이거관련해서 과제한적 있었는데 이렇게 오래걸릴줄 상상도 못했다;

최초에 고려하지 못했던 부분이 약 2개정도 있는데

첫째, pop은 무조건 해야한다. 처음에는 맞는 괄호만 나올때만 pop했는데 그러면 나중에 쌓여서 안됨 -

둘째,여는 괄호만 나올때도 고려해야한다 그거 고려안해서 10분동안 잡고있었음

https://school.programmers.co.kr/learn/courses/30/lessons/131704

내 풀이

def solution(order):
    temp = []
    i = 1
    now = 0
    
    while i != len(order)+1:
        temp.append(i)
        while temp[-1] == order[now]:
            now += 1
            temp.pop()
            
            if len(temp) == 0:
                break
        i += 1


    return now

처음에 문제가 잘 이해가 안됐다.

[1,2,3,4,5]의 순서로 있는택배를 order에서 요청한 대로 쌓아야하는데, 그게 불가능하다면 최대한으로 가능한 숫자를 리턴한다

그니까 1 2 3 4 5 -> 4 3 1 2 5 의 순서대로 쌓으라는 말이다

4번을 최초로 쌓으라했으니 1 2 3 번 까지 스택구조의 임시컨테이너에 넣어놓고 4번을 택배트럭에 싣는다.

다음 3번을 쌓아야하니 임시컨테이너에서 3번을 꺼낸다(스택구조) 참고로 pop은 리스트에서 젤 뒤에 요소를 삭제하고 그 값을 리턴한다. 

만약에 임시컨테이너에 더 쌓여진게 없으면 모두 택배에 넣어진거니까 break해서 빠져나온다.

다른사람의 풀이

https://velog.io/@namkun/프로그래머스-lv2-택배상자

https://school.programmers.co.kr/learn/courses/30/lessons/132265?language=python3 

내 풀이

from collections import defaultdict

def solution(topping):
    Top = defaultdict(int)
    for i in topping:
        Top[i] +=1
        
    Top_set=set()
    count=0
    for i in topping:
        Top[i] -=1
        Top_set.add(i)
        if Top[i] ==0:
            Top.pop(i)
        if len(Top) == len(Top_set):
            count +=1
    return count

defaultdict를 이용해서 있는거 추가해주고 어떤 key의 VALUE값이 0 이면 없애준다.

다른사람의 풀이

from collections import Counter

def solution(topping):
    Top = Counter(topping)
    count=0
    Top_set=set()
    for i in topping:
        Top[i] -=1
        Top_set.add(i)
        if Top[i] ==0:
            Top.pop(i)
        if len(Top) == len(Top_set):
            count +=1
    return count

이게 더 나은 코드같다. 다 똑같은데 counter를 쓰면 편하게 셀 수 있다!

코틀린 기반으로 쓰여짐

리스트 어댑터를 활용한 리사이클러뷰를 만들었는데 이상하게 값이 갱신이 안되는것이다.

좀 더 정확히는 뒤로가기와 같은 리로드를 해야 갱신이 되었다.

이상하다.. 분명히 다른거 할떄는 잘됐는데 뭐가 문제지 하고 절망에 빠져있는 찰나에 나와 비슷한 증상을 가진사람들을 발견했다

https://stackoverflow.com/questions/49726385/listadapter-not-updating-item-in-recyclerview

결론부터 얘기하면 비동기적으로 데이터를 받아올때 발생할 수 있는 문제이다.

주소값이 같은 경우에는 갱신하지 않기때문이다.

앱 내에서 참조가 변경되지 않는(주소값이 같은) 하나의 리스트를 유지하면서 값이 변경 될 경우 submitList 함수 호출 시 주소가 다른 리스트를 넘겨주어야 한다.

결론 그냥 submitList할때 tolist() 로 바꿔주면됨. 깊은 복사를 해야하나 생각하고 있었는데 그럴필요 없어 다행이다.

myRecyclerViewAdapter.submitList(boardDataList.toList())

해결하고 나니 보이는 글들.. 한글로도 찾아보는 습관을 들이자

참고

https://bb-library.tistory.com/257