프론트엔드 로그 by 굥 🐳

글또 10기를 시작하며

글또가 10기를 마지막으로 끝난다는 소식을 듣고, 글또의 마지막 마무리를 꼭 함께 하고 싶다라는 생각이 들었다. 2022년도에 처음 글또를 알게 되어 7기, 8기로 활동을 했었다. 개발자로 글을 쓰고 기록하는 습관을 가지고 싶었는데, 실제로 많은 도움이 됐었다. 내가 쓰는 글들이 아직 엄청 좋은 글은 아닐지라도, 글을 쓰는 습관을 만들게 해주어서 감사한 …

Web cache 이해하기

최근에 개발한 기능이 매우 느리다는 이슈가 있었다. 캐시가 되면 더 빠르게 동작할 것이라고 가정했는데 이 웹 캐시를 다뤄본 적이 없어서 막막했다. 이번 기회에 웹 캐시에 대해 좀 더 deep-dive 해봤다.😀 🪼 웹 서비스 캐시 이해하기 1. 웹 서비스에서 캐시란 무엇일까? 이를 통해 사용자가 웹사이트를 방문하거나 서비스를 이용할 때, 매번 서버에서 …

Three.js journey | Fullscreen and resizing

resize Resize 이벤트를 활용하여 resize를 할 수 있습니다. 현재 pixel ratio를 알고 싶으면 를 사용하면 됩니다. rerender를 업데이트하기 위해서는 를 사용할 수 있습니다. Handle Full screen dbclick 이벤트로 fullscreen mode로 만들 수 있습니다. canvas element에서 fullscree…

React query

React query를 쓰는 이유 다른 개발자들과 얘기를 하며, react query를 쓰는게 신세계라는 얘기를 들었는데요! 이걸 한번도 안써봤다니!! 그래서 이번엔 react query에 대해 공부를 하며, 왜 react query를 쓰면 좋은지 정리해보았습니다. React query는 원격 API에서 데이터 가져오는 과정을 간소화합니다. React…

Three.js journey | Cameras

Three.js journey 강의를 듣고 공부한 것들을 기록합니다. Three.js 카메라 종류 1. Camera 카메라는 `abstract class로 직접적으로 사용되지는 않습니다. 2. Array Camera 는 특정 area에서, 여러개의 카메라에서 scene을 렌더할 때 사용됩니다. 각 카메라는 canvas의 특정 area를 렌더할 것입니다. …

cookie,session,cache

Cookie,Session,Cache에 대한 정리 쿠키와,세션, 캐시는 웹개발 시, 많이 사용되는 용어입니다. 이것은 어떻게 웹사이트에서 정보를 저장하고 관리하는지에 대한 것과 연관이 있습니다. 우선 하나하나 cookie,session,cache가 무엇인지 살펴보겠습니다. chatGPT4에게 이것들의 차이가 무엇인지 쉽게 설명해달라고 물어봤는데 예시를 들…

Three.js journey | Animations

Three.js journey 강의를 듣고 공부한 것들을 기록합니다. Animations Three.js에서의 Animation은 stop motion같습니다. 예를 들면 물체를 옮기고 렌더를 하고, 그 다음 또 물체를 옮기고 다른 렌더를 하는 방식으로 진행되기 때문입니다. 각 프레임마다 렌더를 하고 물체를 업데이트 해야 하는데, 이는 메서드를 이용해 …

Three.js journey | transform objects

Three.js journey 강의를 듣고 공부한 것들을 기록합니다. Transform objects scene을 animation하기 앞서, scene에서 어떻게 물체들을 변형시킬 수 있는지 알아야합니다. scene에서 물체를 변경시키기 위한 4가지 프로퍼티들이 있습니다. position (물체를 움직일 때) scale(크기를 조정할 때) rotatio…

Three.js journey | basic scene

Three.js journey 강의를 듣고 공부한 것들을 기록합니다. First Scene scene을 만들기 위해서는 4개의 요소들이 필요합니다. object를 담을 scene objects camera renderer Scene scene은 컨테이너와 같습니다. object,model,particle,light등을 두게 되는 곳입니다. scene을 만…

SENTRY로 프론트 에러 잡아내기

프론트에서도 오류를 모니터링하는 방법이 뭐가 있을까요? 프론트에서 발생하는 오류들을 모니터링하기 위해 저희 개발팀에서는 를 도입해보자는 의견이 나왔습니다. Sentry? Sentry는 오류를 모니터링할 수 있게 해주는 모니터링 툴입니다. 백엔드, 프론트엔드에서 발생하는 에러트래킹, 퍼포먼스 성능에 대한 모니터링까지 가능하게 해줍니다. 현재 Sentry에는…