메타 태그란?html은 두 부분으로 구성되어 있습니다. 바로 head 태그와 body 태그입니다. body 태그에는 실제로 사용자에게 보여주는 컨텐츠들이 들어가게 됩니다. head 태그에는 "메타 태그" 및 미리 다운로드 해야할 "링크(태그)"들이 들어갑니다. 보통 메타 태그들을 간과하기 쉬운데, (저를 포함해서) 앞으로 잊지말고 잘 작성하자는 의미로 포스팅을 쓰게 되었습니다. 쉽게 설명하자면 메타 태그는 사이트에 대한 정보들이 들어간다고 생각하시면 됩니다. 이러한 정보들은 사실 우리가 읽는 것은 아닙니다. 바로 구글과 네이버에서 사이트를 수집하는 크롤러와 같은 기계들이 읽는 것이죠. 검색 엔진에 상위권으로 노출된다는 것은 아주 좋다고 할 수 있습니다. 메타 태그들을 잘 작성하면 크롤러들이 우리가 만든 ..
모든 것을 다 정의했으니 이제 렌더링 해보겠습니다.렌더러도 여러 종류가 있지만 보통 WebGLRenderer를 사용합니다. 코드를 보시면 antialias에 true를 전달한 것이 보이시죠?예전 게임들 보시면 캐릭터 등 모양이 각져 있는 것을 볼 수 있는데, 이는 사각형 점을 찍어서 모양을 나타내기 때문입니다. antialias는 형체의 끝부분과 연결된 부분을 배경색과 형체색의 중간색으로 해서 이 각진 부분을 부드럽게 만들어 주는 것입니다. 저는 이 옵션을 사용하겠다고 전달한 것입니다. 렌더링할 사이즈(캔버스의 크기)를 설정하신 다음 body태그에 renderer.domElement를 자식으로 추가해주시면 됩니다. renderer.domElement는 우리가 그린 것들이 담겨 있는 캔버스 태그입니다. 이..
mesh는 2가지로 나눠져 있습니다.바로 형태와 재질입니다. 왜 이 두가지를 구분했을까요? 똑같은 형태지만 여러 가지의 재질 및 색깔을 사용할 수 있고, 다른 형태들이지만 동일한 재질 및 색깔을 사용하기 편하려면 둘을 구분해서 사용하는 것이 타당하겠죠? 위의 것을 three.js의 용어로 나타내면 mesh는 geometry와 material로 나눠져 있다고 할 수 있습니다. 문서에 보면 아주 많은 형태들이 나타나 있습니다. 우리가 할 건 하고 싶은 형태를 선택한 후 값을 전달하면 되는 것 뿐입니다. 가장 무난한 BoxGeometry를 선택했습니다. 너비, 높이, 깊이를 전달하면 간단하게 만들어줍니다. 재질은 (예시에서) 많이 사용되는 것을 꼽아보자면 MeshBasicMaterial, MeshLambert..
scene을 정의했으니 이제는 camera를 만들어봅시다.설명들에 비해서 코드는 되게 짧습니다. 전체 자바스크립트 코드는 50줄 정도되지만 한번에 쓰기엔 설명할 것들이 너무 많게 느껴져서 이렇게 부분을 나눠서 설명하는 것을 이해해주세요. 많은 예시를 보면 보통 두 개의 카메라를 사용합니다. PerspectiveCamera와 OrthographicCamera입니다. 둘의 차이는 원근법이 나타나는 지 나타나지 않는 지를 생각하시면 됩니다. PerspectiveCamera가 원근법이 나타나기 때문에 예제에서 자주 사용되어 집니다. 공식 문서에는 PerspectiveCamera(fov: Number, aspect: Number, near: Number, far: Number)라고 나타나 있습니다. 각각의 값이 ..
우리가 정의할 것들을 다시 한번 생각해봅시다.three.js에 대해서 설명할 때 우리가 필요한 것들을 모두 정의한 후에 그냥 렌더링 하면 된다고 했었습니다. 그 상황을 다시 되짚어 볼까요? 오브젝트 들이 있어야 하는 장소(장미 꽃이 있는 장소), 오브젝트(장미꽃, 나무줄기, 잎), 장미를 비추는 빛, 우리의 시선 및 카메라가 필요하고, 그것들을 다 정의한 후에 렌더링 하면 된다고 했었습니다. 각각의 것들이 three.js에서는 순서대로 scene, mesh, light, camera랑 매치된다고 했었죠. 이것들만 기억하면 그 다음부터는 그냥 정의하면 됩니다.scene을 정의해봅시다.모든 것은 Init 함수안에 순서대로 정의할 예정입니다. 그리고 페이지가 로드되면 Init 함수가 실행되도록 이벤트를 지정해..
three.js 라이브러리를 다운로드 받아봅시다.공식 홈페이지에서 다운로드를 누르면 three.js - master 폴더를 다운로드 하게 됩니다. 300MB가 넘는 크기인데, 저희가 처음에 만들 튜토리얼에서는 사용하지 않는 것들이 많기 때문에 일단은 minified를 사용하도록 하겠습니다. three.min.js 소스코드 보기 해당 소스코드는 공식홈페이지 > source code를 누르시면 깃허브로 이동하게 되고, README에 나타나 있습니다. 직접 가셔서 소스코드를 보셔도 되고 간편하게 위의 링크를 클릭해주셔도 됩니다. 마우스 오른쪽 버튼을 클릭하고 "다른 이름으로 저장"을 누르면 three.min.js 로 저장할 수 있습니다. 해당 파일을 우리의 튜토리얼 폴더로 옮겨주세요. three-tutoria..
expo three를 다루기 전에 우선 three.js를 배워봅시다.expo three를 다룰 수 있게되면 여러가지 게임(앱)을 만들어 볼 수 있을 것이라고 생각해서 궁극적으로는 expo three로 간단한 게임을 만드는 튜토리얼을 "언젠가는" 올리고 싶습니다. 저도 배우고 싶은 거라 여러 가지 자료들을 찾고, 배우고 있는 중에 우선은 단계적으로 three.js에 대한 튜토리얼을 진행해보도록 하겠습니다.함께 무엇을 만들어볼까요?우선은 회전하는 정사각형을 같이 만들어보도록 하겠습니다. 예제 보러가기 우선은 회전하는 사각형을 만들고 차차 이벤트들도 추가해보면서 three.js를 이해해보도록 하겠습니다.three.js란?위에 올린 이미지처럼 웹 브라우저에 3d 형태로 나타낼 수 있게 도와주는 것이 WebGL이..
로컬 스토리지를 확인해보세요.개발자모드(크롬에서 F12)를 누르고 Application 탭을 눌러보세요. 좌측에 local storage가 있는 것을 확인할 수 있습니다. 눌러보면 key와 value로 이루어진 형태를 볼 수 있습니다. 다른 페이지를 실행 중에 로컬스토리지를 확인하셨다면 이미 많은 데이터들이 저장되어 있는 것을 확인할 수 있습니다.로컬스토리지란 무엇일까요?세션이나 쿠키 같이 데이터를 저장하는 장소 중의 하나입니다. 로컬스토리지는 일정한 기간이 지나면 삭제되는 세션과는 달리 데이터의 만료기간이 없이 계속 저장됩니다. 데이터의 값은 항상 문자로 저장하셔야 하고, 간편하게 불러올 수 있습니다. 간단한 예시를 통해서 사용법을 배워보도록 하겠습니다.getItem과 setItem데이터의 값을 불러올..
직접 한번 만들어보면서 css grid를 연습해봅시다.실제로 만들어보면 앞에서 다뤘던 것을 금방 익힐수 있습니다. 페이지 보러가기 간단한 싱글 페이지입니다. 링크에 접속하시면 똑같은 화면을 볼 수 있습니다.예제를 만들 때 도움이 되는 사이트이용하시는 곳이 있다면 상관없지만 해당 사이트를 만들 때 아이콘 등을 어디를 이용할 지 모르겠다면 아래의 사이트를 이용하시면 됩니다. iconmonstr 바로 가기 저는 svg에서 embed를 통해 직접 삽입을 하는 편입니다. 이미지의 경우 저는 핀터레스트를 통해서 이미지를 찾고 이미지의 링크를 div태그의 배경에 삽입했습니다. 또한 css 리셋 등은 검색하면 바로 나오지만 아래에 링크를 첨부합니다. css reset 바로 가기분석해보기예제용으로 만든 것이기 때문에 모..
min-content와 max-content 활용이름에서 알 수 있듯이 min-content는 최소한의 컨텐츠 크기를, max-content는 최대한의 컨텐츠 크기를 가지게 해주는 값입니다. 위의 코드를 봐주세요. 해당 코드에 우리는 가운데 아이템에 "this is long text"라는 구문을 넣었고, 아이템들을 감싸고 있는 컨테이너에는 그리드를 선언하고 가운데 트랙의 값을 min-content를 주었습니다. 우리가 적은 구문이 어떻게 되어 있나요? 띄워쓰기 한 부분을 기준으로 컨텐츠가 내려가 있고, 컨텐츠를 유지하는 가장 최소의 공간은 가지고 있습니다. 이렇게 만들어주는 것이 "min-content"입니다. 그럼 max-content는 어떻게 될까요? 텍스트가 차지할 수 있는 최대의 공간은 모든 텍스..