Kwangkki

모바일 웹에서 프로젝트를 만들며 api 요청 시간이 조금 소요되는 api가 있습니다. 문제는 이 api 요청 중에 다른 페이지로 이동하면 요청이 pending 상태에 계속 머물게 된다는 것인데요. 아래 사진으로 설명해보겠습니다. API 요청 pending[홈]에서 요청했던 plcProduction이라는 api 요청이 다른 페이지로 이동해도 여전히 pending입니다. 이것이 왜 문제가 되냐하면, 유저가 페이지를 빠르게 여러번 이동하면 pending 요청이 쌓이게됩니다.만약 빠르게 4번을 왔다 갔다 한다면 4개의 pending이 쌓이게 되겠죠? 이를 해결하기 위해 찾아보니 axios에서는 CancelToken을 제공한다는 것을 알았습니다. axios CancelToken 적용기존 api 요청 코드..

최근 회사에서 데이터 가공(?)에 시간을 많이 쓰고 있다. 배열로 받는 데이터를 객체로 만들어 그래프에 쓰기도 하고, 배열 -> 객체 -> 배열 -> 객체 4번을 타고 들어가서 쓰는 데이터도 있다. 처음에는 무지성으로 썼다만 요즘은 sql 쿼리문이나 api에서 로직을 수정해서 원하는 데이터로 만들기도 한다. 그렇게 다듬어진 데이터로 실시간 그래프를 구현하는데 1분에 한 번, 빠르면 5초에 한 번씩 데이터를 호출한다. 최근 이를 구현하면서 다양한 방법이 있어 시도해 보고 기록해 본다. api 반복 호출 setInterval 처음에 사용한 방법은 useEffect에서 setInterval을 사용하는 방법이다. setinterval을 useEffect에서 호출하는 것 자체가 좋은 코드는 아니었다. const ..

개인 프로젝트를 진행하다가 이상한 렌더링을 발견했다. input 창에 글자를 입력할 때마다 렌더링이 발생한다. 파란색 프레임이 생성되는 것은 React Develop Tool의 렌더링 표시 기능인데, 렌더링이 될 때마다 표시된다. 보다시피 글자 하나 입력 시 렌더링 된다. 그리고 이메일 input창에 값을 입력했는데 전체 페이지가 렌더링 되는 것을 볼 수 있다. 그냥 봐도 거꾸로 봐도 백덤블링하면서 봐도 비효율적인 것을 알 수 있다. 원래 이런 건가 싶어 리액트로 만든 다른 사이트를 엿보았다. 오늘의집과 직방 또한 이러한 현상이 나타났다. input에 글자를 입력하는데 왜 렌더링이 일어난다는 것에 대한 의문. 잦은 렌더링을 피해야 하는 것은 상식이기 때문에 해결하고 싶음 마음. 두 포인트를 해결하기 위해..

최근 내 개발 지식뿐만 아니라 디자인 지식까지 점프한 경험에 대해 공유하고자 한다. 웹 개발 팀 프로젝트 최근 거의 한 달 동안 진행한 웹사이트 개발 프로젝트에 참여했다. 디자이너가 없어 이제 막 개발 공부를 시작한 프론트 개발자 2명이서 머리를 싸맸다. 디자인을 어떻게 하면 좋을까 여러 가지 의견을 나누면서 우리는 얼마나 어떻게 예쁘게 만들까를 뒤로하고 한 가지 키워드에 대해 먼저 생각해 봤다. 재사용성 높은 디자인 예전에 유튜브 EO 채널에서 토스 디자인 시스템에 대한 영상을 본 적이 있는데, 비슷한 디자인과 패턴을 묶어 시스템화함으로 재사용성과 생산성을 높였다는 이야기였다. 퍽 감명적이었는지 한동안 토스 디자인 관련 블로그를 찾아 헤맸었던 기억이다. 그래서 이번 프로젝트에는 재사용성 높은 디자인을 ..

React의 큰 장점은 Hooks의 존재가 아닐까 싶다. 단순한 버튼 클릭 함수라도 두 번 이상 사용한다면 custom hook으로 만들어 재사용성을 높일 수 있다. hook? react에서 hook은 함수형 컴포넌트를 클래스 컴포넌트와 같은 기능으로 사용할 수 있도록 만들어 준다. 클래스는 하나를 만들어두면 복제해서 마구마구 쓸 수 있으니까 react에서 제공하는 hook 리액트는 자체적으로 만든 내장 hook이 존재한다. 그중 자주 사용하는 5개를 간단하게 설명하면 아래와 같다. useState 아마 리액트에서 가장 많이 사용하는 hook 일지도 모른다. 처음 배울 때 단순히 리액트에서 사용하는 변수라고 생각하니까 이해가 쉬웠다. 값을 추가하고 변경할 때 사용한다. useEffect 리액트의 생명주기..

데이터 요청 후 응답 전까지 버튼 비활성화 하기public API로 파이어베이스 연습 도중 버튼 중복 클릭을 막아야 겠다는 생각이 들었다.이유는 아래 "강쥐 사진 보기" 버튼을 클릭하면 데이터를 불러 올 동안 빈화면이 나오는 데, 이때 버튼이 활성화 되어있다는 거.그럼 버튼을 광클할 수 있고,  api 요청을 여러번 할 수 있다. 아직 첫 번째 데이터를 불러오지도 못했는데 여러번 api를 요청해버리면 강아지 사진이 빠르게 연속적으로 지나가버린다. 이를 막기 위해 데이터를 받아오기 전까지는 버튼을 비활성화하는 방법을 구현해봤다. 리액트에서 useState로 isChange이라는 boolean 값을 주고 버튼을 누르면 버튼이 비활성화되고(true가 버튼 비활성화) 데이터 get 작업이 끝난 후 다시 버튼을 ..

리액트를 사용한다면 State라는 것을 정말 많이 사용하게 된다. 하지만 state의 작동원리나 개념을 잘 파악하지 못한 채로 사용하다 보니 에러를 마주해도 해결하기가 어려웠다. state에 대해 좀 더 공부해야할 필요성을 느끼고 정리해봤다. state 형태 state는 리액트 컴포넌트에서 변수로 활용한다. 세가지 형태로 이루어져 있다. state : 변수 setState : 변수를 바꾸는 기능 useState : 변수를 만드는 기능 const [state, setState] = useState(); //형태 const [title, setTitle] = useState("제목"); //예시 setTitle("부제목") // setState에 다른 값을 입력하면 state 값이 바뀌게 된다. state를..

리액트를 활용할 때 효율적이고 빠른 유지보수를 위한 폴더구조를 나누는 패턴이 존재한다. 가장 흔하게 쓰이는 패턴으로는 container/presentational 패턴, hooks 패턴, atomic 패턴이 있다. 현재는 hooks 패턴이 많이 쓰이지만, 여전히 container / presentational 패턴을 사용하는 사람들이 많기 때문에 알아는 둬야한다고 한다. 그래서 직접 써보며 알아보기로 했다. 우선 폴더 구조를 나눠봤다. 기존에 한 파일에서 작업했을 때는 다음과 같았다. const FETCH_BOARD = gql` query fetchBoard($number: Int) { fetchBoard(number: $number) { number writer title contents } } `; ..

javascript에는 Import와 export라는 개념이 있다. 덕분에 컴포넌트를 활용하기가 참 편리하다. Import와 Export로 모듈을 쉽게 내보내고 사용할 수 있기 때문이다. ❗️모듈(Module)이란? 하나의 Javascript 파일에 많은 내용이 담기면 파일이 커지고 관리하기가 어려워진다. 그래서 여러 파일로 생성해서 관리하는데 이런 각각의 파일을 모듈이라고 부른다. 파일 Import, Export 다른 파일을 가져오고 싶을 때 아래와 같이 import를 사용하면된다. 보통 코드 상단에 import 코드를 작성한다. import app from './app.js'; // 변수명은 자유롭게 바꿀 수 있다. 변수, 함수 Import, Export 원하는 변수나 함수를 가져올 때도 비슷하다. ..

JSX 개념 JSX를 쉽게 이해하려면 React 전용 HTML이라고 봐도 좋다. 좀더 자세히 풀자면 리액트 함수 호출과 객체 생성을 위한 문법적 편의를 제공하는 자바스크립트의 확장 개념에 가깝다. JSX를 사용하지 않은 리액트 예제를 보면 쉽게 이해할 수 있다. //JSX 없이 리액트 기본문법 사용 React.createElement('h1', {className: 'title'},'Hello World') //JSX 사용 'Hello World' React.createElement를 사용해서 h1 태그를 만들던 것을 HTML 문법처럼 태그를 사용할 수 있다. JSX를 사용하는 이유 위에서 봤듯이 JSX 엄청난 편의성을 제공을 하는 것을 알 수 있다. React 공식홈페이지에서도 JSX 사용을 장려한다...