오늘도 맑음

도로명 주소를 카카오 지도에 마커 표시하기 위해 "주소로 장소 표시하기" 기능을 사용하였습니다.KaKao Maps API(주소로 장소 표시하기)🧾 목차1. 과정2. 결과화면3. 전체 코드4. 트러블 슈팅1. 과정  1. 카카오 지도 스크립트 로드2. 주소로 장소 표시하기 (libraries=services)3. 타입 지정 1-1. 카카오 지도 스크립트 로드카카오 맵은 카카오 지도에 사용되는 기능들 (= 기초 설정) 파일을 이미 만들어 놓고 우리는 그것을 로드하여 사용하면 됩니다.이걸 v3 스크립트라고 합니다.v3 스크립트를 동적으로 로드하기위해 사용한다.스크립트의 로딩이 끝나기 전에 v3의 객체에 접근하려고 하면 에러가 발생하기 때문에로딩이 끝나는 시점에 콜백을 통해 객체에 접근할 수 있도록 해 준다...

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) 메모리에 적재됩니다..