nomelancholy / project-skill-map Goto Github PK

1. freenom 구입 실패 - Some of your domains could not be registered because of a technical error. These domains have been cancelled 에러

• 해결
  freenom 무료 도메인 구입은 계정당 하나만 된다고.. 어차피 혼자 쓸 페이지니 도메인 구입은 포기

• hosting 폴더 build 폴더로 변경
  gh-pages 활용해서 해결

크기 100%로 적용시 스크롤바 출현

• 해결
  브라우저 자체 마진 값 때문.
  body: maring 0으로 해결

id 에 공백이나 . 이 들어가 있으면
Cannot read property '0' of undefined 에러 발생하니 주의

• 해결

     {
         selector: 'edge',
         style: {
             'curve-style': 'bezier',
             'target-arrow-shape': 'triangle'
         }
     }

resize 이벤트는 감지하는데 cy.fit() 적용안되는 문제 발생

• 해결
  여기 참조

.gitignore 에 package.json.lock을 넣어야 할까?

• 해결
  package-lock.json은 왜 필요할까?

• 해결

    layout:{
        name: 'cose-bilkent',
        animate: false,
        gravityRangeCompound: 1.5,
        fit: true,
        tile: true
    }

pageRank() 활용

크기 100%로 적용시 스크롤바 출현

• 해결
  브라우저 자체 마진 값 때문. reset.css 적용해 해결

참고 가이드

발생 이슈 내역

1. npm install cytoscape 로 설치 시도 중 no such file or directory, open 'C:\dev\workspace\js-seomal-clone\package.json' 에러 발생

• 해결 - 검색을 통해 npm package는 설치 전 해당 local 폴더에서 npm init 명령어를 통해 package.json 파일을 생성한 다음 인스톨을 해야 한다는 내용 확인 및 적용

2. Uncaught SyntaxError: Cannot use import statement outside a module 에러 발생

• 해결 - script 태그 type에 mdodule 명시

• javascript module에 대한 이해
  자바스크립트 모듈(Module) 학습 내용 간단 요약

• script 태그 위치에 대한 이해
  <script> 태그는 어디에 위치해야 할까요?

3. index.html을 오픈 브라우저로 여니 Access to script at 'file:///C:/dev/workspace/js-seomal-clone/js/cyto.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https. 라는내용의 에러 발생

• CORS에 대한 이해
  로컬에서 CORS policy 관련 에러가 발생하는 이유

• 해결
  http-server 활용해 해결

4. http-server를 활용해 실행했지만 가이드의 지시처럼

import cytoscape from 'cytoscape';

경로 없이 module을 import 할 방법은 아직 알지 못함

• javscript engine과 runtime에 대한 이해
  개발자 도구의 console에서 javascript를 사용할 수 있는 이유
• webpack에 대한 이해
  webpack-build-practice repo
• 해결

pageRank() 활용

• javscript tdd 활용법 숙지
  • 해결
    자바스크립트 테스팅의 기초 / TDD의 소개 참고해 실습
• webpack에 jest 추가하는 방법 확인 필요
  jest 공식 홈페이지 with webpack 튜토리얼

• 해결

style: [
        {
            selector: 'node',
            style: {
                'label': 'data(label)',
                'text-valign': 'top'
            }
        },
];

1. json webpack 설정

• 해결
  여기보고 해결

2. json 가져오기

• 해결
  Fetch then 사용

• 해결

style: [
        {
            selector: 'node',
            style: {
                'label': 'data(label)',
                'text-valign': 'top'
            }
        },
];

• 해결

cy.on('tap',function(e){
    const url = e.target.data('url')
    if(url && url !== ''){
        window.open(url);
    }
})

• 해결

    layout:{
        name: 'cose-bilkent',
        animate: false,
        gravityRangeCompound: 1.5,
        fit: true,
        tile: true
    }

참고 가이드

발생 이슈 내역

1. npm install cytoscape 로 설치 시도 중 no such file or directory, open 'C:\dev\workspace\js-seomal-clone\package.json' 에러 발생

• 해결 - 검색을 통해 npm package는 설치 전 해당 local 폴더에서 npm init 명령어를 통해 package.json 파일을 생성한 다음 인스톨을 해야 한다는 내용 확인 및 적용

2. Uncaught SyntaxError: Cannot use import statement outside a module 에러 발생

• 해결 - script 태그 type에 mdodule 명시

• javascript module에 대한 이해
  자바스크립트 모듈(Module) 학습 내용 간단 요약

• script 태그 위치에 대한 이해
  <script> 태그는 어디에 위치해야 할까요?

3. index.html을 오픈 브라우저로 여니 Access to script at 'file:///C:/dev/workspace/js-seomal-clone/js/cyto.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https. 라는내용의 에러 발생

• CORS에 대한 이해
  로컬에서 CORS policy 관련 에러가 발생하는 이유

• 해결
  http-server 활용해 해결

4. http-server를 활용해 실행했지만 가이드의 지시처럼

import cytoscape from 'cytoscape';

경로 없이 module을 import 할 방법은 아직 알지 못함

• javscript engine과 runtime에 대한 이해
  개발자 도구의 console에서 javascript를 사용할 수 있는 이유
• webpack에 대한 이해
  webpack-build-practice repo
• 해결

• 해결
  node id 에 '.' 이나 ' ' 를 넣으면 에러 발생

필요성을 느낀 상황

cytography 설치 중 설치한 module이 import가 안되는 이슈 발생.

확인해보니 단순히 script 태그 속성 누락 때문이었지만 그로 인행 package.json의 구조에 대해 알아볼 필요를 느낌

참고 링크

• 브라우저는 어떻게 동작하는가?

• 해결

     {
         selector: 'edge',
         style: {
             'curve-style': 'bezier',
             'target-arrow-shape': 'triangle'
         }
     }