프론트엔드 첫걸음

리액트 프로젝트를 할때 이렇게 @ 로 절대경로를 표시해주고 있다. (복잡한 프로젝트에서 상대경로 ../../../ 로 import 해오는것은 .... ) import React from 'react' import { Routes, Route, Navigate } from 'react-router-dom' import Splash from '@/page/Splash.jsx' 현재 vite 사용하여 빌드하는 프로젝트에서 아래와 같이 alias 사용해서 절대경로로 설정해주고있다. import { defineConfig } from 'vite' import react from '@vitejs/plugin-react' import path from 'path' import { ViteEjsPlugin } from..

react-webcam 라이브러리 사용할 때 비디오가 화면비율에 맞지 않게 출력되는 현상!! 비디오에 object-fit:cover 효과를 준 것처럼 하고 싶어요! >> react webcam without object-fit cover 검색 https://stackoverflow.com/questions/55920961/react-webcam-npm-package-video-sizing 친절하게 hook 사용예시까지 제공해줌..프로젝트에 반영하니까 바로 됨 !!! const isLandscape = size.height { // Handler to call on window resize function handleResize() { // Set window width/height to state set..

The WebGL renderer displays your beautifully crafted scenes using WebGL. WebGLRenderer 는 WebGL을 이용해서 예쁘게 만들어진 화면을 보여준다. 생성자(optional) canvas 렌더러가 그것의 결과를 그릴 canvas domElement 속성과 일치body에 canvas를 붙이겠다는 의미 const renderer = new THREE.WebGLRenderer(); document.body.appendChild(renderer.domElement); antialias 안티앨리어싱을 할 것인가 alpha 투명도 . 아무것도 없는 공간은 투명하게 보이도록 설정 default는 false (1): 불투명 , true (0) : 투명 속..

three.js-master.zip 다운로드 https://threejs.org/ [Three.js – JavaScript 3D Library threejs.org](https://threejs.org/) js 파일 직접 참조 참조하는 js 파일에 다운받은 three.js 코어 파일 경로 적어줌 main.js //import * as THREE from "three"; import * as THREE from "./three.module.js"; //import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; import * as THREE from "./OrbitControls.js"; import ~~ from &#39..

더해진것들? three.js의 핵심은 3D engine에 집중하고, 유용한 컴포넌트들(controls, loaders, 전처리효과등등)은 examples/jsm 폴더에 있다. 이것들을 Addons라고 한단다. 이전엔 examples라고 했다지.. 얘네들은 그대로( off the shelf , 기성품으로) 사용할수도 있고 재조합 및 커스터마이징 할 수 있어서 examples라고 하는데, 다른 서드파티 패키지들은 업데이트되고 변경되는 반면 얘네들은 최신버전이 반영안됨. 그러니까 업데이트는 필요없지만 반드시 개별적으로 import 해줘야 함. npm으로 install 한 상태에서도 OrbitControls를 사용하려면 three/addons/~ 에서 따로 import 해줘야 한다는 것! import { Orb..

React 없이, JSX를 직접 쓰고, 가상 DOM을 만들고,그걸 진짜 DOM으로 만들어서 화면에 그리는 기능을 직접 구현한다. 구성 요소 역할createElementJSX를 가상 DOM 객체로 변환함createDOM가상 DOM 객체를 실제 DOM 요소로 변환render만들어진 DOM을 브라우저에 붙임 //JSX를 가상 DOM 객체로 변환함export function createVNode(tag, props, ...children) { return { tag, props, children };}//가상 DOM 객체를 실제 DOM 요소로 변환export function createDOM(node) { if (typeof node === 'string') { return document.create..

전역으로 eslint를 설치하는 것은 권장되지 않는다고 한다. It is also possible to install ESLint globally, rather than locally, using npm install eslint --global. However, this is not recommended, and any plugins or shareable configs that you use must still be installed locally if you install ESLint globally. 현재 전역적으로 설치된 패키지가 어떤게 있는지 확인하는 방법 명령어로 확인 npm list -g --depth=0 전역적으로 node_module 설치된 경로로 이동해서 직접 확인 cd /usr/lo..

네트워크의 속도를 조절할 수 있는 개발자 도구 속성이 있다. 네트워크 > 느린 3G react-query 에서 isLoading 이 적용되었는지 확인하는 과정에서 사용할 수 있다. https://unit-15.tistory.com/85 throttle의 사전적 의미는 '목을 조르다, 목을 졸라 죽이다'로써, throttling은 '대역폭 제한, 대역폭 조절'을, No throttling은 '트래픽 조절 금지'를 뜻한다. 대역폭 제한(throttling)이란 인터넷 서비스 공급자가 의도적으로 인터넷 서비스를 느리게 하는 것을 의미한다. 대역폭을 제한함으로써 네트워크의 과부하를 막으며, 네트워크 트래픽을 규제할 수 있다.

개요김민태 React 강의를 보다가 DOM을 추가하는 코드에서 forEach(bind()) 부분이 이해되지 않았다. 처음에는 forEach(child => parent.appendChild(child))는 이해가 됐는데, forEach(parent.appendChild.bind(parent))가 같은 동작을 한다는 점이 납득되지 않았다. 그래서 이 부분을 공부한 내용을 정리해 본다.function createDOM(vdom) { const element = document.createElement(vdom.tag); // element가 생성됨 vdom.children .map(createDOM) // 각 자식 요소를 재귀적으로 DOM 요소로 변환 .forEach(element.appe..

아직 part2 canvas 강의밖에 올라오지 않아 해당 부분에 관한 강의후기만 남긴다. 느낀점 1. 명확하다. 나는 웬만한 강의들을 다 한번씩 찍먹해보았는데, 어떤 강의는 강의 찍기 전 리허설 같은것도 안하는지.. "아 죄삼다. 이부분이 잘못되었네요" 이렇게 하고 넘어가버린다. 제로초님처럼 화면에 자막으로 '이부분 오타입니다 ' 띄워주고 바로바로 정정해주면 좋은데 나는 강의 30분대에서 멈춰서 오류난다고 1시간쯤 방황하다가 나중에보면 강사가 40분대에 가서 오타였다, 오류였다 정정해주는 경우도 있었다. 강사님이야 라이브코딩하면서 10분만에 오류확인하는 거겠지만, 코드 따라치는 입장에선 중간에 일시정지해놓고 한참 방황하는데.... 하지만 이번 패캠 강의는 달랐다. ppt와 대본이 완전히 준비되어 있는 느..