최신 글

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

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

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

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

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

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

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

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

  2024.04.18
• 카페24 네이버 쇼핑라이브 노출 애니메이션 추가

  네이버 쇼핑라이브를 설치했는데, 각각 애니메이션을 넣어주세요! 카페24 에서 '네이버 쇼핑라이브' 앱을 무료로 제공한다. 설치된 앱을 설명서 따라 셋팅하면 화면에 라이브 커머스가 출력된다. html에서 apps폴더가 생성됨을 확인 할수 있다. 내부 파일을 살펴보니, 외부 js를 호출하는 용도로 쓰이거나, 간격, 사이즈 와 같은 디자인 커스텀이 가능했다. onLoad/onError와 같은 이벤트도 제공했다. items에 wow fadein delay attr를 줘서 해결하고자 했는데, 코드를 아무리 뒤져봐도 item을 컨트롤하는 함수는 apps에 있지 않았다. network를 열어서보니 외부js에서 item element를 만들어 innerHTML하는 것 같아보였다. 그렇다고 init()에 return값이..

  2024.04.03
• vscode sftp 실시간 업데이트 안될 때 (Error: Config Not Found)

  [카페24] Cafe24에디터에서 탈출하기 :: vscode로 cafe코드 원격 수정하기 카페 24에서 제공하는 Cafe24 editor는 정말 화난다. 아주 화가 많이. 잔뜩. 🤦‍♂️ 전체 파일 검색이 믿음이 안감, css하나 찾으려면 모든 파일 열어서 찾아야 함 파일 내 검색이 정상적으로 작동 hoyashu.tistory.com 이렇게 잘 되던 실시간 업데이트가 안된다. 로그를 보니 Error: Config Not Found. 에러가 뜬다. 검색해보니, 1.16.1버전으로 다운그레이드하면 된다고 한다. 최신버전인 1.16.3에서 다운그레이드하니 잘된다! 더보기 출처 https://github.com/liximomo/vscode-sftp/issues/1017

  2024.03.21
• [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..

  2023.07.14
• [CSS] flex자식 요소인 경우, sticky가 안먹힐때

  tailwind가 적용된 게시글입니다. 하지만 tailwind 모르셔도 쉽게 유추 가능합니다. ❌ 문제 코드 위 코드에서 aside태그의 sticky가 정상적으로 먹히지 않았다. 🔍 원인 flex는 기본적으로 `align-items: stretch`이 적용된다. align-items: stretch란? flex내부의 아이템들을 수직으로 쭉~ 늘어지게 하는 것이다. sticky는 부모영역 내에서 본인의 위치가 고정되는 것인데, flex 의 align-items: stretch로 본인 영역 과 부모영역의 높이가 같아진 것이다. 그래서 정상적으로 작동하지 않는 것. 🍀 해결 이를 해결하기 위해서는 해당 자식요소는 부모 flex 의 `align-items: stretch`가 적용되지 않도록 해야한다. 이때 필요..

  2023.07.13
• [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'..

  2023.07.13
• [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..

  2023.07.07

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

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

  2022.01.07