와이파이를 통해 아이피와 포트를 오픈

npm run dev -- --host

주관적인 추천이다. 하지만 Jquery라이브러리를 시작으로 여러가지 프레임워크를 통해 작은 프로젝트를 해본 결과를 바탕으로 추천해 본다. 

추천하고 싶은 프레임웍은 바로: 스벨트이다. 

영번째 재미있다.

첫번째 이유는 매우 쉽다.
다른 프레임웍에 비해 러닝커브가 완만하다. 자바스크립트만 어느정도 알면 바로 시작할 수 있을 정도로 쉽게 배울 수 있다. 예전에 웹을 점령했던 JQuery도 이러한 장점이 있었다. 예전에 웹을 배우는 방식은 자바스크립트로 아주 조금 맛배기를 보곤 바로 jquery로 넘어갔던 기억이 있다. 왜냐면 jquery가 자바스크립트 자체를 배우는것 보다 쉽고 실전에서 써먹기 좋았기 때문이다.

스벨트도 jquery와 같이 쉽게 배울 수 있다는 점에서 추후 사용자들을 흡수 할 것으로 예상 할 수 있다.

두번째 이유는 빠르다.

스벨트를 설치해보면 알겠지만 설치도 쉽다. 그 설치 자체도 빠르다. 새로운 프로젝트를 계속해서 만들어 내는 사람들에게 특히나 좋아 할 수 있다. 설치만 빠르면 좋은게 아니다. 실행도 빠르고, 동작도 빠르게 빠르게 움직인다.

얼마나 가볍고 빠르게 동작하는지를 보고 싶다면 스벨트 프로젝트들을 모아둔 이 사이트에 들어가서 구경해보길 바란다. 게임에서 부터 쇼핑몰, threejs를 적용한 svelte 패키지까지 구경할 수 있다.  

https://madewithsvelte.com/

이렇게 빠르게 동작할 수 있는 이유는 svelte는 vuejs와 reactjs처럼 virtual DOM을 사용 하는게 아니라. 스벨트가 컴파일러 역활을 하여 작성한 코드를 순수한 자바스크립트로 컴파일 해주기 때문이다. 

세번째 이유는 가볍다

위에서 말했듯 순수한 자바스크립트로 컴파일을 해준다는 말은 필요없는 패키지들을 불러오지 않고 딱 필요한 코드만 생성해내는 것이다. 그렇기 때문에 빌드된 파일의 크기는 매우 작다. 이는 실행이 빠르게 되도록 만들어준다.

네번째 이유는 간결하다.

리액트를 사용하면 간단한 프로젝트도 많은 보일러플레이트 코드가 필요하다. 플러터에 관심이 있어서 사용해 플러터웹을 사용해서 작은 관리자 앱을 만들었는데 플러터웹을 이용해서 만든걸 후회 하고 있다. (물론 플러터는 모바일에서는 좋다.) 둘다 보일러플레이트 코드량이 많다. 그런데 스벨트코드를 보면 너무나도 심플하다. 스토어도 기본적으로 제공해주는데 심플하게 사용할 수 있다. 예전에 리덕트를 배우려고 머리 아픈것에 비하면 심플해서 머리 아플게 없다. 

다섯번째 제공 repl

간단하게 코드를 작성할 수 있는 repl을 제공하는데 깃 계정을 통해서 심플하게 만든 앱을 저장 할 수 있다. 잘 사용하면 생각보다 쓸만하다.

https://svelte.dev/repl

나는 이 repl를 통해 업무에 필요한 단순한 유틸 파일을 만들어 사용하거나, 심심할때 간단한 디자인이나 아이디어를 구현해보기도 한다. 그런데 아쉽게도 repl에서는 타입스크립트는 지원이 안된다.

Ex) repl을 사용하여 그냥 재미로 만들어본 네이버 주식 그래프 검색기

아래는 비교 해본 다트패드이다. 뭐 하나 실행하는데도 오래 걸린다. 저장기능도 없다. 플러터로 만들어 볼만한 간단한 아이디어를 구현해 보려 했는데 다트패드로는.....ㅠㅠ

https://dartpad.dev/

마지막 결론

어째튼 스벨트는 정말로 좋다. 특히나 개인 프로젝트로 아이디어를 구현하는 것에 스벨트를 사용하면 빠르게 프로토타이핑을 할 수 있다. 기업 내부에서 사용하는 시스템을 만든다고하면 또 추천해 보고 싶은데. 빨리빨리 필요한 기능들을 만들어내기 좋기 때문이다.

기업 입장에서도 프로그래밍 어느정도 할 수 있는 사람(나 같은)을 구해서 결과물을 만들어내기 쉽다. 다큐먼트와 튜토리얼도 잘 되어있어서 금방 배울 수 있다. (영어지만... 어렵진 않다.)

vuejs를 사용자라면 스벨트를 사용하면 뷰에서 조금 아쉬웠던 간결함을 스벨트에서 찾을 수 있을 것이라 생각한다. (물론 스벨트에서는 커뮤니티의 크기가 아쉽지만..ㅠ)

플러터웹으로 웹사이트를 만드는 건.. '왜 힘든길로 ㅠㅠㅠ' 라고 생각된다. - 플러터가 유명하긴하지만 플러터웹은 자료가 정말 없다.

리액트는 좋다 커뮤니티도 크고 자료도 많다. 리액트네이티브를 통해 앱을 만드는 자료도 많다. 그런데... 왜 그리 공부할게 많은지..ㅠ '익숙해지면 좋은거 아닌가????' 생각이 든다.  

firebase 9 버전이다.

app.js를 만들기.

import { initializeApp } from "firebase/app";
import { getAuth, GoogleAuthProvider } from "firebase/auth";

const firebaseConfig = {
  apiKey: "xxxxxxxxx-gG2DEYRrdnOx-Jtw7PRoso",
  authDomain: "xxxx.firebaseapp.com",
  projectId: "xxxxx",
  storageBucket: "xxxx.appspot.com",
  messagingSenderId: "xxxx",
  appId: "xxxxxxx",
  measurementId: "xxxxx"
};

//named export를 사용해서 필요한 것들을 내보냄
// Initialize Firebase

export const app = initializeApp(firebaseConfig);
export const auth = getAuth(app);
export const provider = new GoogleAuthProvider();

stores.js 만들기

import { writable } from "svelte/store";

export const user = writable({})
export const isLoggedIn = writable(false)

index.svelte

<script>
  import {auth, provider} from '../lib/app.js'
  import {signInWithPopup, onAuthStateChanged, signOut} from "firebase/auth";
  import {user, isLoggedIn} from '../stores'
  
  let isLoading = true

  async function loginInGoogle(){
    await signInWithPopup(auth, provider).then((result)=>{
      console.log(result.user)
      $user = result.user
      $isLoggedIn = true
    }).catch((error) => {

    })

  }
  async function logOut(){
    signOut(auth)
  }
 

  onAuthStateChanged(auth,(currUser) => {
    isLoading = false
    if (currUser) {
      // User is signed in, see docs for a list of available properties
      // https://firebase.google.com/docs/reference/js/firebase.User
      $user = currUser
      $isLoggedIn = true

      
    } else {
      $isLoggedIn = false
      $user = currUser
      // ...
    }
  });

</script>


{#if !isLoading}
  {#if $isLoggedIn}
    {$user.displayName} <button on:click={logOut}>log out</button>
  {:else}
    <button on:click={loginInGoogle}>login</button>
  {/if}
{/if}

차트의 레이블을 일일이 마우스 클릭하여 입력하고, 색상까지 바꿔주는게 귀찮아서 자동으로 완성해줄 수 있는 VBA가 있는지 찾아봤다.

그리고 그 코드를 약간 수정해서 아래의 결과물을 보여질 수 있는 코드를 만들었다.

결과

사용방법

차트를 클릭한 뒤 메크로로 아래의 코드를 넣은 모듈을 실행시키면 된다.

Sub LastPointLabel()
  Dim mySrs As Series
  Dim iPts As Long
  Dim vYVals As Variant
  Dim vXVals As Variant

  If ActiveChart Is Nothing Then
    MsgBox "Select a chart and try again.", vbExclamation
  Else
    Application.ScreenUpdating = False
    For Each mySrs In ActiveChart.SeriesCollection
      With mySrs
        vYVals = .Values
        vXVals = .XValues
        ' clear existing labels
        .HasDataLabels = False
        
        For iPts = .Points.Count To 1 Step -1
          If Not IsEmpty(vYVals(iPts)) And Not IsError(vYVals(iPts)) _
              And Not IsEmpty(vXVals(iPts)) And Not IsError(vXVals(iPts)) Then
            ' add label
            Set pt = mySrs.Points(iPts)
            pt.ApplyDataLabels _
                ShowSeriesName:=True, _
                ShowCategoryName:=False, ShowValue:=False, _
                AutoText:=True, LegendKey:=False
            Set dl = pt.DataLabel
            With dl
                'text color match to the it's line of the chart
                .Font.Color = mySrs.Format.Line.ForeColor
                .Top = pt.Top - 10
                .Left = pt.Left + 20
                .Font.Size = 12
                .Font.Bold = True
            End With
          End If
        Exit For
        Next
        ' Change the font size to 12
        
      End With
    Next
    ' legend is now unnecessary
    ActiveChart.HasLegend = False
    Application.ScreenUpdating = True
  End If
End Sub

참조

https://peltiertech.com/label-last-point-for-excel-2007/

https://stackoverflow.com/questions/59274616/custom-chart-point-datalabel-position

아이오닉사용해서 sveltekit 안드로이드 앱만들기

이미 스벨트로 만들어 놓은 코드가 있어서, 굳이 플러터 flutter를 사용하지 않고 기존 코드를 이용하여 앱을 만들어 보고 싶었다. 처음 앱으로 빌드할 때 좀 느렸지만 이후엔 빠르게 빌드가 됬다. 

오래 사용해보지 않아 얼마나 좋은지 나쁜지는 잘 모르겠지만 가벼운앱을 만들땐 괜찮을 않을까 싶다.

1. 기존에 있던 프로젝트에 capacitor 설치하기

npm install @capacitor/core @capacitor/cli

2. capacitor init 하기

capacitor를 init할때 스벨트킷의 빌드할 폴더는 build이기 때문에 기본값 www대신 build로 적어 준다..

(혹시라도 init 때 www로 설정해놓더라도 capacitor.config.ts의 webDir에서 나중에 바꿀 수 있으니 걱정할 필요 없다.)

npx cap init

3. 안드로이드나 IOS 플랫폼 설치

npm i @capacitor/ios @capacitor/android
npx cap add android //안드로이드 추가
npx cap add ios //ios 추가

4. 싱글페이지 빌드용 어뎁터 설치하기

npm i -D @sveltejs/adapter-static

https://github.com/sveltejs/kit/tree/master/packages/adapter-static

5.  싱글페이지로 빌드하기 위해 svelte.config에 아래와 같은 코드를 넣어준다. 

import adapter from '@sveltejs/adapter-static';

아래 코드를 보듯 기존 import adapter from '@sveltejs/adapter-auto'; 를 대체하였다.

// import adapter from '@sveltejs/adapter-auto';
import adapter from '@sveltejs/adapter-static';
import preprocess from 'svelte-preprocess';

/** @type {import('@sveltejs/kit').Config} */
const config = {
	// Consult https://github.com/sveltejs/svelte-preprocess
	// for more information about preprocessors
	preprocess: preprocess(),

	kit: {
		adapter: adapter(
        {fallback: 'index.html'}
        )
	}
};

export default config;

6. routes/+layout.js 파일 만들고 

export const prerender = true

7. 스벨트 빌드하기

npm run build

8.실행시키기

//안드로이드 스튜디오에서 실행
npx cap open android 

//실기기 실행
npx cap run android

-----------------------------------------------------

라이브 리로드

1. capacitor.config.ts의 내용을 아래로 대체함

import { CapacitorConfig } from '@capacitor/cli';

const appId = '앱.아이.디';
const appName = '앱이름';
const server = process.argv.includes('-hmr') ? {
  'url': 'http://192.168.5.67:5173',   // always have http:// in url
  'cleartext': true
} : {};
console.log(server);
const webDir = 'build';

const config: CapacitorConfig = {
  appId,
  appName,
  webDir,
  server
};

if (process.argv.includes('-hmr')) console.log('WARNING: running capacitor with livereload config', config);

export default config;

2. svelte를 디버깅 모드로 실행

npm run dev -- --host //호스트를 넣어서 아이피를 오픈해줘야함

3. 실기기에서 실행

cmd창을 하나 더 열고 아래의 명령어를 입력함

npx cap run android

참조

https://capacitorjs.com/docs/cli

https://www.reddit.com/r/sveltejs/comments/rllo3y/svelte_and_firebase_auth_question/

플라스크는 하나에 파이썬 파일에 서버를 쉽게 만들 수 있다. 

엄청 간단한 기능을 만들거나 테스트앱을 만들때 간단히 하나의 파일로 만들면 빠르게 개발 할 수 있다. 

하지만 조금만 앱의 크기가 커지면 하나의 파일로 코드를 작성하는게 불편해 지는 때가 온다.

팩토리 패턴을 사용하여 파일을 나눌 수 있다.

일단 참고한 사이트는 아래의 사이트이다. 사이트에 어떻게 나누어야 하는지 아주 자세하게 잘 나와있다. 

https://wikidocs.net/81044

간략하게 설명한다면

1. 파이썬 메인 파일을 __init__.py로 바꾸어 폴더 통체로 모듈화를 한다

2. views 폴더를 만들어서 url을 적고

3. models.py를 만들어서 모델을 넣는다. 

이걸 하는 동안 작은 문제가 발생했는데 다음과 같다.

시작과 함게 디비를 만드는 db.create_all()이 에러를 발생했고 

__init__.py파일 안에 아래와 같이 코드를 만들었더니 디비가 생성되지 않는 에러가 나타났다. 그런데 

def create_app():


    with app.app_context():
            db.create_all()
            
    from .views import main_views
    app.register_blueprint(main_views.bp)
    return app

아래 처럼

with app.app_context():

      db.create_all()

을 맨 마지막에 적으니 작동이 된다. 

def create_app():
	
    
    from .views import main_views
    app.register_blueprint(main_views.bp)
    
    with app.app_context():
    	db.create_all()  
    return app

코드 나눈건 아래 같은 방식으로 나누었다.

__init__.py

from flask import Flask
from flask_cors import CORS
from flask_migrate import Migrate
from flask_sqlalchemy import SQLAlchemy

# *** 중요 (팩토리 패턴세팅) ***
db = SQLAlchemy()
migrate = Migrate()

# ***** 팩토리 패턴에서 자동으로 실행되는 create_app() 함수 
def create_app():
    app = Flask(__name__)
    CORS(app)

    app.config["SQLALCHEMY_DATABASE_URI"] = "sqlite:///inventory.db" # sqllite
    # app.config['SQLALCHEMY_DATABASE_URI'] = 'mysql+pymysql://로컬유저네임:로컬비번@localhost/default'
    # app.config['SQLALCHEMY_DATABASE_URI'] = 'mysql+pymysql://닉네임:비밀번호@파이썬애니웨어닉네임.mysql.pythonanywhere-services.com/디비네임$default'
    app.config['SQLALCHEMY_ENGINE_OPTIONS'] = {'pool_recycle': 280}
    app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = True

    UPLOAD_FOLDER = './downloads'
    
    # *** 중요 (팩토리 패턴세팅) ***
    app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER
    db.init_app(app)
    migrate.init_app(app, db)

    from .views import main_views
    app.register_blueprint(main_views.bp)
	
    with app.app_context():
        db.create_all()

    
    return app

views.py

# *** 중요 (팩토리 패턴세팅): Blueprint 임포트하기 ***
from flask import Blueprint
from flask import request
import pandas as pd
from myapp import db
from myapp.models import ProductInfo, Quots, SalesDetail, StockLevel, Sales, Purchase, Bom, QuotsDetail, PurchaseDetail
import json
from werkzeug.utils import secure_filename
from flask import make_response

# *** 중요 (팩토리 패턴세팅): url 경로 / 기준으로 엔드포인트 만듬 ***
bp = Blueprint('main', __name__, url_prefix='/')

@bp.route("/add_product_info", methods=['GET', 'POST'])
def add_product_info():
    if request.method == 'POST':
        objects = []
     	...
        return '0'
    else:
        return '0'


@bp.route("/csv_upload", methods=['POST'])
def csv_upload():
    if request.method == 'POST':
        counts = {'total':0, 'insert': 0, 'update':0}
        if 'file' not in request.files:
            print('No file part')
            
        file = request.files['file']
        if file.filename == '':
            print('No selected file')

        if file and allowed_file(file.filename):
        ...
        
    print('success')        
    return {'stauts':'success', 'counts':counts}


@bp.route("/product_edit", methods=['POST'])
def product_edit():
    if request.method == 'POST':
        row = json.loads(request.data)['data']
         ...
        db.session.commit()
    return {'res':0}

models.py

# *** 중요 (팩토리 패턴세팅)__init__에 만든 db 가져오기 ***
from myapp import db
import datetime

class ProductInfo(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    article = db.Column(db.String(32), unique=True, nullable=False)
    ...
    #server deafult는 string
    online_shop = db.Column(db.Boolean, nullable=False, server_default='0', default=0)
    stocks = db.relationship("StockLevel")

    def as_dict(self):
        return {c.name: getattr(self, c.name) for c in self.__table__.columns}


class Sales(db.Model):
    __tablename__ = 'sales'
    id = db.Column(db.Integer, primary_key=True)
    ...
    status = db.Column(db.String(16))
    children = db.relationship("SalesDetail")

> set FLASK_ENV=development
> flask run

회사에서 쇼피파이 대신 워드프레스를 사용하기로 결정해서 워드프레스와 우커머스를 사용하여 쇼핑몰을 만들 계획이다. 워드프레스를 사용하면 코딩 없이 쇼핑몰을 만들 수 있는 장점이 있다.

0. WAMP설치하기 

1)윈도우에서 실행할 수있는 아파치 MYSQL PHP서버를 설치함.

2)워드프레스용 디비 만들기 

혹은 처음부터 호스팅을 시작하기

 hostgator.com / bluehost.com / fastcomet.com

블루호스트

1. 그냥 워드프래스를 만든다.

2. 호스팅 이전: 도메인 닷컴에서 블루호스트의 nameserver - ns1.bluehost.com 이걸 등록하고 도메인 dns record의 세팅 ns @ ns1.bluehost.com이걸 바꿔줌

3. ssl이 적용이 안됬을 경우 bluehost에서 ssl 다시 run 시켜줌

1. 워드프레스 설치하기

만들어 놓은 디비명을 입력하여 워드프레스를 설치함.

2. SETTING 설정 바꾸기

사이트타이틀 바꾸기

사이트 태그라인 바꾸기

자신의 사이트 주소 입력

블로그를 위한 포스트 주소이름 변경

3. 플러그인 설치

워드프레스 설치가 완료 되었으면 관리자 페이지에 들어가 (localhost/wp-admin/)플러그인을 설치해야함

1) 엘레멘토 설치 (elemento)

드래그앤드롭으로 쉽게 웹사이트를 만들 수 있는 웹빌더플러그인. 엘리멘토를 사용하면 느려진다는 얘기가 있지만 엘리멘토를 사용하여 사이트를 개발하는게 훨씬 쉽게 느껴졌기 때문에 그걸 감수하는게 낫다 생각함.

2) 우커머스 설치

4)Essential Addons for Elementor

더 많은 위젯들을 사용할 수 있도록 해줌

프로덕트 그리드 같은 우커머스연동 위젯도 제공함

5) wptobe-signinup 설치

사용을 위해서는 sign up과 sign in page 를 만든뒤 아래에서 세팅을 해주면 자동으로 로그인 창이 생성됨 

6) if Menu 설치

메뉴 조건 보여주는 기능

7) storecustomizer 설치

8) smush 설치

- 이미지업로드시 이미지 최적화

- 이미지 lazyloading

- 이미지가 안뜨는 경우가 있는데 아래 처럼 세팅하니까 이미지가 잘 뜬다.

9) W3 Total Cache

페이지 캐쉬

10) starter templates

버전에 따라 이게 자동으로 생성이 안되는 경우가 있나봄.

11) translatepress

멀티랭기지 플러그인을 설치하고 세팅에 들어가면 쉽게 번역을 만들 수 있다.

다만 url이 /language/의 형식으로 사용시 번역 페이지가 안뜨고 404가 뜰 경우 

https://translatepress.com/docs/addons/language-get-parameter/

에서 zip파일 플러그인을 받거나

*추천하는 방법인데

settings/Permalink Settings에 들어가서 /파라메터/ 형식으로 바꾸어줘야 함 

*WPML 유료버전 사용시 년간 $99

12) 최적화

https://cafe.naver.com/wphomepage/5986

위의 주소의 글처럼 최적화 했더니 문제 발생

Webcraftic Clearfy – WordPress optimization plugin를 사용하라고 적혀있는데 

이걸 사용했더니 if menu에 문제가 발생함

4. 아스트라 테마 설치

1) 스타트업테마로 ecommerce 테마를 설치 함 이때 엘리멘토로 된 테마를 설정해야 함

아스트라 ecommerce를 설치시 함께 추가되는 plugins

 - Cartflows 카트 디자인 플러그인

- WooCommerce Cart Abandonment Recovery 장바구니에 담고 구매하지 않는 고객들 관리 

- WPForms Lite 컨텍트페이지에서 이메일 남기는 플러그인

*엘리멘토 기본 사용법

- 섹션: 페이지에 섹션으로 구성되어 있음

동그라미 플러스 버튼을 눌러서 섹션의 스트럭처를 선택함.

* 폴더 모양을 클릭하면 블럭과 템플릿(미리 만들어진 레이아웃)을 불러 올 수 있음 - 처음부터 만드는것 보다 유용 (필요없는 요소는 지우고 이미 디자인된 위젯들은 복붙하고 새로운위젯 추가/수정하여 사용)

아래는 섹션요소의 편집창이다.

높이(height)속성을  Min Height로 바꾸면 마음데로 섹션의 높이를 바꿀 수 있는 것을 볼 수 있다. 

스트럭처를 통해 섹션의 비율도 조절 할 수 있다.

또한 새로운 섹션을 기존섹션 위에 추가하고 싶으면 생성된 섹션위의 +버튼을 클릭하여 섹션을 새로운 섹션을 생성 할 수 있다. 

+ 옆의 6개의 점 아이콘을 드래그하면 섹션의 위치를 바꿀 수 있으며 클릭시 섹션의 요소를 바꾸는 창이 나오게 할 수 있다.

섹션의 편집창에 보면 Style이라고 있는데 여기서는 글자색, 글자정렬, 배경색, 배경 이미지, 배경오버레이( 보통 나중 글씨를 배경위에 올리는 색 / 이미지) 섹션의 모양을 노멀과, 호버시에 따라 지정할 수 있다.

호버에 속성 변경은 버튼위젯에서 사용하면 좋다. 호버시 애니메이션도 삽입 할 수 있기 때문에 인터렉티브한 웹사이트로 만들 수 있다.

또한 신박한 점은 영상이나 슬라이드쇼를 백그라운드로 간단히 바꿀 수도 있다는 것이다.

고급에 들어가면 PC, 타블릿, 모바일에 따라 안여백, 밖여백, 클레스, 아이디, 모션이펙트 등을 지정할 수 있다.

- 엘리먼트(위젯) 삽입하기

일리먼트(위젯)를 삽입하는 건 쉽다. 일단 편집창에서 목록박스를 두번 누르면 엘리멘트를 볼 수 있는데, 여기서 그냥 자신이 넣고자 하는 위젯을 찾아 드래그하여 원하는 곳에 넣으면 된다. 아래 사진을 보듯 다양한 위젯들을 제공한다. 

이렇게 락이 되어있는 것은 유료 버전에서 사용할 수 있는 위젯이다. 여러가지 편리한 위젯을 사용할 수 있는데 1년에 49달러면 비싸게 느껴지진 않는다.

어째튼 더 밑으로 화면을 내려보면 다시 무료로 사용 할 수 있는 위젯들을 볼 수 있다. 

어째튼 간단히 드래그앤드롭으로 자신이 원하는 위치에 위젯을 놓을 수 있다.

이미 위젯이 있을 경우 그 기존요소의 위나 아래에 드래그 드롭이 가능하다.

모든 위젯은 수정할 수 있는 왼쪽 상단 아이콘을 가지고 있으며 이것을 클릭하면 각 위젯의 속성을 바꾸어 줄 수 있다.

텍스트위젯을 삽입했을 때 왼쪽 속성창에서 놀랍도록 쉽게 글을 적을 수 있다.

버튼의 경우 링크 설정시 메인url을 넣지 않는게 좋다. 그래야 도메인이 바뀌더라도 링크가 깨지지 않는다.

즉 (메인url 제거 http://asdfasd.com)/product-category/men/ 옆쪽 굵은 글씨만 링크로 연결하는 게 좋다.

뿐만 아니라 마우스 오른쪽 버튼을 클릭하여 복사 붙여 넣기도 할 수 있다.

위젯중 숏코드 사용가능 (옆의 숏코드를 변경하면 자신이 원하는 데로 구조와 상품의 종류를 결정 할 수 있음)

예를 들면

[products limit="4" columbs="4" category="카테고리 슬러그" ]

더 많은 숏코드를 보고싶다면

https://woocommerce.com/document/woocommerce-shortcodes/

헤더빌더로 헤더 수정하기

마음데로 로고, 메뉴, 카트의 위치를 이동/ 추가/변경 할 수 있다.

아래의 디바이스 아이콘을 통해 각각 디바이스 별로 헤더의 위치나 로고 배경색등을 쉽게 지정 할 수 있다. 

*우커머스 사용법

위와 같은 양식을 적거나 밑에 스킵을 클릭함

제품페이지를 보면 아래 사진 처럼 프로덕트 데이터에서 일반 상품과 제휴상품을 설정 가능

제휴 상품의 경우 제품의 주소를 입력 할 수 있음.

이럴 경우 구매 버튼을 클릭하면 자신이 링크한 페이지로 이동됨.

2) 우커머스 세팅에서 배송 및 통화설정을 할 수 있다.

3) 별점 및 리뷰

위의 메뉴에서 

4) 회원가입

세팅에 들어가서 체크

상품추가하기

1) 카테고리부터 추가함

2) 이름과 슬러그를 정한뒤 카테고리로 추가

이때 자식카테고리로 만들고 싶으면 parent category를 설정함. 

* 자식으로 만들면 '부모카테고리/자식카테고리'의 형식으로 url이 생성됨 

3) 상품 만든 뒤 카테고리 결정

4) 상품 대표 이미지 추가 및 기타 이미지 추가 

- 디스크립션 영역은 elemento로 구성이 가능하다.

- 숏디스크립션은 가격아래 나옴

5) 업셀(상품페이지에서 추천으로 보여짐)과 크로스셀(카트페이지에서 추천으로 보여짐)을 설정 할 수 있다.

6) attributes과 variable product > attributes에서 used for variations>variations>create

이렇게 만든 페이지는 appearance> main menu에서 추가 할 수 있다.

우커머스 상점에서 만든 카테고리는 아래처럼 체크를 해야지

메뉴에 추가 할 수 있다.

우커머스store/cart 페이지 수정하기

- elementor로 수정이 안됨

- appearance>widget으로 들어가서 우커머스사이드바에서 사이드바 순서를 변경하고 추가 할 수 있음

- 사이드바만 수정이 되지 상품 나오는 곳은 코딩으로 수정해야함

storecustomizer이걸로 약간 수정 가능

결제까지 가는것을 체크하는 좋은 방법

캐시온 딜리버리 기능을 사용하여 결제과정을 테스트하면 편함

이렇게 구매를 하면 order에 주문리스트가 생성됨

여기서 스테터스를 바꾸어서 배송 상태를 관리 할 수 있다.

쿠폰생성

아래처럼 퍼센테이지/픽스드 카트 디스카운트(총 가격에서 할인)/ 픽스드 프로덕 디스카운트(모든상품 일정금액 할인)/ 특정상품 할인 (usage 리스트릭션)

블로그 페이지 설정

결제

국내 결제 플러그인 설치

사용할 결제 대행사를 설정

이렇게 누르면 자동으로 우커머스페이먼트 탭에 결제가 추가되어진다.

대행사 사이트에서 서비스 신청하기

해외 결제

플러그인 설치

사동으로 설치되고 세팅방법은 유튜브나 인터넷 찾아보기

블로그로 쓸 페이지를 설정함

그 뒤 메뉴에 추가 하면 됨

이미지 다운 받기 - 픽사베이

로고디자인 - freelogodesign.org