• 카페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/..

  • 자동으로 전환되는 탭 + 탭 클릭시 변경되는 이미지, 문구, 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'..

  • [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번 하위 댓글은 두가지로 구분할 수 있다. 댓글에 단 댓글에 또 댓글을 달려고 했을 때, ..

티스토리툴바