컨트롤러의 url, 즉 웹사이트에서 현재 페이지의 패스를 알아내고 싶었다. let currentPathName = window.location.pathname; window.location.pathname 을 통해 슬러시를 포함한 뒷부분 url을 알 수 있다. 아래는 현재 작성중인 포스트의 패스.

localStorage 로컬 스토리지 브라우저 내에 키-값을 쌍으로 하여 값을 저장한다. 브라우저가 다시 닫힌 뒤 다시 실행되어도 값이 유지된다. 키-값은 항상 문자열이어야 한다. 또 도메인이나 포트, 프로토콜이 같다면 동일한 모든 창에서 공유된다. 로컬스토리지의 길이 현재 저장되어있는 데이터의 개수를 알 수 있다. const localLength = localStorage.length; localStorage.setItem 로컬스토리지에 값을 추가한다. localStorage.setItem(keyword); 키 값 전체 알기 for문을 통해 로컬스토리지의 인덱스에 해당하는 키에 접근하여 localStorage.getItem(key) 를 통해 키의 값을 알 수 있다. for (let i = 0; i

화면정의서를 작성하기 위해 팀원별로 페이지를 나누어 설계했다. 메인페이지나 상세페이지 같은 부분은 아무래도 내가 관련 경험이 있었기에 담당하게 되었다. 기존 서비스들의 UI를 참고하여 디자인하였고 사용성을 고려하려 했다. 이후 실제 구현하면서 살짝 바뀐 부분들이 있긴 하지만 거의 비슷하다. 결제로 넘어가는 창 같은 경우도 설계했지만 완전히 똑같게 구현되지는 못했다.

DB를 설계하는 과정은 생각보다 순탄치 않았다. 처음 설계하는 것이다보니 빈틈도 많았고, SQL문 작성을 하며 수정되는 부분이 아주 많았다. 가장 초창기에 생성되었던 다이어그램. 아래 ER 다이어그램은 초기에 SQL문 작성까지 하며 1차적으로 형성된 다이어그램이다. 크게 회원, 강의 카테고리를 중심으로 주문, 찜, 결제, 문의, 쿠폰 등의 테이블들이 있다. 그러나 실제로 팀원들끼리 업무를 배분하여 구현하면서 시간적 제한과 어려움이 있어 빠진 부분들이 좀 있다. 특히 쿠폰 부분은 담당 팀원이 현재까지 배운 단계로 구현하기엔 어렵다고 하여 빼게 되었다. 디비버로 작성된 테이블을 토대로 ER 다이어그램은 아래와 같다. 디비버를 다루는게 미숙해서 선 정리가 조금 복잡하다.

주제를 정한 후 그에 맞춰 사용자 입장에서 필요한 기능을 생각해보고, 이를 토대로 요구사항 명세서를 작성해보는 시간을 가졌다. 팀 회의를 하기 전에 먼저 개인적으로 작성을 해봤다. 프로젝트의 주제는, 앞선 글에서 언급했다시피 온오프라인 유료클래스 플랫폼이다. 수강생과 클래스를 운영하는 강사(사업자), 플랫폼 관리자. 이렇게 세 부류로 분류하여 명세서를 작성했다. 개인적으로 작업한 초기 요구사항 명세서📃 사용자가 필요한 기능들을 정리해보았다. 필요한 기능들은 기존 사이트들을 많이 참고했다. 커뮤니티를 세부적으로 어떤 기능으로 구현할 것인지 의논이 되지 않은 상태여서, 나는 게시판을 통해 서로 댓글과 쪽지, 팔로우로 소통한다고 구상하여 작성했다. 다음으로 사업자(강사)와 관리자의 요구사항 명세서. 역시 기존..

현재 학원에서 웹 프로젝트를 진행중이다. 시작한지 몇주 되었지만 기록을 해놓으면 좋겠다 싶어 이 글을 시작으로 현재까지 해온 것들과 프로젝트를 해가며 겪는 일들을 남겨보고자 한다. 이번 글에선 먼저 주제에 대해 써본다. 주제 프로젝트의 주제를 결정하기 위해 개인적으로 아이템을 선정해 가져오기로 했다. 내가 아이템을 생각하며 정한 기준이 있다면, 1. 너무 뻔하지 않은 아이템 (일반적인 쇼핑몰 같은?) 2. 레퍼런스가 많은 아이템 제안한 주제🖐 1. 헬스/피트니스 가격비교 플랫폼 : 동네마다 미용실만큼 많이 있는 피트니스시설을 모을 수 있는 플랫폼. 하지만 정작 내가 이런 시설을 이용해본 적이 없었고... 레퍼런스 찾기가 힘들다는 것에서 보류.. 2. 온오프라인 유료 클래스 플랫폼 + 커뮤니티 : 요즘 이..