• [카페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 파일을 삭제 후 다시 확인해보시기 바랍니다.

  • 자동으로 전환되는 탭 + 탭 클릭시 변경되는 이미지, 문구, 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번 하위 댓글은 두가지로 구분할 수 있다. 댓글에 단 댓글에 또 댓글을 달려고 했을 때, ..

티스토리툴바