티스토리 스킨: 티도리 프레임워크

티스토리 스킨: 티도리 프레임워크

(4개의 수강평)

264명의 수강생
블로그HTML/CSS
무료
지식공유자 · 정상우
15회 수업· 총 1시간 55분수업
평생 무제한 시청
수료증 발급 강의
수강 난이도 초급
정상우의 다른 강의
연관 로드맵
연관 로드맵이 없어요.
애디 프로필

강사님이 작성한 샘플은 어디가면 볼 수 있나요? 애디 7일 전

강사님이 작성한 샘플은 어디가면 볼 수 있나요?

1
정현기 프로필

좋은 강의 감사합니다. 티도리 프레임워크 설치방법 좀 정현기 16일 전

강의중간에 티토리프레임워크 설치방법중 비쥬얼스튜디오코드 실행해서 터미널 에서 npm install 방법이 궁금합니다. 터미널 연결은 어디로 어떻게  해야 하는지요. ㅠ.ㅠ

1
yoon 프로필

내용목차 부분을 구현하려면 어떻게 해야 하나요? yoon 18일 전

코도리 블로그 스킨을 따라 해보려고 하는데,

pc버전으로 접속했을 때 우측에 나오는 내용목차 부분을 구현하려면 어떻게 해야 하나요?

4
nasoru 프로필

localhost 0.0.0.0으로 바꾸는방법.. nasoru 1달 전

localhost 0.0.0.0으로 바꾸는방법.. 

tidory start --host 0.0.0.0

1
ysys 프로필

사이드바 제작 중 컴파일 에러가 납니다. ysys 1달 전

강의에서 사이드바의 Category 를 제작하다가 컴파일 에러가 나서 질문드립니다.

- tistory 공식 문서 (https://tistory.github.io/document-tistory-skin/sidebar/category.html

<s_sidebar_element>
  <!-- 카테고리 -->
  <div class="category">
    <h3>카테고리</h3>
    [##_category_##]
  </div>

  <div class="category">
    <h3>카테고리</h3>
    [##_category_list_##]
  </div>
</s_sidebar_element>

views/Sidebar/Category.pug

s_sidebar_element
   [##_category_list_##]

views/Sidebar/User.pug

s_sidebar_element
    a#user(href="[##_blog_link_##]"): img(src="[##_image_##]")

views/Sidebar.pug

aside#aside(role="sidebar")
  div.shadow
    s_sidebar
      include Sidebar/User
      include Sidebar/Category

index.pug

extends app

block TIDORY
    include views/Sidebar

npm start 명령어 실행 시, 컴파일 에러 메세지

$ npm start

> @ start C:\tidory\tbook
> cross-env NODE_ENV=development tidory start

Project is running at http://localhost:8080/
webpack output is served from /
webpack: wait until bundle finished: /

ERROR in   Error: Child compilation failed:
  Module build failed: Error: C:\tidory\tbook\views\Sidebar\Category.pug:2:5
      1| s_sidebar_element
    > 2|     [##_category_list_##]
  -----------^
  unexpected text "[##_c"

참고로 Sidebar/User.pug 만  views/Sidebar.pug 에 include 했을 때는 문제가 없이 화면이 로딩 됩니다. 

webpack이 Sidebar/Category.pug 안에 [##_category_list_##] 를 제대로 인식하지 못하는 것 같은데, 혹시  [##_category_list_##] 를 인식시킬 수 있는 방법이 있을지 궁금합니다. 

그럼 답변 부탁드리겠습니다. 감사합니다. 😀

1
ysys 프로필

npm run build 가 되지 않습니다. ysys 1달 전

강의를 수강하다가 이번에는 npm run build 명령어를 입력하면 다음과 같은 오류가 발생하여 문의드립니다.

> @ build C:\tidory\second-app
> cross-env NODE_ENV=production tidory build

Error: connect ECONNREFUSED 127.0.0.1:80
    at TCPConnectWrap.afterConnect [as oncomplete] (net.js:1137:16) {
  errno: -4078,
  code: 'ECONNREFUSED',
  syscall: 'connect',
  address: '127.0.0.1',
  port: 80,
  config: {
    adapter: [Function: httpAdapter],
    transformRequest: { '0': [Function: transformRequest] },
    transformResponse: { '0': [Function: transformResponse] },
    timeout: 0,
    xsrfCookieName: 'XSRF-TOKEN',
    xsrfHeaderName: 'X-XSRF-TOKEN',
    maxContentLength: -1,
    validateStatus: [Function: validateStatus],
    headers: {
      Accept: 'application/json, text/plain, */*',
      'Content-Type': 'application/json',
      Referer: null,
      Cookie: 'TSSESSION=null',
      'User-Agent': 'axios/0.18.1'
    },
    method: 'get',
    baseURL: null,
    url: '/manage/design/skin/html.json',
    data: undefined
  },
  request: <ref *1> Writable {
    _writableState: WritableState {
      objectMode: false,
      highWaterMark: 16384,
      finalCalled: false,
      needDrain: false,
      ending: false,
      ended: false,
      finished: false,
      destroyed: false,
      decodeStrings: true,
      defaultEncoding: 'utf8',
      length: 0,
      writing: false,
      corked: 0,
      sync: true,
      bufferProcessing: false,
      onwrite: [Function: bound onwrite],
      writecb: null,
      writelen: 0,
      afterWriteTickInfo: null,
      bufferedRequest: null,
      lastBufferedRequest: null,
      pendingcb: 0,
      prefinished: false,
      errorEmitted: false,
      emitClose: true,
      autoDestroy: false,
      errored: false,
      bufferedRequestCount: 0,
      corkedRequestsFree: [Object]
    },
    writable: true,
    _events: [Object: null prototype] {
      response: [Function: handleResponse],
      error: [Function: handleRequestError]
    },
    _eventsCount: 2,
    _maxListeners: undefined,
    _options: {
      protocol: 'http:',
      maxRedirects: 21,
      maxBodyLength: 10485760,
      path: '/manage/design/skin/html.json',
      method: 'get',
      headers: [Object],
      agent: undefined,
      auth: undefined,
      hostname: null,
      port: null,
      nativeProtocols: [Object],
      pathname: '/manage/design/skin/html.json'
    },
    _redirectCount: 0,
    _redirects: [],
    _requestBodyLength: 0,
    _requestBodyBuffers: [],
    _onNativeResponse: [Function (anonymous)],
    _currentRequest: ClientRequest {
      _events: [Object: null prototype],
      _eventsCount: 6,
      _maxListeners: undefined,
      outputData: [],
      outputSize: 0,
      writable: true,
      _last: true,
      chunkedEncoding: false,
      shouldKeepAlive: false,
      useChunkedEncodingByDefault: false,
      sendDate: false,
      _removedConnection: false,
      _removedContLen: false,
      _removedTE: false,
      _contentLength: 0,
      _hasBody: true,
      _trailer: '',
      finished: true,
      _headerSent: true,
      socket: [Socket],
      _header: 'GET /manage/design/skin/html.json HTTP/1.1\r\n' +
        'Accept: application/json, text/plain, */*\r\n' +
        'Content-Type: application/json\r\n' +
        'Referer: null\r\n' +
        'Cookie: TSSESSION=null\r\n' +
        'User-Agent: axios/0.18.1\r\n' +
        'Host: localhost\r\n' +
        'Connection: close\r\n' +
        '\r\n',
      _onPendingData: [Function: noopPendingOutput],
      agent: [Agent],
      socketPath: undefined,
      method: 'GET',
      maxHeaderSize: undefined,
      path: '/manage/design/skin/html.json',
      _ended: false,
      res: null,
      aborted: false,
      timeoutCb: null,
      upgradeOrConnect: false,
      parser: null,
      maxHeadersCount: null,
      reusedSocket: false,
      _redirectable: [Circular *1],
      [Symbol(kCapture)]: false,
      [Symbol(kNeedDrain)]: false,
      [Symbol(corked)]: 0,
      [Symbol(kOutHeaders)]: [Object: null prototype]
    },
    _currentUrl: 'http:/manage/design/skin/html.json',
    [Symbol(kCapture)]: false
  },
  response: undefined
}
TypeError: Cannot read property 'data' of undefined
    at TistorySkin.request (C:\tidory\second-app\node_modules\tistory-skin\lib\RemoteController.js:40:21)
    at processTicksAndRejections (internal/process/task_queues.js:97:5)
    at async TistorySkin.prepare (C:\tidory\second-app\node_modules\tistory-skin\lib\TistorySkin.js:36:12)
    at async module.exports (C:\tidory\second-app\node_modules\tidory\lib\publicPath.js:14:3)
    at async module.exports (C:\tidory\second-app\node_modules\tidory\config\webpack.base.conf.js:17:45)
    at async module.exports (C:\tidory\second-app\node_modules\tidory\config\webpack.prod.conf.js:17:16)

app.pug : 

doctype html

html(lang="ko")
  head
    title [##_page_title_##]

    meta(charset="utf-8")

  body(id="[##_body_id_##]")
    s_t3
      div#__tidory
        block TIDORY

assets/app.js :

require('@tidory/default-sidebar')

index.pug : 

extends app

block TIDORY
  include views/HelloWorld

views/HelloWorld.pug : 

h1 Hello,world!

.env :

TISTORY_CLIENT_ID=dc08305218d22fb1af479b044d4707d0
TISTORY_REDIRECT_URI=http://localhost:8080

npm start 명령어를 커맨드 창에 입력 했을 때는 다음과 같이 Hello, world! 가 잘 로딩되었습니다.

참고로 현재 80 port를 사용중에 있지 않음에도 불구하고 ECONNREFUSED error 가 발생하여 의아했습니다.

참고url: https://support.glitch.com/t/solved-getting-an-error-every-5-minutes-econnrefused-127-0-0-1-1998/5018

혹시 제가 설정을 누락한 부분이 있다면, 알려주시면 강의를 수강하는데 큰 도움이 될 것 같습니다.

감사합니다. 😀

3
ysys 프로필

npm start 가 되지 않습니다. ysys 1달 전

좋은 강의 만들어주셔서 감사합니다.

강의와 질의응답 내용들을 참고하여 현재 프로젝트 파일 설치까지 완료하였으나, npm start가 되지 않고 있어 문의글을 남깁니다.  

프로젝트 생성을 위해 사용한 명령어는 다음과 같습니다.

npm install -g create-tidory-app 

npx create-tidory-app second-app

cd second-app/

second-app 경로 아래에서 ls 를 한 결과: 

app.pug  docs/    index.pug  package.json       README.md         views/
assets/  images/  LICENSE    package-lock.json  tidory.config.js

package.json 안에 내용은 다음과 같았습니다. 

$ cat package.json 
{
  "scripts": {
    "start": "cross-env NODE_ENV=development tidory start",
    "preview": "cross-env NODE_ENV=development tidory preview",
    "build": "cross-env NODE_ENV=production tidory build",
    "build:compress": "cross-env NODE_ENV=build tidory build --compress",
    "deploy": "tidory deploy",
    "store": "tidory store",
    "lint": "eslint --ext .js assets tidory.config.js"
  },
  "license": "MIT",
  "repository": {
    "type": "git",
    "url": "https://github.com/tidory/tidory"
  },
  "devDependencies": {
    "cheerio": "^1.0.0-rc.2",
    "cross-env": "^7.0.2",
    "eslint": "^6.8.0",
    "eslint-config-standard": "^14.1.0",
    "eslint-plugin-import": "^2.20.0",
    "eslint-plugin-node": "^11.0.0",
    "eslint-plugin-promise": "^4.2.1",
    "eslint-plugin-standard": "^4.0.1"
  },
  "dependencies": {
    "@tidory/default-header": "github:tidory/default-header",
    "@tidory/default-sidebar": "github:tidory/default-sidebar",
    "tidory": "^7.2"
  }
}

강의에서와 달리 root 경로 아래에 package-lock.json은 설치되어 있었지만 node_modules가 설치되어 있지 않아서 package-lock.json 파일을 삭제해주고 npm install 명령어를 실행시켜 주었습니다.  

rm -rf package-lock.json && npm install

vulnerabilities 가 존재하여 npm audit fix 명령어를 실행시켜 주었습니다.

npm audit fix

$ npm audit fix
npm WARN acorn-jsx@5.2.0 requires a peer of acorn@^6.0.0 || ^7.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.12 (node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.12: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

added 2 packages from 4 contributors and updated 4 packages in 10.093s

33 packages are looking for funding
  run `npm fund` for details

fixed 21 of 26 vulnerabilities in 11404 scanned packages
  5 vulnerabilities required manual review and could not be updated

그런 다음에 npm start 명령어를 실행시켜주었으나, 다음과 같은 error가 났습니다. 

npm start

$ npm start

> @ start C:\Users\John Doe\git\second-app
> cross-env NODE_ENV=development tidory start

internal/modules/cjs/loader.js:976
  throw err;
  ^

Error: Cannot find module 'C:\Users\John'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:973:15)
    at Function.Module._load (internal/modules/cjs/loader.js:855:27)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:71:12)
    at internal/main/run_main_module.js:17:47 {
  code: 'MODULE_NOT_FOUND',
  requireStack: []
}

'C:\Users\John' 을 못찾는 이유가 John Doe 처럼 가운데 띄어쓰기가 있는 경로여서 모듈을 못찾는 것일까요? ㅠㅠ (이름은 임의로 변경하였습니다.) 

혹시 제가 간과하고 넘어간 부분이 있다면 알려주시면 감사하겠습니다. 😊

4
bluejunha 프로필

3번째 강의부터 막혀버렸습니다. (npm install) bluejunha 1달 전

npm install -g tidory

tidory --version

-> 7.2.1 사용 중 입니다.

npx create-tidory-app my-app

cd my-app

npm install

-> npm ERR! 발생 합니다. (code : ENOENT)

tidory start

-> 아래 4달 전 2번째 WebPack Compile Error 올려주신 분과 같은 에러 메시지가 출력되면서 실행되지 않습니다.

답변 부탁 드립니다!

(... 생략 ...)

13250 silly saveTree     | `-- neo-async@2.6.1
13250 silly saveTree     `-- yargs@8.0.2
13250 silly saveTree       +-- camelcase@4.1.0
13250 silly saveTree       +-- cliui@3.2.0
13250 silly saveTree       | `-- string-width@1.0.2
13250 silly saveTree       +-- os-locale@2.1.0
13250 silly saveTree       | +-- execa@0.7.0
13250 silly saveTree       | | +-- cross-spawn@5.1.0
13250 silly saveTree       | | +-- get-stream@3.0.0
13250 silly saveTree       | | +-- is-stream@1.1.0
13250 silly saveTree       | | +-- npm-run-path@2.0.2
13250 silly saveTree       | | +-- p-finally@1.0.0
13250 silly saveTree       | | `-- strip-eof@1.0.0
13250 silly saveTree       | `-- mem@1.1.0
13250 silly saveTree       |   `-- mimic-fn@1.2.0
13250 silly saveTree       +-- string-width@2.1.1
13250 silly saveTree       | +-- is-fullwidth-code-point@2.0.0
13250 silly saveTree       | `-- strip-ansi@4.0.0
13250 silly saveTree       |   `-- ansi-regex@3.0.0
13250 silly saveTree       +-- which-module@2.0.0
13250 silly saveTree       +-- y18n@3.2.1
13250 silly saveTree       `-- yargs-parser@7.0.0
13250 silly saveTree         `-- camelcase@4.1.0
13251 verbose stack Error: spawn git ENOENT
13251 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:267:19)
13251 verbose stack     at onErrorNT (internal/child_process.js:469:16)
13251 verbose stack     at processTicksAndRejections (internal/process/task_queues.js:84:21)
13252 verbose cwd C:\Users\bluej\tistory_skin\MyApp
13253 verbose Windows_NT 10.0.17763
13254 verbose argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "install"
13255 verbose node v13.5.0
13256 verbose npm  v6.13.4
13257 error code ENOENT
13258 error syscall spawn git
13259 error path git
13260 error errno -4058
13261 error enoent Error while executing:
13261 error enoent undefined ls-remote -h -t ssh://git@github.com/tidory/default-sidebar.git
13261 error enoent
13261 error enoent
13261 error enoent spawn git ENOENT
13262 error enoent This is related to npm not being able to find a file.
13263 verbose exit [ -4058, true ]

4
Benjamin M. Kwon 프로필

강좌 무료 전환 관련 Benjamin M. Kwon 5달 전

강좌를 무료로 전환하셨는데 기존에 구매한 분들에 대해서는 어떻게 대응하실 건가요?

0
최윤범 프로필

사이드바 위치, 페이징 수업중 화살표, 소스코드 최윤범 6달 전

안녕하세요. 지난번 질문에 대한 답변 감사합니다.

1. 사이드바 위치를 좌, 우 혹은 위, 아래로 변경하려면 어떻게 해야 하나요?

2. 페이징시 나오는 화살표 그림추가에서 app.pug를 수정하셨는데 그 부분을 좀 더 자세히 설명 부탁드립니다. 

3. 예제인 tbook의 코드를 공개해주실수 있나요?

감사합니다.

1
최윤범 프로필

웹팩 컴파일 에러가 납니다 최윤범 6달 전

npm start를 하면 아래와 같이 에러가 나옵니다.

어떤걸 수정하면 될까요?

Html Webpack Plugin:

  Error: Child compilation failed:
  Module build failed: Error: ENOENT: no such file or directory, open 'D:\tstory  _skin\MyApp\node_modules\@tidory\my-package.pug'
  
  
  - index.js:69 Function.read
    [MyApp]/[pug-load]/index.js:69:13
  
  - index.js:147 Object.read
    [MyApp]/[pug]/lib/index.js:147:25
  
  - index.js:24 
    [MyApp]/[pug-load]/index.js:24:25
  
  - index.js:23 walkAST
    [MyApp]/[pug-walk]/index.js:23:18
  
  - index.js:104 
    [MyApp]/[pug-walk]/index.js:104:20
  
  - Array.reduce
  
  - index.js:103 walkAndMergeNodes
    [MyApp]/[pug-walk]/index.js:103:18
  
  
  - Error: ENOENT: no such file or directory, open 'D:\tstory_skin\MyApp\node_mo    dules\@tidory\my-package.pug'
  
  
  - compiler.js:79 childCompiler.runAsChild
    [MyApp]/[html-webpack-plugin]/lib/compiler.js:79:16
  
  - Compiler.js:300 compile
    [MyApp]/[webpack]/lib/Compiler.js:300:11
  
  - Compiler.js:510 applyPluginsAsync.err
    [MyApp]/[webpack]/lib/Compiler.js:510:14
  
  - Tapable.js:202 next
    [MyApp]/[webpack]/[tapable]/lib/Tapable.js:202:11
  
  - CachePlugin.js:78 Compiler.
    [MyApp]/[webpack]/lib/CachePlugin.js:78:5
  
  - Tapable.js:206 Compiler.applyPluginsAsyncSeries
    [MyApp]/[webpack]/[tapable]/lib/Tapable.js:206:13
  
  - Compiler.js:507 compilation.seal.err
    [MyApp]/[webpack]/lib/Compiler.js:507:11
  
  - Tapable.js:195 Compilation.applyPluginsAsyncSeries
    [MyApp]/[webpack]/[tapable]/lib/Tapable.js:195:46
  
  - Compilation.js:683 applyPluginsAsync.err
    [MyApp]/[webpack]/lib/Compilation.js:683:19
  
  - Tapable.js:195 Compilation.applyPluginsAsyncSeries
    [MyApp]/[webpack]/[tapable]/lib/Tapable.js:195:46
  

1
최윤범 프로필

public_path의 값은? 최윤범 6달 전

빌드 및 배포 강의에서 public_path의 값은 어디에서 찾아야 하나요?

1
지식공유자 되기
많은 사람들에게 배움의 기회를 주고,
경제적 보상을 받아보세요.
지식공유참여
기업 교육을 위한 인프런
“인프런 비즈니스” 를 통해 모든 팀원이 인프런의 강의들을
자유롭게 학습하는 환경을 제공하세요.
인프런 비즈니스