조아마시

쓸모 있는 상세페이지 만들기

반응형

2025/03 33

[미드저니] 주요 공식 파라미터(parameter)

Midjourney에서 사용되는 주요 파라미터(parameter) 들을 정리한 목록프롬프트를 세밀하게 조정해 원하는 스타일과 결과를 얻고 싶을 때 유용기본 파라미터--v버전 선택 (5, 5.1, 5.2, 6 등)--v 6--ar종횡비(Aspect Ratio) 설정--ar 16:9--q퀄리티 (1, 2, 5 중 선택 가능. 높을수록 리소스 많이 씀)--q 2--style스타일 강도 조정 (raw 추천 시 자연스러움)--style raw--no포함하지 않을 요소를 지정--no text--iw이미지 가중치(Image Weight), 이미지와 텍스트 간 중요도 조절--iw 2스타일 및 디테일 관련--s스타일리제이션 정도. 수치 높을수록 아트적 해석 강화 (0~1000)--s 250--chaos랜덤성 조절. 높을..

생산성/AI 2025.03.31

[자바스크립트] Event Loop, 내부 동작 원리 알아보기

자바스크립트는 단일 스레드 기반의 비동기 처리 모델을 갖는 언어이며, 이 특성을 이해하기 위해선 Event Loop, Task Queue, Microtask Queue, Agent 등의 개념을 명확히 알아야 합니다.📌 1. Event Loop란 무엇인가?자바스크립트는 싱글 스레드(Single Thread) 언어로, 하나의 실행 컨텍스트만을 동시에 처리할 수 있습니다. 하지만 비동기 처리를 위해 이벤트 루프(Event Loop) 라는 메커니즘을 활용합니다.Event Loop는 호출 스택(Call Stack)과 태스크 큐(Task Queue)를 모니터링하며, 호출 스택이 비어 있을 때 태스크 큐에서 대기 중인 콜백을 스택으로 이동시켜 실행합니다.📎 예시:console.log("A");setTimeout(..

[자바스크립트] this 이야기

✅ 1. this란 무엇인가?this는 현재 실행 중인 코드가 속한 문맥(Context) 을 가리킵니다. 즉, 누가 이 코드를 호출했는지에 따라 그 참조 대상이 달라지게 됩니다.📌 핵심 키워드: 실행 문맥, 호출 주체, 동적 바인딩console.log(this); // 브라우저에서는 window 객체 출력this는 선언 시점이 아닌 실행 시점에 결정됩니다.정적 스코프(Scope)와 달리 this는 동적(Dynamic) 으로 바인딩됨✅ 2. 스코프(Scope) vs this의 차이구분 설명스코프(Scope)변수나 함수가 접근 가능한 코드의 유효 범위this실행 중인 문맥(컨텍스트)의 객체 참조📌 스코프 예시function outer() { let x = 10; function inner() { ..

[리액트] React Query와 Zustand 알아보기

React Query: **서버 상태(Server State)**를 관리하는 도구Zustand: **클라이언트 상태(Client State)**를 관리하는 전역 상태 관리 도구핵심 차이 요약주 용도서버 데이터 캐싱 및 비동기 처리전역 상태(클라이언트 로컬 상태) 관리상태 저장 위치React Query 내부 캐시 (비휘발성)메모리 내 저장 (휘발성)주요 기능데이터 페칭, 캐싱, 리페치, 오류 처리글로벌 스토어, 상태 간단 공유비동기 처리내장 지원 (useQuery, useMutation 등)직접 fetch나 axios 사용 필요상태 공유 방식내부 Hook (useQuery 등)create로 만든 스토어 Hook 사용사용 시나리오 예시1. React Query 예시: 서버에서 유저 목록을 가져오는 경우// ..

웹개발/reactjs 2025.03.23

[리액트] React Query를 사용하는 이유

React Query를 사용하는 이유는 간단히 말해 비동기 상태 관리를 더 쉽고 강력하게 하기 위해서 입니다.기존에는 useState, useEffect, axios 등을 수동으로 조합해야 했던 것을 React Query가 자동화 + 최적화해줍니다.🔥 기존 방식의 문제점복잡한 상태 관리useState, useEffect로 로딩/에러 처리코드 중복, 재사용 어려움중복 요청 발생같은 데이터를 여러 컴포넌트에서 요청동일한 API 여러 번 호출refetch 타이밍 관리 어려움데이터 변경 후 목록 다시 불러와야 함수동으로 refetch() 또는 재랜더링캐싱 없음매번 API 호출느림 + 비용 증가무한스크롤, 필터링 구현 번거로움페이지 번호 상태 직접 관리복잡한 로직 필요SSR 대응 어려움Next.js에서 API ..

웹개발/reactjs 2025.03.23

브라우저 렌더링 과정과 최적화의 중요성

1. 브라우저 렌더링 과정의 이해웹 페이지는 HTML, CSS, JavaScript 등의 리소스를 기반으로 브라우저에서 렌더링된다. 이 과정은 다음과 같은 주요 단계로 구성된다:HTML 파싱 → DOM(Document Object Model) 생성CSS 파싱 → CSSOM(CSS Object Model) 생성DOM + CSSOM 결합 → Render Tree 생성Layout (Reflow) → 각 요소의 정확한 위치와 크기 계산Painting → 픽셀 단위의 색상 및 스타일 적용Compositing → 여러 레이어를 조합하여 최종 화면에 렌더링이러한 과정을 종합하여 **"크리티컬 렌더링 패스(Critical Rendering Path)"**라고 하며, 웹 페이지의 첫 화면(FCP, First Conten..

웹개발 2025.03.23

노드 기반 인터페이스를 만들 수 있는 대표적인 JavaScript 라이브러리

이런 형태의 노드 기반 인터페이스 (Node-Based Interface) 를 만들 수 있는 대표적인 JavaScript 라이브러리는 다음과 같습니다.추천 라이브러리:rete.js노드 기반 UI를 만들기에 최적화된 라이브러리.플로우 차트, 비주얼 스크립팅, 그래프 인터페이스 구현 가능.마우스로 드래그하면 연결된 선도 같이 움직임.React FlowReact 기반의 플로우 차트 라이브러리.대화형 노드 시스템을 만들기 쉽고, 커스텀 노드 지원.Dagre-D3다이어그램 레이아웃 및 자동 정렬 지원.D3.js를 기반으로 하여 강력한 시각화 기능 제공.JointJSSVG 및 HTML5 기반의 다이어그램 및 그래프 UI 구축 가능.무료 버전과 유료 버전이 있으며, 강력한 기능 지원.간단한 예제 코드 (rete.js..

웹개발 2025.03.23

[IndieWeb] 독립 웹(IndieWeb) 운동의 개요와 철학

IndieWeb 개요 (운동의 배경과 시작)IndieWeb은 중앙화된 기업 플랫폼에 대응하는 독립적 웹 운동이자 철학으로, 개인이 자신의 웹사이트와 도메인을 소유하여 온라인 활동을 주도하자는 목표를 가지고 있습니다 (IndieWeb - Wikipedia) (why - IndieWeb). 페이스북이나 트위터와 같은 거대 소셜 미디어(이른바 “실리콘밸리 식민지” 또는 “데이터 실로(silo)”)에 콘텐츠와 관계망을 의존하는 현상에 문제의식을 느낀 웹 개발자들과 창작자들이 주축이 되어 2011년 첫 IndieWebCamp 행사(미국 포틀랜드)를 열면서 본격적으로 시작되었습니다 (IndieWeb - Wikipedia). IndieWebCamp를 공동 설립한 탠텟 첼릭(Tantek Çelik)과 애런 파레키(Aa..

웹개발 2025.03.23

[피그마] Figma 플러그인을 만드기

Figma 플러그인을 만드는 방법은 비교적 간단하며, 웹 기술(HTML, CSS, JavaScript)을 활용해서 만들 수 있습니다. 아래는 Figma 플러그인 제작의 기본 절차입니다.Figma 플러그인 만드는 방법1. Figma 계정 준비 및 플러그인 등록Figma 계정에 로그인Community 탭 → Plugins 선택 → Development 클릭Create a new plugin 클릭플러그인 이름 설정 및 Create 클릭2. 플러그인 파일 구조Figma는 다음과 같은 파일 구조로 구성됩니다:my-plugin/├── manifest.json // 플러그인 메타 정보├── code.js // 플러그인의 메인 로직 (Figma API 사용)├── ui.html ..

생산성/figma API 2025.03.23

[챗GPT] '심층 리서치(Deep Research)' 기능

ChatGPT의 신기술 중 하나인 '심층 리서치(Deep Research)' 기능은 OpenAI에서 실험적으로 도입한 기능으로, 사용자가 질문하면 AI가 실시간으로 웹을 검색해 다양한 출처를 참고한 후, 신뢰 가능한 정보 기반의 정리된 답변을 제공하는 기술입니다. 이는 기존의 모델이 훈련 데이터까지만 정보를 알고 있던 한계를 넘어서는 새로운 접근 방식입니다.주요 특징✅ 실시간 정보 검색ChatGPT가 인터넷에서 실시간으로 정보를 검색하고 최신 데이터를 가져올 수 있음.뉴스, 공식 웹사이트, 블로그, 리서치 문서 등 다양한 출처를 확인함.✅ 출처 명시답변에는 참고한 웹사이트의 출처와 링크가 함께 제공됨.사용자는 정보의 정확성이나 신뢰도를 직접 확인할 수 있음.✅ 종합적 요약여러 자료를 비교 분석하여 요약한..

생산성/AI 2025.03.23

[미드저니] 무드보드(Moodboard) 기능

미드저니(Midjourney)의 무드보드(Moodboard) 기능은, 사용자가 특정한 분위기나 스타일을 시각적으로 정리하고 방향성을 정립할 수 있도록 돕는 이미지 기반 영감 정리 도구입니다. 아직 정식 명칭으로 '무드보드' 기능이 UI에 명시되어 있는 것은 아니지만, Midjourney를 활용한 무드보드 제작 방식은 크리에이터들 사이에서 매우 활발히 사용되고 있으며, 다음과 같은 방식으로 활용됩니다.✅ 무드보드란?**무드보드(Moodboard)**는 프로젝트 초반에 사용하는 비주얼 가이드라인 도구입니다. 주로 디자인, 패션, 영상, 게임, 건축, 콘텐츠 제작 분야에서 아이디어를 시각적으로 정리하기 위해 사용됩니다.🧩 미드저니에서 무드보드를 만드는 방식1. 레퍼런스 수집미드저니에서 프롬프트를 입력해 다양..

생산성/AI 2025.03.23

바이브 코딩: 개념과 원리

바이브 코딩(Vibe Coding)은 최신 AI 기술을 활용하여 사람과 AI가 대화하듯이 소프트웨어를 개발하는 새로운 코딩 방식입니다 (바이브 코딩: 코딩 없이 소프트웨어 개발하는 새로운 방법 - AI TREARC). 이 용어는 OpenAI 공동 창립자이자 전 테슬라 AI 디렉터인 **안드레이 카파시(Andrej Karpathy)**가 처음 언급하여 화제가 되었는데 ( 바이브 코딩 (Vibe Coding) - 박재홍의 실리콘밸리), 카파시는 이를 *“완전히 느낌에 몸을 맡기고 지수적 발전을 받아들이며, 코드의 존재 자체를 잊어버리는 코딩”*이라고 설명했습니다 ( 바이브 코딩 (Vibe Coding) - 박재홍의 실리콘밸리). 즉, 개발자는 구현하려는 기능이나 아이디어를 자연어로 설명하고 요구사항을 전달하..

생산성/AI 2025.03.21

[파이썬] Python의 AI 개발에서 기술적 장점

Python이 AI 개발에서 많이 사용되는 기술적 장점과 이를 뒷받침하는 예시 코드를 포함한 설명을 준비하겠습니다. Python의 유연성, 다중 패러다임 지원, 다양한 라이브러리, 성능 최적화 방법 등을 상세히 다루겠습니다. 곧 결과를 공유해 드리겠습니다.Python의 AI 개발에서의 기술적 장점Python은 인공지능(AI) 개발 분야에서 사실상 표준 언어로 자리매김했습니다. 이는 언어 자체의 단순하고 유연한 문법, 다양한 프로그래밍 패러다임 지원, 방대한 라이브러리와 프레임워크 생태계, 빠른 프로토타이핑 능력, 활발한 오픈 소스 커뮤니티, 그리고 성능 최적화를 위한 방법의 존재 등 여러 측면에서 Python이 뛰어난 강점을 지니고 있기 때문입니다. 아래에서는 이러한 각 장점들을 설명하고 간단한 코드 예..

웹개발/python 2025.03.21

[파이썬] 설치 및 실행 방법

파이썬을 설치하고 실행하는 방법을 자세히 설명해 줄게. 운영체제(Windows, macOS, Linux) 별로 방법이 조금씩 다르니, 사용하는 운영체제에 맞게 따라 하면 돼.1. 파이썬 설치 방법Windows에서 파이썬 설치하기공식 사이트 방문파이썬 공식 다운로드 페이지에 접속해.최신 버전 다운로드페이지 상단에 자동으로 운영체제에 맞는 최신 버전이 표시돼. "Download Python [버전]" 버튼을 눌러 설치 파일(.exe)을 다운로드해.설치 프로그램 실행다운로드한 .exe 파일을 실행해."Add Python to PATH" 옵션을 반드시 체크해. (환경 변수 설정을 자동으로 해줌)"Install Now"를 클릭하여 기본 설정으로 설치해.설치 완료 후 "Close"를 클릭.설치 확인Win + R을 ..

웹개발/python 2025.03.19

[미드저니] 디퓨전 모델을 활용하여 이미지를 생성

MidJourney의 AI 기술 개요MidJourney는 인공지능을 활용한 이미지 생성 모델로, 주로 딥러닝과 신경망 모델(Neural Networks) 을 기반으로 한 디퓨전 모델(Diffusion Model) 을 활용하여 이미지를 생성한다. 현재 MidJourney는 독자적인 AI 아키텍처를 사용하며, 오픈소스로 공개되지 않은 독점 기술을 사용하고 있어 Stable Diffusion 및 DALL·E 3와는 차별화된 특징을 가지고 있다.1. 핵심 AI 기술🔹 디퓨전 모델(Diffusion Model) 기반디퓨전 모델은 노이즈가 많은 이미지에서 점진적으로 원본 이미지를 복원하는 방식으로 동작하는 생성 모델.Stable Diffusion, DALL·E 같은 다른 AI 이미지 생성 모델도 유사한 방식을 사..

생산성/AI 2025.03.18

AI 이미지 생성 도구

AI image generation tools1. MidJourney고품질 이미지 생성이 가능하며, 디테일이 뛰어나고 아트적인 표현력이 강함.Discord에서 명령어를 입력하여 사용 가능.현실적인 사진부터 초현실적인 아트까지 다양한 스타일 지원.2. DALL·E 3 (by OpenAI)OpenAI에서 개발한 AI 이미지 생성 도구.텍스트 설명만으로 매우 정교한 이미지 제작 가능.ChatGPT와 연동되어 쉽게 이미지 생성 가능.3. Stable Diffusion오픈소스로 제공되며, 로컬에서도 실행 가능.다양한 커스텀 모델과 스타일을 적용할 수 있음.무료로 사용할 수 있지만, 설정이 복잡할 수도 있음.4. Leonardo.Ai게임, 애니메이션, 콘셉트 아트 제작에 최적화된 AI 이미지 생성기.초고해상도 및 ..

생산성/AI 2025.03.18

dat.gui - UI 기반 컨트롤 패널을 생성

https://github.com/dataarts/dat.gui GitHub - dataarts/dat.gui: Lightweight controller library for JavaScript.Lightweight controller library for JavaScript. Contribute to dataarts/dat.gui development by creating an account on GitHub.github.com🎛 dat.GUI란?dat.gui - Creates a UI-based control panel**dat.GUI**는 웹 애플리케이션에서 UI 기반 컨트롤 패널을 생성하는 JavaScript 라이브러리입니다.Three.js, WebGL, 3D 그래픽, 데이터 시각화 프로젝트에서..

웹개발 2025.03.18

stats.js - 성능 모니터링을 위한 JavaScript 라이브러리

https://github.com/mrdoob/stats.js/ GitHub - mrdoob/stats.js: JavaScript Performance MonitorJavaScript Performance Monitor. Contribute to mrdoob/stats.js development by creating an account on GitHub.github.com 📊 stats.js란?**stats.js**는 성능 모니터링을 위한 JavaScript 라이브러리로, 웹 애플리케이션이나 게임에서 프레임 속도(FPS), 메모리 사용량, CPU 부하 등을 실시간으로 측정하는 도구입니다. 주로 Three.js, WebGL, 게임 개발, 인터랙티브 웹 페이지에서 성능을 분석하는 데 사용됩니다.✅ 주요 기..

웹개발 2025.03.18

[리액트] React18 주요 개선점

React는 사용자 인터페이스 구축을 위한 JavaScript 라이브러리로, 최신 버전인 React 18에서는 개발자 경험과 애플리케이션 성능을 향상시키기 위한 여러 기능이 도입되었습니다.자동 배칭(Auto Batching): 이제 여러 상태 업데이트가 자동으로 배칭되어, 불필요한 리렌더링을 줄이고 성능을 향상시킵니다. 예를 들어, 이전에는 각각의 setState 호출이 별도의 렌더링을 유발했지만, React 18에서는 이러한 호출이 자동으로 배칭되어 한 번의 렌더링만 발생합니다. citeturn0search5동시성 기능(Concurrent Features): React 18은 동시성 기능을 도입하여, 렌더링 작업을 여러 작은 단위로 나누어 우선순위에 따라 처리합니다. 이를 통해 사용자 인터페이스..

웹개발/reactjs 2025.03.17

[자바스크립트] SOLID 원칙

SOLID 원칙: 객체지향 프로그래밍(OOP) 설계 원칙SOLID 원칙은 유지보수성과 확장성을 높이기 위한 객체지향 설계 원칙이다. 자바스크립트 코드 예제를 통해 이해해보자.1. 단일 책임 원칙 (Single Responsibility Principle, SRP)한 클래스(또는 모듈)는 하나의 책임만 가져야 한다.즉, 한 가지 기능만 담당해야 하며, 변경이 필요한 이유가 하나여야 한다.❌ 잘못된 예제class Report { generate() { console.log("보고서 생성"); } saveToFile() { console.log("파일로 저장"); }}➡️ Report 클래스는 보고서 생성과 파일 저장 두 가지 책임을 가진다.➡️ 파일 저장 방식이 변경되면 Report 클래스..

728x90
반응형