HyungJu-Lee's Blog

업데이트

서버, 네트워크, 데이터베이스..
내용이 이해가 안되는 것은 아니지만 기존 자바스크립트 공부보다 어렵긴 하군.. 넘어야될 산이긴 한데 어렵다.. 후

이번 블로그 테마 사용시 주의할 점
스타일 수정 후 npm run build 실행

해야될 것

이전 기록들

공부 예시코드

map service study

interaction

daily issue

blog

개인 Project

  • ✨ 2021.05.16 웹팩5 마크업환경 세팅2 - base64

    • 최적화 관점에서 생각하면 이게 짱인거같음.
      스프라이트 이미지 사용할 필요없음.
      오히려 스프라이트 이미지를 사용하는 것이 의존성을 파악하는 웹팩에선 최적화를 반대로 해칠 수도 있음.

    • 개발자 편의를 생각해 icon으로 들어가는 이미지들의 width, height값이 자동으로 따지는 방법 생각해봐야겠음 (해결함)

  • ✨ 2021.05.16 웹팩5 마크업환경 세팅2

    • JS 파일 HTML 파일 1대1로 생성되어야 했던 문제 어느정도 해결.
    • 지금은 같은 부류의 페이지들마다 1개씩 생성되도록함 - CSS랑 JS 모두

    • 공통 CSS는 다 빼놓음

    • 아주 작은 이슈이긴하지만 sprite를 생성해주는 모듈 영향으로 common.min.css, common.min.js가 필요없는 index.html에도 해당 파일들이 link, script 태그로 들어감.
      sprite 생성 모듈이 어떤식으로 영향을 줘서 이런진 모르겠으나 사소한 이슈가 있음. (작업엔 지장이 전혀없긴하지만 해결하고 싶긴함.)
      확실히 sprite 안쓰고 위의 base64 인코딩 방식으로하는 것이 훨씬 난듯.
      entry 포인트에서 index.js를 아예 지움으로써 해결함, 있는 상태에선 딱히 해결방법을 못찾겠음

  • 2021.05.07 웹팩5 마크업환경 세팅

  • 2021.04.16 걸프-polyfill

    • polyfill 적용 - coreJs 같은거임. 이터러블/이터레이터, 제너레이터 코드 모두 IE에서 잘 돌아감. IE10까지 확인.

  • 2021.04.12 걸프

    • browsers Data Updating
      • 벤더프리픽스가 다르게 적용되는 것을 방지하고자 항상 업데이트해야됨.
      • 업데이트가 필요할 땐 알림 메시지로 뜨긴함. 항상 잘 확인해야됨. 안그러면 diff가 엄청 많이 잡혀 귀찮아질수도있음.
    • Promise와 pipe 적용할 때.. 특정 프로미스 끝나고 다음 코드 실행되어야할 때..
      Stream 형식으로 가니까, Stream이 완전히 끝난 시점에 다음 코드가 실행되도록 해야됨.
      안 그러면 에러남.
    • 스트림.on('end', 콜백)
    • mac과 window 운영체제 - 스프라이트 png 이미지 배열 동일하게 나오도록 코드 수정함.
      알고보니 들어가는 순서 - 즉 배열요소 순서가 달랐음.
      그래서 sort()해서 오름차순으로 정렬 후 넣어줌.
      그랬더니 mac에서 정렬된 결과가 일치하게 나옴.
      즉, mac은 알아서 오름차순 정렬해주는 것 같고 window는 안해주는 거 같음..후…

    정리

    1. gulp-svg-sprite : img/scss 파일 아웃풋 경로 커스텀 방법 알아냄 후..이걸몰라서 여태 이고생을..
    2. gulp.spritesmith-multi : png 스프라이트 이미지 window/mac 서로 배열 다른 이유 알아냄. 해결 방법도 적용.
    3. 이미지 optimize 함수의 src 부분에 폴더 안잡히도록 설정
    4. browserSync reload.. 이제 좀 이해 : CSS는 리로드를 하지 않고 해시값을 붙여 적용.
      때문에 지금 하이프레시에서 stream 활용한 reload 방식은 적합하지 않음. 지금이 차라리 나음.
      나중엔 개발중/배포용 확실히 구분해서 그때그때 구분지어 stream 형식의 reload로 구현하자.

  • 2021.04.08 걸프개선

    • spriteSvg 함수 path.posix.relative 활용 : 이거 활용하면 상대경로 설정가능한듯 보임

  • 2021.03.18 걸프 약간 수정

    • 흠 이게 제일 간편하고 빠르긴하네.
    • 그동안 내가 수정해서 기능 붙여온것들 너무 덕지덕지 붙였나봄. 요게 젤 간편하긴함.

  • 2021.03.17 웹팩5 마크업환경 기능개선

    • 웹팩으로 마크업환경 꾸미는거 자체가 좀.. 안맞는 걸수도..
    • 애초에 생각 자체가 걸프에 묶여있다보니.. 아예 바꾸고 작업방식도 다 바꿔야될거같음
    • 근데 그게 효율적인 방법일지가 궁금
    • 라이브러리 혹은 커스텀 플러그인 같은걸 각각의 js 파일에 따로따로 포함된다면.. 아주 비효율적 - css는 공통된건 따로 뺄 수 있을거같긴한데.. js 공통된 부분은 어떻게해야되는가?
    • 파일명 문제는 위 문제들을 해결한 다음에..
    1. posthtml extends 기능 추가(템플릿 엔진 사용하려했으나 웹팩에선 posthtml이 제일 깔끔한거같아 이거이용, 이거도 정말 개고생함..)
    2. 이미지 최적화 추가
    3. IE11까지 맞춤. 아쉽게 IE10은 안됨. babel에서 IE10은 고려하지 않기로 했나봄.
      그래도 core-js 적용으로 최신 문법 사용해도 IE11까지 동작하게해놓음.

    • 이슈: browserslist 설정 or target: "es5" 같은거 설정시 webpack version 5 + webpack-dev-server 리로드가 안됨.
      버그인듯.(빨리해결해줘..)
      그래서 이 부분 다른 방법으로 해결하느라 좀 고생함 (output의 environment 부분으로 겨우겨우 해결)
      browserslist랑 target: "" 이거 삭제.

    • 여튼 그래도 이제는 마크업용으로 무난무난하게 사용할 수 있을듯!

  • 웹팩5 base64 제거 - 스프라이트png, svg기능 추가

    • https://webpack.js.org/plugins/terser-webpack-plugin/#extractcomments
      라이센스 + js 컴파일관련
    1. html/css/js minimize 컨트롤할 수 있어야함
    2. svg도 좀 더 범용적으로 활용할 수 있게. 기존 핸들바 템플릿 사용한것처럼 - 그 방법도 강구
    3. html include 활용성 증대 - 핸들바 템플릿 엔진인거같은데 if문 분기가능한지 등등 조사 및 방법 강구
    4. 이미지 최적화 방법 강구

  • 웹팩5로 마크업환경 만들기 - base64

    1. 소스맵 기능 원활하기위해선 devtool: 'source-map' 해당 프로퍼티 추가!
    2. 웹팩5의 asset 관련 웹팩5 내장 모듈 잘 활용하면 엄청 좋을듯!? file-loader, url-loader 등 이런거 다 보완한것!
    3. html-webpack-plugin: inject 옵션이 주요했다.
    4. 진입점 자동으로 하고, index.html에 목록뿌려지는 것도 자동으로 뿌려지게 했지만, 파일 추가/삭제 - 이런건 감지 못하는 듯
      즉 파일 추가/삭제시 웹팩을 종료했다 다시 실행해야됨.
      이를 보완할 방법이 있을까?
    5. 와.. 그래도 제일 중요하게 생각했던 include 기능까지 넣었다… 후..

    보완할점

    1. 걸프환경과 거의 비슷하게 완성함. 좀 더 보완할게 많음!
    2. dist 폴더로 내보내는 경로를 커스텀할 수 있어야함! 음.. 이건 방법을 아직 못찾겠네.. 그래도 대충 틀은 갖췄다.
    3. 4kb 이하인건 base64 인코딩! 스프라이트이미지는 없음! 근데 이거 싫어하는 분도 있긴할듯?
    4. 폰트 리소스도 asset 관련 웹팩5 내장 모듈로 관리되도록 설정! 4kb는 폰트도 base64 인코딩 가능하댔음!

  • 간단 gulp, babel, uglify 사용

  • 2021.02.09 git husky 모듈 window, mac 둘다 사용하기 편하게하기위해 수정

    • husky 모듈 4버전대로 다운그레이드
    • mac에서도 추가 수정없이 바로 실행가능

  • 2021.02.08. gulp - 앞으로 진행할 프로젝트 gulp 개선

    • dartSass도 적용했다. (dartSass로 migration할 때 주의할점이 precision이 하나 더 늘었다.)
      @extend와 precision 이 두개를 주의하면 된다.
    • 여기를 확인하자

    • watch 함수 로직 수정했는데, 일단 괜찮은듯하다. 오류..안생기게했지만.. 만약 추후 발견되는 오류있으면 업뎃 ㄱㄱ

    • 추가수정 내용(210219)
      자세히 정리한내용

      1. win-node-env 모듈을 cross-env 모듈로 대체 (win-node-env 모듈은 window에서만 동작하기 때문에, 호환성을 위해 교체)

      2. 소스맵 git hook 설정하기
      3. 소스맵, 외부 파일로 나오게 설정 - gulp에서 "."
      4. 소스맵 확장자인 .map 확장자가 dist/css/ 폴더에 있는지 검사
      5. 있으면 "npm run build 명령어 실행후 커밋하세요" 메시지 뜨게함, 그리고 커밋 안됨

      6. npm run build 후 커밋하면 커밋됨

      7. mac에선 .husky/pre-commit파일 지우고 npx husky add .husky/pre-commit "node hook"으로 hook 권한설정
        그래야 hook 기능이 제대로 작동 참고설명

  • 2021.01.29 gulp 개선

    • 아래 걸프 개선내용 중에서 gulp-pngquant 모듈 / gulp-load-plugins 모듈내용 되살림
  • 2021.01.20 gulp 개선 L.T.

  • 2021.01.19 gulp 개선 L - spriteSvg 반복문 결함 완전히 해결

    • Promise와 async/await 그리고 Promise.all()에 대해 공부하고나니까 어떻게 수정해야될지 보였음
    • gulp의 series, parallel 같은 것들은 역시 Promise 기반인듯..?
      자세한건 Node-Gulp 스터디 글에서 spriteSvg() 함수 참고

  • 2020.12 gulp 개선 L - gulp-newer 문제점 발견 및 삭제 gulp-cached 라이브러리 대체 2 + spriteSvg 반복문 결함 해결

    • dartSass / @use 구문 적용

  • 2020.12 gulp 개선 N - gulp-newer 문제점 발견 및 삭제 gulp-cached 라이브러리 대체 1 + spriteSvg 반복문 결함 해결

    • 위 N gulp 추가개선 사항 - sprites 가 멀티폴더/2배수 이미지만 인식되도록 되어있었다. -> 이를 멀티폴더(1배수,2배수,3배수…) 각배수 이미지별로 폴더를 나눠 각각 인식되도록 했다.
    • 걸프 실행 후에 sprite 폴더 또는 sprite-svg 폴더 하위에 폴더를 생성해 이미지를 추가해도 이를 아직은 제대로 출력을 못한다. 단순 이미지 추가는 잘되지만.. 이 부분에 대해 좀 더 생각해봐야된다.
    • js도 production이냐 아니냐에따라 min인지 아닌지, 소스맵인지 아닌지 결정되도록 수정 -> 하지만 core-js 는 완벽하게 적용된게 아닌 것 같다. 이 부분은 더 생각해봐야된다.
    • core-js는 아닌것같고, 그냥 babel-polyfill 적용되도록은 된것 같다. promise 객체 IE9까지도 인식되는 듯!
    • babel.config.js <- 이건 필요없어보이긴하는데.. 좀 더 봐야될듯
    • 20201111 core-js 삭제 및 babel.config.js에 corejs 내용삭제 - 없어도 되는 부분이라고 판단
    • ejs locals 변수활용 및 그로인한 made_indexfile 함수 참조 폴더 및 실행 순서 수정
  • 2020.10 gulp 개선 C - gulp-newer 문제점 발견 및 삭제 gulp-cached 라이브러리 대체 3
  • 2020.10 gulp 개선 L - gulp-newer 문제점 발견 및 삭제 gulp-cached 라이브러리 대체 2
  • 2020.10 gulp 개선 N - gulp-newer 문제점 발견 및 삭제 gulp-cached 라이브러리 대체 1
  • 2020.10 gulp 개선 - gulp-newer 추가 / gulp-pngquant 삭제 / npm start / npm run build 활용
  • 2020.10 gulp-nh
  • 2020.10 webpack project
  • 2020.09 webpack study
  • 2020.06 c-gulp develop - 1, 2배수 이미지 둘 다 사용
  • 2020.06 c-gulp develop - 2배수이미지만 사용
  • 2020.05 gulp develop
  • 2020.05 위 gulp develop 모듈화
  • 2020.04 각종 gulp 연습 - private
  • 2020.03 php 게시판
  • 2020.03 php 게시판 만들면서 공부한 저장소
  • 2020.02 처음세팅한 gulp
  • 2020.02 위 gulp 모듈화

개인 Project 및 blog

공부할때 도움되는 사이트

workspace