아 그거 뭐였지

Q. 결제가 끝나면 창을 닫아주세요. 이번에 진행 중이던 쇼핑몰 프로젝트에서 카카오페이를 연동하였다. 결제하기를 누르면 새창을 띄우고 새창에서 카카오페이 결제를 하는 식으로 기능 연동을 하였는데, 결제가 끝나도 창이 닫히지 않고 유지되는 이슈가 있었다. 일반적인 쇼핑몰에서 카카오페이로 결제를 하면 자동적으로 결제창이 닫히고 다음 화면으로 넘어가길래 카카오페이 결제가 끝나면 자동으로 창이 닫히는 줄 알았다. 하지만 세상은 그렇게 친절하지 않았고 개발자가 해결해주어야 하는 듯하다. 그만 징징거리고 빠르게 코드를 보도록 하자. window인터페이스의 window.open 함수를 사용하여 구현하였다. //Angular 클래스형에서 예제코드 작성 export class PaymentComponent impleme..

Localstorage와 Sessionstorage 기능 구현을 하다 보면 데이터를 불러오는 방식에 대해서 고민이 될 때가 있다. 서버에 저장시켜서 불러오는 방식으로 데이터를 불러오기에는 과투자라고 생각되거나, 굳이 서버에 저장할 필요는 없지만 어딘가에는 저장되어야 하는 기능이 필요할 때가 있다. ex) 아이디 기억하기, 장바구니, 최근 본상품, 다음부터 이창을 띄우지 않음 등등.. 이럴 때 웹스토리지를 사용하면 간편하게 데이터를 저장하고 사용할 수 있다. (필요에 따라 쿠키를 사용해도 무방하다.) 주의할 점은 패스워드나 주민번호같이 보안이 중요한 데이터는 노출의 위험이 있으므로 서버에 저장하는 것이 바람직하다. ???: 로컬 스토리지랑 세션 스토리지랑 뭐가 다름? 사용하면서 느낀 가장 큰 차이점은 로컬..

Q. 아이디 기억하기 기능 구현해주세요. 요즘 웬만한 포털사이트에는 구현되어있는 아이디 기억하기 기능이다. 아이디 기억하기 버튼을 누르고 로그인을 완료하면, 다음에 로그인 페이지에 접속 시 아이디를 자동 입력하게 하는 요구사항이 있었다. 기억하기 후 일정 시간이 경과하면 삭제되게 하는 기능이 있었더라면 쿠키로 구현하였을 테지만 그러한 요구사항이 없었기에 localstorage로 구현하였다. 체크 활성화 시에만 localstorage에 아이디 값을 저장하고, 페이지를 로딩할 때 아이디 값이 있는지 없는지만을 판별한다. 아이디가 있으면 아이디를 가져오고 없으면 안 가져오는 심플 로직이다. 정리하자면 다음과 같다. 1. 로그인 페이지 접속 시 localstorage에 아이디가 있는지 판별 아이디 O 아이디 자..

※ 2022년 03월 14일 내용이 너무 빈약하여 수정하였습니다. ※ Q. 뒤로 가기해도 데이터 위치 유지 해주세요 쇼핑몰 프로젝트 진행 중. 상품 리스트 클릭후 뒤로 가기 시 해당 상품으로 포커싱이 되게 해 달라는 요청이 있어 작업하게 되었다. 해당 방법외에도 여러 가지 방법이 있으니 이 코드가 정답이 아니라는것을 유의하길 바란다. 책임회피 해버리기~ 처음에는 localstorage를 사용해서 구현하였는데, 브라우저를 종료시켜도 데이터가 남아있는 경우가 있어 sessionstorage를 사용하여 구현하였다. 더보기 localstorage : 로컬에서 직접 삭제하기 전까지는 데이터가 남아있음 sessionstorage : 세션을 종료하기 전까지는 (ex_ 브라우저 창 닫기) 데이터가 남아있음 아이디어는 ..