들어가며저는 웹 외주 프로젝트에 프론트엔드 개발로 참여하며 팀원과 공유할 테스트용 배포 사이트가 필요했습니다.좀 더 구체적으로는 다음과 같은 프로세스를 가졌는데요.develop 브랜치에 개발한 기능을 올리고 EC2 서버에 develop 브랜치를 테스트용으로 배포하여, 팀원과 확인한 후 문제가 없을 시 main 브랜치에 최종적으로 merge하며 진행하였습니다.(현업에서는 더 구체적이고 체계적인 방식으로 진행하겠지만, 신속한 수정이 필요하고 팀원 구성이 적은 저희는 우선적으로 이렇게 진행하곤했습니다.)이 때 배포하는 방식은, 말 그대로 '수동 배포 방식'이라고 할 수 있었는데요.직접 EC2 서버에 접속해서 터미널 명령어로 배포를 위한 명령어를 입력해야했기 때문이에요. 하지만 배포의 빈도가 늘어나면서 다음과 ..
tanstack query(react) 의 개요를 찾아보다가, 이 tanstack-query 가 리액트 애플리케이션에서 서버 상태 가져오기, 캐싱, 동기화 및 업데이트를 쉽게 다룰 수 있도록 도와주는 라이브러리이며 클라이언트 상태과 서버 상태를 명확히 구분하기 위해서 만들어졌다는 내용의 글을 읽었습니다. 클라이언트 상태는 평소에 React에서 관리하고 사용하는 ‘state’ 의 개념으로 이해하면 될 것 같은데, 서버 상태는 정확히 무엇을 의미하는 것인지 궁금해졌습니다.이번 글에서는 클라이언트 상태와 서버 상태를 비교하며 차이에 대해 다루어볼게요. 개인적으로는 ‘서버 상태’ 라는 단어가 익숙하지 않았을 뿐이지, 새로운 개념은 아니었어요.다만, 클라이언트 상태와 서버 상태는 완전히 다른 개념이므로 정확히 이..
들어가며웹 애플리케이션을 개발하다 보면 종종 새 창(window)을 열어 작업해야 하는 경우를 마주하게 됩니다.특히 관리자 페이지나 기업용 웹 애플리케이션에서는 여러 창을 동시에 띄워놓고 작업하는 것이 사용자 경험 측면에서 더 효율적인 경우가 많습니다.예를 들어 사용자 목록을 보면서 특정 사용자의 정보를 수정하거나, 주문 목록을 확인하면서 개별 주문의 상세 내용을 수정하는 등의 작업이 있죠. 이런 상황에서 중요하게 고려될만한 것은 창 간의 안정적인 데이터 통신입니다.사용자가 새 창에서 데이터를 수정하고 나면, 그 변경사항이 원래 창에도 자연스럽게 반영되어야 하니까요.이를 위한 구현 방식으로는 크게 window.opener를 이용하는 방식과 URL 파라미터를 이용하는 방식이 있습니다.기술 스택이 글의 예제..
