[React]React 버전 18과 19에서의 ref 전달 방식 비교 분석하기(forwardRef) ForwardRef란?ForwardRef는 부모 컴포넌트가 자식 컴포넌트의 DOM 요소에 직접 접근할 수 있게 해주는 React의 기능이다. React 18 버전까지는 컴포넌트 간에 ref를 전달하기 위해 필수적으로 사용되었다. 부모 컴포넌트에서 자식 컴포넌트의 특정 이벤트를 직접 호출할 때 사용했다. 자식 컴포넌트에 forwardRef 함수로 감싸주면, 부모의 ref를 자식 컴포넌트에 사용할 수 있다. 나의 경우 자식 컴포넌트의 refetch 함수를 부모 컴포넌트에서 특정 이벤트가 발생하면 호출되도록 하기 위해 사용했다. React 버전별 ref 전달 방식 비교구분React 18 이전React 19전달 방식forwardRef 필수 사용prop으로 직접 전달 가능코드 예시const ChildInput .. 상태를 객체로 묶어서 관리하기 : useState에서 useReducer로 왜 useReducer를 사용하게 되었을까?요구사항A 컴포넌트에서 파일이 업로드되면 [A] 버튼이 활성화된다.B 컴포넌트에서 파일이 업로드되면 [B] 버튼이 활성화된다.[A] 버튼을 클릭하면 해당 버튼은 비활성화된다.[B] 버튼을 클릭하면 해당 버튼은 비활성화된다.[A]와 [B] 버튼이 모두 클릭된 상태일 때만 [C] 버튼이 활성화된다.그동안 상태 관리에 useState를 사용하고 있었는데, 여러 상태값이 흩어져 있다 보니 나중에 코드를 볼 때 "아... 이게 뭐 하는 코드였더라?" 하는 순간이 찾아왔다. 이번 요구사항에 클린코드 리액트에서 배운 useReducer를 사용해보기로 했다.Reducer란?Reducer는 '줄이다' 또는 '축소하다'라는 의미의 영단어에서 유래했다. 프로그래밍에서 Reducer.. Vue3 Sample Project 생성 vue2가 23년 12월 31일 EOL 됨에 따라 vue3 공부를 하기 위해 샘플 프로젝트를 만들어 봤다. 깃헙에 vue3-boilerplate로 검색하면 더 많은 정보를 얻을 수 있다. 내가 참고로 했던 프로젝트는 https://github.com/Jamie-Yang/vue3-boilerplate 이다. boilerplate(보일러 플레이트)란? 최소한의 변경으로 여러 곳에서 재사용, 반복적으로 비슷한 형태를 띠는 코드를 말한다. version vue 3.3.4 node 18 npm 8.19.3 axios 0.21.1 vuex 3.3.4 vue-router 4.0.3 @vue/cli-service 5.0.6 bootstrap 4.6.2 디렉터리 구조 ├─ public │ └─ favicon.ico └─.. amCharts.js 워터마크 삭제 amCharts.js 버전 : 4 라이선스 O (*워터 마크 삭제 기능은 라이선스를 구매해야 한다고 한다.) 다음과 같이 그래프 좌측 하단에 워터마크가 보여서 삭제하고 싶었다. 변경한 소스코드는 다음과 같다. // Create chart instance let chart = am4core.create("chartdiv", am4charts.XYChart); // amchart 로고 삭제 if (chart.logo) { chart.logo.disabled = true; } 아래와 같이 워터마크 삭제된다. 참고 https://github.com/amcharts/amcharts4/issues/2703 Removed logo amcharts · Issue #2703 · amcharts/amcharts4 Good.. [JavaScript] 마지막 문자열 제거 vuetable에서 전달받은 데이터를 파싱 했다. 테스트 1, 테스트 2, 테스트 3, 과 같이 마지막 요소에도 , 이 붙길래 마지막 문자 , 을 제거하였다. formatter(value){ let result,tmp = "" let tmpArr = []; tmpArr = value for(let i = 0; i < tmpArr.length; i++){ tmp += tmpArr[i] + ","; } result = tmp.slice(0,-1); return result; } 이때 전달되는 데이터는 배열이기 때문에 value는 배열이 담긴다. 새로운 배열을 생성해서 value를 tmpArr에 담아준다. 배열의 길이만큼 반복문 돌면서 tmp에 해당 요소들을 이어준다. 핵심은 이거! result = tmp.s.. [Vue/Vuetable] field 데이터가 html 형식일 경우 html 태그로 인식해버리는 현상 해결 버전은 다음과 같다. vue.js 2 vuetable 2 Sonarqube의 rules 목록 조회 테스트 페이지를 만들기 위해 vuetable를 사용했다. vuetable 적용 방법은 아래 포스팅 참고! https://seongeun-it.tistory.com/286 [Vue.js] vuetable-2 적용 3차 과제 프로젝트 리뷰를 받으며, vuetable-2에 대해 알게 되었다. JSON 데이터 세팅하면 내부적으로 v-for 데이터를 필드에 맵핑할 수 있다. 예를 들어 data-path=”issues”로 설정하면, 응답받는 데이터 seongeun-it.tistory.com https://seongeun-it.tistory.com/299 [Vue.js] Vuetable pagination 적용 Sona.. [Vue.js] Vuetable pagination 적용 Sonarqube API 기능 분석을 위해 테스트 화면을 개발을 했다. 주어진 시간은 이틀..! 간단한 조회성 기능 테스트 화면이라 따로 화면 개발 안하고, 3차 과제 프로젝트에 테스트 화면을 개발했다. Vuetable 적용 방법은 아래 포스팅을 참고 [Vue.js] vuetable-2 적용 3차 과제 프로젝트 리뷰를 받으며, vuetable-2에 대해 알게 되었다. JSON 데이터 세팅하면 내부적으로 v-for 데이터를 필드에 맵핑할 수 있다. 예를 들어 data-path=”issues”로 설정하면, 응답받는 데이터 seongeun-it.tistory.com Vuetable-2 pagination 적용 1. vuateble 컴포넌트에 @vuetabe:pagination-data ~ 옵션 추가 2. vu.. [Cypress] 로컬에서 Cypress 설치 및 Demo Application (RWA) 구동하기 Cypress는 웹 애플리케이션용 프런트 엔드 테스트 도구이며, 오픈소스이다. 공식 문서가 잘 정리되어 있으니 꼭 읽어보는 것을 추천한다. 이번 포스팅은 로컬에서 Cypress 설치 및 Demo Application을 구동하는 방법을 소개하고자 한다. Cypress 공식문서 https://docs.cypress.io/guides/overview/why-cypress/ Why Cypress? | Cypress Documentation What you'll learn docs.cypress.io Cypress Real World App Cypress Real World App(RWA)은 Cypress 테스트 방법, 패턴 및 워크플로의 실제 사용을 보여주기 위해 결제 애플리케이션을 구현하는 오픈 소스 프로젝트.. [Vue.js] vuetable-2 적용 3차 과제 프로젝트 리뷰를 받으며, vuetable-2에 대해 알게 되었다. JSON 데이터 세팅하면 내부적으로 v-for 데이터를 필드에 맵핑할 수 있다. 예를 들어 data-path=”issues”로 설정하면, 응답받는 데이터의 index를 기준으로 v-for 해준다. -> 짱 편함 데이터를 처리하는 방식은 1)api-mode 2)data모드가 있는데, 나의 경우 api-mode를 사용하였다. api-mode를 사용했을 때 지원되는 기능이 더 많기 때문이다. 만약 data모드를 사용한다면, data모드를 지원하는 기능인지 확인해야한다. 설치 방법 공식 문서를 참고하면 된다. Document ratiw.github.io 완성되는 화면은 다음과 같다. (* 변경일시는 필드는 아직 파싱 작업을 안했으니 참.. [Vue.js] vue2에서 vue-simple-context-menu 사용 배경 설치 방법과 예제는 아래 깃헙을 참고하였다. GitHub - johndatserakis/vue-simple-context-menu: 📌 Simple context-menu component built for Vue. Works well with both left and 📌 Simple context-menu component built for Vue. Works well with both left and right clicks. Nothing too fancy, just works and is simple to use. - GitHub - johndatserakis/vue-simple-context-menu: 📌 S... github.com 에러 메세지 공식 사이트에 나온 대로 npm i vue-s.. CSR과 SSR이란? 해당 포스팅은 하단의 아티클을 재구성하여 만들었습니다. 클라이언트 사이드 렌더링과 서버 사이드 렌더링의 차이점 클라이언트 사이드 렌더링 서버 사이드 렌더링 페이지의 내용을 그리는 곳 브라우저 서버 페이지 로딩 최초로 한 번 페이지 전체 로딩 -> 데이터만 변경하여 사용 페이지를 로딩할 때마다 서버로부터 리소스 전달 받음 -> 이를 해석하고 화면에 렌더링 사용자의 요청에 따라 필요한 부분만 읽음 새로고침이 일어남 클라이언트 사이드 렌더링 = Single Page Application(SPA) SPA는 최초 한 번 페이지 전체를 로딩한 후 데이터만 변경하여 사용할 수 있는 애플리케이션을 의미한다. 기본적으로 페이지 로드가 없고, 모든 페이지는 단순히 HTML5 History에 의해 렌더링 될 뿐! 그래서 언.. [JQuery] 제이쿼리 기본 개념 정리 참고 블로그 https://coding-restaurant.tistory.com/187 jQuery 이벤트 등록 메서드 (단독, 그룹, 강제, 제거, 로딩, 마우스, 키보드) 사용자가 웹사이트에 방문해서 동작을 취했을 때 제이쿼리 코드가 실행되도록 만드는 방법을 다루는 단원입니다. 이벤트 : 사이트에서 방문자가 취하는 모든 행위 이벤트 핸들러 : 이벤트가 발 coding-restaurant.tistory.com 요소 탐색 관련 http://www.devkuma.com/books/pages/224 프로그램 개발 지식 공유, devkuma 데브쿠마는 프로그래밍 개발에 대한 지식을 공유합니다. www.devkuma.com 이전 1 2 다음
