한지 - 한조각 쓸모있는 지식 레터

최근 웹 사이트 트렌드를 살펴보면

뭐 별것도아닌 사이트 만드는데도

react, vue, angular 등의 라이브러리 혹은

프레임워크를 사용하는 경향이 있습니다.

왜 그런걸까요...

아마도 의존성이 생긴것이 아닌가 싶습니다.

너무 길들여진 나머지

pure javascript와 html, css로는

웹 사이트를 만들지 못하게된

개발자가 많아진것은 아닐까요?

각설하고

정말 가벼운 웹사이트를 퍼블리상 할 일이 생겨

만들고 난 뒤에 js, css 파일등의 버전 관리를

어떻게 할까 고민해 보았습니다

1. 웹팩을 쓴다?

2. 몇번이나 업데이트한다고.. 직접 수정한다.

3. 스크립트를 통해 관리한다!

3번 방식을 채택하였습니다.

프로젝트 규모에 비해 너무 과하지도 않고

직접 하는것에 비해 과거 버전과 충돌할 가능성은

0%로 줄이는 효과가 있기 때문입니다.

코드는 간략하게 작성했는데요

프로젝트 구조가

index.html
/css (직접 작성한 코드)
  style.css
  pallete.css
/js (직접 작성한 코드)
  something.css
/common (swipe.js나 jquery같은 손대지 않을 소스코드)
  /css
  /js

이렇게 되어있다고 했을때의

코드로 보시면 되겠습니다

const fs = require("fs");
const html = fs.readFileSync("index.html").toString();

fs.readdir("./css", async (err, filenames) => {
  if (err) {
    console.log("err: ", err);
  } else {
    let newHtml = html;

    const renames = filenames.map((filename) => {
      const newFileName = getNewFilename(filename);
      fs.renameSync("./css/" + filename, "./css/" + newFileName);
      newHtml = newHtml.replace(strReplace(filename), newFileName);
      return newFileName;
    });
    await Promise.all(renames);

    fs.writeFileSync("./index.html", newHtml, "utf8");
  }
});

function strReplace(str) {
  return new RegExp(str, "gi");
}

function getNewFilename(currentName) {
  const dotIndex = currentName.indexOf(".");
  return `${currentName.slice(0, dotIndex)}.${new Date().valueOf()}.css`;
}

/css 폴더 경로의 파일들을 버전관리 하는

node script 파일입니다.

/js 폴더의 스크립트 버전도 관리하려면

css파트를 복붙해서 js로만 변경해주면 되겟죠?

해당 소스코드는  github에도 올려두었습니다

https://github.com/jaekwangLee/css-versioning

expo는 아주 잘 관리되고 있는것같다.

"비록, RN에 비해서 Prod에서 쓰기에는 무리가 있다." 라고는 하지만,

앱의 규모를 생각해서 판단하도록 하자.

많은 고급 라이브러리의 사용을 요구하지 않는 앱개발이 예정되어있다면 expo도 추천할만 하다.

버전업 방법은 간단하다.

app.json의 sdk version을 올려주고, node_modules를 삭제한 뒤, npm install 하여 module들을 새로 설치하면 끝.

이라고 생각하면 잘못된 판단.

expo library들이 설치되어있다면 package.json도 수정해주자

expo버전을 app.json과 맞추고 npm install 한 다음, 실행해보면 어느 라이브러리들이 버전이 맞지않는지 나타난다.

해당 라이브러리들의 버전을 올린뒤, node_modules파일을 제거하고 다시 npm install

그러면 정말 완료!

명심할것은, expo sdk version은 standalone file을 배포해야지만 유저앱에 반영된다. 

code push (publishing)으로는 되지않는다.

웹사이트 개발 / 홈페이지 제작 / android앱 개발 / ios 앱 개발 / server / client / aws / fullstack / buisness partner / 외주 / 용역

https://open.kakao.com/o/sNETgUJb

http://self-made.cloud