Sass variables are simple: you assign a value to a name that begins with $, and then you can refer to that name instead of the value itself. But despite their simplicity, they’re one of the most useful tools Sass brings to the table. Variables make it possible to reduce repetition, do complex math, configure libraries, and much more. Sass에서의 변수는 그 이름 앞에 $를 붙여 선언할 수 있습니다. 변수를 호출할 때도 동일하게 그 앞에 $를 ..

Mixins allow you to define styles that can be re-used throughout your stylesheet. They make it easy to avoid using non-semantic classes like .float-left, and to distribute collections of styles in libraries. Mixin은 스타일 시트에서 사용자가 정의한 스타일을 재사용할 수 있게 해주는 구문입니다. 기본적으로 mixin으로 정의하고, include로 불러옵니다. Mixin을 이용한 스타일은 아래와 같이 정의할 수 있습니다.@mixin center { display: flex; justify-content: center; align-item..

SassSass(Syntactically Awesome Style Sheets)는 CSS를 좀 더 쉽게 다루기 위해 개발된 전처리기(preprocessor) 입니다. CSS는 단순하지만, 프로젝트의 규모가 커질 수록 쓰기 불편한 점이 많았습니다. 특정 색상이나 선택자가 반복해서 나타나거나, 조건문 또는 반복문 등의 흐름제어가 불가능 한 것, 그리고 변수를 지원하지 않는 것 등이 그 예입니다. Sass는 이런 문제점들을 보완하고자 기존 CSS에 추가적인 문법을 추가하였습니다.$main-color: #3498dbbody color: $main-color background: whiteSass는 빌드할 때 CSS로 변환되기 때문에, 기존에 존재하던 CSS 파일도 확장자만 바꾸면 Sass 파일로서 사용할 수..

Github의 저장소와 연동하는 방법을 기준으로 설명합니다. Github와 연동하여 배포하면 미리 빌드하지 않아도 Netilfy에서 자동으로 빌드 후 배포를 진행합니다. 또한, Guithub의 저장소를 새로 갱신할 때마다 자동으로 재배포가 이루어집니다.주의 배포한 클라이언트 https://[프로젝트 이름].netlify.app에서 라우팅('/main', '/user'등 하위 경로 접속) 할 때는 Netlify가 정적 파일을 찾습니다. 하지만 /main/index.html 같은 실제 파일은 정적 파일이 아니어서 찾을 수 없습니다. 그래서 클라이언트는 404 “Page not found”를 띄우게 됩니다. 이를 위해 Netlify가 모든 경로 요청을 index.html로 리다이렉트하도록 설정해야 라우터가 정..

Three.js의 캔버스에 텍스트를 랜더링할 때는 크게 아래 과정을 따릅니다. 또 다른 캔버스를 만들어 그 안에 텍스트를 '그리고'해당 캔버스를 '텍스쳐'로 만든 후만든 텍스쳐를 원래 three.js 캔버스 내의 물체에 '씌운다'1단계까지는 three.js의 요소가 아닌 canvas와 그 context만을 사용하며,2단계 부터는 three.js의 CanvasTexture와 sprite(혹은 mesh)를 사용합니다. 작업사용 객체1단계텍스트 작성HTMLCanvasElement, CanvasRenderingContext2D2단계텍스쳐 변환THREE.CanvasTexture3단계three.js 내 구현THREE.SpriteMaterial, THREE.SpriteorTHREE.MeshBasicMaterial,..

Tailwindcss를 사용할 때 알아두면 좋은 잡다한 사항들에 대해 정리합니다.투명도 별도 적용하기기본적으로 css는 투명도가 누적 적용됩니다. 이 말은 부모 요소에서 90%의 투명도를 적용한다면, 자식 요소에서 100%의 투명도(=투명도 없음)을 적용해도 여전히 90%의 투명도로 적용된다는 뜻입니다. 때문에 투명도를 별개 적용하려면 opacitiy보다는 rgba의 값으로 background를 설정해야 하는데, tailwind에서는 아래와 같이 rbga값을 간단하게 나타낼 수 있습니다....이는 main이라는 색상에 90%의 alpha(=투명도)값을 적용한다는 뜻입니다.

Three.js에서 raycasting을 다루는 방법에 대해 설명합니다. Raycasting은 컴퓨터 그래픽스 기법 중 하나로, 사용자의 눈에는 보이지 않는 가상의 광선을 조사하여 물체의 표면이 어디에 있는지 파악하는 방법입니다.Three.js는 이를 위해 Raycaster( )라는 이름의 객체를 지원해줍니다.import { Raycaster } from "three";const raycaster = new Raycaster();setFromCamera( )setFromCamera(THREE.Vector2, THREE.Camera); setFromCamera( ) 메소드는 지정한 카메라의 위치에서부터 화면에서 보이는 2차원 좌표에 해당하는 위치를 향해 광선을 조사합니다. 아래와 같이 좌표를 마우스의 위..

https://schteppe.github.io/cannon.js/ schteppe/cannon.js @ GitHub schteppe.github.io Three.js에서는 여러가지 물리엔진 라이브러리를 지원합니다. 그 중에서도 cannon.js는 다루기 쉬운 편에 속하는 라이브러리입니다. 다음과 같이 설치할 수 있습니다.npm install cannon-esCannon.js는 물리엔진의 주체가 되는 body를 만들어 서로 상호작용 시킵니다.Three.js의 mesh가 눈에 보이는 형태라면, cannon.js의 body가 실제 알맹이라고 볼 수 있습니다. 때문에 매 프레임마다 mesh의 transform을 cannon body와 동기화한다면 실제 물리적 상호작용을 화면에 랜더링 할 수 있습니다.1. 세계..