코딩일상

Next.js Dynamic Import 완벽 가이드목차Dynamic Import란?왜 사용하는가?ssr: false의 의미loading의 역할실전 예시Dynamic Import란?코드 분석const NaverMap = dynamic(() => import("@/components/map/NaverMap"), { ssr: false, loading: () => ,});한 줄 요약: "필요할 때만 가져오기"쉬운 비유일반 import (정적 import):여행 갈 때 모든 짐을 다 들고 출발├─ 수영복 (바다 안 가도 챙김)├─ 등산화 (산 안 가도 챙김) ├─ 스키복 (겨울 아닌데도 챙김)└─ 가방 무거움! 😫→ 처음부터 다 가져가니까 느림dynamic import (동적 import):필요한 것만..

서론: 공부하다 보니 개념이 너무 복잡하여 최대한 이해하기 쉬운 방향성으로 정리 하였다 웹용 이미지 형식 | WebP | Google for Developers더 작은 웹용 이미지를 만들고 변환기 다운로드 및 지원 링크를 가져오는 이 이미지 형식에 관해 알아보세요.developers.google.com 공식 문서에서 설명WebP는 웹 이미지에 뛰어난 무손실 및 손실(lossy) 압축을 제공하는 최신 이미지 형식입니다. 웹마스터와 웹 개발자는 WebP를 사용해 더 작고 풍부한 이미지를 제작하여 웹을 더 빠르게 만들 수 있습니다.WebP 무손실 이미지는 PNG 이미지보다 26% 더 작습니다. WebP 손실(lossy) 이미지는 동등한 SSIM 품질 색인에서 비슷한 JPEG 이미지보다 25~34% ..

Spring Boot HikariCP & R2DBC 커넥션 풀 총정리 1️⃣ HikariCP 역사와 도입 배경 초기 Spring Boot / Spring에서는 기본 커넥션 풀로 Commons DBCP, C3P0, Tomcat JDBC Pool 사용문제점:성능이 느림 (과도한 synchronized)커넥션 누수, stale connection 문제멀티스레드 환경 불안정2012년, Brett Wooldridge가 성능과 안정성을 높인 HikariCP 개발이름: 일본어 光(Hikari) = “빛”, 경량 & 고속 의미설계 철학: 최소 동기화, lock-free 구조, JDBC 표준 준수Spring Boot 2.x부터 공식 기본 커넥션 풀로 채택이유: 성능, 안정성, 낮은 메모리 오버헤드, 유지보수 신뢰성 2..

문제의 화면 헤결 공식 문서 Restore Dashboard backup | Supabase DocsLearn how to restore your dashboard backup to a new Supabase projectsupabase.com 백업 시작 1)백업 파일 다운로드 2)다운로드 결과*storage도 있다면 해당도 다운 3)백업 파일 반영(supabase 서버에) 명령어(터미널 실행)[]부분은 여러분의 신규 데이터베이스 config 값으로 대체 그리고 다른 기타 요소들도 확인후 수정postgresql://postgres.[PROJECT-REF]:[YOUR-PASSWORD]@aws-0-us-east-1.pooler.supabase.com:5432/postgres PGPASSWORD=[..

서버 운영하면서 메모리/CPU뿐 아니라 inode 모니터링도 꼭 필요합니다.📌 inode란 무엇인가?1. inode의 정의inode(index node) = 리눅스/유닉스 계열 파일시스템에서 파일의 메타데이터를 저장하는 자료구조.파일의 실제 데이터가 아니라, 파일을 설명하는 정보를 담고 있음.예를 들어 ls -i 명령어로 보면 파일마다 inode 번호가 있어요: 123456 myfile.txt여기서 123456이 inode 번호입니다.2. inode 안에 들어 있는 정보파일 유형 (일반 파일, 디렉토리, 링크 등)파일 소유자, 그룹접근 권한 (rwx)파일 크기생성/수정/접근 시간 (ctime, mtime, atime)실제 데이터 블록의 위치 (디스크 상 오프셋 주소)링크 수 (하드링크 개수)📌 즉, ..

수퍼베이스 대시보드에서 아래 쪽으로 이동을 한후에 사용하고자하는 신규 스키마를 expose 시켜주면 된다. { code: 'PGRST106', details: null, hint: null, message: 'The schema must be one of the following: public, graphql_public, tcrc'} 추가로 이렇게 설정한 이후 @supabase/supabase-js 라이브러리 통해서 할경우아래 코드와 같이 .schema를 지정해서 사용한다 하지 않을경우 public이 default이다.// Initialize the JS clientimport { createClient } from '@supabase/supabase-js'const supabase = ..

기본적으로 MongoDB는 전체 RAM의 50%까지 사용 wiredTigerCacheSizeGB 설정을 조정  파일 내용 수정 아래 와 같이storage: wiredTiger: engineConfig: cacheSizeGB: 4 # 예: 4GB로 설정 수정후 아래 명령어를 통해  mongoDB 재시작sudo systemctl restart mongod 몽고 상태 확인 명령어sudo systemctl status mongodb   wiredTigerCacheSizeGB  설정 확인하는 방법 db.serverStatus().wiredTiger.cache["maximum bytes configured"]결과값 변환 ==> 7740588032 / (1024 * 1024 * 1024) ≈ 7.2..

1. MongoDB 프로세스 강제 종료현재 실행 중인 MongoDB 프로세스를 확인하고 강제로 종료 1번)sudo systemctl stop mongod 2번)ps aux | grep mongod MongoDB 프로세스 ID(PID)를 확인한 후, 해당 프로세스를 강제 종료합니다. sudo kill -9  2. /tmp/mongodb-27017.sock 파일 삭제MongoDB 프로세스를 종료한 후, 소켓 파일을 강제로 삭제합니다 sudo rm -f /tmp/mongodb-27017.sock3. /tmp 디렉토리 권한 확인 및 수정/tmp 디렉토리 권한이 적절한지 확인하고, 필요 시 수정합니다ls -ld /tmp/tmp 디렉토리의 권한이 drwxrwxrwt (즉, 1777)인지 확인합니다.권한이 올바르지 ..

💡이번 주 한 것 들과 느낀 점 들 🙋🏻‍♂️개인 1)개발 외주 프로젝트개발 외주 프로젝트관련 클라이언트와 1차 점검을 통해 나왔던,2차 수정안들에 대한 것들을 처리 하였다. 더불어, 1차를 진행하면서 개인적으로 유저 경험에서 불편함이느껴질 것 같은(데이터 로딩 , 데이터 검색, 화면 비율에 대한 처리 등을) 추가 작업진행하였다.(요청은 따로 없었지만  이왕하는것 제대로 만들어 보고싶은 마음이 좀더 있었다) 기존 코드들을 정리하고 추후 수정 과 미래의 나를(?)위해서 주석들을 추가 및  정리하였으며, 코드들또한 한번 리팩토링 하였다. 사실 이번주는 딱히 뭔가 개인적인 일은 크게 못했당...하루에 30분이라도 해야하는 습관을 기르자.. 회사만 다녀오면 왜 이렇게 진이 빠지는지 일이 몰려서 그런가. 2..

Next.js에서 설정 파일인 next.config.js는 웹사이트의 동작을 최적화하고 보안을 강화하며 개발 환경과 실제 배포 환경 간의 차이를 관리할 수 있는 중요한 역할을 합니다. 이 문서에서는 설정 파일을 구성하는 방법과 각 기능의 사용 이유, 장점, 단점, 그리고 코드 예제를 통해 자세히 설명하겠습니다목차리다이렉션 설정하기환경 변수외부 이미지 도메인 허용커스터마이징 국제화 설정보안 헤더 설정하기1. 리다이렉션 설정하기사용 이유오래된 URL을 새로운 URL로 연결할 때 유용합니다.SEO를 유지하고 사용자 경험을 개선할 수 있습니다.장점사용자가 잘못된 URL로 접속해도 자동으로 올바른 페이지로 이동합니다.검색 엔진 크롤러가 새로운 URL을 쉽게 인식합니다.단점많은 리다이렉션 규칙이 있을 경우 관리가 ..