Three.js 서브 세팅
처음의 기본적인 세팅과 설명은 이전 포스트에 다뤘다. 이제는 부가적으로 추가해줘야 되는 세팅에 대해 알아보자 Stage Resize Stage Resize는 화면의 크기가 변화 할 때 ThreeJS역시 크기가 자동적으로 변하게 할 수 있게 해주는 것! stageResize 함수 생성 const stageResize = () => { ...
개발공부일지
ThreeJS 기초
첫 시작은 HTML 파일 생성과 JS파일 생성부터 HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> &...
SSR vs CSR 알아보기
SPA & MPA SPA(Single Page Application) : 하나의 페이지로 구성된 Web 어플리케이션으로 어플리케이션을 실행할 때 헤더는 고정되어 있고 하위의 요소들이 변경되는 것 MPA(Multi Page Application) : 탭을 이동할때마다 서버로부터 새로운 HTML을 받아 새롭게 렌더링하는 전통적인 방식 ...
WebSocket, WebRTC란
WebSocket, WebRTC 란 web을 사용할때 서로간의 통신을 공부하다가 알게된지식이다. 흔히 우리가 유저와 서버가 데이터를 주고 받으려면 http 요청을 통해서 데이터를 주고 받는다. 과거에는 모든 웹 서비스가 http 통신으로만 모든 웹서비스가 구현되었다. 최근 들어서, 코인서비스, 주식, 채팅서비스 같은 실시간 서비스가 등장하면서,...
CORS란 무엇일까?
웹 개발을 하면서 항상 많이 보는 오류이면서 잘 몰랐던 부분이다. 우선 CORS를 알기전에 SOP를 먼저 알아보자 SOP란? SOP란 (Same-Origin Policy) : 다른 출처의 리소스를 사용하는 것에 제한 하는 보안 형식이다. SOP에서 출처의 의미(Origin=) 출처란 링크로, 동일 출처는 Protocol , Host , P...
DOM & Virtual DOM에 대하여
브라우져의 동작 원리 1.DOM 트리 생성 : 렌더링 엔진이 HTML을 파싱하여 DOM 노드로 이루어진 트리 생성 2.render tree 생성 : css 파일이나 inline 스타일을 파싱하여 CSSOM 생성, CSSOM + DOM 트리를 결합 하여 render tree 생성(문서의 시각적인 구조를 나타냄) 3.Layout(refl...
JSON이 뭘까
javascript를 하다보면 JSON 파일 혹은 형식을 많이 보게 된다. 탄생 유래 인터넷이 발전하면서 서로 간에 다양한 방식으로 데이터 통신이 이루어졌다. 그런데 복잡한 표 같은 복잡한 데이터를 통신 하기 위해서 깔끔한 형식이 필요하게 되었는데 이를 위해 나온 대표적인 데이터 형식이 XML , CSV , JSON 등이 있다. XML xml...
react 배포후 개발 코드 숨기기
리액트 프로젝트 배포 이후에 개발자모드로 들어가서 source를 보게 되면 코드가 그대로 보이게되는 현상이 생겼다. 해당 문제를 해결하기 위해 build쪽에서 아래 코드를 써주면 문제가 해결된다. "build": "GENERATE_SOURCEMAP=false react-scripts build", 샘플
Vercel로 React 프로젝트 배포하기
react로 프로젝트를 완성하게 되었다. 항상 프로젝트의 배포는 github-page로 만 배포를 해왔는데 이번에는 다른 쪽으로 배포를 해보려고 Vercel 사용해봄 Vercel(now) Vercel 페이지에 들어간후 회원가입 git으로 가입해서 import git repository로 다 가지고옴 해당하는 프로젝트 import ...
React에서 modal창 만들기 (ReactPortal)
React modal 창 만들기 React에서 modal 창을 만드려고 한다. 현재까지 방법은 다음과 같다 react portal을 이용 react-modal 라이브러리 이용 순수하게 modal 창 만들기 이중에서 react-portal 이란 기능을 사용하기로 하였다. React Portal이란? Portal 는 리액트 프로젝...