발단 요즘 과제 테스트를 몇 번 해보다보니 함수형 프로그래밍을 통해 추상화하여 구현하는 예제들을 요구한다. 처음엔 막막했지만 쓰다보니 꽤 익숙한 부분들도 있어서 몇 번 풀어보면 금방 감이 올 것 같다. 명령형 vs 함수형 이 비슷한 듯 다른 두 가지 방식의 차이는 재사용성에 있다고 본다. React에서 컴포넌트를 재사용할 수 있는 로직이 함수형이라고 말한다. 예를 들면, 아래처럼 id="app"인 어떤 dom 아래에 카드 레이아웃을 만들어주는 코드를 짜보자. // 명령형 방식으로 구현. const app = document.getElementById("app"); const card = document.createElement("div"); card.classList.add("cardcontainer")..

🔦raycaster의 역할과 배경 three.js를 사용하다보면 각 Mesh에 메타데이터를 넣어주고 싶은 일들이 생긴다. (누르면 관련 웹페이지로 넘기던가, 아니면 내부 로직을 위해 id 같은 key값을 리턴해주던가...) 이런 처리를 raycaster 에서 해주는데 적용하고 나면 onClickEvent나 onMouseOverEvent를 구현할 수 있다. raycaster는 뜻 그대로 광선이라고 생각하면 된다. 마우스가 있는 값 기준으로 광선을 쭉 쐈을 때, 그 광선을 맞은 Mesh에 대한 정보를 얻어낼 수 있다. 예를 들면 이런 식으로 구현이 가능하다. 구현을 위해선 몇 가지의 트릭(?)이 존재하는데 주로 사용자 인터렉션 관련된 내용이다. 구현 목표는 다음과 같다. 1. raycaster 생성 in R..

클라이언트에선 다 그렇지만, 언제나 리소스를 가져오는데에 딜레이는 생기기 마련이다. Three.js에서는 이런 체감이 훨씬 더 심한데, 3D 모델링을 기반으로 하거나, 엄청나게 큰 (화질도 크기도) 사진을 종종 import 해와서 Scene에 넣는 경우가 많기 때문에 그렇다. 내 포트폴리오 프로젝트가 절반정도 완료되었는데, import 해와야하는 리소스가 무려 36개다. 네트워크 탭에서 확인해보면 캐시된 메모리들도 있고 해서 로컬에서 실행시키면 거진 바로 켜지는 느낌이 들곤 한다. 시간 탭을 보면 거의 1000ms 안쪽으로 전부 리소스가 받아진다. 리소스를 THREE.TextureLoader에서 받아오니까 결론적으로 모든 렌더링까지 1초정도가 걸리는 셈! 반면 이건 gh-pages 라이브러리로 깃허브 페..

공부한 내용을 작성합니다. 틀렸거나 직관에 의한 비약이 내용 중에 심심치 않게 들어갈 수 있으니 피드백 주시면 감사한 마음으로 수정하겠습니다. 엄청 나게 긴 블로그 콘텐츠나, 조직도 처럼 많은 양의 데이터를 한 페이지에 보여줄 때 UX를 위해 콘텐츠 네비게이터라는 걸 둔다. 이 콘텐츠 네비게이터는 두 가지 특성이 있다. 1. 브라우저 안에서 스크롤 이동이 있다. 2. hash url을 더해준다. 잘 보면 `/doc/en#${HASH}`로 콘텐츠가 이동하는 걸 확인할 수 있다. React에서는 이런 기능을 구현하기 위해 HashLink를 제공하지만.. 1. HashRouter 요약하면, hash url은 클라이언트 쪽의 라우팅을 담당하던 기능이었지만, 요새는 그냥 디자인 목적으로 사용된다는 것. 근데 Re..

github page는 일반적으로 static한 화면을 보여주기 때문에 일반적으로는 ssh가 딱히 필요가 없다. 굳이 쓰려면 github의 id/pw 없이 push하기..? deeplink를 사용하려면 ssh가 꼭 필요하다는 슬픈 사실..😥 1. ssh key 생성하기🆕 실행은 git bash에서! ssh-keygen -t ed25519 -C "YOUR_EMAIL@HOST.COM" 두번째 argv로 있는 ed25519는 key의 암호화 방식을 의미한다. 이 속성 말고도 RSA라는 오래된 방식도 있는데, 암호학이 뭔지도 모르겠고.. 두 방식의 차이는 이렇다. ed25519방식이 rsa에 비해 속도도 빠르고, 파일크기도 작고, 공개 키/개인키도 작다. (공개키는 400 bytes : 100 byes 정도) ..

예전 프로젝트에서 이거 때문에 삽질 좀 했던 것 같은데 또 까먹었다. 별거 없기 때문에 쓸 것도 없다. Check 1. 부모 요소에서 overflow 설정 부모 컴포넌트에서 overflow가 hidden; auto; scroll;이 아닌지 확인해준다. sticky는 뷰포트가 아니라 부모 컨테이너에 영향을 받는다고 한다. Check 2. 부모 요소의 크기를 설정해줬는가? 크기를 적절하게 설정해줘야 한다. 부모의 위치에 대해서 붙기 때문에, 개발자 도구에서 크기를 가지도록 설정해주면 된다. Check 3. [가장 중요⭐] align-self: start 해주기! align-self는 flex 내부 요소의 정렬을 스스로 설정할 수 있도록 지원해준다. start로 넣어주면 flex container 앞쪽으로 정..