분류 전체보기
[카페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를 제거하고 '파일업로더' 및 '..
카페24 네이버 쇼핑라이브 노출 애니메이션 추가
네이버 쇼핑라이브를 설치했는데, 각각 애니메이션을 넣어주세요! 카페24 에서 '네이버 쇼핑라이브' 앱을 무료로 제공한다. 설치된 앱을 설명서 따라 셋팅하면 화면에 라이브 커머스가 출력된다. html에서 apps폴더가 생성됨을 확인 할수 있다. 내부 파일을 살펴보니, 외부 js를 호출하는 용도로 쓰이거나, 간격, 사이즈 와 같은 디자인 커스텀이 가능했다. onLoad/onError와 같은 이벤트도 제공했다. items에 wow fadein delay attr를 줘서 해결하고자 했는데, 코드를 아무리 뒤져봐도 item을 컨트롤하는 함수는 apps에 있지 않았다. network를 열어서보니 외부js에서 item element를 만들어 innerHTML하는 것 같아보였다. 그렇다고 init()에 return값이..
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
[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..
[CSS] flex자식 요소인 경우, sticky가 안먹힐때
tailwind가 적용된 게시글입니다. 하지만 tailwind 모르셔도 쉽게 유추 가능합니다. ❌ 문제 코드 위 코드에서 aside태그의 sticky가 정상적으로 먹히지 않았다. 🔍 원인 flex는 기본적으로 `align-items: stretch`이 적용된다. align-items: stretch란? flex내부의 아이템들을 수직으로 쭉~ 늘어지게 하는 것이다. sticky는 부모영역 내에서 본인의 위치가 고정되는 것인데, flex 의 align-items: stretch로 본인 영역 과 부모영역의 높이가 같아진 것이다. 그래서 정상적으로 작동하지 않는 것. 🍀 해결 이를 해결하기 위해서는 해당 자식요소는 부모 flex 의 `align-items: stretch`가 적용되지 않도록 해야한다. 이때 필요..
[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을 공부하자. 아니면 신중하게 수정하자. 오타 하나로 고장날수도 있으니까.. (사실 이건 카..