본문 바로가기
반응형

전체 글

Redux 이해하기 Redux 는 React에서 제공하는 context api 와는 다른 써드파티 라이브러리로서 상태관리 툴이다. 이미 context api 라는 상태관리 툴이 있는데 redux가 왜 필요하고 왜 써야 하는지는 규모가 큰 어플리케이션일수록 redux가 더 좋은 가독성과 관리성을 보여주기 때문이다. context api 와 redux 를 비교하는 글들을 찾아보면 무슨 차이가 있는지 알게 될 것이다. 리액트에서 Redux를 사용하려면 우선 Action, Reducer, store 세가지가 기본적으로 필요하다. 우선 npm install redux react-redux redux-devtools-extension 이미지 출처 https://www.zerocho.com/category/React/post/57b60.. 더보기
json-server 활용법 리액트 프로젝트를 진행하면서 백엔드 쪽 API 작업이 진행되고 있지 않거나 http 리퀘스트를 활용하여 테스트 할 때 좋은 패키지로서 fake backend 역할을 한다고 보면 된다. crud 까지 가능하니 테스트용으로는 충분한 라이브러리다. npm install -D json-server 설치해준 뒤에 json파일을 하나 만들고 (데이터베이스 역할) db.json { "logs": [ { "message": "Changed network card in server 007", "attention": false, "tech": "Sam Smith", "date": "2019-05-31T15:46:10.179Z", "id": 1 }, { "id": 2, "message": "Workstation 007 no.. 더보기
Cannot find module 'html' node.js 에서 특정 html 파일과 css js 파일을 뿌려줘야 했는데 처음에 그저 폴더를 만들어서 그 안에 html 파일과 관련된 파일들을 넣어주고 경로를 설정해주었지만 이렇게 콘솔에 에러가 뜨면서 제대로 작동하지 않았다. 우선 먼저 뷰 엔진을 컨트롤 해줘야 하는데 내가 해결한 방법을 적어보겠다. npm install ejs 전체 코드중에 관련 있는 부분만 따왔다. //////////////////////////////////////// const ejs = require("ejs"); const app = express(); app.use(express.static(__dirname + '/public')); app.set('views', __dirname + '/public/views'); /.. 더보기
node.js Mobile 디바이스 종류 확인하기 (mobile-detect) 금일 작업을 하다가 접속환경이 PC 인지 모바일인지, 모바일이면 아이폰인지 아이폰이 아닌지에 대한 값을 구분해서 뿌려주는 페이지가 달라져야 하기 때문에 서칭을 하다가 간단하고 쉬운 방법을 찾아서 정리해보려 한다. 'mobile-detect' npm 패키지로서 자세한 설명은 공식사이트에 아주 쉽게 나와 있다. https://www.npmjs.com/package/mobile-detect npm install mobile-detect 실제 사용한 코드 일부를 따오면 const MobileDetect = require('mobile-detect'); app.get("/~~~~/:code", (req, res) => { const md = new MobileDetect(req.headers['user-agent.. 더보기
Shoelace.io (부트스트랩 grid helper) 반응형 모바일 페이지를 만들다가 우선은 기존 스타일에서 @media 를 이용해서 어찌저찌 완성은 했지만 부트스트랩을 쓰게 되면 모바일일 때도 자동으로 배치랑 구조가 잡힌다고 해서 찾아보다가 매우 유용한 사이트를 하나 찾았다. http://shoelace.io/ 이런식으로 데스크 탑일 때 블락들을 잡아두면 왼쪽 상단 첫번째에 뜨는 것처럼 ui가 나오고 모바일일때 디자인을 손봐서 데스크탑일 때 UI도 조정할 수 있다. 매우 유용하고 좋아 보여서 한번 공유해보았다. 더보기
Three.js Dubug UI (dat.gui) 오늘은 기본적인 Dubug UI 에 대해 알아 보겠다. https://threejs.org/examples/#webgl_animation_skinning_blending 공식 사이트에 있는 예제들 중 오른쪽 상단에 저런 높이 등 객체의 속성 조절, on off 등 다양한 속성들을 조절 할 수 있는 기능에 대해 알아 보겠다. 바로 dat.gui 라는 패키지인데 npm install --save dat.gui 설치 해준 뒤에 import * as dat from 'dat.gui' // 불러오기 const gui = new dat.GUI(); // 객체 생성 이제 gui 변수명의 저 객체를 사용해주면 될텐데 한가지 주의점이 우리가 저 디버그 툴로 관리해줄 객체가 만들어지고 난 뒤에 gui 객체로 관리해줘야 한.. 더보기
Three.js 여러 객체 Group으로 렌더링 하기 하나의 박스만 만들어서 렌더링을 해보았는데 이제 한번에 여러 3D 박스등 한번에 렌더링 하는것을 해보겠다. const scene = new THREE.Scene() const group = new THREE.Group(); scene.add(group); 객체들을 그룹으로 관리해줄 컨테이너? 개념의 Group객체를 만들어서 각각의 박스 혹은 담아줄 객체들을 그룹에 담아서 그룹을 scene에 담아주면 된다. const cube1 = new THREE.Mesh( new THREE.BoxGeometry(1,1,1), new THREE.MeshBasicMaterial({color:0xff0000}) ) const cube2 = new THREE.Mesh( new THREE.BoxGeometry(1,1,1), n.. 더보기
Three.js 객체 변화주기(position, axesHelper(), scale, rotation ) 이번엔 저번에 만든 3d 객체의 위치를 이동시켜 보면서 익숙해져 보겠다. set() 함수를 이용하면 일일이 x,y,z 값을 하나 하나 정해주지 않고 한 번에 정의해줄 수 있다. mesh 생성후 mesh.position.x = 0.7; mesh.position.y = -0.6; mesh.position.z = 1; // 하나 하나 정의 mesh.position.set(0.7,-0.6,1) // 한 방에 정의 또 position.length(), position.distanceTo()등의 함수도 있는데 개체와 인자로 넣어준 객체 간의 거리를 나타낼 때 쓴다. console.log(mesh.position.distanceTo(camera.position)) 그 다음 axis 즉 x,y,z 축들을 기반으로 위치.. 더보기
반응형

티스토리툴바