Jaddong's Lab

1. yarn 글로벌 인스톨하기 $ yarn global add npx 2. npx 설치 및 최신화(업그레이드) $ npm i npx -g 3. 리액트 프로젝트 셋팅 $ npx create-react-app {프로젝트 폴더명}

1. 상단 메뉴의 File - Project Struct - Artifacts 2. Artifacts 초록색 +버튼클릭 -> Web Application Archive 선택 -> For '프로젝트:war exploded' 선택 -> OK 3. 상단 메뉴의 Build - Build Artifacts 4. 프로젝트명:war 선택 - Action : Build 클릭 5. 경로 : 프로젝트폴더/target/ 으로 들어가면 war파일이 만들어져 있습니다:)

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

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..

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 ..

이미 리액트 빌드 되어진 저장소에서 프로젝트는 받아서 작업하여 빌드, 배포합니다. 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

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..

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

최근 업데이트 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..

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