최근에 프로젝트를 진행하면서 유저의 주소를 입력받는 input을 구현해야했었다. 보통 회원가입이나 신규 신청 시 사용하는데, 직접 유저가 입력하도록 하는 것보단 흔히 많이 쓰는 카카오 주소 찾기 API를 사용해보기로 하였다. 그런데 한가지 문제점은 나의 경우에는 주소 API가 사용되는 컴포넌트에서 setup 함수 기반의 코드를 짠 상태였는데, vue로 된 예시 코드 중에는 setup기반이 없었다는 것이다. 몇 번 시도하다가 차라리 따로 컴포넌트로 빼는 게 나을 것이라고 생각했다. 그래서 주소 input으로 받은 값을 부모 컴포넌트로 emit을 통해 전달하도록 구현하였다. 이후에 주소 api로 받은 값을 포함한 다른 input값들을 합하여 신청 과정을 구현할 수 있었다. 부모 컴포넌트에서 다음과 같이 주소..

회사에서 프로젝트를 진행하면서 다양한 권한 별로 페이지 접근을 설정할 일이 많아졌다. 단순히 접근을 하고 안하고를 떠나서 권한에 따라 보여줘야할 컴포넌트가 달라질 때가 많았다. 그뿐 아니라 로그인 여부에 따라 개별 페이지에서 접근 여부가 달라지기도 했다. 그러한 부분들은 나는 Pinia라는 전역 상태관리 라이브러리를 활용하여 해결하였고 코드와 함께 간단히 공유하고자 한다. 저 귀여운 파인애플이 로고이다. 먼저 나의 경우에는 로그인 여부에 따라 달라지는 접근 권한과 로그인 이후의 사용자별 권한이 크게 나뉘었다. 로그인 이후에는 권한이 크게 일반 사용자 권한과 관리자 권한이 있었고, 관리자 내부에서도 3가지 권한이 존재했다. 이러한 것들을 알기 위해서는 가장 먼저 쿠키에 저장된 유저 정보가 있는지 체크해야했..

기존에 React로는 게시물 목록별 체크박스를 구현해보았던 경험이 있었다. 그런데 이번에 처음으로 Vue를 사용하여 게시물 목록별 체크박스를 구현해보게 되었고, 가장 깔끔한 방식을 나름대로 찾은 것 같아 공유하고자 한다. 먼저 이번에 구현한 체크박스는 다음과 같다. 게시물 별로 체크박스가 테이블에 구현되어있고, 개별 체크박스를 선택하여 게시물을 삭제하거나 다른 기능과 연동될 수 있는 부분이다. 먼저 이 각각의 체크박스는 목록 개별로 state 관리가 필요하므로 컴포넌트를 분리하여야한다. 그런데 체크박스를 여러개(중복) 선택 후 삭제를 해야한다면 어떻게 해야할까? React에서는 자식 컴포넌트의 상태를 부모 컴포넌트에게 전달하지 못하므로 전역 state 관리 툴인 Recoil이나 Redux를 사용했어야 할..

프로젝트를 진행하던 중 input을 통해 받은 pdf 혹은 이미지 파일로 pdf 미리보기를 구현해보았다. 단순 pdf 미리보기를 구현하는 정보는 많았으나 유저를 통해 받거나 서버를 통해 받은 파일로 pdf 미리보기를 구현한 경우는 잘 보지 못하여 시도하여 성공한 것을 공유하고자 한다. 데이터 분석 연구 결과 제출 삭제 연구 결과 연구 결과 파일을 제출 후 확인하실 수 있습니다. 연구 공개 범위를 전체 공개로 선택하시면 '코호트 활용 연구 > 승인 과제 현황' 에서 모든 사용자에게 공개됩니다. 핵심을 말하자면, resultFile이라는 변수를 통해 유저를 통해 이미지 파일을 받고 나서 pdf 미리보기에 필요한 iframe 태그에 들어간 url을 만들어준다. url을 만드는 방법은 window.URL.cre..