아 그거 뭐였지

프로젝트를 진행하다보면 GET이나 POST 메소드로 데이터를 주고받을때가 많다. (사실 이게 다인듯함) 데이터를 주고받을때는 일정 시간이 소요되기 때문에 대부분 비동기 프로그래밍으로 처리한다. async를 사용하여 함수를 작성하는데 이때 사용될수있는 자그마하지만 중요한 팁이다. 바로 코드를 확인해보자. async getUserData(){ try{ const res = await this._api.getUserData(); } catch(e){ console.log(e); } } 위와같이 유저데이터를 가져오는 함수가 있다고 가정하자. 별로 문제가 될게 없어보이는 함수이지만, 한가지 놓친 부분이있다. 비동기 함수는 처리가 언제 끝나는지 알수없다. 만약 저 getUserData라는 함수가 아직 실행중일때 다..

Q. 결제완료 후 url이 https에서 http로 변경됩니다. https로 수정해주세요. 쇼핑몰 프로젝트 진행중 카카오페이 결제를 완료하고 난 뒤 url이 https에서 http로 바뀌는 오류가있었다. 결제 성공시 서버쪽에서 리다이렉트 URL로 결제 성공 URL을 리다이렉트 시켜주고있었는데 http로 연결이되어서 프론트엔드 쪽에서 https로 바꿔버렸다. 바로 코드를 보자. 사용방법은 간단하다. 연결하고자 하는 링크를 location.href = '링크' 이렇게 사용하면 된다. // params.id는 서버에서 준 리다이렉트 url에서 id값을 가져온것이다. // 하나의 예시일뿐 사용자가 원하는 링크를 넣어주면 된다. location.href = `https://www.test.com/purchase/..

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_ 브라우저 창 닫기) 데이터가 남아있음 아이디어는 ..