일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 31 |
- BlockFormattingContext
- CustomHook
- BFC
- transition
- 리액트
- ignore padding
- 화살표2개
- accordian
- vite
- 부모요소의 패딩 무시
- ?? #null병합연산자
- twoarrow
- 제어컴포넌트
- createPortal
- 부모패딩
- QueryClient
- tailwindCSS
- react
- 문제해결
- es6
- 함수형프로그래밍
- Carousel
- parent padding
- alias설정
- ㅡ
- debouncing
- 조건부스타일
- DOM
- 서초구보건소 #무료CPR교육
- useQueryClient
- Today
- Total
목록전체 글 (182)
프론트엔드 첫걸음
function handleResize() { camera.aspect = window.innerWidth / window.innerHeight; //카메라의 종횡비 수정 camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); //렌더러 사이즈 수정 renderer.render(scene, camera); //재렌더링 } window.addEventListener('resize', handleResize);
함수와 변수 x를 받아서 함수에 변수 x 를 넣은 값을 반환하는 함수 fnc1 가 있다고하자. const fnc1 = (paraFnc, x) => paraFnc(x); 이것을 화살표 함수 2 개를 쓴 함수로 바꿔서 사용할 수 있다. const fnc2 = (paraFnc) => x => paraFnc(x); 왜냐면 이 화살표 2개짜리 함수는 아래의 함수와 같기 때문이다. function fnc3 (paraFnc) { return function(x) { return paraFnc(x) } } //fnc3 함수는 paraFnc함수를 받아서, // x를 받아 paraFn(x)를 반환하는 익명함수를 반환한다. 테스트 결과는 다음과 같다. //파라미터로 들어갈 함수 const double = x => x * 2..
[출처] https://medium.com/free-code-camp/how-do-javascript-rest-parameters-actually-work-227726e16cc8 How JavaScript rest parameters actually work My last article covered spread syntax and Object.assign in detail, but glossed over rest parameters in the interest of time. I do, however… medium.com 내부동작을 살펴보면 이렇다. someFunction = (...args) => args; 위 someFunction 함수는 아래와 같다. (옛날 문법으로 풀어서 보기) someFunc..
https://medium.com/free-code-camp/pipe-and-compose-in-javascript-5b04004ac937 A quick introduction to pipe() and compose() in JavaScript Functional programming’s been quite the eye-opening journey for me. This post, and posts like it, are an attempt to share my insights and… medium.com arrow 함수와 rest parameter, reduce 함수를 이해한 상태이면 아래와 같은 compose 함수를 이해할 수 있다. // 함수들과 x를 받아서 차례로 함수들에 결과를 대입하게 하는 ..
svg 파일은 비율이 있어서 화면에 가득차게 연출하면 화면의 일부가 잘린다. 이때 aspectRatio를 어떻게 할 것인지 설정을 바꾸어 어떤부분을 잘리게 해서 화면에 보여줄지 설정할 수 있다. preserveAspectRatio: 'xMidYMin slice', 이 경우 x축 중앙에 맞추고, Y축은 위쪽이 보이도록 ( Y축의 0값 부분이 잘리도록) 하는 설정이다 현재 lottie file을 사용해서 개발하고 있는데 rendererSetting에서 아래와 같이 설정해 줄 수 있다. rendererSettings: { preserveAspectRatio: 'xMidYMin slice', }, xMaxYMin slice 해주면 우측 위 방향의 프레임을 보존하는 형태로 잘린다.
리액트 프로젝트를 할때 이렇게 @ 로 절대경로를 표시해주고 있다. (복잡한 프로젝트에서 상대경로 ../../../ 로 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 '..
더해진것들? three.js의 핵심은 3D engine에 집중하고, 유용한 컴포넌트들(controls, loaders, 전처리효과등등)은 examples/jsm 폴더에 있다. 이것들을 Addons라고 한단다. 이전엔 examples라고 했다지.. 얘네들은 그대로( off the shelf , 기성품으로) 사용할수도 있고 재조합 및 커스터마이징 할 수 있어서 examples라고 하는데, 다른 서드파티 패키지들은 업데이트되고 변경되는 반면 얘네들은 최신버전이 반영안됨. 그러니까 업데이트는 필요없지만 반드시 개별적으로 import 해줘야 함. npm으로 install 한 상태에서도 OrbitControls를 사용하려면 three/addons/~ 에서 따로 import 해줘야 한다는 것! import { Orb..