전체 글 (5) 썸네일형 리스트형 Three.js 사용방법 (세팅,배경과 카메라 설정 ,렌더) three.js에 공식 사이트 문서다. 생각보다 복잡한 라이브러리라 참고해야 된다 https://threejs.org/docs/#manual/en/introduction/Creating-a-scene three.js docs threejs.org 1. three.js설치와 세팅방법npm설치, cdn으로 뭐 방법은 여러 개다이 글에서는 cdn으로 세팅하는 방법을 작성하겠다 importmap은 브라우저에서 자바스크립트 모듈을 가져올 때 특정 경로를 정의 해준다고 하는데 잘은 모르겠고 importmap을 타입에 적고 하면 브라우저가 js파일에 import * as THREE from "three"; 와 같이 npm으로 설치 안 해도 import문를 브라우저에서 인식해 주는 것 같아 보인다.. 자바스크립트 애니메이션 효과) IntersectionObserver 사용법 정리 웹사이트를 보다 보면 화면 스크롤을 내리면 특정 이미지나 글씨가 자연스럽게 나오는 애니메이션을 본 적 있을 것이다만드는 방법을 정리해 보겠다 대표적인 예시 영상이다 특정요소가 화면에 보이면 자연스럽게 애니메이션 하듯이 나온다 1. IntersectionObserver 관찰자 사용 치킨,피자,탕수육,짜장면 파이썬,자바스크립트,c언어 에스파,아이브,엔믹스,블랙핑크 애니메이션 할 html 요소를 queryselectorAll을 사용해서 변수에 담아주고div로 내가 감지하려고 하는 요소를 observe() 메서드 안에 넣어준다 2.threshold로 감지하기let observer =.. 자바스크립트 객체, 구조분해 할당 사용법 정리 오늘은 자바스크립트의 객체 구조분해 할당등에 대해 공부하였다1. 객체 사용법자바스크립트는 객체 기반의 언어이며 객체는 키와 밸류 형태로 이루어져 있다{}대괄호를 사용하며 객체 안에 데이터, 함수 등이 들어갔다 보면 됨let abc = { a : 10, b :22} // a가 키 , 10이 벨류let data =20let obj = { data}키와 벨류 한쌍을 객체의 속성이라고 한다객체를 만든 거를 사용하는 방법이 다console.log(abc) // { a: 10, b: 22 } 대괄호 안에 형태가 나온다console.log(abc.a) // 10 객체 형태안에 a의 키값인 10이 출력된다 , abc.b는 22console.log(obj.data) // 202. 객체의 속성함수 (객체에.. [nodejs]dotenv로 환경변수 관리하는 방법 dotenv는 환경변수파일인 env를 관리할때 쓰는 라이브러리이다env파일에는 api키, 중요한 정보가 들어가서 노출되면 안된다1.설치 방법npm i dotenvhttps://www.npmjs.com/package/dotenv dotenvLoads environment variables from .env file. Latest version: 16.4.7, last published: a month ago. Start using dotenv in your project by running `npm i dotenv`. There are 51826 other projects in the npm registry using dotenv.www.npmjs.com 2. 사용방법프로젝트 경로가 .env랑 dotenv.. express 백엔드 설치방법 보통 자바스크립트로 백엔드를 할려면 express를 설치 해야한다.(설치 전 노드는 당연히 설치 되어있어야한다 )https://expressjs.com/en/starter/installing.html Installing ExpressLearn how to install Express.js in your Node.js environment, including setting up your project directory and managing dependencies with npm.expressjs.com 1. myapp이라는 폴더를 생성해주고 터미널에 경로가 myapp인지 확인해주고 명령어 입력해줍니다npm init2. npm init하고 나면 아래와 같이 실행되는데description : 프로젝트에 대한.. 이전 1 다음
