프론트엔드 로그 by 굥 🐳

Three.js Project - 달 구현해보기 🌕

Three.js 프로젝트를 시작하며 Three.js study를 10월부터 시작하며 기본적인 개념들을 공부했다. Three.js의 3가지 기본 요소인 에서부터 , , 등등을 공부하며 여전히 모르는 건 많지만 어느정도 기본적인 것은 많이 파악되었다는 생각이 들었다. 이젠 개념에 대한 공부뿐만 아니라 실제로 개발을 해봐야겠다는 생각이 들어서, 나만의 프…

저무는 recoil,이젠 zustand와 jotai가 대세

이번엔 리액트에서 많이 사용되는 상태관리 도구 recoil, zustand,jotai에 대해 공부해봤다. 요즘은 recoil보다는 zustand, jotai를 많이 쓴다는 소식을 들었는데 왜 그런것인지 궁금했다. React 상태관리 도구의 트렌드를 살펴보자 React에는 여러 상태관리도구가 있는데, 현재 회사에서는 recoil로 상태관리를 하고 있다. 그…

Three.js에서 renderer와 Scene Graph 이해하기

이번엔 Three.js의 기본 요소 중 하나로 장면을 렌더링하는데 필수적인 와 renderer가 화면에 출력할 객체들을 구조적으로 관리해주는 에 대해 알아보았다. Three.js에서 renderer란? three.js에서 renderer란 3D장면을 실제 화면에 그리는 역할을 한다. renerer는 카메라와 장면(scene)에 대한 정보를 기반으로 3D…

Three.js에서의 카메라 이해하기

Intro three.js스터디에 참가하며 공부하고 있다. 이번엔 Three.js의 3가지 기본 요소 중 하나인 카메라에 대해 공부해보았다. 1. 카메라의 역할과 중요성에 대하여 3D 환경에서 카메라는 사용자가 보는 시점과 전체적인 시각적 경험을 결정하는 중요한 요소이다. 3D 세계를 어떻게 관찰하고 탐험할지를 정의하기에 카메라는 3D렌더링에 있어서 …

웹 애플리케이션 번들링의 시작 - webpack개념과 설정 파일 작성 예시

Intro 최근에 Next.js로 개발하는 프로젝트가 있었다. 신입분이 간단한 UI를 개발하시고, 내가 JS쪽 구조를 잡거나 webpack쪽 코드를 작성했어야 했다. 보통 webpack쪽 코드는 시니어분들이 작성해주셨기에 엄청 볼일은 없었는데 이번기회에 webpack쪽 코드를 열심히 들여다봤다. 그런데 알 수 없는 에러가 났다. 이 에러가 웹팩쪽에서 발…

글또 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…

cookie,session,cache

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