개념 공식문서 : TanStack Query(FKA React Query)는 종종 웹 애플리케이션용 누락된 데이터 가져오기 라이브러리로 설명되지만 좀 더 기술적인 용어로 말하면 웹 애플리케이션에서 서버 상태 가져오기, 캐싱, 동기화 및 업데이트를 매우 쉽게 만듭니다. 쉽게 말해. 1.서비 상태 가져오기 2.캐싱 3.동기화 및 업데이트 이 3가지를 편리하게 제공해주는 라이브러리 인 것 같다. 🙌 「if(kakao)2021 - 카카오페이 프론트엔드 개발자들이 React Query를 선택한 이유」 세줄요약 🤟 1. React Query는 React Application에서 서버 상태를 불러오고, 캐싱하며, 지속적으로 동기화하고 업데이트하는 작업을 도와주는 라이브러리입니다. 2. 복잡하고 장황한 코드가 필요한 ..

설명 useReducer는 State(상태)를 관리하고 업데이트하는 Hook인 useState를 대체할 수 있는 Hook이다. 다시 말해, useReducer는 useState처럼 State를 관리하고 업데이트 할 수 있는 Hook이다. useState를 사용한 경우 : 컴포넌트 내부에 State 업데이트 로직이 존재 useReducer를 사용한 경우 : 컴포넌트 외부에 State 업데이트 로직이 존재 https://velog.io/@iamhayoung/React-Hooks-useReducer%EC%97%90-%EB%8C%80%ED%95%B4-%EC%95%8C%EC%95%84%EB%B3%B4%EA%B8%B0 React Hooks :: useReducer에 대해 알아보기 React가 제공하는 내장 훅(Bu..

2024년을 맞이하여 2023년을 되돌아 보는 시간을 가져본다.. https://zzang9iu.tistory.com/108 2023 중간점검(feat. 웹 개발 프리랜서)새로운 도전? 이직을 위해 2022년 5월 퇴사를 하고 난 이후 나의 발자취를 기록하고자 한다. 퇴사 나는 2022년 5월. 3년 5개월의 웹 개발자의 경력을 끝으로 첫 회사를 퇴사하였다. 첫 회사에서 사람zzang9iu.tistory.com전편에서 중간점검을 했지만, 업무, 이직 얘기만이 아닌, 나의 삶을 정리 해보려고 한다.프리랜서결론부터 말하면 취업시장에 뛰어들진 않았고, 프리랜서 형태로 근무를 하고 있다. 물론 매력이있는 기업들이 모집공고를 내면 이력을 정리하여 지원을 몇번 해보긴 했다. 취업시장에 뛰어들지 않은 이유는 업무 연..

WebAPI에 EVNET에는 click , keypress , focus , submit , scroll , load , change 등 다양한 이벤트들이 있다. 만약 부모 요소와 자식 요소에 둘 다 같은 종류의 이벤트가 할당 되어있을 때, 이벤트를 동작시키면 어떤 이벤트가 먼저 실행될까? 이벤트 버블링(Event Bubbling) 이벤트 버블링은 특정 요소에서 이벤트 발생 시 상위의 화면 요소로 전달되어 가는 특성을 의미한다. 예제 DIV1 DIV2 DIV3 const divs = document.querySelectorAll("div"); const clickEvent = (e) => { console.log(e.currentTarget.className); }; divs.forEach((div) =..

배열의 인덱스 값을 변경하는 Array.prototype.with()가 ECMAScript 2023에 소개되었다. 문법 자체는 간단하다. array.with(index, value) 원하는 배열순서 index값에 value를 입력하면 된다. with() 메서드는 언제나 밀집 배열을 생성한다는 성격이 있다. 매개변수 index 배열을 변경할 0 기반 인덱스이며 정수로 변환되는 값입니다. 음수 인덱스는 배열의 끝부터 역산합니다 — index < 0인 경우 index + array.length가 사용됩니다. 정규화 후 인덱스가 범위를 벗어나면, RangeError가 발생합니다. value 주어진 인덱스에 할당할 값입니다. 반환 값 index의 요소 값이 value로 대체된 새로운 배열. 예제 하나의 요소만 변..

보통 export문이나 import문은 '정적인' 방식입이다. 문법이 단순하고 제약사항이 있다. 제약사항 1.import문에 동적 매개변수를 사용할 수 없다. import ... from getModuleName(); // 모듈 경로는 문자열만 허용되기 때문에 에러가 발생합니다. 2. 런타임이나 조건부로 모듈을 불러올 수 없다 if(...) { import ...; // 모듈을 조건부로 불러올 수 없으므로 에러 발생 } { import ...; // import 문은 블록 안에 올 수 없으므로 에러 발생 } 이런 제약사항이 만들어진 이유는 import/export는 코드 구조의 중심을 잡아주는 역할을 하기 때문입니다. 코드 구조를 분석해 모듈을 한데 모아 번들링하고, 사용하지 않는 모듈은 제거(가지치기)..

1. CI / CD 란 무엇인가? 1.1 CI란 Continuous Integration을 말한다 => 무엇을 통합한다는 것일까? 기본적으로 코드이다. 여러 명의 많은 개발자들이 코드 베이스를 계속해서 통합하는 것이다. 여러 개발자들의 코드를 각각 가능한 빠르게 배포를 하는 것을 의미한다. 즉 코드를 통합한다는 것이다. 1.2 CD란 Continuous Delivery => 무엇을 배달 내부 사용자(내부 QA, 마케터, 기획자)든, 사용자든 서비스를 지속적으로 배달한다. 즉 코드 베이스가 항상 배포 가능한 상태를 유지하는 것을 의미한다. Continuous Deployment =>지속적 배포 코드 베이스를 사용자가 사용 가능한 환경에 배포하는 것을 자동화하는 것이다. 버전 1 쓰다가 끊키지 않고 배포하는..

Pannellum.js 위치 이동 메소드 정리 줌인 줌 아웃 setHfov() 함수를 사용하여 시야각(HFOV)을 조정합니다. 시야각이 증가 또는 감소하도록 설정. //줌인 zoomIn() { this.viewer?.setHfov(this.viewer?.getHfov() - 30); }, //줌아웃 zoomOut() { this.viewer?.setHfov(this.viewer?.getHfov() + 30); } 왼쪽/오른쪽 시야각 변경 setYaw() 함수를 사용하여 시야각을 변경합니다. //왼쪽 시야 left() { this.viewer?.setYaw(this.viewer?.getYaw() - 30); }, //오른쪽 시야 right() { this.viewer?.setYaw(this.viewer?...