생성 AI
-
(Stable Dffusion WebUI) Lora를 적용해서 이미지를 생성해보자!
Lora에 대해서는 앞서 설명을 드렸습니다. 2023.10.17 - [이미지 생성 AI 정보] - Stable Diffusion 용어 정리 Checkpoint, VAE, Lora, Embedding, Hyper network에 대해 알아보자. Stable Diffusion 용어 정리 Checkpoint, VAE, Lora, Embedding, Hyper network에 대해 알아보자. Stable Diffusion 이란 대략적으로 노이즈에서 이미지를 생성하는 기법이라고 대충 알고 넘어가시면 되겠습니다. 우리는 논문적인 접근보다는 이미지 한번 생성해 보는게 중요하니까요! 하지만 Stabl lookchemy.tistory.com 그리고 txt2img로 한번 생성 해보셨나요? 2023.10.31 - [이미지 ..
-
[Stable Diffusion WebUI]텍스트로 동영상을 생성해 봅시닷(feat. AnimateDiff)
우선 결과부터 말씀드리겠습니다. AnimateDiff는 기본적으로 모델이 이미지를 잘 뽑아줘야 조금 더 잘나옵니다! 즉 모델을 잘 골라야 합니다. 결론: 모델을 잘골라서 수많은 시도 끝에 그나마 괜찮은 영상이 탄생할 것이다. 잘못된 모델 사용 결과 아래 3가지 영상을 보시면 뭔가 그림 초안인것 같고 색상도 좀 단조롭지 않나요? 대충봐도 매력적인 영상은 아닌것 같습니다. 위에서 3번째 영상 만들때 사용한 모델 및 프롬프트, 기타 설정값 정보 입니다. 그나마 나은 모델 사용 결과 아래 2가지 영상은 뭐 완벽하다고 볼 수 없지만 그래도 위의 영상보다는 퀄리티가 좀 났다는 생각이 듭니다. 위에서 2번째 영상 만들때 사용한 모델 및 프롬프트, 기타 설정값 정보 입니다. 위의 정보와 비교해서 봤을때 모델이 바뀐것 ..
-
(Stable Diffusion 모델 향상 방법) 프롬프트 잘 알아먹게! 달리급으로 잘 알아먹는 똑똑한 모델을 위하여!
여러분들 Stable Diffusion WebUI로 직접 이미지 생성해보고 혹시 달리도 써보셨나요? 둘의 큰 차이점도 느껴보셨나요? 제가 느낀 가장 큰 차이점은 모델의 프롬프트 이해도 입니다. 달리는 한글로 원하는 이미지 묘사를 했을때 묘사하는만큼 꽤 이미지가 잘 나왔어요. 하지만 그에비해 Stable Diffusion WebUI로 작업할때는 아무리 세밀하게 프롬프트를 입력하더라도 원하는 결과가 안나올때가 많더라구요. 그래도 저는 WebUI가 무료이기도하고 제가 원하는 모델과 로라를 조합해서 생성이 가능하니 WebUI를 주로 사용하긴 합니다. 그러다 Stable Diffusion의 발전 가능성에 대해서 정보를 얻었는데요. 함께 공유하고자 합니다. 구글 리서치에서 23년 10월 25일에낸 최신 논문 입니다..
-
Stable Dffusion WebUI 가이드 (2탄)
2023.10.31 - [이미지 생성 AI 정보] - Stable Dffusion WebUI 가이드 (1탄) Stable Dffusion WebUI 가이드 (1탄) Stable Diffusion WebUI가 왜 좋은지도 알겠고 2023.10.16 - [이미지 생성 AI 정보] - 요즘 핫한 AI로 그림 그리기, 이미지 생성 AI 뭘 공부해야할지 모르겠다면?! ("제가 추천드릴게요") 요즘 핫한 AI로 그림 그 lookchemy.tistory.com Stable Diffusion WebUI 가이드 1탄을 이어서 계속 하겠습니다. Sampling method Sampling method는 이미지를 그릴 때 사용할 샘플링 타입을 선택하는 기능입니다. 샘플링 타입이 이미지 생성에 중대한 영향을 주지는 않습니다...
-
Stable Dffusion WebUI 가이드 (1탄)
Stable Diffusion WebUI가 왜 좋은지도 알겠고 2023.10.16 - [이미지 생성 AI 정보] - 요즘 핫한 AI로 그림 그리기, 이미지 생성 AI 뭘 공부해야할지 모르겠다면?! ("제가 추천드릴게요") 요즘 핫한 AI로 그림 그리기, 이미지 생성 AI 뭘 공부해야할지 모르겠다면?! ("제가 추천드릴게요") 요즘 핫한 이미지 생성 AI, 궁금해서 시작해 보려니 모르는 용어가 너무 많죠? - OpenAI에서 만든 DALL·E - NovelAI (스테이블 디퓨전 기반으로 제작한 AI) - Midjourney (디스코드를 통해 문장으로 이미지를 lookchemy.tistory.com 설치도 해봤고 2023.10.30 - [이미지 생성 AI 정보] - Mac에서 그림 생성하기, Stable-D..
-
Mac에서 그림 생성하기, Stable-Diffusion-Webui 맥에서 설치하는법(feat.M1Pro)
요즘 핫하다는 무료로 이미지 생성 가능하게 만드는 Stable-Diffusion-Webui를 Mac에서 설치하고 한번 이미지까지 생성 해보겠습니다. https://github.com/AUTOMATIC1111/stable-diffusion-webui GitHub - AUTOMATIC1111/stable-diffusion-webui: Stable Diffusion web UI Stable Diffusion web UI. Contribute to AUTOMATIC1111/stable-diffusion-webui development by creating an account on GitHub. github.com 들어가면 아래처럼 화면이 나옵니다. 밑에 좀 내리다보면 Installation on Apple Si..
-
Stable Diffusion 용어 정리 Checkpoint, VAE, Lora, Embedding, Hyper network에 대해 알아보자.
Stable Diffusion 이란 대략적으로 노이즈에서 이미지를 생성하는 기법이라고 대충 알고 넘어가시면 되겠습니다. 우리는 논문적인 접근보다는 이미지 한번 생성해 보는게 중요하니까요! 하지만 Stable Diffusion을 접하면 자주 보이는데 생소한 용어들이 있습니다. 전체적인 흐름을 알기 위해 중요한 용어부터 먼저 알아보겠습니다. Stable Diffusion WebUI Stable Diffusion은 독일 뮌헨 대학교 Machine Vision & Learning Group (CompVis) 연구실의 "잠재 확산 모델을 이용한 고해상도 이미지 합성 연구"를 기반으로 하여, Stability AI와 Runway ML 등의 지원을 받아 개발된 딥러닝 인공지능 모델입니다. 이것을 활용하여 일반인들도 ..
-
요즘 핫한 AI로 그림 그리기, 이미지 생성 AI 뭘 공부해야할지 모르겠다면?! ("제가 추천드릴게요")
요즘 핫한 이미지 생성 AI, 궁금해서 시작해 보려니 모르는 용어가 너무 많죠? - OpenAI에서 만든 DALL·E - NovelAI (스테이블 디퓨전 기반으로 제작한 AI) - Midjourney (디스코드를 통해 문장으로 이미지를 생성할 수 있습니다.) - Waifu Diffusion (스테이블 디퓨전 기반으로 제작한 AI. Hakurei라는 사람이 개발했다.) - (중요) Stable Diffusion Stable Diffusion은 Stability AI에서 오픈소스 라이선스로 배포한 text-to-image 즉 문장으로 그림을 생성할 수 있는 인공지능 모델 입니다. - (중요) Stable Diffusion WebUI (Stable Diffusion을 ) ... 등 뭔가 해보려고 하니 너무 많..
Javascript
-
JavaScript 객체를 배열로 변환하는 3가지 방법
JavaScript 객체를 배열로 변환하는 3가지 방법 안녕하세요! JavaScript를 사용하면서 객체를 배열로 변환해야 할 경우가 종종 있습니다.이 글에서는 JavaScript 객체를 배열로 변환하는 3가지 방법을 소개합니다. Object.keys() Object.keys() 함수는 객체의 키들을 배열로 반환합니다.const obj = { name: "Alice", age: 25, job: "developer" };const keys = Object.keys(obj);console.log(keys); // ["name", "age", "job"] Object.values() Object.values() 함수는 객체의 값들을 배열로 반환합니다.const obj = { name: "Alice", age..
-
자바스크립트 오브젝트 안에 특정 키가 있는지 확인
자바스크립트에서 객체(Object) 안에 특정 키(key)가 있는지 확인하는 방법은 다양합니다. hasOwnProperty 메서드 사용하기:const myObject = { key1: 'value1', key2: 'value2'};if (myObject.hasOwnProperty('key1')) { console.log('key1 exists in the object.');} else { console.log('key1 does not exist in the object.');}in 연산자 사용하기:const myObject = { key1: 'value1', key2: 'value2'};if ('key1' in myObject) { console.log('key1 exists in the ..
-
자바스크립트 문자열 대문자화
자바스크립트에서 문자열을 대문자로 바꾸기 위해서는 toUpperCase() 메소드를 사용할 수 있습니다. 이 메소드는 문자열을 모두 대문자로 변환한 새로운 문자열을 반환합니다. 예를 들어, 다음과 같이 사용할 수 있습니다:let str = "hello world";let upperStr = str.toUpperCase();console.log(upperStr); // 출력 결과: "HELLO WORLD"위 코드에서 toUpperCase() 메소드를 사용하여 str 문자열을 모두 대문자로 바꾸고, upperStr 변수에 저장하였습니다. 그리고 console.log() 함수를 사용하여 upperStr 문자열을 출력하였습니다. 또한, ES6부터는 String.prototype.toUpperCase() 대신 ..
-
(ES2021) 자바스크립트 문법
Optional Chaining (선택적 체이닝)Optional Chaining은 객체의 속성을 안전하게 접근하는 방법입니다. 만약 객체 내부의 속성 중 하나가 null 또는 undefined라면, 코드가 실행되는 도중 에러가 발생하는 것을 방지할 수 있습니다. 다음과 같이 사용할 수 있습니다. 참고 urlhttps://intelloper.tistory.com/22const name = person?.name;const age = person?.age?.years; Nullish Coalescing (널 병합 연산자)Nullish Coalescing은 변수가 null 또는 undefined일 때, 대체 값을 지정할 수 있는 방법입니다. 이전에는 || 연산자를 사용하여 처리했지만, 이는 falsy한 값 ..
-
Javascript 자료구조 시리즈(4) Linked List
Linked List는 배열과 유사한 선형 데이터 구조입니다. 그러나 배열과 달리 요소는 특정 메모리 위치나 인덱스에 저장되지 않습니다. 오히려 각 요소는 해당 목록의 다음 개체에 대한 포인터 또는 링크를 포함하는 별도의 개체입니다. 노드 그룹으로 구성되며 각 노드에는 다음 노드에 대한 고유한 데이터와 주소가 있습니다. 배열에서 요소는 인덱싱되며 즉시 요소에 도달할 수 있지만 Linked List에서는 머리부터 시작하여 원하는 요소에 도달할 때까지 계속 작업해야 합니다. Linked List의 장점은 Linked List에서 삽입 및 삭제가 배열보다 쉽다는 것입니다. 배열은 단 한개의 원소 추가할 때도 뒷쪽에 있는 원소들이 모두 변경되어야 되며 10만개 이상의 배열이면 시간이 많이 소모됩니다. 왜나하면 ..
-
Javascript 자료구조 시리즈(3) Queue 대기열
Queue 큐는 FIFO(선입 선출) 원칙을 따르는 선형 데이터 구조입니다. 여기에는 1) 전면 포인터, 2) 후면 포인터, 두 개의 포인터가 포함됩니다. 앞쪽 포인터는 시작 요소의 주소를 포함하고 뒤쪽 포인터는 큐의 마지막 요소 주소를 포함합니다. 큐 구현에 사용되는 두 가지 주요 방법은 enqueue 및 dequeue 방법입니다. Enqueuing은 큐에서 요소를 추가하는 프로세스이고 Dequeuing은 큐에서 요소를 제거하는 프로세스입니다. 전형적인 실생활의 Queue로 은행을 예를들 수 있습니다. 은행 업무를 보기위해 맨 처음 온 사람이 먼저 업무를 보고 그뒤에 순차적으로 업무를 보기 위해서 창구를 기다립니다. 또한 새로운 고객이 들어오면 가장 맨뒤에 서게 됩니다. 그리고 가장 맨 마지막에 업무를..
-
Javascript 자료구조 시리즈(2) Stack 스택
Stack 스택은 LIFO(Last In First Out) 또는 FILO(First In Last Out) 원칙을 따르는 데이터 구조입니다. 👉🏻 스택에 요소를 추가할 때마다 스택 맨 위에 추가됩니다. 👉🏻 스택에 마지막으로 삽입된 항목이 가장 먼저 삭제됩니다. 👉🏻 스택은 ToS(Top of Stack)라고 하는 목록의 한쪽 끝에서만 액세스할 수 있는 요소 목록입니다. 쉽게 말해 멘토스 구조라고 생각하시면 됩니다. 멘토스를 깠을때 가장 처음 먹는부분이 마지막으로 쌓인 멘토스라고 생각하시면 됩니다. 기존에 9~11번 멘토스를 먹었고 11번 pop(), 10번 pop(), 9번 pop() 짝지랑 멘토스 맛을 교환하기로 하였습니다. 그리하여 8번 pop(), 7번 pop(), 6번 pop() 다른 멘토스맛..
-
Javascript 자료구조 시리즈(1) Array 배열
Javascript 자료구조 - Array 배열 자료 구조는 많은 회사에서 가장 자주 테스트하는 주제 중 하나입니다. 서비스를 운영 하다보면 데이터를 어떻게하면 더 효율적으로 저장하고 사용할 수 있는지에 대해 고민을 할 수 밖에 없습니다.어떻게 코드를 짜느냐에 따라 사용자가 원하는 정보를 빠르게 보여줄 수 있는지 서비스의 품질 문제가 달려있기 때문입니다.그러므로 이번 포스트에서는 자바스크립트 데이터 구조를 다뤄보겠습니다.총 아래 7가지 구조를 다뤄볼 예정입니다.- Arrays- Stack- Queues- Linked List- Trees- Graphs- Hashtable자료구조란?자료구조는 데이터를 효율적으로 사용할 수 있도록 저장하고 구성하는 방법입니다. 보다 정확하게는 자료구조는 데이터 값의 그룹, ..
-
(JS)Clean Code Series4 - Enums vs Dictionaries #열거형과 사전
Enums vs Dictionaries#열거형과 사전 enum은 상수 값으로 이루어져 있는 집합이라고 볼 수 있습니다. Typescript에서는 enum을 지원하지만 javascript에서는지원하지 않습니다. enum MagicianSkills { fireball = '불로 이뤄진 구체를 날림', iceball = '얼음으로 이뤄진 구체를 날림', thunderball = '번개로 이뤄진 구체를 날림', } const useSkill: MagicianSkills = MagicianSkills.fireball console.log('useSkill : ', useSkill); // 결과 useSkill : 불로 이뤄진 구체를 날림 위의 코드를 자바스..
-
(JS)클린 코드 시리즈3 - Named Callback Function #명명된 콜백 함수
Named Callback Function #명명된 콜백 함수 보통 콜백 함수로 익명함수를 자주 많이 씁니다. .reduce(), .map(), .foreach()... 등 안에 () => {} 익명의 함수를콜백 함수로 넣습니다.편하고 필요할때 적시 적소에 쓰이기 때문에 매우 유용합니다. 예를들어 객체 배열 안에 든 값을 map으로아래처럼 가공하여 보여줄 수 있습니다. interface IGoblin { name: string hp: number attack: number } const goblins: Array = [ { name: 'goblin warrior', hp: 200, attack: 30 }, { name: 'gob..
-
(JS)클린 코드 시리즈2 - Nullish coalescing operator #?? #널 병합 연산자
Nullish coalescing operator #?? #널 병합 연산자 실제로 코딩하다보면 null 혹은 undefind를 참조하여 에러가 뜨는 경우가 많습니다.초보인 분들은 에러 메세지를 검색해서 해결할 수도 있고 어느정도 경험이 있으신분들은 아 null 방지를 안해줬구나하고바로 AND(&&)문 아니면 옵셔널 체이닝으로 해결할 수도 있습니다.하지만 &&(AND)문이나 ?.(Optional Chaining)은 참조할 값이 null이면 그냥 아무것도 안들어오게 됩니다.만약 참조할 값이 null인지 체크하고 참조할값이 있다면 참조값을 쓰고 아니라면 다른 default값을 넣어주고 싶을때보통 삼항 연산자를 많이 쓰지요. potion ? 'drink' : 'do nothing' 하지만 널 병합 연산자로 더 ..
-
(JS)클린 코드 시리즈1 - Optional Chaining #?. #옵셔널 체이닝
Optional Chaining #?. #옵셔널 체이닝 개발할때 보통 api에서 데이터를 가져온 후 Object 형식의 useState에서 setState로 데이터를 넣어준 후 보통 아래처럼 데이터를 사용합니다. let fireball = user.skill.fireball; or ({user.skill.fireball})근데 만약 여기서 user.skill이 null이라면 "Uncaught TypeError: Cannot read property 'fireball' of null"이런 문구의 에러가 발생합니다. 여기서 만약 optional chaining을 모른다면let fireball = user.skill && user.skill.fireball;or({user.skill && ..
Python
-
(파이썬 웹크롤링) 구글 이미지 크롤링
우선 전체 코드 바로 공개 하겠습니다. 아래의 코드 실행시 파일과 같은 위치에서 imgs 폴더를 꼭 생성해주세요!! import ssl ssl._create_default_https_context = ssl._create_unverified_context from selenium import webdriver from selenium.webdriver.common.keys import Keys from selenium.webdriver.common.by import By import time import urllib.request searchKey = input('검색 키워드 입력:') driver = webdriver.Chrome() driver.get("https://www.google.co.kr/i..
-
파이썬 현재 설치된 패키지 리스트 확인하는법
Python에서 현재 설치된 패키지 리스트를 확인하는 방법에는 여러 가지가 있습니다. pip list 명령어 사용하기 가장 쉬운 방법은 터미널에서 pip list 명령어를 실행하는 것입니다. 이 명령어는 현재 설치된 모든 패키지의 리스트를 출력합니다. pip list pip freeze 명령어 사용하기 pip freeze 명령어는 현재 설치된 패키지의 리스트를 requirements.txt 파일 형식으로 출력합니다. 이 파일은 pip install -r 명령어를 사용하여 한 번에 여러 패키지를 설치하는 데 사용됩니다. pip freeze > requirements.txt conda list 명령어 사용하기 conda를 사용하여 Python 패키지를 관리하는 경우, conda list 명령어를 사용하여 현..
-
(파이썬 클린코드) 파이썬 내장 함수 사용하기
파이썬 내장 함수를 사용하여 코드를 간결하게 작성할 수 있습니다. 예를 들어, 리스트의 합을 구하는 함수 sum을 사용하여 코드를 간결하게 작성할 수 있습니다 간단 예시 numbers = [1, 2, 3, 4, 5] sum_of_numbers = sum(numbers) range(): 지정한 범위의 정수들을 반환하는 함수입니다. for i in range(1, 11): print(i) zip(): 두 개 이상의 리스트의 요소들을 병렬로 묶어주는 함수입니다. names = ['Alice', 'Bob', 'Charlie'] ages = [25, 30, 35] for name, age in zip(names, ages): print(name, age) sorted(): 인자로 받은 iterable 객체를 정렬..
-
(파이썬 클린코드) 제너레이터(Generator)
(파이썬 클린코드) 제너레이터(Generator)파이썬에서 제너레이터(generator)는 이터레이터(iterator)와 유사하지만, 이터레이터보다 더 강력하고 효율적인 함수입니다. 제너레이터는 값을 반환할 때마다 함수의 상태를 기억하고 다음 값 반환에 사용합니다. 제너레이터 함수는 yield 키워드를 사용하여 값을 반환합니다. 예를 들어, 0부터 시작하여 지정된 범위까지 모든 짝수를 반환하는 제너레이터 함수를 작성해 보겠습니다. def even_numbers(n): for i in range(n): if i % 2 == 0: yield i 이 함수를 호출하면, 이터레이터 객체가 반환됩니다. 이 객체는 __next__() 메소드를 사용하여 값을 하나씩 가져올 수 있습..
-
(파이썬 클린코드) 람다 함수(Lambda Function)
(파이썬 클린코드) 람다 함수(Lambda Function)람다 함수(Lambda Function) 사용하기함수를 한 줄로 간결하게 작성할 수 있는 방법입니다.예를 들어, 두 개의 숫자를 더하는 함수를 람다 함수로 작성하면 다음과 같습니다.add = lambda x, y: x + y 람다(lambda) 함수는 이름이 없는 익명 함수를 말합니다. 간단한 로직을 갖는 함수를 한 줄로 간결하게 표현할 수 있어서, 함수의 인자로 함수를 전달해야 하는 경우나 간단한 연산을 수행하는 경우에 매우 유용합니다. 람다 함수는 lambda 키워드를 사용하여 정의합니다. 일반적인 함수와는 다르게 함수명이 없으며, 함수의 인자와 리턴 값만을 정의합니다. 일반적으로는 한 줄로 표현되는 간단한 연산에 사용됩니다. 람다 함수의 기..
-
(파이썬 클린코드) 리스트 컴프리헨션(List Comprehension)
(파이썬 클린코드) 리스트 컴프리헨션(List Comprehension)리스트 컴프리헨션(List Comprehension) 사용하기반복문을 한 줄로 간결하게 작성할 수 있는 방법입니다.예를 들어, 1부터 10까지의 숫자 중에서 짝수만을 리스트로 만들고 싶을 때 다음과 같이 작성할 수 있습니다.even_numbers = [i for i in range(1, 11) if i % 2 == 0]self.rgbIpArr = [f'192.168.0.{ip}' for ip in args.rtspIps.split(',')]
-
파이썬 클린코드 기본
클린 코드는 여러가지 측면이 있지만, 그 중에서도 다른 사람이 쉽게 이해하고 유지보수할 수 있는 코드를 작성하는 것이 중요합니다. 이를 위해서는 가독성, 명확성, 간결성 등이 필요합니다. 아래는 클린 코드를 작성하는 예시 코드입니다. # 좋은 변수명 사용하기 def calculate_rectangle_area(length, width): return length * width # 함수의 기능을 잘 나타내는 이름 사용하기 def get_unique_values(values_list): return list(set(values_list)) # 코드 중복을 피하기 def calculate_circle_area(radius): PI = 3.14 return PI * radius ** 2 def calculate..
-
파이썬 삼항 연산자 사용법
기본 사용법 [True 값] if [조건식] else [False 값] 예시 x = 5 result = "x는 5입니다." if x == 5 else "x는 5가 아닙니다." print(result)
REACT
-
Error: Unexpected token I in JSON at position 0
Error: Unexpected token I in JSON at position 0 NextJS로 개발하실때 이런 에러 한번씩 뜨실겁니다. 이 에러에 대해서 처음 보시거나 모르시는분들은 프론트에서 문제를 찾으실겁니다. 막상 확인해보면 api 요청하는데 요청값이 잘못 들어가서 Backend server에서 에러가 나서 생긴 오류입니다. 저같은 경우도 아래의 에러 메세지 처럼 backend server에서 생긴 문제였습니다.
-
useSearchParams() should be wrapped in a suspense boundary at page "/loginPage". Read more: https://nextjs.org/docs/messages/missing-suspense-with-csr-bailout
Next.js에서 useSearchParams() 사용 시 주의사항문제 상황다음과 같은 에러 메시지를 보신 적 있나요?useSearchParams() should be wrapped in a suspense boundary at page "/loginPage". Read more: https://nextjs.org/docs/messages/missing-suspense-with-csr-bailout 이 메시지는 "/loginPage"에서 useSearchParams()를 사용할 때 Suspense 경계로 감싸지 않아 발생하는 오류입니다. Suspense는 리액트 18버전에서 도입이 되었습니다. 다음 링크를 참조해주세요.-> https://ko.react.dev/reference/react/Suspense..
-
ESLint: A control must be associated with a text label.(jsx-a11y/control-has-associated-label)
ESLint: A control must be associated with a text label.(jsx-a11y/control-has-associated-label) React 프로젝트에서 자주 마주치는 ESLint 오류 중 하나인 "A control must be associated with a text label.(jsx-a11y/control-has-associated-label)"에 대해 알아보고, 이를 해결하는 방법을 공유하려고 합니다.오류의 의미이 오류는 웹 접근성(Web Accessibility)과 관련이 있습니다. 간단히 말해, 사용자 인터페이스의 컨트롤(예: 버튼, 입력 필드)에 연관된 텍스트 레이블이 없을 때 발생합니다. 텍스트 레이블은 스크린 리더 사용자를 포함한 모든 사용자가 해..
-
Nextjs Image domain src error, hostname set as domain and getting error Invalid src prop on `next/image`
NextJSnext.config.js에서 remotePatterns까지 셋팅해줬는데!!! Image 태그 src에 도메인주소를 넣으면 이미지가 안나오신다면 Loader를 사용하셔야 합니다! (Solution code)const src = `${API}/user/photo/${blog.postedBy.username}`; src} src={src} width={500} height={500}/> Next.js에서 이미지 로더(Loader) 이해하기Next.js에서 이미지 로더(Loader)가 어떻게 동작하는지에 대해 알아보겠습니다. 특히, 이미지 최적화와 관련된 부분을 중점적으로 다뤄보겠습니다.이미지 로더(Loader)란 무엇인가?Next.js에서 이미지 로더는 이미지의 URL을 생성하는 함수입니다..
-
⚠ The "images.domains" configuration is deprecated. Please use "images.remotePatterns" configuration instead.
Next.js 버전 14에서 도메인 설정을 remotePatterns로 변경하는 방법Next.js의 새로운 버전 14에서 도메인 설정이 어떻게 변경되었는지에 대해 알아보겠습니다. 특히, 이미지 호스팅과 관련된 설정을 하시는 분들에게 유용한 정보가 될 것 같습니다.Next.js 14에서의 주요 변경 사항Next.js 버전 14에서는 기존의 domains 설정이 deprecated(더 이상 사용되지 않음)되고, 새로운 remotePatterns 설정으로 대체되었습니다. 이는 next.config.js 파일에서 설정할 수 있습니다. 이 변경으로 인해 이미지 호스팅 설정을 더 유연하고 간편하게 할 수 있게 되었습니다.설정 변경하기기존에 domains 설정을 사용하던 분들은 아래와 같은 형식으로 설정을 하고 있었..
-
NextJS build Error: Failed to fetch data
NextJS build Error: Failed to fetch dataserver component에서 SSR을 위해 데이터를 패치할때 dev모드에서는 정상적으로 작동하던것이 build할때 문제를 일으킬때가 있다. 해당 문제는 동적으로 데이터를 받아와야할 페이지를 정적으로 구현하려고하니 발생한 문제이다.아래 코드를 import 밑에 삽입하고 다시 build를 해보자.export const dynamic = 'force-dynamic';
-
NextJS ReferenceError: window is not defined
next js 에서 build할때 window is not defined error 뜨면서 build가 안되는 경우가 있습니다. 다른 블로그에서 참고했을때는 대부분 렌더링 이전에 window를 사용해서 그렇다라고하며 use client로 client 컴포넌트를 사용하고 useEffect안에서 window를 사용하고나 아래처럼 조건문을 추가하는것을 알려주고 있습니다.if (typeof window !== 'undefined'){ // codes}하지만 진짜 문제는 window를 사용하지 않았을때가 문제입니다. 문제되는 페이지에서 한줄한줄 확인해보니 저같은 경우는 heic2any 라이브러리 사용 코드에서 문제가 생겼었는데요.기존에 문제되는 코드입니다. 위의 코드를 다음처럼 바꿔주니 정상적으로 build되었..
-
Warning: validateDOMNesting(...): cannot appear as a descendant of
.
Warning: validateDOMNesting(...): cannot appear as a descendant of . 말 그대로 p 태그 안에 div 태그를 써서 생긴 문제이다. HTML에서 p 태그는 문단을 나타내는 데 사용되며 p 태그는 텍스트를 하나의 문단으로 그룹화하여 구조화된 텍스트를 작성하는 데 유용하다. 문단은 주로 여러 문장을 포함하며, 웹 페이지의 가독성을 높이는 데 중요한 역할을 한다. 이런식으로 사용하면 Error까지는 아니지만 Warning이 뜬다. (x) hello p 태그를 다른 태그로 바꾸면 된다. (O) hello
Ubuntu
-
Status: display_server_not_supported (Anydesk display server not supported Ubuntu 22)
Status: display_server_not_supported (Anydesk display server not supported Ubuntu 22) 우분투에서 Anydesk 이용할때 display 문제로 에러나고 안되는 경우가 있습니다.Ubuntu 22에서 Anydesk의 "display_server_not_supported" 오류를 해결하는 방법을 알려드리겠습니다. 이 문제는 주로 Wayland 디스플레이 서버를 사용할 때 발생합니다. 해결 방법은 다음과 같습니다: 방법 1. Wayland 비활성화하기: Wayland를 완전히 비활성화하려면 다음 단계를 따르세요:터미널을 엽니다.다음 명령어로 설정 파일을 엽니다:sudo vim /etc/gdm3/custom.conf WaylandEnable=fal..
-
E: Sub-process /usr/bin/dpkg returned an error code (1)
E: Sub-process /usr/bin/dpkg returned an error code (1)오류의 주요 원인과 해결 방법을 다루어 보겠습니다. 1. 잠긴 dpkg 상태dpkg 또는 apt가 이미 실행 중인 경우 발생할 수 있습니다.해결 방법: 다른 패키지 관리 프로세스가 실행 중인지 확인하고, 문제가 없다면 잠금 파일을 삭제합니다.sudo rm /var/lib/dpkg/lock-frontend /var/lib/dpkg/locksudo rm /var/cache/apt/archives/locksudo dpkg --configure -asudo apt-get install -f 대부분 위에서 해결됩니다. 참고다른 블로그에서 sudo rm /var/lib/dpkg/info/* 를 많이 쓰는데 이 ..
-
The TCP/IP connection to the host 192.168.10.152, port 1433 has failed. Error: "null. Verify the connection properties. Make sure that an instance of SQL Server is running on the host and accepting TCP/IP connections at the port. Make sure that TCP connec
The TCP/IP connection to the host 192.168.10.152, port 1433 has failed. Error: "null. Verify the connection properties. Make sure that an instance of SQL Server is running on the host and accepting TCP/IP connections at the port. Make sure that TCP connections to the port are not blocked by a firewall.". 우분투에서 DBeaver등 SQL 클라이언트로 MSSQL 서버에 접속 하려고 할때 MSSQL 서버에 연결할 수 없다는 것을 의미합니다. - 우분투에서의 기준입니다...
-
우분투에서 외부 mssql 서버 접속하기
우분투에서 외부 MSSQL 서버에 접속하기 위해 필요한 과정은 다음과 같습니다. 이 과정에서는 sqlcmd 도구를 사용하여 MSSQL 서버에 접속합니다. 1. MSSQL 도구 설치먼저, MSSQL 커맨드 라인 도구(sqlcmd)를 설치합니다.1.1. Microsoft 패키지 저장소 등록curl -sSL https://packages.microsoft.com/keys/microsoft.asc | sudo apt-key add -sudo add-apt-repository "$(curl -sSL https://packages.microsoft.com/config/ubuntu/$(lsb_release -rs)/prod.list)" 1.2. 패키지 목록 업데이트 및 도구 설치sudo apt-get updatesu..
-
우분투에서 MySQL을 재설치하는 방법
우분투에서 MySQL을 재설치하는 과정은 비교적 간단합니다. 아래 단계에 따라 진행하시면 됩니다. 1. MySQL 제거먼저, 기존에 설치된 MySQL을 제거해야 합니다.sudo systemctl stop mysqlsudo apt-get remove --purge mysql-server mysql-client mysql-commonsudo apt-get autoremovesudo apt-get autoclean 2. MySQL 데이터 및 설정 파일 삭제MySQL의 데이터 및 설정 파일을 삭제합니다.sudo rm -rf /etc/mysql /var/lib/mysqlsudo rm -rf /var/log/mysqlsudo rm -rf /var/log/mysql.* 3. MySQL 재설치이제 MySQL을 다시 설..
-
E: Unmet dependencies. Try 'apt --fix-broken install' with no packages (or specify a solution).
이 오류는 설치하려는 패키지가 의존하는 다른 패키지가 설치되어 있지 않거나 손상되어 있기 때문에 발생할 수 있습니다. 이 문제를 해결하기 위해 다음 단계를 수행할 수 있습니다. 터미널에서 다음 명령어를 실행하여 의존성 문제를 해결합니다. sudo apt --fix-broken install 이 명령어를 실행하면 시스템에서 문제가 있는 패키지를 자동으로 감지하고 해당 패키지를 업데이트하거나 삭제하여 의존성 문제를 해결합니다. 명령어 실행이 완료되면 패키지를 다시 설치하려고 시도합니다. 다시 설치해야 할 패키지를 지정하거나 다른 패키지를 설치하려는 경우 이전에 발생한 오류가 없어야합니다. 위의 단계를 수행하여 의존성 문제를 해결할 수 있습니다.
-
Failed to connect to https://changelogs.ubuntu.com/meta-release-lts. Check your Internet connection or proxy settings
해결방법 vi /etc/network/interfaces dns-nameservers 8.8.8.8 8.8.4.4 를 추가. esc + :wq!로 저장 후 닫기 vi /etc/resolv.conf nameserver 8.8.8.8 nameserver 8.8.4.4 를 추가 위 .conf 파일이 편집이 안된다면 아래 참고 rm /etc/resolv.conf ;# to remove the symlink vi /etc/resolv.conf ;# to create a regular file
-
Unable to negotiate with xxx port xxx: no matching key exchange method found
~/.ssh/config에 해당 알고리즘을 추가한다. Host 192.168.0.1 HosKeyAlgorithms +diffie-hellman-group14-sha1 Host 192.168.0.1 KexAlgorithms +diffie-hellman-group1-sha1
Docker
-
ERROR LOG
-
ERROR LOG
-
ERROR LOG
-
SETTING
-
SETTING
- 방문자수
전체 방문자
오늘 방문자
어제 방문자