개발 학습일지(TIL)48 TIL : next.js 커스텀 404 not-found 찾을 수 없는 페이지 구조 재설정 문제 상황 next.js 13.4 환경 페이지를 모바일에서도 맞춰 볼 수 있도록 반응형으로 페이지를 구성했다. 404페이지를 보여주는 app/not-found.js를 커스텀으로 구성하기 위하여 코드를 바꾸었지만 PC에서는 내용이 상관없이 적용되긴하나, 모바일에서는 모바일에 맞추어 반응형으로 페이지가 나타나지 않았다. PC에서 보이듯 보인 것이다. 해결방법 app 폴더 아래 동적 라우팅을 위한 폴더 및 페이지를 만들면 기대하는 대로 정상 작동한다. app/[...not-found]/page.js import {notFound} from "next/navigation" export default function NotFoundCatchAll() { notFound() return null } 참조 https.. 개발 학습일지(TIL) 2023. 5. 31. TIL : Next.js 13 Provider 문제 : 다크모드가 안 되는 이유 문제상황 개발환경 Next.js 13.4.2 TailwindCSS next-themes 라이브러리를 활용 다크모드를 구현하려했다. https://github.com/pacocoursey/next-themes GitHub - pacocoursey/next-themes: Perfect Next.js dark mode in 2 lines of code. Support System preference and any other theme wi Perfect Next.js dark mode in 2 lines of code. Support System preference and any other theme with no flashing - GitHub - pacocoursey/next-themes: Perfect .. 개발 학습일지(TIL) 2023. 5. 19. TIL : Next.js, useState와 useEffect 이용하여 댓글 실시간 업데이트 문제상황 Next.js 환경이다. Next.js는 리액트의 기능을 많이 통합하는 프레임워크로, 리액트 훅에 대한 지식이 있어야 한다. 현재 기능 상황은 댓글 작성시 새로고침을 해야만 댓글 목록이 업데이트 된다. 이 기능을, 댓글 작성시 새로고침 없이 댓글 목록이 최신화 되도록 업그레이드 하려고 한다. 코드는 다음과 같다. 'use client' import { useEffect, useState } from "react"; export default function Comment(props){ let [comment, setComment] = useState('') let [data, setData] = useState([]) useEffect(()=> { fetch('/api/comment/list?i.. 개발 학습일지(TIL) 2023. 5. 12. TIL : 트러블슈팅, NestJS 인터셉터 사용으로 리팩토링 (유저 로그인 정보에 따른 버튼 처리) NestJS, TypeORM, EJS 환경이다. 문제상황 : 네비게이션바의 Ajax 코드 에러 - 기존에 위 네비게이션바는 Ajax로 구현되어 있었다. 로그인정보 유무에 따라서 MyPage 버튼이 생기거나, Login 버튼에 변화가 생기도록 구현된 상태이다. - 문제는 작업시간이 길어지며 코드가 복잡해지자, 클라이언트 사이드에서 유저가 로그인 및 로그아웃 버튼을 동작시킬 때마다, 401 오류가 계속 발생했다. 파악해보니 아래 코드블록의 38번째 const userId = obj.value 코드가 제대로 작동되지 않고 있었다. - 나는 이 방식이 로그인 정보에 따른 변경이 필요한 적절한 응답을 못해주고 있다고 이해했고, 해결할 필요성을 느꼈다. 기존 코드 예시 : 네비게이션바 로그인 및 로그아웃 버튼 변경.. 개발 학습일지(TIL) 2023. 3. 31. TIL : typeORM 외래키 없이 조인. getRawMany() vs getMany() nestjs, typeorm mysql 사용환경 문제: 엔티티간 관계설정 없이 다른 엔티티의 컬럼 값 가져오기... 작업배경 게시글 내용이 기존에는 33 으로 단순하게 보여주고 있었다. 히지만 아무래도 유저들이 사용할 때는 화면에 표기되는 정보의 액션이 많아야 재미있을테니, 위 사진처럼 33 이외에 모임의 참가자, 대기자 명단을 불러오는 작업을 하려 한 것이다. 그래서 참가자, 대기자 명단을 추가하기 위해 쿼리를 새로 작성해야했다. 시도1 이 작업은 클럽 멤버스 엔티티를 기반으로한 리포지토리에서 값을 불러오면 된다. 참가자, 대기자를 단순하게 불러오는 것은 어렵지 않으나, 닉네임 정보는 user 라는 다른 테이블에서 조인해서 불러와야했다. 사실 엔티티간 관계설정을 했으면 별 고민없이 user 엔티티를 l.. 개발 학습일지(TIL) 2023. 3. 27. TIL : 리팩토링, 모듈화로 재사용성, 유지보수성 높이기(nestJS, EJS) Nest.js, ejs 사용 환경. 재사용성과 유지보수성을 높이기 위하여, 기존 코드를 모듈화 하였다. 이를 통해 각 게시판, 게시글 마다 반복적으로 들어가는 날짜 표기 기능에 대한 코드를 대폭 줄일 뿐만 아니라, 유지 보수의 편리성을 얻었다. 먼저, 어떤 상황이었는지 정리해본다. 문제상황 - 프로젝트 진행 초기에는 당장 기능 구현을 우선시하다보니, 일단 코드를 짜는데 급급하기만 했다. 그러다보니 동일한 기능에 대해서 조건문이 생기기 시작했고, 결국에 저렇게 코드가 길어져버렸다... - 반복문 코드가 들어가는 게시판 구역(HTML 테이블)은 최소 8개 이상(각 게시판, 인기글, 통합검색 결과, 각 게시판 검색페이지)이다. - 게다가 게시글 상세페이지 접속시 게시글 내부 본문의 시간표기, 본문 하단의 이전.. 개발 학습일지(TIL) 2023. 3. 24. TIL : NestJS, TypeORM, EJS 검색 결과 갯수 구하기 문제상황. NestJs, TypeORM, EJS 개발환경 검색결과는 불러와서 프론트 단에 연결해놨는데, 검색결과가 총 몇 개인지도 알려주고 싶다. 리포지토리 코드 async findClubPosts(data?: any) : Promise { //clubs 게시글 검색 { console.log(data, '리포지') const clubs = await this.clubRepository .createQueryBuilder('search') .leftJoinAndSelect('search.user', 'user') .where('search.title LIKE :s OR search.content LIKE :s', { s: `%${data.term}%` }) .orderBy("search.id", "DESC.. 개발 학습일지(TIL) 2023. 3. 22. TIL : Nestjs, 특정 페이지(URL) 접근만 미들웨어 예외 처리 nest.js 및 ejs 템플릿 엔진 사용환경. - nestjs를 사용하는 이번 팀 프로젝트에서는 클라이언트 사이드에서 페이지 렌더링을 위해 반복적으로 사용되는 코드를 줄이고, 유지보수성을 높이기 위하여 express-ejs-layouts 라이브러리를 사용하기로 하였다. - 이 라이브러리를 사용하기 위하여 기존에는 app.use 전역 미들웨어를 선언하며 header와 footer 부분을 처리하였다. 기존의 코드 및 화면 상태 //main.ts import { ValidationPipe } from '@nestjs/common'; import { NestExpressApplication } from '@nestjs/platform-express'; import { NestFactory } from '@ne.. 개발 학습일지(TIL) 2023. 3. 13. [TIL] : Nest can't resolve dependencies, 의존성 주입! @Injectable() 데코레이터 잘못 쓰면 에러가 발생한다. 문제상황 및 에러 메시지 [Nest] 19112 - 2023. 03. 12. 오후 9:22:49 ERROR [ExceptionHandler] Nest can't resolve dependencies of the SearcherService (?). Please make sure that the argument SearcherRepositoryRepository at index [0] is available in the SearcherModule context. Potential solutions: - Is SearcherModule a valid NestJS module? - If SearcherRepositoryRepository is a provider, is it part of the current.. 개발 학습일지(TIL) 2023. 3. 12. [TIL] CSS 적용이 안 되는 이유. 일부 페이지만 CSS 적용 안 되는 오류 문제 상황 nestjs 환경에서 ejs, express-ejs-layouts 라이브러리를 사용하여 개발을 하고 있다. 메인페이지/ 목록 조회 페이지를 구현할 때까지는 CSS 적용에 문제가 있다는 것을 느끼지 못했다. 그러나 개인 유저 페이지를 구현하고 나니, 유저 개인 페이지에 CSS 가 적용되지 않는 것을 알게 됐다. 시도1 사진 좌측의 디렉토리 구조/폴더 경로를 변경해본다. 폴더를 새로 만들어서, 파일 위치를 변경해보았다. 이리저리 시도해보았지만 변함이 없었다. 여전히 어떤 페이지는 CSS 적용이 되고, 개인 유저페이지는 적용이 되지 않았다. 시도2 아래 블로그를 참고해보았다. https://velog.io/@sungmo738/CSS-link%EA%B0%80-%EC%95%88%EB%90%A0%EB%9.. 개발 학습일지(TIL) 2023. 3. 11. [TIL] : ERROR [ExceptionsHandler] No metadata for * was found. EntityMetadataNotFoundError: No metadata for * was found. 이 에러로 인해 고생하고 있었다. ERROR [ExceptionsHandler] No metadata for "SearcherRepository" was found. EntityMetadataNotFoundError: No metadata for "SearcherRepository" was found. SearcherRepository 파일을 찾을 수 없다는 에러이다. 구글링을 해보면 이 경우 두 가지가 문제라며 해결 방법을 제시한다. 1) 해당 모듈의 Entity파일에 @Entitiy() 데코레이터를 적지 않은 경우 (위 사진은 정상상태) 2) entity 경로가 제대로 설정 않은 경우 (위 사진도 문제가 없다) 하지만 나의 경우, 위의 문제가 없었는데 계속 오류가 생겼다. 문제는 다른 곳에 있었다. .. 개발 학습일지(TIL) 2023. 3. 8. [TIL] : Nestjs 에서 express-ejs-layouts 사용하기 require() vs import() 작업 배경 및 문제상황 Nest.js 사용환경이다. - 기존에 node.js, express에서 express-ejs-layouts 라이브러리를 잘 사용한 바가 있었다. - nestjs를 사용하는 이번 프로젝트에서도 express-ejs-layouts 사용하고 싶었다. 그래서 메인으로 사용하고 있는 main.ts에 다음과 같이 ejs 설정 및 express-ejs-layouts작업을 해주었다. - 참고로, express-ejs-layouts 라이브러리는 ejs를 사용하기 위한 기본 설정 이외에 app.use를 사용한 미들웨어를 통해 프로그램이 작동하도록 설정시켜줘야 한다. import { ValidationPipe } from '@nestjs/common'; import { NestExpressAppli.. 개발 학습일지(TIL) 2023. 3. 6. 이전 1 2 3 4 다음