Web 21

[Python] #1. 기본 출력 / 함수 / 변수

2025.02.17 - [Web/Backend] - [Python] #0. Python 시작하기 [Python] #0. Python 시작하기※Udemy "Python 부트캠프 : 100개의 프로젝트로 Python 개발 완전 정복" 강의의 내용을 정리하여 포스팅하였습니다.Python 시작하기1. Python 설치Python 학습을 위해 아래 링크를 클릭해 최신 버전의 파이eunjitech.tistory.com#1. 기본 출력 / 함수 / 변수1. 문자열 출력하기print("Hello world!")print("Hello world!\nHello world!")print("Hello" + "EJ") # HelloEJ\n: 새 줄로 출력2. 입력 함수 input() function사용자가 원하는 데이터에 대한..

Web/Backend 2025.02.17

[Python] #0. Python 시작하기

※Udemy "Python 부트캠프 : 100개의 프로젝트로 Python 개발 완전 정복" 강의의 내용을 정리하여 포스팅하였습니다.Python 시작하기1. Python 설치Python 학습을 위해 아래 링크를 클릭해 최신 버전의 파이썬을 다운로드 후 설치합니다.https://www.python.org/downloads/2. PyCharm 프로그램 설치PyCharm 프로그램을 통해 파이썬 코드를 작성할 것이기 때문에 아래 링크를 클릭해 설치합니다.https://www.jetbrains.com/edu-products/download/#section=pycharm-edu3. Python bootcamp 코스 설치설치 후 Learn 메뉴 클릭 → Enable Access 클릭상단 메뉴에 File → Learn ..

Web/Backend 2025.02.17

[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..

Web/Frontend 2024.05.15

[three.js 기초 #3] Material

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..

Web/Frontend 2024.05.13

[three.js 기초 #2] Scene

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..

Web/Frontend 2024.05.12

[three.js 기초 #1] Geometry

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..

Web/Frontend 2024.05.12

[three.js 기초 #0] 시작하기 & 환경 세팅

※ 순수 자바스크립코드와 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 가속을 통한 이미지와 애니메이션..

Web/Frontend 2024.05.12

[React Native #03] ScrollView & FlatList

이전 글 보러가기 👉 [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 스크롤 가능한 속성을 제공하며, 스크롤 영역은 부모 컴포넌트에서 제공합니다. ... //스크롤 ..

Web/Frontend 2024.02.23

[React Native #01] React Native란 무엇일까

[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..

Web/Frontend 2024.02.23

[MBTI 테스트 사이트 만들기 #5] 카카오톡 공유하기 버튼 추가하기(React)

이전 글 보러 가기 👉 [MBTI 테스트 사이트 만들기 #4] 테스트 로직 만들기 (feat. 울집 고양이) [MBTI 테스트 사이트 만들기 #5] 카카오톡 공유하기 버튼 추가하기(React) 친구에게 테스트 결과를 공유하도록 하기 위해서 카카오 공유 API를 활용하려고 합니다. 우선 카카오톡 콘솔 사이트로 가서 어떤 API가 있는지 확인해 보겠습니다. kakao developers > 문서 https://developers.kakao.com/docs/latest/ko/index Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. developers.kakao.com 카카오 API를 ..

Web/Frontend 2023.11.14
반응형