본문 바로가기

전체 글105

[TypeScript] 버튼 활용 (기능추가) const buttonHandler = (key: string) => (event: React.MouseEvent) => { const buttonKey = key; // 클릭된 버튼의 키를 가져옵니다. setClickedButton(prev => { const newClickedButton = { ...prev }; // 이전 클릭된 버튼 상태를 복사합니다. if (!newClickedButton[pageNum - 1]) { newClickedButton[pageNum - 1] = []; // 만약 해당 페이지의 클릭된 버튼 상태가 없다면 초기화합니다. } if (newClickedButton[pageNum - 1].includes(buttonKey)) { // 버튼이 이미 클릭되어 있으면, 클릭 상태.. 2023. 10. 31.
[JavaScript] Cafe24서버로 관리되는 css DOM에 접근해서 바꾸기 window.addEventListener('DOMContentLoaded', function() { // select 요소를 선택 var selectElement = document.querySelector('select#product_option_id1.ProductOption0'); // 변경할 옵션 요소를 선택 var optionElement = selectElement.querySelector('option[value="*"][selected][link_image]'); // 옵션 텍스트를 변경 if (optionElement) { optionElement.textContent = '옵션 선택으로 더 저렴한 세트 구매를 해보세요 :)'; } });​ 2023. 10. 25.
[TypeScript] 공통컴포넌트 Nav 이용해보기 TS를 1도 모르는 상황에서 TS를쓰는 간단한 (?) 프로젝트가 시작되었다. 오늘 구현 한 컴포넌트는 공통컴포넌트로, Nav.tsx이다. 하나의 페이지에서 컴포넌트들만 바뀌는 식으로 개발을 할 것이었으며, 그 중에서도 Contents 내에 title부분을 Nav.tsx(공통 컴포넌트)로 정하고 구현했다. 코드는 이렇다. import React from 'react'; interface NavItem { title: string; subTitle?: string; } const SHAPE_NAV: NavItem = { title: 'What’s your nail shape?', subTitle: '(Choose based on the index finger.)', }; const CONCERN_NAV: N.. 2023. 10. 24.
[javascript] 404.liquid 에서 리디렉션 사용자에게 오류페이지를 보여주지 않기 위해서, sections폴더에 있는 404.liquid 탬플릿에 더보기 를 삽입해 주었다. 결과 -> url에 아무거나 쳐도 바로 메인페이지로 이동함 ! 2023. 9. 10.
[JavaScript] 오류 메시지에서 "Assignment to constant variable"라는 내용을 볼 수 있습니다. 이 오류는 const로 선언된 변수에 값을 다시 할당하려고 할 때 발생합니다. const로 선언된 변수는 한 번 값이 할당되면 다른 값을 할당할 수 없습니다. 따라서 selectedNailLength 변수를 let으로 선언하거나, 이미 const로 선언했다면 다른 변수로 값을 저장하는 방식으로 수정해야 합니다. 아래는 수정된 코드입니다: default 값으로 바로 checkbox가 checked 되어있도록 2023. 9. 9.
[JSON Template] 404-template Designing (1-3) 1. wrap our template using "tag" attribute tag attribute - By default, when Shopify renders a section, it wrapped in a element with a unique 'id' attribute. - If you don't want to use , then you can specify which kind of HTML element to use with the 'tag' attribute. the following are the accepted values - article - aside - div - footer - header - section 여기서 시작 (1-2 내용) {{ section.settings.title.. 2023. 8. 27.

티스토리툴바