본문 바로가기

반응형

이슈와 회고/생각정리

(5)
처음으로 돌아가기 | 번들 파일의 종착지, Output 관리하기 https://webpack.kr/guides/output-management/ 해당 문서를 참고하여 작성됩니다. 제가 이해 한대로  작성하는 부분이 많기 때문에, 정석대로 가실거라면 공식문서를 참고해보세요. 이전 포스트 | 애샛 설정, Data 다루기 처음으로 돌아가기 | 애샛 설정을 통한 웹팩 번들링, 그 두 번째 json/xml/csv참고한 자료는 webpack 공식 문서를 사용하였습니다. 애샛 설정 두 번째, 데이터프로젝트 환경에서 NodeJS 의 경우에는 JSON 지원을 기본적으로 해줍니다. 따라서 import data from './data.json' 형태로 불러duklook.tistory.com 들어가는 말이번시간에는 Output 경로에 대해서 다룰 겁니다. 번들링된 결과가 dist/ 경로에..
처음으로 돌아가기 | 애샛 설정을 통한 웹팩 번들링, 그 두 번째 '데이터'(애샛 파트 마지막) 참고한 자료는 webpack 공식 문서를 사용하였습니다.  애샛 설정 두 번째, 데이터프로젝트 환경에서 NodeJS 의 경우에는 JSON 지원을 기본적으로 해줍니다. 따라서 import data from './data.json' 형태로 불러와도 정상적으로 import 되어 사용할 수 있습니다. 하지만, xml 이나 csv 파일 의 경우에는 지원해주지 않기 때문에, json 과 동일한 방식으로 import 하려고 하면 문제가 발생합니다.  따라서 웹팩에서는 이 문제를 해결할 수 있는 로더를 제공해주는데 그것이 csv-loader 와 xml-loder 입니다. 이번 포스트는 해당 로더를 설정해서 번들링하는 방법을 언급하고 그 결과를 살펴보는 과정을 서술합니다.  loader 설치 및 구성 설정 후 번들링 순..
처음으로 돌아가기 | 애셋을 적용한 웹팩 번들링, 우리가 import './style.css ' 등이 가능했던 이유(애샛 파트 ① CSS, Image, Font) 이전 포스트 | 처음으로 돌아가기, 웹팩을 사용한 기초 번들링  처음으로 돌아가기, 웹팩을 사용한 기초 번들링처음으로 돌아가기, 첫 번째 프로젝트 환경 설정현재에는 프론트엔드 개발을 하기 위한 환경을 구축하는 것이 매우 쉽습니다. Vite 를 이용하면 손쉽게 개발 환경이 구축되고, 리액트,뷰, 앵글러duklook.tistory.com 들어가는 말, 이 포스트에서 해볼 것이번 시간에는 CSS, 이미지, 폰트애셋을 통합하여 웹팩 번들링 시 포함시켜주는 설정에 대해서 정리해보는 시간을 가져볼 겁니다. 이 때 까지 편하게 사용했던 import 방식이 왜 쉽게 가능했는가에 대한 부분이 되겠습니다. 원래 라면 outside 등의 문제가 발생해서 모듈을 인식하지 못하는 문제가 일반적인데, 웹팩은 이 문제를 쉽게 처리..
처음으로 돌아가기| 웹팩을 사용한 기초 번들링 처음으로 돌아가기, 첫 번째 프로젝트 환경 설정현재에는 프론트엔드 개발을 하기 위한 환경을 구축하는 것이 매우 쉽습니다. Vite 를 이용하면 손쉽게 개발 환경이 구축되고, 리액트,뷰, 앵글러와 같은 라이브러리/프레임워크를 사용하면 더 쉽게 개발을 이어갈 수 있습니다. 그리고 앞으로의 인공지능 시대에는 모든게 말 하나로 복잡한 환경 셋팅도 자동화될지도 모릅니다. 하지만, 이렇게 편안한 도구들이 등장하고, 개발자가 손쉽게 다룰 수 있는 추상화의 단계가 가속화될 때, 간과하지 말아야 하는 부분이 우리가 쓰는 도구가 어떤 원리에 의해서 동작하는가에 대해 알고 있는가에 대한  부분입니다. 자동화된 도구라도 완벽할 순 없으니, 제반이 되는 원리를 이해하고 있다면 보다 쉽게 문제를 찾아서 해결할 수 있을 지도 모를..
사이트맵 색인은 꾸준히 증가하는데, 색인이 실패하는 건 수도 증가? [들어가는 말] 사이트맵 색인도 증가, 실패도 증가명언 웹 사이트를 만들고, 구글 셔치 콘솔을 통해 색인 생성을 신청한지 약 3달이 되어 가는 시점입니다. 원래 이렇게 색인이 늦게 증가하는게 맞는가 싶지만, 시간이 흐를 수록 정상적인 색인 수치의 70% 이상을 육박하여 좋게 보고 있었습니다. 그러던 중,  구글 이메일로 색인이 생성되지 않은 건수가 있다는 메일 받았습니다.  왜 색인을 실패하였을까?상황 파악단 몇 건도 아니고 거의 1/6 가량의 페이지 색인이 실패했습니다. 사이트의 검색 순위를 높이기 위해서는 꼭 해결해야 하는 문제이므로 해당 문제가 발생한 원인을 찾아 보았습니다.  다행히 친절하게 어떤 이유로 색인 생성이 실패되었는지 이유가 모두 나와있었고, 그 중에서 사용자가 선택한 표준이 없는 중복..

반응형