전체 글25 배포할때 yarn.lock 충돌나면 1. yarn.lock 삭제 삭제되니 주의 !! 2번은 더 사용할것 rm -rf yarn.lock 2. git yarn.lock 받아오기 git checkout -- yarn.lock 2023. 4. 26. [에러일지] useRef 에러 JavaScript 코드를 TypeScript로 변환하는 중 발생된 에러 JavaScript에서는 잘 돌아가던게 에러가 뜬다 Object is possibly 'null'. 원인 컴포넌트의 렌더링이 완료된 후 useRef의 current 객체가 만들어진다 해결 방안 if (footerRef.current) {}로 null 여부 확인 후 해결하였다 2023. 4. 6. [ETC] GitHub 사용해보자 GitHub 사용해보자 https://github.com/ 가입을 먼저 하고! 온라인 저장소 만들기 로그인 후 Your repositories 페이지에 들어가 준다. New 버튼을 눌러주면 이런 화면 이 뜬다. 기억하기 쉬운 적당한 이름을 지어준다. Initialize this repository with a README 체크를 안 해주어도 무방하다. 온라인 저장소 삭제 Settings 페이지에 들어가 쭉 내려가 Delete this repository 클릭! 삭제할 저장소 명을 적으라는 팝업이 뜨는데 적어주고 나면 끝. 삭제! github 설정 git bash를 설치하고 열어본다. git config --global user.name "커밋에 뜰 내 이름" git config --global user... 2019. 5. 15. [Three.js ] Three.js dat.GUI를 이용해보자 dat.GUI를 이용해보자 dat.GUI는 구글의 엔지니어들이 만든 라이브러리로, dat.GUI가 생성 한 패널 부분에서 매개 변수를 변경하면 이미지의 위치, 크기, 회전 속도 등을 동적으로 반영할 수 있도록 한다. ( 일단 재밌다 ) 페이지의 우측 상단에 있는 UI가 dat.GUI를 실행하면 나타난다!!! script 추가 https://threejs.org/ 사이트에서 파일을 다운로드한다. 다운로드한 파일(three.js-master) > examples > js > libs > dat.gui.min.js를 사용하면 된다. 객체 추가 화면 안의 sphere를 X축, Y축, Z축 이동과 크기를 조절하려고 한다. controls의 초기값을 설정한다. 처음 화면이 로드되었을때 기본값으로 사용된다. sphe.. 2019. 5. 6. [CSS] CSS3 Flex Box 레이아웃 " Flexbox의 장점을 한 마디로 표현하면 '복잡한 계산 없이 요소의 크기와 순서를 유연하게 배치할 수 있다'라고 할 수 있다. 정렬, 방향, 순서, 크기 등을 유연하게 조절할 수 있기 때문에 별도의 분기 처리를 줄일 수 있고, CSS만으로 다양한 레이아웃을 구현할 수 있다 " - 네이버 오호~ 이렇게 편한 게 있다면 당장 알아봐야지!! 거의 모든 브라우저에서 지원을 하고 있기 때문에 열심히 공부하면 잘 적용할 수 있을 것 같다 display: -webkit-box; , display: -ms-flexbox; display: flex; 접두어를 넣어주자! 부모 영역( flex_container )에 display:flex 아니면 display:inline-flex을 주면 그 안의 div는 flex i.. 2019. 5. 2. [Three.js ] Three.js 간단한 Animation를 넣어보자 Three.js 간단한 Animation를 넣어보자 requestAnimationFrame 함수 Animation 효과를 주기 위해 setInterval 함수를 쓸 수 있지만, setInterval는 브라우저의 다른 탭을 사용할 때도 계속 호출되기 때문에 CPU를 많이 사용한다. 이를 보안하기 위하여 Three.js의 내장 함수인 requestAnimationFrame를 사용한다. 자세한 건 microsoft에서 나온 requestAnimationFrame의 설명을 한번 보자! 여기도 있다! https://developer.mozilla.org/ko/docs/Web/API/Window/requestAnimationFrame requestAnimationFrame 시작! plane과 scene, 그리고 c.. 2019. 4. 3. [Three.js ] Three.js를 시작해보자 Three.js를 시작해보자 WebGL를 그대로 사용하려고 하면 고급의 기술을 필요로 하다고 한다. 그래서 JavaScript 라이브러리를 통해 WebGL를 쉽게 다룰 수 있도록 Three.js를 사용한다. HTML 준비 https://threejs.org/ 사이트에서 파일을 다운로드한다. 다운로드한 파일(three.js-master) > build의 three.js를 사용하면 된다. three.js를 쓰던 three.min.js를 쓰던 상관없다. 시작 1 2 3 4 Colored by Color Scripter cs Scene를 추가한다 Scene은 렌더링 할 모든 객체와, 광원을 저장하는 컨테이너이다. THREE.Scene이 없으면 렌더링 할 수 없다!! 1 var scene = new THREE.S.. 2019. 3. 27. 이전 1 2 3 다음
