분류 전체보기66 [React] useState로 드롭다운 필터버튼 만들기 위에 사진처럼 필터버튼 드롭다운 형태로 만들어야하는 상황인데요, 먼저 input 태그의 select option과 가장 유사하게 생겼다는 생각이들었지만... 커스텀하는게 더 어렵겠단 생각이 들어서 버튼과 useState를 이용해 구현해보았습니다. 구현 목표 1. 버튼이 눌리면 한개짜리 버튼은 숨기고 확장된 모습을 렌더링한다. 2. 선택한 옵션에 맞게 글씨가 바뀌게 한다. 구현 방법 및 설명 버튼을 만들기 위해선 두개의 상태를 관리 해주어야합니다. 1. 버튼이 확장된 상태인가? isExpanded (boolean) isExpanded가 false일 땐 버튼한개가 보이고, default입니다. 한개 버튼을 누르면 isExpanded가 ture가 됩니다. articleBtnExpandHandler() isEx.. 2023. 3. 4. [Javascript] 백준 11724: 연결 요소의 개수 문제 방향 없는 그래프가 주어졌을 때, 연결 요소 (Connected Component)의 개수를 구하는 프로그램을 작성하시오. 입력 첫째 줄에 정점의 개수 N과 간선의 개수 M이 주어진다. (1 ≤ N ≤ 1,000, 0 ≤ M ≤ N×(N-1)/2) 둘째 줄부터 M개의 줄에 간선의 양 끝점 u와 v가 주어진다. (1 ≤ u, v ≤ N, u ≠ v) 같은 간선은 한 번만 주어진다. 출력 첫째 줄에 연결 요소의 개수를 출력한다. 예제 입력 1 6 5 1 2 2 5 5 1 3 4 4 6 예제 출력 1 2 예제 입력 2 6 8 1 2 2 5 5 1 3 4 4 6 5 4 2 4 2 3 예제 출력 2 1 문제 풀이 백준 2606 바이러스 문제의 아주 조금 응용된 버전이다. 1번 예제의 연결 관계를 다음의 그래.. 2023. 3. 2. [Javascript] 백준 2606: 바이러스 문제 신종 바이러스인 웜 바이러스는 네트워크를 통해 전파된다. 한 컴퓨터가 웜 바이러스에 걸리면 그 컴퓨터와 네트워크 상에서 연결되어 있는 모든 컴퓨터는 웜 바이러스에 걸리게 된다. 예를 들어 7대의 컴퓨터가 과 같이 네트워크 상에서 연결되어 있다고 하자. 1번 컴퓨터가 웜 바이러스에 걸리면 웜 바이러스는 2번과 5번 컴퓨터를 거쳐 3번과 6번 컴퓨터까지 전파되어 2, 3, 5, 6 네 대의 컴퓨터는 웜 바이러스에 걸리게 된다. 하지만 4번과 7번 컴퓨터는 1번 컴퓨터와 네트워크상에서 연결되어 있지 않기 때문에 영향을 받지 않는다. 어느 날 1번 컴퓨터가 웜 바이러스에 걸렸다. 컴퓨터의 수와 네트워크 상에서 서로 연결되어 있는 정보가 주어질 때, 1번 컴퓨터를 통해 웜 바이러스에 걸리게 되는 컴퓨터의 수.. 2023. 3. 1. [Typescript] AxiosError의 response받아오기, AxiosError Type Error의 Type 구글 로그인 버튼을 유저가 누르면 서버에서 리다이렉트할 주소를 리턴해주는 방식으로 소셜로그인 로직을 정했습니다. 이때 status가 200으로 오지않고 301로 오는데 이게 AxiosError로 나옵니다. 따라서 error에 응답값을 꺼내서 사용해야했는데요, error가 unknown이라는 타입에러가 떴습니다. 찾아보니 Typescript에서 catch 내부의 error는 unknown 이라고 하네요. 이는 catch 블록 내부의 에러가 인스턴스가 될거라고 보장할 수 없기 때문에 타입스크립트가 런타임에러를 피하고자 unknown처리를 해둔 것 입니다. 따라서 적절히 error 타입을 지정해주어야하는데요, 아래와 같은 방식은 모두 에러가 발생합니다. 해당 에러는 catch 블록 내부에.. 2023. 2. 26. [Javascript] 백준 1012: 유기농 배추 문제 차세대 영농인 한나는 강원도 고랭지에서 유기농 배추를 재배하기로 하였다. 농약을 쓰지 않고 배추를 재배하려면 배추를 해충으로부터 보호하는 것이 중요하기 때문에, 한나는 해충 방지에 효과적인 배추흰지렁이를 구입하기로 결심한다. 이 지렁이는 배추근처에 서식하며 해충을 잡아 먹음으로써 배추를 보호한다. 특히, 어떤 배추에 배추흰지렁이가 한 마리라도 살고 있으면 이 지렁이는 인접한 다른 배추로 이동할 수 있어, 그 배추들 역시 해충으로부터 보호받을 수 있다. 한 배추의 상하좌우 네 방향에 다른 배추가 위치한 경우에 서로 인접해있는 것이다. 한나가 배추를 재배하는 땅은 고르지 못해서 배추를 군데군데 심어 놓았다. 배추들이 모여있는 곳에는 배추흰지렁이가 한 마리만 있으면 되므로 서로 인접해있는 배추들이 몇 군.. 2023. 2. 24. [Javascript] 백준 1654: 랜선 자르기 문제 집에서 시간을 보내던 오영식은 박성원의 부름을 받고 급히 달려왔다. 박성원이 캠프 때 쓸 N개의 랜선을 만들어야 하는데 너무 바빠서 영식이에게 도움을 청했다. 이미 오영식은 자체적으로 K개의 랜선을 가지고 있다. 그러나 K개의 랜선은 길이가 제각각이다. 박성원은 랜선을 모두 N개의 같은 길이의 랜선으로 만들고 싶었기 때문에 K개의 랜선을 잘라서 만들어야 한다. 예를 들어 300cm 짜리 랜선에서 140cm 짜리 랜선을 두 개 잘라내면 20cm는 버려야 한다. (이미 자른 랜선은 붙일 수 없다.) 편의를 위해 랜선을 자르거나 만들 때 손실되는 길이는 없다고 가정하며, 기존의 K개의 랜선으로 N개의 랜선을 만들 수 없는 경우는 없다고 가정하자. 그리고 자를 때는 항상 센티미터 단위로 정수길이만큼 자른다.. 2023. 2. 23. 이전 1 ··· 3 4 5 6 7 8 9 ··· 11 다음
