React-query에 캐싱된 데이터 업데이트하기
2022. 9. 29. 20:54
TIL/트러블슈팅
요약 import { useQueryClient } from 'react-query'; const queryClient = useQueryClient(); queryClient.setQueryData(["key"], (oldData: any) => { return [...oldData, id]; }); setQueryData를 통해 key와 update 함수를 전달해주게되면 캐싱된 데이터를 변경할 수 있습니다. 개요 블로그 프로젝트를 진행하면서 게시글 스크랩 기능을 구현을 하였습니다. 단순히 스크랩 아이콘을 클릭했을 때 해당 블로그 아이디를 넘겨주어 진행되는 방식이었는데 스크랩 요청을 보낸 뒤의 상태를 React-query에서 관리하면서 캐싱된 데이터로 인해 최신값으로 변하지 않고 stale한 상태의 데..
python selenium 사용하면서 발행했던 오류 두가지
2022. 9. 9. 23:09
TIL/트러블슈팅
vscode에서 options.add_experimental_option('detach', True) 안먹힘 vscode 에디터 상에서 파이썬 코드를 실행시킬 때 Control + F5를 눌러 실행시켰던게 문제였습니다. 에디터 우측 상단에 화살표를 누르니 정상작동되었습니다. 왜 작동되었는지는 이후 추가할 예정입니다. 매크로 동기 문제 driver.find_element(By.ID, "id").send_keys("id") driver.find_element(By.ID, "pass").send_keys("password") driver.find_element(By.XPATH, "로그인 버튼").click() try: alert = Alert(driver) # 로그인 인증 확인 alert 클릭 alert.ac..
Python - Selenium으로 매크로 만들기
2022. 9. 8. 22:48
TIL/개념정리
개요 학교 시스템을 이용하던 중 매번 예약하고 이용하는 과정이 매우 귀찮고 매번 신청하기 번거로워 한번 매크로를 만들어보고자 했습니다. 찾아보던 중 Python 라이브러리 중 Selenium이라는 것을 알게되었고 이후에 유튜브를 통해 공부하게 되었습니다 Selenium v4 이후 구글링을 하면서 찾아보던 중 셀레니움 버전 3에서는 크롬 엔진을 따로 설치하여 경로를 지정해준 뒤 사용했다면 이후 버전 4로 넘어가게 되면서 굳이 OS에 맞춰서 다운받을 필요 없이 라이브러리만 설치해서 실행시켜줌으로써 자동으로 web driver를 설치할 수 있도록 변경되었습니다 https://kibua20.tistory.com/228 Selenium 4.0 개선 사항 정리 - WebDriver 자동 로딩 가능 이전 포스팅에서 ..
Docker에 대해서
2022. 9. 7. 20:24
TIL/개념정리
1. 도커란 무엇인가와 사용하는 이유 도커는 리눅스 운영체제를 활용하여 어떤 소프트웨어의 실행환경을 컨테이너 기반으로 장소, 환경에 제한되지 않고 어느 곳에서나 동일한 인터페이스를 제공하면서 프로그램을 신속하게 배포, 확장 그리고 관리 할 수 있게 해주는 역할을 합니다. 서버를 확장하거나 혹은 새로운 개발환경을 세팅해야하는 상황이 있을 때 굉장히 많은 작업을 해야하는데 시스템 엔지니어들이 따로 상주하여 이러한 개발환경을 세팅하였지만 도커가 사용되면서 추세가 변경되기 시작했습니다. 도커 컨테이너는 일종의 소프트웨어를 소프트웨어의 실행에 필요한 모든 것을 포함하는 완전한 파일 시스템 안에 감싼다. 여기에는 코드, 런타임, 시스템 도구, 시스템 라이브러리 등 서버에 설치되는 무엇이든 아우른다. 이는실행 중인 ..
NextJS 간단 정리
2022. 9. 6. 21:33
TIL/개념정리
https://nextjs.org/ Next.js by Vercel - The React Framework Production grade React applications that scale. The world’s leading companies use Next.js by Vercel to build static and dynamic websites and web applications. nextjs.org npx create-next-app@latest npx create-next-app@latest --typescript npm run dev Framework 기본적인 코드는 React와 상당히 유사할지도 모르지만 동작면에서는 상당히 큰 차이가 있다. 단순히 라이브러리처럼 어떤 기능을 호출하고 사용하..
Throttle과 debounce를 사용해보고 정리
2022. 8. 24. 09:30
TIL/개념정리
개요 x축으로 스크롤되는 컴포넌트를 만들던 중 화면 크기에 따라 초기 컴포넌트 위치를 조절하는 코드를 작성하였습니다. 화면을 늘리고 줄여보았는데 이때 컴포넌트 위치가 브라우저 화면 크기에 따라 반응하는 것은 좋았지만 늘리고 줄일때마다 계속해서 발생하다보니 성능 문제 뿐만 아니라 위치가 계속 수정되며 어지럽게 동작하는 것이 매우 불편하였고 해결하고자 했습니다 이벤트를 텀을 둬서 실행시키기 우선 js에서 setInterval과 setTimeout이 생각났고 좀 더 찾아보던 중 resize와 관련된 방식으로 throttle, debounce를 사용할 수 있다는 것을 확인하였고 이벤트 핸들러가 많이 발생하는 연산에 제약을 걸어 제어할 수 있는 수준으로 이벤트를 발생시키는 것을 말한다고 합니다 throttle과 ..
React-query useMutation 간단히 사용해보고 정리
2022. 8. 18. 22:54
TIL/개념정리
개요 서버 상태 관리 라이브러리로 React-query를 사용하면서 서버에서 받은 데이터를 캐싱, 로딩 상태 관리 등 많은 기능을 사용할 수 있다는 것을 느꼈습니다. 여기서 특정 기능을 구현하기 위해 서버에서 데이터를 받을 때 뿐만 아니라 서버로 데이터를 보낼때도 사용할 수 있는지 찾아봤고 useMutation을 사용하면 된다는 것을 확인해보고 사용해봤습니다. 코드 import React from 'react'; const Button: React.FC = ({ nickname, setIsChecked, }) => { const { data, mutate, isLoading, isError, error, isSuccess, } = useMutation(ValidationApi); // or const v..
react-query 조건에 따라 캐싱 데이터 refetch 구현
2022. 8. 15. 21:19
TIL/트러블슈팅
개요 블로그 플랫폼에서 북마크 기능 개발을 진행하던 중 react-query 라이브러리를 통하여 서버에서 유저의 북마크 목록을 불러와 현재 북마크 중인지 아닌지를 확인하여 표시하는 기능을 구현하였습니다 하지만 문제가 발생했는데 react-query의 캐싱 기능때문에 북마크를 한 뒤 다시 리렌더링을 하였을 때 포스트 북마크 표시가 돼지 않는다는 문제가 발생하였습니다. 하지만 그렇다고 캐싱 기능을 끄자니 따로 home에서 리렌더링 되었을 때마다 쓸데없이 요청하는 이슈가 발생될 수 있었고 짧게 refetch 시키자니 성능적으로 문제가 될거라 생각하여 북마크 라는 특정 기능을 수행할 때만 데이터를 받아오는 방법을 고민하였습니다. invalidateQueries 특정 로직을 수행할 때 invalidateQueri..
Git, Github 정리
2022. 7. 29. 21:02
TIL/개념정리
참고한 자료 제대로 파는 Git & GitHub (무료 파트) 제대로 파는 Git & GitHub (무료 파트) 어려운 프로그래밍 개념들을 쉽게 설명해주는 유튜브 채널 '얄팍한 코딩사전'. 영상에서 다 알려주지 못한 정보들이나 자주 묻는 질문들의 답변들, 예제 코드들을 얄코에서 확인하세요! www.yalco.kr 개요 우선 Git이란 소스코드 관리를 위한 관리 도구이며 개발자들끼리 수정 , 복구 , 기록 , 저장 뿐만 아니라 협업을 위한 여러 기능들을 제공하고 이를 통해 효율적으로 협업할 수 있게 해주는 하나의 도구(시스템)입니다. Git 뿐만 아니라 관리 도구는 여러가지 다양한 것들이 있지만 굳이 git이 아니어도 되지만 (https://na27.tistory.com/211 SVN(Subversion)..
DB 트랜잭션에 대해서
2022. 7. 27. 11:55
TIL/개념정리
트랜잭션이란? DB에서 하나의 작업단위라고 설명할 수 있습니다 대표적인 예시를 들면 부모님이 자식에게 은행 이체를 통해 돈을 보내주려고 할 때 진행순서 ( DB를 기준으로 ) 은행 계좌 정보를 select를 통해 검색 계좌 정보가 있다면 부모님 계좌 update -1,000,000원 계좌 정보가 있다면 자식 계좌 update +1,000,000원 이후에 추가적인 부분이 발생할 수 있음 이때 어디선가 장애가 발생해서 하나의 작업이라도 취소가 되었다면 이체라는 작업이 수행되지 않은 것이나 다름없기에 계좌 이체라는 하나의 작업단위 정의 업무 처리의 논리적 단위 하나의 건수로 처리되어야 하는 분리될 수 없는 연산 집합 All or Nothing 트랜잭션의 특성 위 예시처럼 하나의 트랜잭션 단위를 유지하며 실행하..