왕가's history

해당 에러는 ESLint 설정으로 인해 발생하는 에러입니다. (저는 Ariabnb를 사용했습니다.) 에러가 발견한 곳은 button 태그입니다. 문제 버튼태그 안에는 내용이 없고, className에 있는 이미지로 버튼을 대체하도록 만들었습니다. 이렇게 될 경우, 버튼에 대한 설명? 이 없기 때문에 발생하는 에러로 보입니다. 해결 방안 aria-label 속성을 추가해서 간단하게 어떤 버튼인지 넣어주면 됩니다. 아니면 아래 깃허브에서 제공하는 것처럼 eslint설정에 ignoreElements를 추가하시면 될 것 같습니다. https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/docs/rules/control-has-associated-label..

2023.07.15 - [Web] - Cookie 위 글에서 다뤘던 쿠키의 보안상 위험이 높은 단점들이 많음에도 불과하고 쿠키를 사용하는 이유에 대해서 보겠습니다. 쿠키는 클라이언트에 저장되기 때문에 서버에 무리 없이 사용할 수 있습니다. 또한 메모리로 바로 사용하기 때문에 속도도 빠릅니다. 쿠키의 주된 사용처는 ID 저장, 로그인 상태 유지 팝업창에 있는 다시 보지 않기 최근 검색 기록 장바구니 등이 있습니다. HTTP 통신 Http프로토콜 특징상 브라우저와 서버가 요청/응답 후에 연결이 끊기기 때문에 수많은 요청을 구분 짓기는 어렵습니다. 하지만 쿠키는 한 번 생성되면 요청을 보낼 때 항상 쿠키를 담는 특징이 있습니다. 이런 특징 덕분에 서버는 수많은 요청을 판단할 수 있게 됩니다. 앞에서 예로 들었..

쿠키는 서버가 어떤 데이터를 브라우저 측에 저장한 후, 다시 그 데이터를 받아오는 기술 혹은 데이터라고 정의합니다. 이를 주고받기 위해서는 Http프로토콜 상 Http 헤더를 통해 송수신하도록 정의되어 있습니다. 사진과 같이 dev-tool에서 쉽게 확인할 수 있습니다. 쿠키는 단순히 name과 value로 이루어진 단순한 문자열입니다. 브라우저는 서버에 request 보내고, 서버는 response를 날려줍니다. 이 response에는 사용자가 요청한 request에 해당하는 데이터들 뿐만 아니라 브라우저에서 저장하고자 하는 쿠키가 들어올 수 있습니다. 서버 Set-Cookie 서버에서 쿠키를 만들어 보낼 때 아래와 같이 설정해 주면 됩니다. Set-Cookie: Name=Value Set-Cookie..

JS에서 최적화작업? 에 가까운 개념입니다. 따로 의식하거나 개념을 알고 개발한 적은 없는데, 이번기회에 저도 찾아보면서 공부하고 앞으로의 개발에 있어 좋은 밑거름이 될 듯싶습니다. 디바운싱(Debouncing) 빈번하게 발생하는 이벤트를 특정 시간 이후에 한 번만 실행시키면 되는 최적화 기법입니다. 예시 간단한 예시로 설명드리면, 회원가입 페이지가 있다고 생각해 봅시다. 회원가입 정보 입력 후, submit버튼을 눌러 제출하는데 이 버튼을 광클해서 500ms에 5번 클릭하게 되면, post로 데이터가 5번 전달하게 될 것입니다. 여기서 디바운싱 개념을 사용해서 특정 시간을 500ms로 설정하게 되면, 500ms 동안 클릭한 5번이 전부 전달되는 게 아니라 마지막 1번만 전달 되게 함으로써 효율적으로 사..

Git을 사용하다 보면, 커밋 이력을 되돌리거나 삭제하고 싶은 경우가 발생할 것입니다. 이때 사용하는 것이 Rever와 Reset이 되겠습니다. 매우 중요하므로 신중히 사용하셔야 됩니다. 특히 Reset... Revert 특정 커밋을 되돌리는 기능입니다. 뿐더러 revert 했다는 이력까지 남게 됩니다. git revert [commit Id] git log, IDE, github 페이지 등 commit ID를 확인한 뒤 명령어를 실행해 주면, 해당 커밋 ID에서 변경한 내용들이 다시 원상 복귀될 것입니다. 어떤 걸 되돌리고, 어떤 걸 다시 수정했는지에 대해 알 수 있습니다. Reset 특정 시점으로 되돌릴 수 있는 기능입니다. Revert와는 다르게 그 사이의 commit이력들이 전부 사라지게 되므로 ..

혼자 로컬 환경에서 git을 사용한다면 딱히 SSH Key를 사용할 필요는 없습니다. SSH Key를 사용하는 이유는 다른 원격에 안전하게 접속하기 위해 사용됩니다. 그러니 로컬에서는 사용할 필요가 없고, 다른 서버와 통신하고자 할 때 보안적으로 안전하게 통신하기 위해 사용되는 프로토콜입니다. 확인 방법 혹시나 ssh를 생성해 놨을 수도 있으니, 확인하는 명령어입니다. cat ~/.ssh/id_rsa.pub id_rsa.pub이라는 공개키가 있는지 찾는 것입니다. 생성 방법 ssh-keygen 명령어를 입력하면 ssh key가 생성됩니다. 생성된 키는 보통 C:\Users\'컴퓨터이름'\. ssh경로에 있습니다. 비공개키(id_rsa)와 공개키(id_rsa.pub)가 생성됩니다. 등록 방법 https:/..

Git은 할 때마다 항상 새롭긴 한데, 이번에 처음으로 Migration을 해봤습니다. 개인 GitHub → GitLab으로 Migration 하게 됐는데, 작업진행 했던 순서를 설명하고자 합니다. 작업 순서 Repositroy 주소를 아래로 가정하겠습니다. https://github.com/example/oldRepository.git 1. 새로운 Repository 또는 Giblab Project를 생성합니다. 2. git bash창을 키고, bare 옵션으로 clone을 생성합니다. $ git clone --bare https://github.com/example/oldRepository.git 3. 2번에서 bare옵션으로 clone생성한 폴더로 이동합니다. $ cd oldRepository.gi..

프로젝트 진행 중에 BE 담당자가 swagger를 서버에 올려주지 않고, yaml 파일로 전달 줘서 불편함을 겪고 있었습니다. swagger홈페이지 열어서 yaml파일을 import해도 되지만, 따로 페이지를 작성하여 보고자하는 목적에 해당 라이브러리를 사용하게 됐습니다. https://www.npmjs.com/package/@types/swagger-ui-react 설치 npm i @types/swagger-ui-react 홈페이지 나와있는대로 npm 설치 사용법 import SwaggerUI from 'swagger-ui-react'; import 'swagger-ui-react/swagger-ui.css'; export default function Swagger() { const url = '폴더..

React에서 form태그 작성 후, button type을 submit을 주고 실행했는데 내가 작성한 로직대로 동작하지 않고, form태그 안에 input태그들의 값들은 초기화되고, 페이지는 그대로 있는 현상을 볼 수 있을 겁니다. 원인 form태그에서 submit이 작동하면, action속성에 지정된 url로 request 하여 해당 페이지로 이동하는 것이 기본 동작입니다. React 개발자(SPA)는 브라우저가 새로고침 되는 현상을 최소화하기 위해 직접 작성한 함수를 통해 로직이 동작하는 것을 원할 겁니다. 해결방법 위에서 설명한 submit기본동작은 필요 없음으로 event.preventDefault()를 줘서 request를 막으면 됩니다. 기본 submit 동작을 막았기 때문에 구현한 대로 동..

일반적인 pagenation은 간단히 설명하고, useSWRInfinite에 대해 소개하고자 합니다. https://swr.vercel.app/ko/docs/pagination Pagination 기본 pagination은 useSWRInfinite를 필요로 하지 않습니다. function Page ({ index }) { const { data } = useSWR(`/api/data?page=${index}`, fetcher); // ... 로딩 및 에러 상태를 처리 return data.map(item => {item.name}) } function App () { const [pageIndex, setPageIndex] = useState(0); return setPageIndex(pageIndex..