분류 전체보기 (399) 썸네일형 리스트형 [복지맵 프로젝트] 백엔드 환경설정 - 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 [칼럼들] 쿼리를 실행하고, 피봇 테이블 형태로 자료를 보여줌 \errverbosduklook.tistory.com 특정 테이블만 백업해서 복원하기특정 테이블만 백업하려면, 기존 백업 방식에서 -t 형식만 추가로 적어주면 된다. 예를 들어 pg_dump 를 사용해서 백업 시 다음과 같이 명시하면 해당 사용자의 데이터베이스에서 tablename 에 해당하는 테이블만 백업되어 .sql 파일로 저장된다.pg_dump -U username -d dbname -t tablenam.. 디자인 패턴 공부 개요, 디자인 패턴 개념과 학습을 시작한 이유 디자인 패턴의 정의와 포스트 작성 이유 소프트웨어 개발에서 디자인 패턴은 보다 효율적이고 견고한 코드를 만들기 위해 일반적인 문제에 적용할 수 있는 재사용 가능한 솔루션이라고 정의되어 있다. 이런 정의에 앞서 자바스크립트, 타입스크립트, 리액트, 넥스트 등에 거쳐 동일한 자바스크립트 언어를 적어보면서, 내가 적은 코드를 보다 일반화되고 더 효율적인 방식으로 적을 수 없을까에 대한 고민을 계속 했다. 반복되는 코드, 동일하지만 약간 씩 달라서 추상화하기도 애매한 그런 코드들, 어떤 알고리즘을 생각하더라도 결국 변수 하나 선언하고, 그 변수를 반복문 등을 사용해서 어떻게든 짜집기 해서 동작하게 만드는 답 없는 코드들.. 혼자 아무리 고민을 해도 나의 머리에서만 노는 것이기 때문에, 이러한 코드들을 바라보면서.. 크롤링이 되긴 되었는데.. 크롤링이 되긴 되었다. 내가 만든 사이트를 구글 셔치 콘솔에 색인을 요청하고 대기한지 1주일 드디어 조금씩 색인이 된 페이지들이 구글에 보이기 시작했다. 그런데, 간과한 점이 한 가지 있었다. 아니 몰랐다고 보는게 맞을 것 같은데, 제목 밑으로 해당 대상의 명언이 아니라 명언 목록 페이지 전체에 대한 설명 글이 표시되고 있다는 점이다. 이 부분은 다시 알아보고 명언의 내용이 표시되도록 변경해야 할 것 같다. 이전 1 ··· 10 11 12 13 14 15 16 ··· 50 다음
