개발 & IT 정보

[nvm] macOS에서 nvm 설치하기 (feat. brew)

[nvm] macOS에서 nvm 설치하기 (feat. brew)nvm: node 버전 관리 도구brew를 통해 nvm을 설치해보도록 하겠습니다.Homebrew 설치Homebrew: macOS 및 Linux 시스템에서 소프트웨어 패키지의 설치를 간편하게 해주는 오픈 소스 패키지 관리자https://brew.sh/ HomebrewThe Missing Package Manager for macOS (or Linux).brew.sh설치 명령어를 복사하여 실행합니다./bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"brew 명령어설치된 패키지 목록 확인brew list패키지 설치brew ins..

[R3F] React에서 3D Model 보여주기 (feat. gltf)

[R3F] React에서 3D Model 보여주기React-three-fiber와 React-three-drei을 통해 3D 파일을 import하여 보여줄 것이다.1. 3D 파일 다운로드3D 파일이 없다면 아래 사이트에서 다운로드한다.https://sketchfab.com/feed Log in to your Sketchfab account sketchfab.com원하는 이미지 선택 -> gltf 파일 다운로드 클릭gltf를 받으면 bin, gltf포멧형식의 파일을 볼 수 있다 2. 프로젝트 생성CRA로 프로젝트를 생성한다npx create-react-app r3fProject3. 3D 파일 Public폴더에 추가생성된 프로젝트 Public 폴더에 3D파일을 넣는다bin파일명과 gltf buffers ur..

2024.05.12 - [frontend] - [three.js 기초 #2] Scene [three.js 기초 #2] Scene2024.05.12 - [frontend] - [three.js 기초 #1] Geometry [three.js 기초 #1] Geometry2024.05.12 - [frontend] - [three.js 기초 #0] 시작하기 & 환경 세팅 [three.js 기초 #0] 시작하기 & 환경 세팅※ 순수 자바스크립코드와 threeeunjitech.tistory.com[three.js 기초 #3] MaterialMaterial 종류공식문서: https://threejs.org/docs/index.html#api/en/materials/LineBasicMaterial three.js doc..

2024.05.12 - [frontend] - [three.js 기초 #1] Geometry [three.js 기초 #1] Geometry2024.05.12 - [frontend] - [three.js 기초 #0] 시작하기 & 환경 세팅 [three.js 기초 #0] 시작하기 & 환경 세팅※ 순수 자바스크립코드와 three 라이브러리를 사용한 기초 실습입니다. 유튜버 GIS DEVELOPER 님의 강eunjitech.tistory.com[three.js 기초 #2] Scene1. Scene이란Scene은 3D 장면을 구성하는 모든 요소들을 포함하는 컨테이너 역할을 합니다.3D 오브젝트, light, cameraScene 기본 생성 코드const scene = new THREE.Scene();Rendere..

2024.05.12 - [frontend] - [three.js 기초 #0] 시작하기 & 환경 세팅 [three.js 기초 #0] 시작하기 & 환경 세팅※ 순수 자바스크립코드와 three 라이브러리를 사용한 기초 실습입니다. 유튜버 GIS DEVELOPER 님의 강의(https://youtu.be/vjKuk5Vp93k?si=aoRRPljQ3pKDDJO8 )를 보고 정리한 내용입니다.1. Three.js 란?WebGL 위에 구eunjitech.tistory.com[three.js 기초 #1] Geometry1. Geometry란?Geometry는 메쉬, 선, 점 등의 기하학적 형태를 표현하는 데 사용되는 three 핵심 요소모든 정보 데이터들은 하나로 모여 GPU에 빠르게 전달됨2. Geometry 종류B..

※ 순수 자바스크립코드와 three 라이브러리를 사용한 기초 실습입니다. 유튜버 GIS DEVELOPER 님의 강의(https://youtu.be/vjKuk5Vp93k?si=aoRRPljQ3pKDDJO8 )를 보고 정리한 내용입니다.1. Three.js 란?WebGL 위에 구축된 고수준의 Javascript 라이브러리.3D 그래픽을 쉽게 웹 브라우저에 표시하고, 저수준의 WebGL을 직접 다룰 필요 없이 3D 장면, 모델, 카메라, 애니메이션 등을 구축할 수 있음.WebGLWeb Graphics Library 는 웹 브라우저에서 실시간 2D 및 3D 그래픽을 렌더링하기 위한 저수준의 그래픽 API.OpenGL ES의 웹 기반 버전으로, HTML5의 요소를 활용하여 GPU 가속을 통한 이미지와 애니메이션..

재미있는 AI 사이트가 있어서 가져와봤습니다. 제목 그대로 AI로 웹툰을 생성해 주는 사이트인데요. 기본적인 기능은 모두 무료로 제공하고 있어서 간단한 웹툰 만들기에 좋은 것 같아 알려드리려고 합니다. Comicai Comicai라는 사이트에서 AI 이미지 생성 및 웹툰 만들기 기능을 제공해주고 있습니다. 먼저 아래 사이트에 방문하여 회원가입과 로그인을 해주세요. https://comicai.ai/ Comicai comicai.ai 로그인 후 작성시작 버튼을 누르면 만화정보를 입력하는 폼이 나옵니다. 1. 만화정보 입력 이 단계에서는 '만화 제목'과 '제작자' 그리고 만화를 어떤 스타일로 생성할지에 대한 여러 가지 스타일 형식이 나옵니다. 여기서 선택한 스타일을 참조하여 AI가 이미지를 그려주는 것 같습..

이전 글 보러가기 👉 [React Native #02] Expo 프로젝트 생성 [React Native #02] Expo 프로젝트 생성 현재 날짜 기준(2024.02.23)으로 작성된 글입니다. 버전이 다를 수 있는 점 참고 바랍니다. 이전 글 보러가기 👉 [React Native #01] React Native란 무엇일까 [React Native #01] React Native란 무엇일까 [React Native # jamjamtest.com [React Native #03] ScrollView / FlatList 이번 포스팅에는 핵심 컴포넌트의 기능 몇 가지를 소개해보고자 합니다. 1. ScrollView 스크롤 가능한 속성을 제공하며, 스크롤 영역은 부모 컴포넌트에서 제공합니다. ... //스크롤 ..

현재 날짜 기준(2024.02.23)으로 작성된 글입니다. 버전이 다를 수 있는 점 참고 바랍니다. 이전 글 보러가기 👉 [React Native #01] React Native란 무엇일까 [React Native #01] React Native란 무엇일까 [React Native #01] 기초 React Native란? 네이티브 모바일 앱을 제작하기 위한 React 기능 기반의 오픈 소스 프레임워크 React 구성 요소와 동일한 API 구조를 사용 → React에 대한 사전지식이 있으면 유리하 jamjamtest.com [React Native #02] Expo 프로젝트 생성 1-1. Visual Studio Code 설치 Visual Studio Code는 국내에서 가장 많이 사용되고 있는 무료 코드..

[React Native #01] 기초 React Native란? 네이티브 모바일 앱을 제작하기 위한 React 기능 기반의 오픈 소스 프레임워크 React 구성 요소와 동일한 API 구조를 사용 → React에 대한 사전지식이 있으면 유리하게 사용할 수 있음 React.js + React Native → Real Native Mobile Apps (iOS / Android) UI, 로직이 처리되는 방식 UI 요소(View, Text..): Native에 컴파일됨 로직(javascript 코드): 컴파일되지 않음 React Native 내장 컴포넌트 코드 구성 const App = preops => { return ( Hello world! ); }; 해당 코드는 Native App 코드로 컴파일되어 R..