개발 히스토리

일단 위의 Lifecycle를 이해 해야 함

여기서 asyncData는 큰 문제가 되지 않음

데이터를 SSR에서 가져온 뒤 처리 하기 때문에 괜찮지만 개발을 진행 하면서 계속 걸리는 문제는 항상 fetch임

최초 페이지가 열릴 경우에는 정상 동작 하지만 브라우저에서 새로 고침을 할 경우에는 문제가 생김

이는 데이터가 분명 다 불러 왔다고 했으나 CSR 쪽으로 반영이 안됨

결국 최종적으로는 fetchOnServer을 false 처리 하여 동작하는 것을 확인함

왜 정상 접근시와 새로고침시가 다르게 동작하는지 정확하게 파악 안됨 (2022-09-28 기준)

개발을 막 진행한 상황이고 일정이 있기에 우선적으로 넘어 가나, 추 후에는 다시 테스트를 해보고 다시 기록을 진행 해야 겠음

그 이외 데이터 관련 기록을 남김

fetch()와 fetch(context)의 차이

  fetch()는 this 사용가능, fetch(context)를 사용할 경우 nuxt 개체는 사용이 가능하나, this는 사용 불가

activated

  현재 fetchState의 timestamp와 query를 체크 하여 데이터를 다시 갱신할 지 말지를 결정 할 수 있음

  query의 경우에는 현재와 기존의 값을 받을 수 있도록 처리 하면 유용할듯

  일전에 현재와 기존의 값을 받을 수 있도록 한 것이 있던걸 봤는데...다시 찾으면 기록 할 예정

NuxtJS의 NuxtJS/Axios 사용하지 않고 사용 하는 방법.

추가 기록 - (2022-09-28)

  토큰 처리 할 경우 가능하면 쿠키에 토큰 저장 후 쿠키에서 뽑아 쓰는것을 추천 함

  쿠키는 cookie-universal-nuxt 사용

  아래 코드에 추가 했으며, 기본적으로 plugin으로 작성 되었을 때의 기준이며, nuxt context가 있어야 함

1. 플러그인 사용 안함

2. axios interceper 작성 및 코드 작성

import axios from 'axios'

const api = axios.create({})

api.interceptors.request.use(function (config) {
  // 2022-09-28 추가
  const token = context.app.$cookies.get('token')
  // config.headers = {
  //   'Authorization': AuthenticationStore.state.token ? 'Bearer ' + AuthenticationStore.state.token : ''
  // }
  return config
}, function (error) {
  // Do something with request error
  return Promise.reject(error)
})

export default api

3. 서버 사이드 proxy 설정

끝

asyncData와 fetch 차이

두가지 공통점은 서버사이드에서의 데이터 처리

asyncData는 페이지 컴포넌트 데이터와 병합됨

fetch는 페이지 컴포넌트가 랜더링되기 이전에 정제된 데이터를 store에 넣기 위해 사용

asyncData의 리턴값은 데이터 객체

fetch의 리턴값은 Promist

Nuxt Axios Plusin으로 Intercepter 설정이 가능함.

참조 URL : https://www.outsystems.com/blog/posts/how-to-troubleshoot-ios-on-windows/

일단 IOS에서 디버깅을 하려면 윈도우 기반 PC에서 다음과 같은 셋팅들이 필요 하다

위 참조 사이트 가서 봐도 되는데 귀찮으면 그냥 아래에 있는거 순서대로 해봐라

PowerShell을 관리자 권한으로 실행 하고, 기본적으로 Nodejs가 설치 되어 있는 가정하에 진행 하여야 한다.

$PSVersionTable.PSVersion

iex (new-object net.webclient).downloadstring('https://get.scoop.sh')

Set-ExecutionPolicy RemoteSigned -scope CurrentUser
(위에꺼 하고 Y 또는 A)

scoop bucket add extras

scoop install git

scoop install ios-webkit-debug-proxy

npm install -g vs-libimobile

npm install remotedebug-ios-webkit-adapter -g

remotedebug_ios_webkit_adapter --port=9000

위 마지막 커맨드 입력 후 프롬프트는 대기 상태가 되어야 함

설치 후 크롬에서 다음과 같이 입력한다.

chrome://inspect

그리고 USB Device 체크

Discover Network targets 체크 후 Configure 클릭 후 localhost:9000 추가

리모트 타겟에 있는 리스트에서 해당 장치에 대한 원격 리모트 리스트가 나오면 inspect 클릭하여 디버깅 진행하면 됨

Npm 사용시 사용할 명령어 정리

지속적으로 추가 하며 작성할 예정

1) npm -v

    버전표시

2) npm install <패키지명> -g

    글로벌 설치

3) npm install <패키지명> --save

    로컬 설치

4) npm install express-generator -g

    전역 Express 설치

5) npm init

    기본 package.json 생성

많이 사용하는 패키지 리스트

  nodemon : 소스변경시 서버 재시작

  typescript : typescript로 구성한 코드를 javascript로 트랜스 파일링함

  npm-run-all : 여러 npm 실행 명령을 병렬로 실행하도록 해줌

  webpack : 모듈 번들러

  webpack-cli : webpack 명령사용용 cli도구

  source-map-support : typescript로 개발시 source-map 지원

  @types/express : express 모듈에 대한 type 지원

  -- 위 까지는 타입스크립스 사용시 기본적으로 사용할 패키지들임

  lodash : 데이터를 쉽게 다룰 수 있도록 지원

  mongoose : mongodb 지원 플러그인

  mysql, mysql2 : mysql 지원 플러인

  phpjs : javascript에서 php코드를 실행 할 수 있도록 지원

  pug(구 : jade) : Express Template 지원

  request : http네트워크 라이브러리 지원

  body-parser : post request data의 body 파라미터 추출 지원

  log4js : 로깅 유틸리티

  babel : ES6 코드 실행 유틸