January 22, 2024
특정 조건에 따른 정규표현식으로 처리하는 방법에 대한 내용입니다. 정규표현식에 문법에 대한 내용은 아니에요 😅 개요 화면에서 사용자로 부터 입력 받는 데이터를 처리해야 하는 경우가 많이 있다. 회원가입,문의하기,리뷰남기기 등등 여기에서 입력에 대한 부분을 제어하는 로직이 필요하다. XSS 스크립트 공격, DataBase에서 정의한 데이터 타입에 대하여 고…
January 03, 2024
정신 없이 지나 간 2023년 어떤일들이 있었지?? 기억을 되짚어보려고 간단하게 회고 작성을 합니다. 2024년에는 더 발전 된 내 모습을 기대하며. STEP 1 - 회사의 위기 ☠️ 2022년에 스타트업으로의 이직은 나에게 참 큰 여정이었다. 이전의 회사에서의 경험과는 달리, 스타트업에서의 팀간 협업과 열린 분위기에 좋은 기운을 느꼈다. 규모가 큰회사…
November 01, 2023
사람들과 딥링크 관련하여 이야기 중, 서로 다르게 생각하거나 알고 있는 부분이 있어서 정리했습니다. 링크(Link)란 인터넷에서 다른 웹사이트나 페이지로 이동할 수 있는 연결고리를 말한다. 일반적으로 링크는 텍스트 or 이미지 같은 콘텐츠에 하이퍼링크로 연결되어 있으며, 클릭하면 해당 페이지로 이동한다. 링크는 방문자의 이동경로를 팍악하여 사용자 개선에 …
July 24, 2023
react-query 란 react-query는 캐싱 및 서버 상태 관리를 자동으로 처리하여 비동기 데이터 요청을 관리를 하는 라이브러리 입니다. axios + react-query 조합을 사용하여 API를 호출하고 호출 된 데이터를 캐싱처리 하며, 또 userQuery에 대한 제네릭 타입도 어떤식으로 설정해서 사용하는지 확인 합니다. react-que…
July 24, 2023
백앤드와 데이터를 주고 받을때 axios를 사용하여 통신하고, 서버 상태 관리를 react-query를 사용 합니다. 다만 타입을 제대로 지정 하고 있지 않아서 이번 기회에 타입을 넣는 부분에 대하여 이야기 해보려고 합니다. axios 는 1.4.0 버전을 사용 했습니다. Axios 설정하기 axios 사용하면서 4가지 설정을 통해서 사용하게 됩니다. a…
December 30, 2022
Redis로 세션 관리하게 된 이유 레거시 쇼핑몰을 유지보수 하고 있던 사람이 계약 만료로 나가게 되면서 해결이 잘안되는 이슈를 하나 전달 받았다. CS팀에서 이용자들이 서비스를 잘 이용하다가 중간에 로그인이 끊어져서 다시 재로그인을 해야한다는 문의가 많이 유입된다고 했다. 그래서 쇼핑몰이 어떤식으로 인프라가 구성 되어 있고, 어떤 언어로 개발이 되어있는…
December 20, 2022
Storybook React Router 연결하기 스토리북으로 컴포넌트을 관리 하다가 지금은 개발된 Page도 스토리북에 추가하여 interaction 테스트 기능을 넣는 작업을 진행 했습니다. 그러다보니 React-router를 이용한 페이지 이동에 넘어오는 Params 값을 사용해하는 케이스들이 발생했습니다. storybook에 React-router…
December 10, 2022
TypeScript Infer 유틸로 제공되는 타입(pick,Parameters,Extract,Omit,Exclude,Record, ...etc) 타입을 보는 중에 Parameters 타입을 보다보니 infer라는 문법이 눈에 띄었습니다. 어떤식으로 작동을 하는지 궁금했습니다. 키워드는 TypeScript 의 타입 추론(type inference) 기능…
December 02, 2022
GitHub Action에 self host runner 셋팅하기 그 동안 GitHub Action 무료 버전 리소스 안에서 잘 사용하고 있었습니다.(Supported runners and hardware resources ) 하지만 프로젝트가 점점 규모가 커지면서 gitHub Action 지원하는 runner 리소스로는 부족한 상황이 발생하기 시작했습…
November 28, 2022
Storybook Interaction 테스트 스토리북에서 작성한 컴포넌트 및 page를 Interaction addon을 설치하여 기능을 추가할 수 있습니다. 스토리에 대한 상호작용 테스트는 Jest기반으로 실행이 되며, UI가 어떤식으로 변화하는지 단계 별로 재생을 하면서 디버깅을 할 수 있습니다. 스토리에 대한 변경/추가 사항 및 리팩토링을 하게 …