'분류 전체보기' 카테고리의 글 목록
본문 바로가기

Travel to Frontend

(369)
"url" parameter is valid but upstream response is invalid 에러 Nextjs에서 제공하는 Image 태그를 사용하려하니 엑박이미지와 함께 "url" parameter is valid but upstream response is invalid 에러메시지가 표시됬다. 하지만 img태그는 정상작동한다.. 뭐지?(200이고 클라이언트, 서버둘다 문제가 없어보임) next.config.js에서 도메인 설정은 잘되어있다. images: { formats: ['image/avif', 'image/webp'], remotePatterns: [ { hostname: 'www.....com', }, { hostname: '...cloudfront.net', }, ], }, 아래 깃헙 이슈에는 4.0버전에서부터 안된다고하는 유저가있는데 내 버전은 14.1.4이다.. Nextjs에서 현재..
PWA 아이폰 설치시 주의할점 iOS 기기에서는 Chrome 브라우저를 사용하여 PWA(Progressive Web App)를 설치하는 것은 불가능합니다. iOS 기기에서는 Safari 브라우저를 사용하여 PWA를 설치할 수 있습니다. 하지만 하단의 크롬북 링크에서는 가능하다고해서 추가 확인이 필요합니다. 잘못된 정보일경우 알려주세요. https://support.google.com/chromebook/answer/9658361?hl=ko&co=GENIE.Platform%3DiOS&oco=2 프로그레시브 웹 앱 사용하기 - iPhone/iPad - Chromebook 고객센터 도움이 되었나요? 어떻게 하면 개선할 수 있을까요? 예아니요 support.google.com
Error [ERR_REQUIRE_ESM]: require() of ES Module 해결 Error [ERR_REQUIRE_ESM]: require() of ES Module /Users/yujin/caveduck/caveduck/proj.www/node_modules/json-with-bigint/json-with-bigint.js from /Users/.../node_modules/@qdrant/openapi-typescript-fetch/dist/cjs/fetcher.js not supported. Instead change the require of json-with-bigint.js in /Users/.../node_modules/@qdrant/openapi-typescript-fetch/dist/cjs/fetcher.js to a dynamic import() which is av..
fixed가 div안에서 넘칠때, 중앙정렬 방법 fixed를 적용하였더니 밖으로 튀어나오는 대참사가 벌어졌다. 상위 div에 relative를 넣어도 먹지않았는데 그 이유는 fixed는 viewport를 참조하기 때문이라고한다. left: 0; padding: 0 20px; width: 90%; right: 0; margin: 0 auto; 팝업의 상단이었기때문에 일정한 간격만 넣어주면되서 위처럼 코드를 작성하여 해결하였다. 이외 max-width값을 넣어서 일정크기이상부터는 고정하게하였다. + 추가 Fixed 버튼 중앙정렬 .fixed-button { position: fixed; bottom: 0; /* 화면 하단에 고정 */ left: 50%; /* 화면 중앙에 정렬하기 위해 왼쪽 50% 위치 설정 */ transform: translateX(-..
S3 업로드와 조회(HTTP get) 코드 샘플 S3 넣기 s3에 접근하기 위해서 aws-sdk라는 모듈이 필요하다. 한가지 주의할점은 await를 사용해야 s3에 온전히 넣을때까지 기다릴 수 있다. s3.upload(params)를 호출하면되는데 이때 params에 들어가는 옵션들을 확인해보자. params 옵션 * Bucket : s3에 만든 bucket이름을 넣는다. * Key : 해당 bucket에 넣을 폴더명을 입력한다. 데이터는 이곳 안에 들어간다. * Body : json 형태의 데이터가 들어간다. JSON.stringify() 처리를 해줘야한다. * ACL: ACL은 "Access Control List"의 약자로, AWS S3에서 객체(파일)에 대한 액세스 권한을 제어하기 위한 메커니즘이다. ACL은 S3 객체에 대한 여러 사용자 또는..
람다 코드 샘플(Nodejs, db조회) 람다 rds연동 샘플 코드입니다. 깃허브에 올려둬서 index.js만 수정해서 압축해서 aws에 올리면됩니다. !!주의할점은 압축시 해당 폴더를 압축하는것이 아니라 폴더 내부에서 연관폴더들을 선택후 압축해야 테스트시 오류가 발생하지않습니다. https://github.com/LeeEugene1/lambda-sample/tree/master GitHub - LeeEugene1/lambda-sample: 기본 람다 세팅 cli 압축파일 업로드용 기본 람다 세팅 cli 압축파일 업로드용. Contribute to LeeEugene1/lambda-sample development by creating an account on GitHub. github.com const mysql = require('mysql2..
Node 초간단 업데이트 방법(MAC과 Window) Mac 언제나 새로시작하는 프로젝트 시작은 신난다! Nextjs최신버전으로 프로젝트를 하려고하니까 이런 메시지가 떴다. You are using Node.js 18.12.1. For Next.js, Node.js version >= v18.17.0 is required. 스택오버플로우 검색해보니 노드 다운받고안해도된다고해서 간편하게 업그레이드를했다. ## (force) clear you npm cache sudo npm cache clean -f ##install n (this might take a while) sudo npm install -g n ##upgrade to the current stable version sudo n stable https://stackoverflow.com/questi..
테이블, 프로시져 만들기(Create table, Create Procedure) 예시 -- 테이블만들기 CREATE TABLE tb_user_rank ( id INT AUTO_INCREMENT PRIMARY KEY, creator_id INT, chat_cnt INT, user_cnt INT, slug VARCHAR(255) COMMENT '유저프로필', profile_picture VARCHAR(255), execution_date DATE ); -- 샘플데이터입력 INSERT INTO tb_user_rank (creator_id, chat_cnt, user_cnt, slug, profile_picture, execution_date) VALUES (1, 1, 0, 'user', 'https://example.com', 'https://example.com', '2023-12-01');..