# 211015 TIL

장기현장실습

SNU 성문 분석

• 윈도우 환경에서 1:1 성문 분석을 할 때, JSON.parse 형식이 맞지 않으면 빈 화면 나타나는 문제 해결 
  • 형식이 맞지 않아 나타나는 에러를 잡은 것은 아니지만 빈 화면이 뜨는 현상을 해결함 
    • JSON.parse 코드가 있는 부분에 try, catch문을 사용해 에러 처리를 함 
      • AnalysisResultCard.tsx, SingleAnalysisPage.tsx 각 파일에 JSON.parse 하는 부분을 try 블록으로 감싸줌 
      • Catch 블록에는 window.alert() 함수를 띄우고, 사용자에게 오류 메세지를 보이게 하며, 빈 화면이 아닌 기존 페이지가 유지될 수 있게 함 
    • json으로 파싱된 값을 return 하는 경우에는 해당 값 대신 undefined를 retrun 하게 하여 결과 텍스트에 '없음'이 나타나도록 설정 
• 윈도우 환경에서 음성 등록 시, JSON.parse 형식이 맞지 않으면 아무 반응이 없는 문제 발생 
  • 콘솔에서 에러가 나타나지 않고 성공적으로 완료되는 로그가 찍혔고, UI도 변화 없이 그대로임 

 

웹팩 관련 질문 피드백

목표

neovis.js를 사용하여 개발한 내용을 웹팩으로 번들링하는 것

 

웹팩 사용 이유

모든 브라우저에서 모듈 시스템을 지원하지 않는데, 우리는 브라우저와 무관하게 어디서든 모듈을 사용하고 싶다. 이 역할을 웹팩이 해준다. 여러 모듈을 하나의 파일로 합쳐주기 때문에 HTTP 통신도 빠르게 처리할 수 있다. 하나의 파일로 합치기에는 파일이 너무 크다면 여러 개로 나눌 수 있다. (entry 설정에서...) 라이브러리들을 자주 수정되지 않기 때문에 라이브러리만 모아둔 파일과 코드 수정이 많은 핵심 페이지를 분리하여 만들 수도 있다.

 

웹팩 기본 설정 진행 (entry, output ...)

 

 

로더

웹팩은 모든 파일을 모듈로 바라보기 때문에, 자바스크립트로 만든 모듈 뿐만 아니라 스타일시트(css), 이미지, 폰트까지 전부 모듈로 본다. 따라서 import 구문으로 자바스크립트 코드 안으로 가져올 수 있는데, 이것이 가능한 이유는 바로 웹팩의 로더 덕분이다. 로더는 모든 파일을 자바스크립트에서 사용할 수 있도록 변환해준다.

로더는 필요시에 따로 설치하고, 설정 파일에서는 module 객체 안에 rules 배열에 객체로 작성한다.

하나의 파일마다 로더가 한 번씩 동작하여 처리한다.

 

플러그인

플러그인은 번들된 결과물에 추가로 원하는 작업을 하는 용도이다. (번들된 자바스크립트를 난독화하거나 특정 텍스트를 추출하는 등..) 로더가 하나의 파일에 한 번씩 작동했다면, 플러그인은 번들된 결과물의 수 만큼 작동한다. 각 번들된 결과물에 한 번 씩 작동한다.

플러그인은 설정 파일에서 plugins 배열에 작성하며, 클래스로 제공되는 플러그인의 생성자 함수를 작성한다.

 

 

실제 프로젝트에 적용

• index.html의 스크립트 코드 모듈로 작성하기
  • import NeoVis from 'neovis.js';
  • import NeoVis from 'neovis.js/dist/neovis.js'; (번들된 버전)
• neovis.js github을 보면 webpack 을 사용한다고 나타남
• neovis.js 에는 config를 직접 선언했는데, 현재 코드에는 선언되어 있지 않음 어떤 config를 받아오려고 하는지?
  • 따로 dotenv라는 라이브러리를 사용하여 .env 파일안에 선언해둔 config 내용을 불러들여 사용하고자 함

 

프론트엔드 개발환경 학습하기

프론트엔드 개발환경의 이해와 실습 (13/39)

[인프런] 프론트엔드 개발환경의 이해와 실습 (자주 사용하는 플러그인)