워드프레스 쇼핑몰, 웹사이트

사이트 이미지
쇼핑몰

남성의류 정기결제 쇼핑몰

우커머스의 정기결제(Subscription) 플러그인을 이용한 쇼핑몰.

사이트 이미지
웹사이트

회원관리 사이트

회원관리 프러그인을 이용한 학회 홈페이지.

사이트 이미지
쇼핑몰

면도기 정기결제 쇼핑몰

우커머스의 정기결제(Subscription) 플러그인을 이용한 쇼핑몰.

사이트 이미지
쇼핑몰

해외 쇼핑몰

해외 대상 쇼핑몰. 다양한 플러그인 사용됨.

사이트 이미지
쇼핑몰

강아지 용품 정기결제 쇼핑몰

우커머스의 정기결제(Subscription) 플러그인을 이용한 쇼핑몰.

포트폴리오 보기

블로그

어떤 웹디자인이든 제이쿼리를 사용하기 마련입니다. 개발자가 만들어놓은 제이쿼리 플러그인을 웹사이트에 적용하기 위해서 코드를 입력하는데 제대로 입력했다고 생각하지만 오류가 나서 어떤 부분에서 잘못됐는지 찾기가 어렵습니다. 이럴때는 웹브라우저에 포함된 개발자 도구를 이용해서 요소 검사를 하고 분석하면 바로 찾을 수 있습니다. 


워드프레스 쇼핑몰 만들기 책으로 작업 중 독자 분이 이런 오류를 찾을 수 없어서 요청을 했는데 찾는 방법을 알아보겠습니다.



우선 HTML과 CSS 가 제대로 입력이 됐는지 확인합니다. 요소에 오른쪽 마우스 클릭하고 나오는 메뉴에서 요소검사를 클릭하면 하단의 좌측에 HTML 부분이 나타나고 우측에 CSS가 보입니다. img 태그의 src url에 마우스를 올리면 이미지도 나타납니다. 제대로 된 것을 확인하고 Resources 탭을 선택합니다.



Resources 화면에 처음 들어오면 좌측 패널에 Frames 폴더가 닫혀있는데 삼각형 아이콘을 클릭하면 트리구조가 펼쳐집니다. 현재 요소검사를 하고 있는 웹 페이지에서 사용되고 있는 자원(Resources)이 나열됩니다. 우선 처음에 웹폰트가 있고 그 다음으로 이미지가 있습니다. 이미지에 빨간색의 숫자가 있는 것은 HTML이나 CSS에서 이미지 링크는 있지만 실제의 이미지 파일이 삽입되지 않은 경우를 말합니다. 아래로 내려서 자바스크립트를 보면 빨간색의 숫자가 보입니다. 에러의 숫자입니다.



해당 파일을 클릭해서 우측의 화면을 보면 어떤 부분에서 에러가 있는지 알 수 있습니다. Syntax 에러인데 코드를 잘못 입력해서 그렇습니다. 그러면 이 파일을 텍스트 편집기에 열고 확인해봅니다.



웹브라우저에서는 구분이 잘 안되지만 좋은 기능을 가진 텍스트 에디터에서는 바로 눈에 띕니다. hasClass와 같은 제이쿼리 메소드는 흰색으로 돼있는데 datepicker라는 메소드는 그대로 노란색입니다. 이부분에서 뭐가 잘못됐는지 보면, 앞에 선택자를 감싸는 따옴표(.datepicker')가 다릅니다. 꼬리가 달린 따옴표인데 다른 따옴표와 생김새가 다르죠. 보통 키보드로 입력하면 이런 현상이 발생하지 않는데 다른 소스에서 복사하면 이런 현상이 발생합니다. 제공된 소스코드에는 이런 것이 없는데 어찌된 일인지 모르겠습니다. 어쨋든 다음과 같이 따옴표를 수정하면 완료입니다.



수정하고나니 다른 글자들의 색상이 변경됩니다. 제대로된 코딩이라는 의미죠. 텍스트 편집기마다 여러가지 스킨이 있어서 가장 좋은 스킨을 사용하는 것이 좋습니다. 



서브라임 텍스트 편집기는 여러 가지 스킨을 제공하고 있는데 문법 강조(Syntax Highlight)가 분명한 스킨을 사용하는 것이 좋습니다.


이처럼 웹디자인은 코드에서 점 하나만 다르게 입력해도 제대로 작동하지 않습니다. 항상 주의해서 코드를 입력하는 습관을 길러야 합니다. 웹개발은 속도가 아니라 안전이 최우선입니다. 한곳에서 잘못되면 어디서 어떻게 찾아야 할지 처음부터 다시 해야 할 만큼 큰 문제가 발생합니다. 그 문제 찾는데 몇 시간이 걸리기도 합니다. 항상 주의 깊게 관찰하고 지금 뭘 하고 있는지 파악하면서 해야겠죠. 코드 빠르게 입력한다고 자랑할 것 못됩니다. 정확하게 입력하는 것이 가장 빠른 웹개발입니다.



댓글 (8)

댓글 목록

건식 access_time

안녕하세요~
발간해주신 좋은책 열심히 보고 배울수 있어 감사합니다.
공부하는중 궁금한것이 있는데, 시간있으시면 설명 해주시면 감사하겠습니다.
책에서 패럴랙스 슬라이더로 책따라는 잘 할 수있겠는데, 여기서 출력되는 이미지를 베스트 상품이나
세일상품 혹은 랜덤 상품으로 출력하고자 할때 어떻게 수정해야 할지 알려주실 수 있을까요?

베누시안 access_time

책에서 만든 플러그인은 카테고리를 기준으로 출력되도록 했습니다. 그러니 특정 상품들을 나타나도록 하려면 하나의 카테고리를 만들고 이 카테고리에 원하는 상품을 추가하세요. 그런 다음 플러그인 위젯에서 이 카테고리를 선택하면 됩니다. 베스트 상품이든 세일상품이든 별도로 카테고리를 만들어 주면 됩니다. 결론적으로 수동으로 할 수 밖에 없습니다.

건식 access_time

안녕하세요.
진행도중 또다른 문제 생겨 문의 드립니다.
외모 -> 메뉴 에서 상품카테고리 탭이 없어 428p 진행이 안되는데 도움 부탁드립니다.

베누시안 access_time

화면 옵션 탭에 있습니다.

건식 access_time

감사합니다. 제일 처음에 나왔던 화면옵션을 관가 했었군요.
한가지더 여쭤봅니다. 현재 페럴렉스 슬라이더 2개를 동시에 첫 메인화면에 출력하고자 소스를 수정하였는데요. 실험결과 크롬에서는 정상작동 되는데 익스플로어9 에서는 두번째 수정한 슬라이더가 정상 작동되지 않는데 무엇이 문제일까요?

베누시안 access_time

가능하면 첨부 파일에서 wordpress10을 설치하고 비교하면서 작업하는 것이 좋습니다. 책에서 만든 모든 내용이 그대로 있습니다. IE9에서도 실험해본 것이라 제대로 나오게 돼있습니다. 코드도 서로 비교하면서 어떤 부분이 잘못됐는지 확인해보세요.

또한 IE에서 간혹 문서모드가 IE7로 돼있을 수도 있으니 F12키를 눌러서 개발자 도구에서 문서모드가 무엇으로 돼있는지 확인하고 표준으로 변경하면 제대로 나옵니다.

hasyde access_time

베누시안님의 쇼핑몰 만들기 책으로 열공중입니다.
데이트피커에서 정상적으로 출력되지 않는 문제로 위의 포스팅으로 따옴표를 바꿔서 수정했습니다.
하지만 여전히 데이트피커는 작동하지 않고 있고 이것저것 찾아보고 구글링해봐도 도통 해결방법을 찾지 못해 여기에 글을 남깁니다.

크롬에서 요소검사에 console부분에 가니까
" Uncaught TypeError: Object [object Object] has no method 'datepicker' "
라는 빨간색 메세지가 뜹니다.

구글링을 해보니 제이쿼리 버전문제로 수정한 사례가 있긴 한데 어떻게 적용해야 하는지 갈피를 못잡고 있습니다.
보통은 텍스트에서 쉼표가 빠진다던지 대문자가 소문자로 되어 있다던지 등의 문제때문에 몇번을 다시 검토해봤지만 책내용에서 벗어난 부분은 없었습니다.
도움을 부탁드립니다

소스부분에서 " $('.datepick input, .datepicker').datepicker({ format: "yyyy-mm-dd", autoclose: true, language: "kr" }); "
이부분에 "Uncaught TypeError: Object [object Object] has no method 'datepicker' "에러메세지가 붙는 것을 확인하였습니다.

베누시안 access_time

안녕하세요. 테마 폴더를 압축해서 이메일로 보내주세요. martian36@naver.com

Here is our team

Thumbnail Image

Gigi Hadid
Model

You can write here details about one of your team members. You can give more details about what they do. Feel free to add some links for people to be able to follow them outside the site.

Thumbnail Image

Christian Louboutin
Designer

You can write here details about one of your team members. You can give more details about what they do. Feel free to add some links for people to be able to follow them outside the site.

Thumbnail Image

Kendall Jenner
Model

You can write here details about one of your team members. You can give more details about what they do. Feel free to add some links for people to be able to follow them outside the site.

The Executive Team

This is the paragraph where you can write more details about your team. Keep you user engaged by providing meaningful information.

Alec Thompson

Founder

Don't be scared of the truth because we need to restart the human foundation in truth...

Kendall Andrew

Graphic Designer

Don't be scared of the truth because we need to restart the human foundation in truth...

Gina Andrew

Web Designer

I love you like Kanye loves Kanye. Don't be scared of the truth.

George West

Backend Hacker

I love you like Kanye loves Kanye. Don't be scared of the truth.