분류 전체보기 (366) 썸네일형 리스트형 [복지맵 프로젝트] ~ 2024.04.29 진행사항 점검[CH03] 현재 까지 진행사항아래 시연 GIF 는 27일 경에 진행된 것인데, 각 SVG 맵에서 구분된 구역을 포커스 하면 해당 지역의 서비스 상세 내역이 아코디언 형식으로 조회할 수 있도록 목록이 렌더링되는 형태로 구현해두었다. 그리고 현재는 카카오 MAP SDK 를 사용해서 각 구/군별로 복지기관의 위치를 다중 마커로 표시하였고, 아래 이미지에는 안 나와 있지만, 현재 사용자의 좌표 또한 마커로 표시되도록 해두었다. 사용자 위치 같은 경우에는 HTTPS 에서만 지원해준다는데, 어차피 배포할 때는 HTTPS 로 할 것이므로 큰 문제는 없을 듯하다. 향후 방향성길찾기 기능길찾기 기능을 구현하려고 한다. 사용자가 서비스 목록을 알더라도 그 기관이 어디에 위치해 있는지, 현재 위치에서 얼마나 멀어져 있는지 .. [복지맵 프로젝트] 2024.04.25 ~ 26 진행사항 점검 [CH02] 프로젝트의 컨셉현재 생각하고 있는 프로젝트의 컨셉은 사용자가 사이트에 접속을 하면 부산 행정 구역을 바로 확인할 수 있게 하고, 각 행정 구역을 클릭하면 구/군 별로 사용자가 이용할 수 있는 복지프로그램/기관 목록을 리스트 형식으로 표시하는 것이다. 이 때 사용자가 정확한 위치 정보를 확인 하고자 한다면, 이 때는 리스트의 상단에 지도보기(길찾기) 아이콘을 클릭하면 즉시, 해당 지역의 위치좌표와 마커가 표시되도록 한다. 현재 까지 구현 단계(2024.04.25 ~04.26) 위 컨셉에 따라 사용자가 루트 페이지에 접속하면 부산의 각 행정구역을 시각적으로 확인하고 선택할 수 있도록 해당 이미지를 SVG 를 사용하여 각 행정구역 별로 이벤트를 등록 가능하도록 작업하였다. 피그마로 작업하였기 때문에, 그나.. [복지맵 프로젝트] 백엔드 환경설정 - NestJS (+Docker + Postgres + TypeORM + 유효성 검사 패키지) 이전 환경 셋팅 - Vite + React + PWA [복지맵 프로젝트] 환경설정 - Vite 기반 리액트 웹 PWA 설정PWA 설정 이유모바일 환경에서도 웹을 앱과 유사한 환경에서 구동할 수 있다는 것은 많은 이점을 준다. 현재 내가 개발하고자 하는 웹 사이트는 모바일에서도 오프라인 환경에서도 많은 사용자duklook.tistory.com 복지맵에서 사용할 백엔드 언어이번 프로젝트에서 사용되는 언어는 NestJS 이다. 이는 NodeJS Express 를 기반으로 구축된 백엔드 프레임워크로서 DI, IoC 등을 적극적으로 도입하여 객체지향 프로그래밍의 강점을 최대한 살린 방식으로 보다 안정적인고 확장 가능한 백엔드 환경을 구축할 수 있도록 도와준다. 이번 프로젝트에서는 새롭게 D.. [자료구조] 이진(+탐색)트리 전 개요 이번 시간에는 이진트리에 대해 알아보는 시간을 가져보고자 한다. 자세한 메서드 구현 내용보다는 앞으로 정리해 나갈 이진트리에 대한 개요라고 볼 수 있다. 이진 트리 이진트리는 각 노드가 왼쪽 자식과 오른쪽 자식으로 불리는 리프 노드를 갖는 데이터 구조를 의미한다. 이진트리에서 각 노드는 값을 가질 수 있고, 이들은 다시 자신만의 자식 노드를 최대 2개 가질 수 있는 형식으로 아랫 방향으로 뿌리를 넓혀 가는 특징을 보인다. 이진트리 만들기 이진트리의 Node 구조도 앞서 언급한 특성에 맞게 데이터(값), 자식을 참조하는 2개의 포인터를 가지고 있다. 이 포인터들은 부모 노드의 자식 노드가 없는 경우를 가정해서 null 이 기본 할당되고, 존재하는 경우에는 해당 자식 노드를 가리키는 참조를 담게 된다. 따라.. [복지맵 프로젝트] 프론트엔드 환경설정 - 폴더 구조 이번에 시작하는 프로젝트의 폴더 구조를 어떻게 가져갈지 고민이 많았는데, 대중적으로 권장되고 있는 형식을 참고하여 뼈대를 구성하기로 하였다. 현재 사용하고 있는 기술 스택이 Vite + ReactJS + Typescript + SCSS 를 사용하기 때문에 이를 염두에 두고 폴더 구조를 나누기로 결정했다. assets해당 파일은 index.html 등에서 사용되지 않고, 프로젝트 내부적으로 사용되는 정적 파일들을 담을 때 사용하기로 하였다. vite + react 생성 시 기본적으로 생성되어 있는 폴더인데, 제거하지 않고 그대로 사용하기로 했다. componets여기서는 전역적으로 재사용이 가능한 컴포넌트들을 보관하기로 하였다. 이 때 내부적으로 ui 폴더를 추가하기로 했다. 참고로 u.. NextJS 개발 서버에서 메모리 사용량이 80%를 넘었다. [들어가는 말] 이 포스트는.. 근본적인 해결책을 담고 있지 않다. 왜 메모리 사용량이 80% 넘은걸까에 대한 의문을 해결하기 위한 과정을 기록한 것으로 나름의 타협점을 찾아서 해결한 척하기로 하였다. 이 포스트를 참고한다면, 이런 일도 있을 수 있구나의 참고용도로 보시면 좋을 것 같다. VSCODE 로 NodeJS 를 실행하고 개발 후 1시간이 지났을 무렵 아무리 많은 사이트를 켜두고 VSCODE 를 사용해도 아무런 렉이 걸리지 않았는데, 어제 오늘 렉이 심하게 걸리길래 윈도우10의 작업 관리자에서 하드웨어 사용량을 확인해보았다. 아니나 다를까. 메모리 16기가 중 85프로 이상을 사용하고 있으니, 렉이 이렇게 심하게 걸릴 수 밖에 VSCODE 를 종료하고 나서는 26프로 까지 확 줄었다. 즉, 이 문.. NextJS 14.1 버전 이상에서 useSearchParams() should be wrapped in a suspense boundary at page 에러가 발생하는 경우 해결책 에러원인 및 해결책 기능을 추가하고 다시 빌드하는 중 갑자기 빌드 에러가 발생하였다. 해당 에러가 발생하는 이유는 useSearchParams() 가 클라이언트 컴포넌트에서 동작하는데, 보통 빌드 과정을 거치는 동안에는 자바스크립트 파일을 다운로드 하기 전 까지는 해당 훅을 사용하는 페이지 전체는 빈 페이지가 된다. 따라서 이 문제를 해결하기 위해 데이터 페칭이될 때 까지 대기하는 Suspense 컴포넌트로 감싸주어야 한다. 현재 나의 컴포넌트는 사용자가 비밀번호 찾기 시 입력하는 form 을 하나의 컴포넌트로 구성하고 있다. 즉, Suspense 를 적용하려면 해당 컴포넌트를 감싸주어야 한다. // Form 컴포넌트 'use client' import { useRouter, useSearchParams.. [postgres] (본인 기준) 자주사용되는 psql 사용 예제 모음집 PSQL 명령어 모음집 [명령어 모음집] 다양한 명령어를 모아두는 아카이브 포스트 목적 명령어들을 모아두는 포스트 입니다. psql 명령어 일반 \copyright PostgreSQL 사용법 및 저작권 정보 표시 \crosstabview [칼럼들] 쿼리를 실행하고, 피봇 테이블 형태로 자료를 보여줌 \errverbos duklook.tistory.com 특정 테이블만 백업해서 복원하기 특정 테이블만 백업하려면, 기존 백업 방식에서 -t 형식만 추가로 적어주면 된다. 예를 들어 pg_dump 를 사용해서 백업 시 다음과 같이 명시하면 해당 사용자의 데이터베이스에서 tablename 에 해당하는 테이블만 백업되어 .sql 파일로 저장된다. pg_dump -U username -d dbname -t table.. 이전 1 ··· 5 6 7 8 9 10 11 ··· 46 다음
