React에서… 이번에 프리온보딩을 하면서 과제를 하다가 페이징 이동을 하고 쿼리를 지워줘야 할 로직이 필요했다. 예를 들면 위와 같이 url 파라메터가 왔을 때 뒤의 code… 부터 지워서 사용자에게 안보이게 해주고 싶었다. 결과는 이렇게? Next.Js에서는 전에 짜둔 코드가 있었는데, React 에서는 해당 방법을 사용할 수 없었다. 당연한게 Next.Js에서는 Link라는 훌륭한 것이 있지만, React에는 없다. 그래서 직접 찾아서 구현해야 했다. 어떻게? 그냥 커스텀 훅을 만들어서 썼다. 파라메터로 지울 쿼리를 받고, 지운 뒤 실행함수를 옵셔널로 전달받는다. 다음과 같이 사용 한다. 물론 이 Hook도 개선할 점이 있다. 만약 지울 파라메터가 여러개 일 경우에 대해 처리는 되어 있지 않다… (-_-;;) 이 부분은 Hook의 전달인자 중 query부분을 string이 아니라 string[] 로 받은 다음, 이를 순회하며 하나씩 지우는 로직으로 바꾸면 될듯 하다…(맞겠지?…

개인적인 스터디를 하다가… Typescript에서 useRef에 대한 사용법을 조사하다… 좀 딥하게(?) 약간은 좀 알아보고자 찾고 학습한 내용을 포스팅으로 정리해봤다. 역시 매번 느끼는데 웹 문서 스크롤로 몇번 내리고 예제 몇번 해보면 되는데, 이걸 문서화 하는건 역시 시간이 든다. 하지만 이렇게 함으로써 머리속에서 정리가 되고 내 경험치가 쌓이겠지… 라는 위안으로 포스팅을 시작해본다. UseRef? 뭐 알다시피 React Hook의 일종이다. 함수의 형태는 다음과 같이 생겼다. 저것에 대해서는 차차 알아보고 저렇게 생겼다는 것을 알아두자. .current 프로퍼티로 전달된 인자(initialValue)로 초기화된 변경 가능한 ref 객체를 반환한다. 말이 뭔가 어려운데 쉽게 DOM 객체를 조작하거나, 컴토넌트의 특정 부분을 선택할 수 있는 방법을 제시하는 Hook이다. 그래서 간단한 사용 예시는… 코드를 보자 예제 코드가 좀 엉망이지만 input에 값을 입력하고 버튼을 클릭하면…

노마드코더에서 몇 가지 학습을 하다가… 요새 기본기 부족을 느껴서 다시 React의 기본부터 한번 쭉 훝기로 하였다. 그러던 중 노마드코더 강의에서 hook 쪽을 듣는데 여기는 다 JS로 코드가 구성되어 있었다. Typescript로 진행하는 나로써는 이 부분을 각 타입에 맞게끔 처리하면서 진행을 했다. 그 중 useRef 부분에서 약간 문제가 있어서 이 부분을 조사하며 알아간 내용을 정리하려 한다. UseRef를 그래서? 음 여기 포스팅에서 UseRef를 직접적으로 다루진 않겠다. 이 부분은 따로 포스팅을 하고, 이번엔 어떤 식으로 쓰는지 알아보도록 한다. 먼저 타입을 정의 하기 전 useRef의 용도에 맞게 타입을 정의해준다. 아래 두 가지 형식을 확인하자. 값(Value) 제너릭과 초기값을 정해줘야 한다. DOM 객체 제너릭은 참조하는 HTML 타입을 넣어주고, 초기값은 null을 넣어준다. 왜 null을 넣어야 하면, useRef로 얻는 DOM은 처음으로 마운트 되기 전까진…

React 개발을 하다가… 이번에 사전 과제를 하다가 a 태그를 쓰는데 이 태그는 알다시피 href 때문에 페이지 이동이 일어난다. 그래서 그냥 클릭했을 때 이벤트만 받길 원했는데 방법을 찾아봤다. 찾아보기 보다는 그냥 떠오른 생각? 1. 그냥 div 등에 onClick 이벤트 처리 위 코드 처럼도 처리할 수 있지만 마우스 커서가 갔을 때 클릭 가능함을 표시하고 싶었다. 물론 깊게 들어가면 또 할 수 있지만 간단히 처리하는 법이 필요했다. 2. a태그에 처리하기 위와 같이 작성하면 내가 원하는 방식으로 동작한다. 단 href에 구석기 시대에 쓰던 방식으로 쓰면 리엑트에서 쓰지 말라 한다. href=“javascript:void(0)” 1. 그냥 div 등에 onClick 이벤트 처리 2. a태그에 처리하기

너무 오랜만에 쓰는 포스팅 너무 오랜만에 포스팅이다… 2022년에는 너무 많은 일이 있었다. 갤러리 구경, 고프로 사서 이것저것 찍기, 취미 사진 촬영, 와인, 취미 개발 등등.. 게다가 연말엔 위메이드 & 코드스테이츠 주관 블록체인 개발자 인가 그거까지 진행하게 되어서 바쁘게 흘렀다. 이렇게 보내다 보니 개발 블로그를 손을 놓게 되었다. 남들처럼 정상적인 삶(?)이 아니다 보니… 온라인에 시간을 할애하기가 어려웠다. 그래도 새해가 되어 다시 마음을 잡고자 한번 시간을 내어 포스팅을 해보자 라는 생각으로 글을 남기게 되었다. 각설하고… 클립보드를 React에서 활용하는 법 클립보드를 사용하는 법은 두 가지가 있다. Clipboard-Api Document.queryCommandSupported 그런데 2번 방법은 이제 Deprecated 된다 그래서 1번 방법을 사용하는 것이 좋다. 나의 경우 UI에서 특정 버튼을 클릭하면 해당 텍스트를 클립보드로 변경시키는 것을 적용하였는데 코…

React에서 Cors 문제가… 최근 내 개인 프로젝트를 위해서 React와 node, next.js, typescript, tailwindcss 가 필요했다. 개발을 한창 내려놨던 터라 다시 새로운 것을 하려니 귀찮아졌다. 하지만 기존의 jQuery로 진행한 프로젝트를 모바일용으로 개발하는 것과 서버 기능 분담 등은 불가능 했다. 그래서 노마드코더 에서 강의를 들으며, 외국 성님들의 유튭 강의를 들으며 공부를 시작했다. 강의는 다 들었고, 샘플 프로젝트로 한번 개발을 시작해봤다. 그런데 fetch를 사용해서 JSON을 가져오는 부분에서 Cors 문제가 발생했다. 에러 내용은 다음과 같았다. 저 위에 xxx.com은 내가 임의로 설정한 사이트다. (정보 조회 사이트 공개가 불가해서 임의로 설정했다.) 이걸 해결하는 법은 총 2개가 있다. xxx.com 의 서버 사이드에서 처리해주기. React의 package에서 proxy 처리 해주기. 1번 방법의 경우 나에겐 선택할 수 없는 옵…