• 카페24도메인와 가비아 호스팅 도메인 연결하기

    도메인 : 카페24호스팅: 가비아매번 새로운 도메인 연결하기.이후에 또 까먹을까 정리한다. 순서는 이러하다. 1. 카페24에 있는 도메인의 네임서버를 가비아 것으로 변경한다.2. 24시간뒤에 잘 바뀌었는지 체크한다.3. 가비아에서 해당 도메인의 권한을 받아온다.(이후 도메인 dns는 가비아로 넘어온 것)4. 가비아에서 dns설정을 바꿔준다.-- 끝  1카페24에 있는 도메인의 네임서버를 가비아 것으로 변경한다.  카페24 호스팅 > 관리 > 도메인연장 > 네임버서 변경 > 도메인 클릭 > 네임서버 변경하기* 나는 바꿔서 그런데, 원래는 저 파란색 부분이 ~~cafe24.어쩌구 적혀있어야 한다. 아래 내용으로 바꿔주면 된다.네임서버1차 ns.gabia.co.kr - 43.201.170.1002차 ns1.g..

  • 카페24 쇼핑 큐레이션 사이즈, 컬러 사용법

    >> 쇼핑 큐레이션의 사이즈와 색상 필터 값은 기존 등록한 상품의 옵션이 자동으로 반영됩니다.>> 일반적인 사이즈(S, M, L, XL 등)와 색상(BLACK, BLUE, RED 등)을 기준으로 자동 적용됩니다. -> 옵션으로 컬러, 사이즈를 넣으면 자동 적용됨만약 600x1200, 1200x2400와 같은 특별한 사이즈를 필터로 추가하고 싶으시다면, 다음과 같은 방법으로 설정하실 수 있습니다.1. [관리자] 쇼핑몰 설정> 상품 설정 > '상품 정책 설정 > 쇼핑 큐레이션 검색 설정'으로 이동2. 상품 필터기능 설정에서 '필터조건 추가' 버튼을 클릭하여 새로운 사이즈 검색 필터를 추가3. 해당 필터 검색정보에 원하시는 사이즈 값 입력 후 '저장' 버튼 클릭4. [관리자] 상품 > 상품목록에서 새로운 사이..

  • 카페24 기능 함수 (모디파이어)

    https://sdsupport.cafe24.com/board/tip/read_begin.html?no=633&board_no=1002 스마트디자인 서포트모디파이어 고급편 모디파이어 초급편을 이해하셨다면 아래의 여러가지 모디파이어를 통해 다양하게 변수를 활용해 보세요! 모디파이어 바로가기 ▶ 1. Cover 문자열이 존재할 경우 해당 문자열sdsupport.cafe24.com 모디파이어란?변수들의 데이터 형태를 다양화하기 위해 여러 형태의 모디파이어를 제공합니다.디자인 편집창에서 변수의 "}" 전에 |(shift + ￦) 를 사용하면 모디파이어 목록이 나옵니다.  모디파이어 고급편 모디파이어 초급편을 이해하셨다면 아래의 여러가지 모디파이어를 통해 다양하게 변수를 활용해 보세요!   모디파이어 바로가기 ▶..

  • 카페24 상품정보표시 설정 복사해서 일괄 변경하기

    function replaceAddCate() { const element = document.querySelector('#eShowBody'); if (element) { // 요소의 innerHTML을 수정 element.innerHTML = element.innerHTML.replace(/add_cate10/g, 'add_cate11'); }}// 함수 호출replaceAddCate();  보자 자세한 내용은 댓글 남겨주시면 도와드릴게요!

  • 카페24 상품정보표시 설정 모든 것 전체 해제하기

    메인 진열을 새로 만들면 모든 설정이 켜져있어서 이상하게 뜬다.  이렇게..이걸 한번에 끄는 함수 $("select[name^='add_cate'][name$='_option_display[]']").each(function (index, value) { $(value).val("not_display");});$("select[name^='add_cate'][name$='_title_display[]']").each(function (index, value) { $(value).val("");}); 크롬 개발자모드 콘솔에서 실행하면 된다.  done

  • 카페24 쉬운 주소/기존 주소 바꾸기

    출처 : 카페24 상품, 게시물 관련 페이지로 연결하는 쉬운 주소의 링크를 페이지 경로 방식으로 변경하기 위한 디자인 수정 방법을 안내해 드릴게요.해외 몰의 경우 /product/detail.html와 같은 페이지 경로로 접속하더라도 쉬운 주소로 연결되기 때문에 국내 몰 디자인에만 적용할 수 있어요.자세한 내용은 아래에서 확인해 주세요.자세히 알아보기해당 가이드는 한국어 베이직 스킨의 HTML 소스를 기반으로 작성되었어요.따라서 사용하고 있는 스킨과 문서 경로가 다를 수 있어요.해당 소스 작업은 HTML 소스를 메모장에 붙여넣기한 다음, Ctrl + H(바꾸기)를 통해 "모두 바꾸기" 한 다음 다시 소스에 붙여넣으면 더욱 쉽게 할 수 있어요.▼ 메모장에서 "모두 바꾸기"로 소스 수정하기  ■ 레이아웃 및..

  • [카페24] 상품 카테고리 목록 가져오는 api구현

    관련 추천메뉴     var API_PRODUCT_NORMAL = "/exec/front/Product/ApiProductNorma..

  • [카페24] 메인 구매 리뷰 상품 이미지가 깨져보이는 이슈

    🚨 문제 상황구매 리뷰에 상품 이미지가 깨져보이는 이슈 사용자가 사진을 등록하지 않은 경우,목록 이미지가 크게 보여지면서 깨져보이는 것이다.   ✔️ 상품 썸네일 이미지 사이즈를 변경해주면 해결된다. 여기에 출력되는 이미지는 상품 대표이미지의 tiny버전이다.상품 설정 > 작은 목록 이미지 or 축소이미지일 것이다. 사이즈를 전부 800으로 수정해줬다.그러고 사진을 다시 업로드하면 선명하게 보인다.   👩🏻‍💻 메인 출력 상품 리뷰 {$subject|cut:44,..} {$comment_count} {$member_icon}{$writer} ..

  • ⚠️ 카페24 사이트가 느릴 때, 폰트를 체크해보자 (AppleSDGothicNeo 폰트 사용시 주의사항)

    카페24 작업을 하는데, 한글 폰트는 AppleSDGothicNeo를 사용하신다고 한다.인터넷에서 AppleSDGothicNeo woff2를 다운받아 loacl에 올렸다.그리고 여느때와 다름없이 font-face를 연결했다. 그런데 발생하는 이슈.사이트 접속이 심각할 정도로 느려졌다. 사이트 속도 측정 사이트https://pagespeed.web.dev/?hl=ko PageSpeed Insights올바른 URL을 입력하세요.pagespeed.web.dev 체감이 아니라 실제 측정되는 속도도 엄청 느리다. 🚨 문제 코드@font-face { font-family: "AppleSDGothicNeo"; font-weight: 100; src: url("/moa/fonts/AppleSDGothicNeo/..

  • 카페24 상품 분류/상세 정보 노출 개별 class주는 법

    카페24 관리자에서 상품 정보 관리에서 노출 여부를 관리할 수 있는데,이때 각각의 데이터가 무엇인지 알기 위해서는 데이터 별 구분 class나 attribute를 추가해주어야 한다. 상품 목록 {$item_title} : {$item_content} {$item_title} : {$item_content}  > 구현 코드 ... ... ...  상세페이지 {$item_title} {$item_content} {$item_title} {$item_content}  > 구현 코드 ... ... ..

  • 카페24 카카오 로그인 에러 : Failed to launch 'intent:#Intent;action=com.kakao.talk.intent.acti

    크롬에서 모바일 모드로 켜서 카카오 로그인을 하려고 하는데, 에러가 뜨면서 로그인되지 않는다.  모바일 환경에서는 카카오톡으로 간편하게 로그인 하도록 intent호출을 하게된다.하지만, 개발자모드로 User-Agent만 모바일로 변경한 경우 intent호출해도 처리 할 수 없으므로 이미지처럼 표시된다. 실제 모바일 기기에서 테스트 하시거나 모바일 에뮬레이터를 사용하면 문제 없다.

  • 카페24 상세페이지 상품이미지 슬라이드 적용, 대표 이미지 흐릿하게 보임/깨질 때

    구현화면 카페24 기존 구현 화면 카페24 상세페이지 상품이미지는 기본으로 하단 작은 이미지를 클릭하는 형식이다. 이미지를 슬라이드로 하고 싶은데, 이미지가 흐릿하게 깨져서 보인다.우선 이미지를 나열하기 위해서는 module="product_addimage" 해당 모듈을 이용해야한다.  {$add_img} {$add_img}  swiper을 사용해서 슬라이드 틀을 만들었다.이게 중요한데, 해줘야하는 설정이 있다.  상품 설정에서 이미지 사이즈 변경을 해주자. 축소 이미지 사이즈를 키워주고 사진을 재업로드하면 된다.그러면 product_addimage 모듈로 슬라이드 구현 가능! 참고 문..

  • [카페24] 카테고리 이미지가 출력되지 않을 때

    해당 문제는 상품 분류(카테고리)의 분류꾸미기에서 설정한 이미지가 반영되지 않아 발생할 수 있습니다. 먼저, 상품 > 분류 관리 > 상품 분류 관리에서 해당 분류의 분류꾸미기에서 타이틀 이미지를 이미지 직접 등록으로 등록해보세요. 만약 설정한 이미지가 반영되지 않는다면, 디자인 편집창에서 /preference/product/product_category.ini 파일을 삭제 후 다시 확인해보시기 바랍니다.

  • [카페24] 상품 목록 KRW 단위로 출력하는 법 (10,000원 > KRW 10,000)

    상품 목록에서 "16,000원"을 "KRW 16,000"으로 단위를 바꾸려면, 쇼핑몰 설정 > 결제 설정 > 결제 정책 설정 > 결제 방식 설정 > 결제수단 사용설정 '에서 '결제금액 표기 방식'이 `화폐단위표기 (10,000원)`으로 설정되어 있어야 합니다. 설정 후 상품 등록 시 판매가에 "KRW"이 붙어서 등록됩니다.

  • 카페24 웹FTP가 없어졌다 (신규 쇼핑몰 카페24 웹FTP -> 디자인FTP)

    어느 날처럼 카페24외주를 진행하는데, 이번 건은 FTP접속이 안되었다. FTP비밀번호가 문제가 있나 해서 클라이언트에게 수정을 요청했는데,변경 사항 선태사항에 "FTP/파일링크"가 안뜨고 "파일링크"만 떴다.  좌측 메뉴에도 "웹FTP"가 없고, "디자인FTP"랑 "파일업로더" 라는 메뉴가 있었다.  디자인FTP는 뭐를 신청하라고 뜬다. 뭐지? 기존에는 웹FTP가 있었다. 카페24측에 문의해보니, 21년 12월부터 신규 쇼핑몰은 ftp로 사이트에 접근하는게 아니라고 한다.쇼핑몰 스킨과 이미지를 분리해서 관리할 수 있도록 웹FTP -> 디자인FTP/파일업로더 로 기능을 분리했다고 한다. 쇼핑몰 스킨 : 디자인FTP이미지 : 파일업로더 ■ 변경내용   기존 제공하던 웹FTP를 제거하고 '파일업로더' 및 '..

  • 자동으로 전환되는 탭 + 탭 클릭시 변경되는 이미지, 문구, a태그

    클라이언트 요청사항좌측의 탭을 누르면 우측 이미지, 하단 문구, 버튼 링크가 변경되게 해주세요.  ✅ 구현 화면 ✔️ 좌측 탭을 누르면 우측 이미지 / 하단 문구 / 버튼 링크가 변경된다.✔️ 7초마다 다음 탭이 active된다.✔️ 사용자가 탭을 누르면, 자동으로 전환되던 건 멈춘다.  ✅ 코드 {#title} {#text_1} {#imgTag_1} {#html} {#link_1} ..

  • 〰️ 모바일 브라우저에서 띠 배너의 내용이 길어서 잘리는 경우, 흐르는 애니메이션 추가

    ASIS TOBE 🚨 문제상황상단의 띠배너 내용이 브라우저 크기보다 길어서 내용이 ...처리되는 이슈가 있었다.지하철 안내 전광판 처럼 글자가 흐르도록 하길 원한다는 클라이언트의 요청.  ✅ 해결 방법 ✔️ 내부의 글자 길이가 브라우저 너비보다 긴 경우, 흐르는 애니메이션이 작동되도록 했다.✔️ 애니메이션 실행시, 글자가 반복되어야 길게 - 끊이지 않게 진행되기에 cloneNode를 활용해 문구를 복사해줬다.✔️ 브라우저 크기가 커져 애니메이션이 필요 없어지면, 복사해준 cloneNode는 지워주었다.   {#title}

  • 🎲 embed youtube 여러개 영상 이어서 + 랜덤하게 재생하기 (embed youtube playlist random play)

    클라이언트 요청사항- 여러 개의 유튜브 영상이 랜덤한 순서로 연이어서 자동재생 되면 좋겠어요.   ✅ 구현 화면 3개의 각각 다른 영상이 랜덤한 순서로 연이어 재생된다.손현주 아저씨 - 마시는 화이바 - 여성등장 영상 이렇게 세개의 영상이 랜덤한 규칙성을 가지고 재생된다.이때, 한차례 영상이 다 재생되고 처음으로 돌아올때 같은 영상이 또 재생되지 않도록 한다. 👩🏻‍💻 구현 코드

  • [카페24] 맨 위로 / 맨아래로 부드럽게 이동

    구현화면 레이아웃 kakao 로고 스타일시트 #quick_nav .quick_nav_inner { position: fixed; right: 12px; bottom: 25px; z-index: 999; display: flex; flex-direction: column; } #quick_nav .quick_nav_inner { opacity: 0; visibility: hidden; transition: opacity 0.5s; } #quick_nav.show .quick_nav_inner { opacity: 1; visibility: visible; } #quick_nav .quick_nav_inner, #quick_nav .updown { gap: 5px; } #quick_nav .roundBtn {..

  • web 카카오톡 공유하기 버튼 추가 (javascript 클라이언트 키발급 가이드)

    1. 카카오 디벨로퍼 접속 https://developers.kakao.com/ Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. developers.kakao.com 2. 로그인 후, 상단 > 내 애플리케이션 클릭 [애플리케이션 추가하기] 클릭 3. 모달 내용 입력 앱 아이콘과 앱 이름은 카카오톡 공유하기 채팅창에서 하단에 노출된다. 4. 생성된 애플리케이션 클릭 > 좌측 요약정보 > 하단 플랫폼 > 플랫폼 설정하기 클릭 5. web플랫폼 등록 버튼 클릭 6. 모달 작성 공유하기 기능을 테스트할 사이트를 적는다 구분은 줄바꿈으로 한다. 맨 위는 대표 주소를 적어준다. 7. Java..

  • [React/Redux] 🛡 immer으로 배열 내 특정 값 변경하기 (불변성 절대 지켜!)

    제로초의 Nodebird 강의 중, immer 라이브러리를 사용해보았다. find 함수와 immer을 함께 사용했을때 신기한 경험을 해서 기록해둔다. immer란? reduce state 불변성을 지켜주는 편리한 라이브러리다. 목표 post.mainPosts 배열에서 특정 id를 가진 값을 찾아, post.mainPosts[index].Comments배열에 값을 추가하려고 한다. const reducer = (state = initialState, action) => produce(state, draft => { switch (action.type) { case ADD_COMMENT_SUCCESS: { const post = draft.mainPosts.find(v => v.id === action.da..

  • [React/antd] react-hook-form의 reset() 함수 작동하지 않을때

    혹시 antd form을 사용 중이라면 이 글에서 답을 찾을 수 있다. 아니라면 다른 글로.. bye ❌ 문제 상황 게시글이 작성완료되었을때, 게시글 작성 textarea의 값이 초기화되도록 한다. 하지만, react-hook-form에서 제공하는 reset() 함수가 작동하지 않음 😅 문제 코드 import { InboxOutlined, UploadOutlined } from '@ant-design/icons'; import { Button, Form, Input, Space, Upload } from 'antd'; import { useDispatch, useSelector } from 'react-redux'; import { addPostRequest } from '../reducers/post'..

  • [React/Tailwind] 🌲 tailwind 변수 className로 css적용 안될 때 / 다이나믹 값 (tailwind 트리쉐이킹)

    🤦‍♂️ 문제상황 tailwind 사용중, class를 변수로 넣었는데 class는 정상적으로 render되었지만, css가 적용되지 않았다. isUser 에 따라 top값이 다르게 계산되어 출력되길 원함 ✅ 해결 기본적으로 Tailwind는 화면에서 사용한다고 인식되는 class의 css를 랜더한다. 이것이 tailwind의 tree-shaking기능이다. (관련링크) 즉, Tailwind는 top-[117px]을 인식하지 못했다는 의미 다이나믹 class를 Tailwind가 올바르게 인식하게 하기 위해선 몇가지 규칙을 지켜야 한다. (관련 링크) 1. class명을 온전히 리턴값으로 가져야 한다. ❌ 문자열 연결을 통해 클래스를 만들지 않는다. ✅ 완전한 클래스 이름을 동적으로 만든다. 2. 임의 값..

  • [Javascript] 🍪 Remove Cookie not working : 쿠키가 삭제되지 않을 때

    🚨 문제 상황 react url을 작성해서 접속한 페이지에서 Vanilla Javascript로 작상한 remove cookie가 작동되지 않음 그런데 또 다른데서는 문제없이 됨..🤦‍♂️ //useCookieStorage.ts export const useCookieStorage = { setCookie: (name: string, value: string, exp: number) => { let date = new Date(); date.setTime(date.getTime() + exp * 24 * 60 * 60 * 1000); document.cookie = name + '=' + value + ';expires=' + date.toUTCString() + ';path=/'; }, getCooki..

  • [React] 🧭 Router useMatch 사용법 - component에서 router path형식 비교하기

    react-router-dom 버전 6에서는 matchPath 함수가 제거되었다. 대신, 매치 정보를 얻기 위해 useMatch 훅을 사용할 수 있다. useMatch 훅은 현재 경로와 지정된 경로 패턴을 비교하여 매치 여부를 확인하고, 매치된 정보를 반환한다. 사용법 import { useLocation, useMatch } from 'react-router-dom'; function MyComponent() { const location = useLocation(); const match = useMatch('/myroute'); useEffect(() => { const routePath = match ? match.path : ''; console.log(routePath); // path pro..

  • [VSC] 💅 Prettier 확장프로그램으로 저장할때마다 코드 정리하기 / vscode prettier auto save 작동하지 않을 때

    해당 글은 퍼블리셔, 디자이너들을 위해 package와 별다른 설정 없이 확장프로그램으로만 작동합니다. 개발자분은 기존에 사용하시던 eslint규칙과 prettier을 하셔도 무관합니다. 뭐든 이쁜게 최고다. 코드도 이쁘게 정리되어 있어야지 눈에 확 들어오고, 유지보수에도 큰 영향을 차지한다. 오늘은 코드를 '저장할때마다 보기 좋게 정리되도록' 할 것이다. 1. 확장프로그램 Prettier 설치 좌측 메뉴들 중 블록 아이콘을 클릭해 Prettier을 설치해 준다. 2. Setting변경 좌측 하단 톱니바퀴 아이콘을 눌러 Setting을 켜준다. 2-1. Default Formatter 설정 검색창에 Default Formatter을 쳐서 기존 Default Formatter > none을 Pretti..

  • [카페24] Cafe24에디터에서 탈출하기 :: vscode로 cafe코드 원격 수정하기

    카페 24에서 제공하는 Cafe24 editor는 정말 화난다. 아주 화가 많이. 잔뜩. 🤦‍♂️ 전체 파일 검색이 믿음이 안감, css하나 찾으려면 모든 파일 열어서 찾아야 함 파일 내 검색이 정상적으로 작동 안 함 (find in file not working) 파일 형식 제대로 검사 안해줌 (not eslint) 코드 재정렬 그런거 없다. (beautify not working) 위에 있는게 모두 가능한, 개발툴로 cafe원격 수정하는 방법을 공유한다. 사람은 도구(IDE)를 써야 한다. ⚠️ 주의할 점 카페24 에디터와 달리 코드 변경에 대한 history를 따로 저장하지 않는다. 형상관리를 원한다면 git을 공부하자. 아니면 신중하게 수정하자. 오타 하나로 고장날수도 있으니까.. (사실 이건 카..

  • 경기도미래기술학교 '클라우드 기반 JAVA개발자 양성 과정' 6개월 회고

    2021년 8월 17일. 경기도 미래기술학교의 '클라우드 기반 JAVA 개발자 양성 과정'을 시작했다. 같은 분야에 관심 있는 사람들끼리 모였을 때 나오는 열정과 소속감을 오랜만에 느낄 수 있었다. 프로젝트를 하느라 정신없었지만 어느덧 6개월이 흘러 1월 19일 수료했다. 짧다면 짧고 길다면 긴 6개월 동안 배운 것도 많고 느낀 점이 많았다. 스스로 이 감정을 기억할 겸, 그리고 누군가에게 도움이 될 겸 기록해두려고 한다. 경기도미래기술학교 후기, 경기미래기술학교 후기, 메가존클라우드 교육 후기, 클라우드 기반 JAVA개발자 후기 프로그램을 알게 된 경로 퇴사 후 컴활 1급 실기를 준비하고 있었다. 그러던 어느날 경기도 미래기술학교에서 강의가 열린다고 안내해주는 전화가 왔다. 단순 학원홍보인줄 대수롭지 ..

  • [JAVA] "삭제된 댓글입니다." 출력을 구현하기 위한 나의 여정

    3차 프로젝트에서 "삭제된 댓글입니다."를 출력하려다가 머리를 다 쥐어뜯는 중이다.. 0. 나를 알고 적을 알아야 이긴다. # 구현하고 싶은 화면 블라인드는 삭제된 댓글의 답글은 남기고 이렇게 보여주더라 다음/네이버 카페도 댓글에 답글이 있으면 삭제된 댓글이라고 출력했다. 추가로 유튜브는 재댓글이 달려있어도, 댓글을 지우면 다 삭제되더라. 아마 빅데이터에 다 저장하고 지우는 거겠지? 😏 무작정 지우진 않을 것 같다. 분명 # 현 댓글 구조 댓글은 2가지 레벨(Class)로 구분된다. 1. 게시글에 단 댓글 - 출력 화면에서 "삭제 예정" 최상위 댓글 2. 댓글에 단 댓글 - 출력 화면에서 "삭제 예정" 하위 댓글 2번 하위 댓글은 두가지로 구분할 수 있다. 댓글에 단 댓글에 또 댓글을 달려고 했을 때, ..

티스토리툴바