오늘도 맑음

react-hook-form의 handleSubmit으로 제출 시 새로고침을 하지 않는 장점이 있습니다.e.preventDefault() 기능을 자체적으로 지원한다고 보면 됩니다.이 기능을 활용하여 검색창을 만들어보았습니다! 목차1. UI2. 구현 (react-hook-form의 handleSubmit 활용)3. 결과화면4. 개발 과정에서 발생한 문제1. UI 2. 구현위와 같은 검색창을 만들기 위해 다음과 같이 필요합니다.- input 태그- svg 아이콘 1 => 제출(엔터 눌렀을 때도 동작)- svg 아이콘 2 => 빈 값으로 제출이 3개의 태그를 크게 감쌀 form 태그가 필요합니다. import SvgIcon from "@/components/Icon/SvgIcon";import useQuery..

풀이bfs 순회를 하면서 핵심은 이중 리스트로 방문처리를 해야한다는 것입니다.visited[화면 이모티콘 개수][클립보드 이모티콘 개수] 로 방문처리를 합니다.범위를 넘어가는 값에 대해서는 더 이상 진행하지 않는 것도 핵심입니다. import sysfrom collections import dequeMAX = 1000 # 최대 화면 이모티콘 수 (2  정리생각해내는 것이 쉽지 않았던 문제인 만큼 문제를 분석해야한다.다음 일을 처리하기 위해서 (화면 이모티콘, 클립보드 이모티콘) 조합이 필요하면 이를 2차원 배열로 방문표시하면 된다.예) 만약 3개의 조합이다? => 3차원 배열 ✔ bfs 문제1. visited 배열의 요소 (몇 개로 구성하면 좋을지: 차원의 수)2. 범위를 어떻게 구성하면 좋을지를 먼저 ..

문제첫째줄에 N, r, c가 주어질 때 r행 c열을 몇번째로 방문했는지 출력한다.풀이이 문제의 경우 결국 스스로 해결하지는 못했지만, 유튜브 강의와 해설을 보고 이해할 수 있었다. - N = 1 x 4개 =>  N = 2를 만든다.- N = 2 x 4개 =>  N = 3을 만든다.관계를 본다면 N = 2를 해결하기 위해서는 4사분면으로 나누고 N = 1을 재귀적으로 호출하면 해결가능하다.사분면으로 나누기 위해서 절반을 기준으로 둔다.half = 2 ** (N-1)  그리고 half를 기준으로 대소 관계를 비교하여 사분면을 나눈다.N = 2일 때 i, j는 (3,3) 이지만 N = 1을 호출할 때 i, j는 (0,0)이다.만약 i, j가 half를 기준으로 넘어간다면, half를 자르면 된다.  # 사분면..

문제 풀이괄호 문제와 비슷한 방식이다.문자열을 순회하며 특정 패턴 문자열이 있을 때 제거하고, 변형된 문자열로 계속해서 반복 연산하는 문제이다. ⭐ [문자 추가] -> [조건 검사] -> [패턴 찾아 제거]1. base 문자열을 순회하며 스택에 각 문자(c)를 넣는다.2. 스택의 크기가 sub 문자열의 개수보다 작으면 같은 길이의 문자열 비교가 불가하므로, 다음 반복으로 넘어간다(continue 사용)2. sub 문자열과 스택의 끝에서 sub 문자열의 길이만큼 슬라이싱한 문자열을 비교하여 같다면 제거한다. (del 사용) # 문자열 폭발import sysinput = sys.stdin.readlinedef solution(base, sub): sub_len = len(sub) stack = [..

해결방안가장 적은 두 값을 더하여 다시 넣는 행위를 반복하여 쉽게 해결할 수 있었다.시간 복잡도는 O(NlogN)이 나온다.   또 다른 방법으로는 2개의 큐를 이용하는 방법이 있다. 첫번째 큐: a는 cards 리스트를 정렬한 다음 만든 큐두번째 큐: b는 빈 큐 아래의 코드에서 보면 두 큐의 첫번째 원소끼리 비교하여 더 적은 숫자를 리턴하는데, a 큐에서는 이미 정렬된 상태이기 때문에 맨 앞이 가장 적은 숫자임을 보장한다.b 큐에서는 더한 값들을 순서대로 추가하는데, 이럴 경우 뒤에 더한 값들이 무조건 먼저 더한 값들보다 클 수 밖에 없다.따라서 b의 맨 앞이 가장 적은 숫자임을 보장한다. 이 경우도 힙과 마찬가지로 시간복잡도 O(NlogN)이 나온다. 정리일반적으로 가장 큰 원소를 뽑아내라? 이건 ..

정보구조도 (IA, Information Architecture)는 페이지의 구조를 한장에 나타낸 그림입니다.또한 Depth는 페이지에 도달하기 까지의 단계(깊이)를 의미합니다. 이번에 공모전에 제출할 기획서가 필요한데, 심사원분들에게 IA를 보여주면 좋을거 같아 작성하게 되었습니다. 구조1. 스플래시 화면 > 로그인/회원가입 > 홈으로 진행된다는 것을 표현하였습니다. 특히 저희 서비스는 웹이지만 모바일을 생각하고 만들었기 때문에 로그인 후 이용할 수 있는 서비스로 기획되어있습니다. 2. 홈, 코치 리스트 등 주요 페이지를 1 Depth로 두었습니다. 또한 각 페이지의 UI 컴포넌트 혹은 기능을 2 Depth로 두었습니다.코치 상세 페이지의 상세 정보, 자기소개, 활동 센터 지도, 리뷰 등은 UI 컴포넌..

큐 : FIFO 구조로 들어온 순서대로(enqueue) 나가는(dequeue) 자료구조이다.우선 순위 큐 : 우선 순위가 높은 것이 먼저 나가는 자료구조이다. 우선 순위 큐를 구현하는 방법은 다양하지만 그 중 heap 이라는 자료구조에서 enqueue, dequeue하는 방법이 가장 시간이 적게 걸린다. heap완전 이진 트리 형태로 우선 순위 큐를 구현하기 위해 만들어진 자료구조이다. ✔ min heap(최소 힙)"부모 노드 ✔ max heap(최대 힙)"부모 노드 > 자식 노드" 인 완전 이진 트리 Enqueue와 Dequeuemin heap 자료구조를 바탕으로 설명하겠습니다. "우선 순위가 높다"는 것은 숫자가 더 작다는 의미 [Enqueue]1) 새로운 노드를 마지막 노드에 추가2) 부모 노드와 ..

하나의 SVG 파일로 색상, 사이즈를 변경하여 사용하기 위하여 공통 컴포넌트를 생성하였습니다.우선 vite-plugin-svgr을 설치해야합니다. [설치하는 법]https://hazzuu.tistory.com/entry/vite-plugin-svgr%EB%A1%9C-%EC%95%84%EC%9D%B4%EC%BD%98-%ED%99%94%EB%A9%B4%EC%97%90-%EB%B3%B4%EC%97%AC%EC%A3%BC%EA%B8%B0 vite-plugin-svgr은 svg 파일을 컴포넌트로 만들어주는 플러그인입니다.따라서 사용할 때도 컴포넌트 파일 임포트하는 것처럼 가져오면 되는데 주의할 점은 ?react를 붙여서 가져와야됨!  svg 파일을 하나 저장합니다.변경하고자 하는 속성을 current로 변경합니다...

프로세스란 프로그램이 실행중인 상태를 의미합니다. 더 정확히 얘기하면 프로그램이 메모리에 적재되어 CPU를 할당받아 자신의 작업을 수행하는 것를 의미합니다. cf) 디스크 Vs 메모리사실 메모리도 종류가 여러가지입니다.- HDD (Hard Disk Drive)  - 비휘발성 저장 장치로, 시스템이 꺼져도 데이터가 유지될 수 있는 디스크 (보조 기억 장치)- RAM (Random Access Memory)  - 프로그램 실행에 필요한 데이터와 명령어를 CPU로 빠르게 전달할 수 있는 메모리 (주 기억 장치)  - 이 메모리가 클수록 동시에 많은 일을 처리할 수 있습니다. 메모리에 적재프로그램은 보조 기억장치(ex. HDD)에 저장되어 있습니다. 이것을 "실행"하면 주 기억 장치(RAM) 메모리에 적재됩니다..

AWS EC2는 물리적인 서버를 대신 하는 가상화 서버라고 생각하면 됩니다.시간과 비용이 많이 드는 물리적인 서버 대신 AWS의 힘을 빌려 Node.js 프로젝트를 배포해봅시다!목차1. EC2 인스턴스 생성하기2. EC2 인스턴스에 접속하기3. EC2 인스턴스에 Node.js 설치하기 (feat. nvm 설치)4. Node.js 프로젝트 실행하기5. PM2로 Node.js 애플리케이션 백그라운드 실행하기1. EC2 인스턴스 생성하기웹 서버의 이름을 작성합니다.웹 서버의 근간이 될 운영체제를 선택하는 데, 프리 티어 사용가능한 Ubuntu를 선택했습니다.키 페어 생성을 누르면 이름.pem 이라는 파일이 하나 다운로드 받아집니다. 이후에 인스턴스를 안전하게 접속하기 위해 꼭 필요하니 잘 보관해둡니다.네트 워..