스프링 쇼핑몰 만들기 #28. 스타일(CSS)과 스크립트(Script) 분리, 마무리
지금까지는 jsp파일에 HTML, CSS, Script가 모두 들어가 있었습니다.
개발초기부터, 또는 어느정도 체계화되기 시작하면 CSS와 Script를 별도의 파일로 분류합니다. 꼭 해야하는 작업은 아니지만 코드를 분석과 유지/보수에 좀 더 용이합니다.
src/main/webapp/resources 하위에 폴더를 생성합니다. 저는css/user/shop 처럼 용도별로 폴더를 생성했습니다.
이 폴더에 default.css 파일을 생성하고, jsp에 있던 스타일 코드를 옮겨넣습니다. 다른 경로에있는 스타일을 불러오고싶을 땐 <link> 태그를 사용합니다.
<link rel="stylesheet" href="/resources/css/user/shop/default.css" />
이렇게하면 실행 화면은 똑같지만, 작업할 때 코드 길이가 줄어들었기 때문에 관리하기에 용이합니다.
스크립트 <script> 역시 같은 방법으로 파일을 분류합니다. 스크립트는 <script> 태그를 이용해 불러올 수 있습니다.
<script src="/resources/js/user/shop/stockBtn.js"></script>
일반적으론 별다른 문제없이 끝나는데, 위 스크린샷처럼 스크립트 내부에 JSTL코드가 있는 경우 에러가 발생합니다.
이런 경우, 외부에 히든(hidden)타입의 인풋박스를 만들어 불러오는 방식으로 활용하면 됩니다.
이와 같은 방법으로 다른 스타일과 스크립트를 별도의 파일로 분류합니다.
-
이번 게시물을 마지막으로 스프링 쇼핑몰 만들기를 마무리집니다.
아직 미완성된 부분이 있으나 기본적인 기능을 구현하는데에 목적이 있으므로, 다른 기능에 대해서는 따로 게시물을 작성할 예정입니다.
27,28 부분을 제외하고 다 했습니다.
답글삭제다소 불편함도 겪긴 했지만 친절한 설명 덕분에 잘 따라할 수 있었습니다 감사합니다.
안녕하세요? 방문해주셔서 감사합니다.
삭제도중에 그만둔 상태고, 처음써본거라 하는둥 마는둥 진행해버렸는데..ㅠㅠ
현재 진행중인 프로젝트가 마감되면 틈틈히 새로 진행할 예정입니다.
다시 한번 방문해주셔서 감사합니다(__)
작성자가 댓글을 삭제했습니다.
답글삭제안녕하세요 쇼핑몰 따라만들려고하는데 스프링구버전으로 만드는거랑 게시판새버전이랑 무슨차이가 있나용??
답글삭제안녕하세요? 방문해주셔서 감사합니다.
삭제블로그 카테고리에있는 (구버전)으로 표기되어있는건 예전에 작성한건데... 이게 어중간한게 끝맺은게 있습니다. 어느정도 완성된 상태에서 그냥 끝나버려서 애매하게 마무리되었기 때문에 새로 작성하고 있습니다. (내용 자체는 크게 다르진 않고.. 코드 구성이나 쿼리가 조금씩 다릅니다)
새로 쓰는 게시물들의 날짜가 작년으로 되어있지만.. 사실 대부분 최근에 작성한 게시물입니다-_ㅠ
빨리 진행해야하는데 프로젝트 투입중이라서 아주 많이-_- 더뎌지네요..
안녕하세요 작성하신 글덕분에 많이 배우고있는데요 혹시 깃 주소를 알수있을까요!!???
답글삭제안녕하세요? 방문해주셔서 감사합니다.
삭제블로그 우측 사이드바의 프로필 또는 게시물 상단에 있는 전체 페이지 링크에서 확인하실 수 있습니다.
(https://github.com/kuzuro)
취직을 위해 웹 공부를 시작한 이래로 가장 단기간에 정확히 배워 간 느낌입니다. 감사합니다.
답글삭제3일정도의 기간에 완성해봤는데 리뷰 , 유저목록 및 프론트엔드를 좀 마무리해서 나중에 배포를 할테니 혹여나 봐주실 수 있나요?
좋은글 항상 감사합니다.
안녕하세요? 방문해주셔서 감사합니다.
삭제제 블로그에 있는건 반쪽짜리라..ㅠ 도움이 되었다니 좋네요.
배포한걸 보는것 정도는 가능하지만, 일반적인(?) 피드백은 아마 어려울거같습니다ㅠ
일단, 블로그대로 만들었다면 정말로 피드백할게 없는거고
디자인은 제가 디알못이라..ㅠ 검은건 글씨고 하얀건 바탕이고 파란건 링크입니다..어흑
너무 잘알려주셔서 하라는대로 잘했고 다 작동이 잘됩니다!! 근데 한 아이디로 로그인해서 물품하나를 카트에 담아놓고 로그아웃 한 다음 다른 아이디로 로그인해서 물품하나를 카트에 넣고 주문을 누른 다음 주문목록에 가면 다른아이디에 카트물품까지 주문목록에 떠서 물품이 2개가 보여집니다 ㅠㅠ 왜이런걸까요..
답글삭제안녕하세요? 방문해주셔서 감사합니다.
삭제아이디끼리 카트 물품이 공유(!)된다면...
첫번째로는 아이디의 구분자가 동일하지 않은지(PK를 걸어두셨다면 이 부분은 넘어가셔도 됩니다)
두번째로는 카트 테이블에 저장된 사용자가 동일하지 않은지
일단 이렇게 확인해보셔야할 것 같습니다.
감사합니다! 해결했습니다! orderView.jsp에서 다른 아이디 물품공유를 막아주지 않아서 발생했습니다.
삭제c:forEach에 varStatus="status"를 추개해준 다음 c:if에 test="${status.first}" 추가해주니 해결했습니다 감사합니다~
안녕하세요.
답글삭제쇼핑몰 만들기의 28번 게시물까지 다 실습해 본 사람입니다.
해보고나서 한가지 의문이
이전에 16번 게시물에서 처음 등장하는 'http://localhost:8080/shop/view?n=21'경로로 들어가려면 어떤 버튼을 클릭해야 하는지 모르겠다는 것입니다.
그걸 몰라서 저는 실습할 때마다 주소창에 일일이 '/shop/view?n=21'를 입력해서 들어갔는데
어떻게 들어가야하는지 알려주세요.
상품목록에서 상품을 클릭하면서 view?n=21 이라는 링크로 넘어가게됩니다.
삭제여기서 view는 상품을 클릭했을때 조회되는 view.jsp 이고
?n=21 부분은 상품목록에서 상품을 클릭했을때 grace님이 클릭 한 상품번호(gdsNum)라고 보시면 됩니다.
따라서 n= 뒤에 붙는 숫자는 다를 수 있습니다.
이게 아니라 aside.jsp코드가 kuzuro님의 깃허브 코드랑 달랐던게 이유였어요.
삭제어쨌든 답글 감사합니다.
덕분에 잘 배우고 갑니다.
답글삭제안녕하세요! 혹시 쇼핑몰 만드는데 참고하신 책이 있을까요?
답글삭제책도 같이보면서 공부해보고 싶어서요
안녕하세요? 방문해주셔서 감사합니다.
삭제특별히 참고한 책은 없습니다. 공부하시는중이라면 책을 보고 만드는것도 좋지만, 본인이 지식을 쥐어짜서(...) 만들고, 그걸 보강하는 방식도 괜찮을것 같습니다.