Developer 78

원격저장소에 올라간 커밋 되돌리기

최근 업데이트 2020-06-02 원격저장소에서 커밋 히스토리 제어( reset/revert ) 1. Reset 후 강제 push하기 Git에서 작성한 커밋들을 되돌리고 싶을 때, 아직 원격저장소로 push 하지않은 경우에는들을 기반으로 작성되 $ git reset {commit_id}으로 원하는 상태로 원상복구할 수 있지만, 아래 이미지처럼 이미 원격저장소로 push 해버린 경우에는 로컬에서 커밋을 되돌린 후에 강제로 push를 해야한다. 예로 아래 이미지처럼 HEAD에서부터 세 개의 커밋을 완전히 제거할 수 있다. 1-1. 로컬에서 되돌리고 싶은 커밋으로 간다 아래 명령문을 여러번 실행하면서 원하는 커밋상태로 간다. HEAD^으는 바로 아래 커밋으로 되돌리게 되고, HEAD~3와 같이 하게 되면 헤에..

Developer/GitHub 2020.04.21

오랜만에 yarn start 또는 npm start 시 나는 오류

TypeError ERR_INVALID_ARG_TYPE: The "path" argument must be of type string yarn start 또는 npm start 시 나는 오류 해결 오랜만에 레파지토리를 작업하려고 git pull을 한 후에 yarn start 를 했는데 아래와 같은 오류가 나왔다. (아래 ....은 생략한 것) TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received type undefined at assertPath (path.js:39:11) ...... 구글링해보니 버전 문제로 보이고 아래와 같은 단계로 하니 문제없이 yarn start 가 되었다 :) package.j..

Developer/React 2020.04.21

리액트에서 img 태그 버그 해결방법 : alt 의 중요성

img elements must have an alt prop, either with meaningful text, or an empty string for decorative i... 위와 같은 형식으로 이미지 태그를 작성 했더니 아래와 같은 오류나 났다. Windows PowerShell Compiled with warnings. ./src/component/About.js Line 17:29: img elements must have an alt prop, either with meaningful text, or an empty string for decorative images jsx-a11y/alt-text Search for the keywords to learn more about each ..

Developer/React 2020.04.21

리액트 프로젝트 레파지토리 받아서 세팅하기

이미 리액트 빌드 되어진 저장소에서 프로젝트는 받아서 작업하여 빌드, 배포합니다. 1. 프로젝드받아서 실행하기 프로젝트의 깃주소로 저장소 프로젝트를 로컬에 clone 및 실행합니다. git clone https://github.com/{username}/{repo-name}.git // 예시 cd {repo-name} // 로컬 프로젝트 폴더로 들어감 yarn yarn start 2. 작업 후에 저장소로 커밋, 푸쉬 git add . // 내가 수정한 전체내역을 git commit -m "커밋메세지" // 커밋하고 git push // 푸쉬 3. 빌드 후 배포 $ yarn build $ yarn run deploy

Developer/React 2020.04.21

리액트 프로젝트 만들기

node, npm/yarn, create-react-app 설치, build와 GitHub Pages 배포까지 1. node.js 설치 리액트 작업에 필요한 라이브러리들을 손쉽게 설치하기 위한 node의 패키지 매니저 npm/yarn을 위해 먼저 node.js 를 설치합니다. node.js 사이트 : https://nodejs.org/ko/ 설치가 잘 되었다면 터미널에서 버전확인이 가능합니다. $ node -v v10.15.1 npm은 node.js를 설치할 때 함께 설치되기 때문에 따로 설치할 필요가 없습니다. $ npm -v 6.8.0 2. create-react-app 설치 및 사용 프로젝트들을 담아둘 디렉토리에서 아래와 같이 설치를 하면 "my-app"이라는 폴더가 생깁니다. $ npx creat..

Developer/React 2020.04.21

[카페24에 향상된 전자상거래 적용하기] STEP7. 결제행동(checkout 행동분석)

최근 업데이트 2020-06-03 결제행동은 사용자가 상품을 "장바구니에추가>주문상품확인>배송정보입력>결제정보입력>결제>완료창...."처럼 상품을 결제하는 과정을 쪼개어 유입과 이탈을 확인하는 것을 말합니다. 외국 쇼핑 사이트는 "review a cart>billing>payment>confirm order>complete" 등 step이 잘 나눠져있는 편인데, 국내 쇼핑몰들은 대부분 "장바구니>주문서작성>주문완료" 으로만 되어있는 편이며, 중간에 이탈을 막기 위해 step을 줄이고 적은 페이지 수 내에서 주문 및 결제가 이뤄지도록 한 것 같습니다. 그리고 요즘엔 배송정보나 결제정보도 디폴트로 설정해놓은 경우도 많기 때문인 것 같네요....! 어떤 블로그에서는 "장바구니"와 "결제완료"창에 대해 결제행동..

[카페24에 향상된 전자상거래 적용하기] STEP8. (대망의) 구매완료 측정하기

최근 업데이트 2020-07-13 : dataLayer.push 위치 변경 대망의 마지막 구매완료 페이지....! order_result.html 페이지에 dataLayer를 심어 구매가 완료된 상품들과 주문id를 전송해봅시다 :) 전 단계는 아래 링크에서 확인할 수 있습니다. STEP6. 장바구니 비우기 + 장바구니에서 선택상품 삭제(Tracking removes from cart) STEP5. 장바구니에 담기 측정하기(Tracking adds to cart) STEP4. 상품 상세페이지 조회 측정하기(Tracking product detail views) STEP3. 상품 클릭 측정하기(Measuring Product Clicks) STEP2. 상품 노출 측정하기(Measuring Product Im..

[카페24에 향상된 전자상거래 적용하기] Optional. 네이버페이 버튼 이벤트 측정하기

최근 업데이트 2019-10-21 현재 네이버페이를 통한 구매를 측정할 수 있는 방법은 없는 걸로 알고 있습니다....! 곧 생긴다는 얘기는 듣긴 들었으나 정확하지 않네요.하지만 네이버 페이 버튼을 클릭하는 것에 대한 이벤트는 커스텀으로 측정할 수 있기 때문에 한 번 만들어 보도록 하겠습니다. 이번에는 직접 cafe24 소스에 손 댈 필요는 없습니다 :) [Npay 구매] 버튼에 심어봅시다. 전 단계는 아래 링크에서 확인할 수 있습니다. STEP6. 장바구니 비우기 + 장바구니에서 선택상품 삭제(Tracking removes from cart) STEP5. 장바구니에 담기 측정하기(Tracking adds to cart) STEP4. 상품 상세페이지 조회 측정하기(Tracking product detai..

[카페24에 향상된 전자상거래 적용하기] STEP6. 장바구니 비우기 + 장바구니에서 선택상품 삭제(Tracking removes from cart)

최근 업데이트 2019-10-16 장바구니에 상품들이 담겨져있을 때 상품들을 장바구니에서 제거하는 이벤트를 측정해봅니다. 아래와 같이 장바구니에서 상품을 제거하는 경로는 두 가지입니다. (1) 장바구니 전체 비우기(make empty == remove all products) (2) 장바구니에서 선택한 상품 삭제하기(remove some products selected) [장바구니 비우기] 버튼과 [선택상품 삭제]버튼에 심어봅시다. 전 단계는 아래 링크에서 확인할 수 있습니다. STEP5. 장바구니에 담기 측정하기(Tracking adds to cart) STEP4. 상품 상세페이지 조회 측정하기(Tracking product detail views) STEP3. 상품 클릭 측정하기(Measuring P..

[카페24에 향상된 전자상거래 적용하기] STEP5. 장바구니에 담기 측정하기(Tracking adds to cart)

최근 업데이트 2019-10-14 이번에는 장바구니에 담기 이벤트를 측정해봅시다. 보통 상품 상세페이지에서 수량을 선택한 후 [장바구니에 담기]를 클릭하거나 [바로 구매]클릭하는 순서로 구매가 시작됩니다. 그래서 [장바구니에 담기]라는 버튼에 이벤트를 심고, 태그가 발동되도록 해봅시다. + [바로 구매] 버튼도 상품을 장바구니에 추가한 후, 장바구니 리스트 페이지를 건너 뛴 후 주문서 작성페이지로 바로 넘어가는 기능이기때문에 [바로 구매]버튼에도 장바구니에 담기 이벤트가 추가되어야되지 않나 라는 생각이 나중에 들어서 해당 버튼에서 추가했습니다....! [장바구니에 담기] 버튼과 [바로 구매]버튼에 심어봅시다. 전 단계는아래 링크에서 확인할 수 있습니다. STEP4. 상품 상세페이지 조회 측정하기(Trac..