리액트(부트)스트랩의 가장 큰 특징은 "모바일 우선" 이라는 것입니다.공식 홈페이지에 레이아웃에 보면 큰 설명은 안 되어있지만 대략 레이아웃을 잡는데 Container, Row, Col 컴포넌트를 이용하면 된다고 나와있습니다. 레이아웃 문서 확인하기 Container 컴포넌트를 쓴다면 전체를 감싸는데 사용할 것이고, 중요한 것은 Row와 Col 컴포넌트 입니다. Row는 줄을 나누는 것이고, Col이 그 안에서 공간을 나눕니다. 위와 같은 코드가 있다면 아래와 같이 나타납니다. 정확히 3등분으로 나눠지게 됩니다. 즉 다른 코드를 추가하지 않는다면 Row 컴포넌트 안에 Col 컴포넌트의 개수만큼 나눠진다는 것이죠. 너비가 달라져도 똑같은 크기를 가지게 됩니다.크기 다르게 주기리액트스트랩과 부트스트랩은 주어..
가장 유명한 프론트엔드 웹 프레임워크인 부트스트랩을 아시나요?트위터 부트스트랩은 가장 유명한 프론트엔드 웹 프레임워크입니다. 아주 깔끔하면서 트위터에서 사용할 만한 디자인으로 쉽게 웹 페이지를 꾸밀 수 있게 해줍니다. 리액트스트랩은 부트스트랩의 리액트 버전입니다. 튜토리얼을 통해서 간단하게 리액트스트랩(과 부트스트랩)을 다루는 방법을 배워보도록 하겠습니다. 다운로드 하기우선은 create-react-app으로 리액트 환경을 만들어보도록 하겠습니다. npx create-react-app 프로젝트명 해당 명령어로 프로젝트를 만들어주세요. 이제 생성한 프로젝트로 가서 리액트스트랩과 부트스트랩을 다운로드 받아주시면 됩니다. yarn add bootstrap reactstrap 부트스트랩까지 다운로드 받는 이유는..
메타 태그란?html은 두 부분으로 구성되어 있습니다. 바로 head 태그와 body 태그입니다. body 태그에는 실제로 사용자에게 보여주는 컨텐츠들이 들어가게 됩니다. head 태그에는 "메타 태그" 및 미리 다운로드 해야할 "링크(태그)"들이 들어갑니다. 보통 메타 태그들을 간과하기 쉬운데, (저를 포함해서) 앞으로 잊지말고 잘 작성하자는 의미로 포스팅을 쓰게 되었습니다. 쉽게 설명하자면 메타 태그는 사이트에 대한 정보들이 들어간다고 생각하시면 됩니다. 이러한 정보들은 사실 우리가 읽는 것은 아닙니다. 바로 구글과 네이버에서 사이트를 수집하는 크롤러와 같은 기계들이 읽는 것이죠. 검색 엔진에 상위권으로 노출된다는 것은 아주 좋다고 할 수 있습니다. 메타 태그들을 잘 작성하면 크롤러들이 우리가 만든 ..
expo를 이용해봅시다.직접 react-native도 다운로드하고, 필요한 것들도 따라서 다운로드 해서 초기 환경을 세팅할 수도 있지만, expo를 이용하면 간단하게 리액트 네이티브 초기환경을 세팅할 수 있습니다. 또한 expo에서 제공해주는 여러 편리한 기능들이 있는데, 아마 가장 많이 사용하는 것이 아이콘 관련 기능일 것이고, 또 많이 사용하는 것이 다 만들고 나서 build할 때 그냥 간편하게 할 수 있다는 것이라고 생각합니다. expo에서 제공해주는 icon 보러가기 이처럼 해당 아이콘들을 간편하게 불러와서 사용할 수도 있고, 또 색을 넣을 때라던가 사용자가 이미지와 같은 리소스들을 다 불러올 때까지 앱로딩 화면을 보여주는 등의 기능도 있기 때문에 expo를 이용하는 것이 여러모로 이점이 많습니다..
모든 것을 다 정의했으니 이제 렌더링 해보겠습니다.렌더러도 여러 종류가 있지만 보통 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이..