꿀팁 저장소

기존의 파일 업로드 방식으로는

모바일 사파리 브라우저에서

한글 파일 깨짐 이슈가 발생햇다.

// 기존의 간단한 파일 업로드
const formConfig = (form: FormData) => ({ 
  headers: { 'Content-Type': 'multipart/form-data;' },
});

const pdfForm = new FormData();
pdfForm.append('file', state.teaser);
await axios.post('/common/pdf/upload', pdfForm, formConfig(teaserForm));

항상 한글깨짐 이슈는 UTF-8 인코딩과

연관되어 있던던 과거의 경험에 의해

issue 트랙킹을 한 결과

아래와 같이 약간의 옵션을 추가해줌으로써

한글 깨짐에 대처할 수 있었다.

// 기존의 간단한 파일 업로드
const formConfig = (form: FormData) => ({ 
  headers: { 'Content-Type': 'multipart/form-data; charset: UTF-8;' },
  transformRequset: [function() {
    return form;
  }]
});

const pdfForm = new FormData();
pdfForm.append('file', state.teaser);
await axios.post('/common/pdf/upload', pdfForm, formConfig(teaserForm));

최신 자바스스크립트 개발환경은

3강체제이다

React, Vue, Angular

그중에서도 최강자 React를

운좋게도 처음시작부터 계속해서 쓰고있다.

근데 이게 너무나도 빨리

유행이 변해가다보니

따라가기가 정말 쉽지않다

자칫 쉬어가다간 바로 고인물이다.

유행을 따라가는게 좋은것만은 아니라고들 하지만

React의 변화는 단순한 유행이 아니다.

예를들어, 망치가 처음 만들어졌을떄

지금의 모습이 아니었을것이다

힘을 더 잘주기위해 손잡이가 길어졌을테고

너무 길어지니 과유불급이라 판단되어

적정 수준의 길이를 찾았을테고

쇠뭉탱이의 무게나 크기도

오랜 시간을 거쳐 발전했을것이다

React도 마찬가지인것같다

그중에서도  React의 핵심이라고 할수있는

state (상태)

에 대한 관리는 많은 이슈를 가지고있다

춘추전국시대가 끝이 보이질않는다

Context API

Redux

MobX

Context API의 진화

Recoil

...

...

각각이 가진 고유한 특성과

장단점들이 있다

내가 가진 얄팍한 지식으로 그것들을 설명하기보다는

써본 결과..

너무나도 불편하고 지저분하고

이렇게까지 해야되나? 

그냥 예전 바닐라 스크립트 시절이 더 날지도...

라는 생각과

사과하나 자르려고

사과 공장을 차리는 느낌이 자꾸만 들었다

그런와중에 내가 원하는

바로 그 라이브러리를 찾게되었다.

내가 원하는건 별게아니다

1. 글로벌 상태 관리

2. 지저분한 코드 x

3. 간편한 유지보수

이 3가지면 충분하다.

뭐 미들웨어로 어쩌니저쩌니

커스텀 훅으로 두들겨패니 뭐니

그런거는 기본기만 되어있으면

원하는 사람이 붙여쓰면 되는것 아닌가?

이런 나의 니즈를 충족시켜준

라이브러리는

react-query (+ axios)

react-query는 서버로 부터 받아온 정보를

(통칭 Server state)

정말 간단하게 글로벌 state로써 관리하고

재호출할수 있으며

로딩/실패/성공에 대한 진행상황(status)을

체크할 수 있다.

진짜, 간략한 샘플코드를 확인해본다.

// index.js
import React from 'react';
import App from './App';
import { QueryClientProvider, QueryClient } from 'react-query';
...

function main() {
  const queryClient = new QueryClient();
  
  return (
    <QueryClientProvider client={queryClient}>
      <App />
    </QueryClientProvider>
  )
}

...

// api.ts
import axios from 'axios';
import { useQuery } from 'react-query';

const getNameAPI = async () => {
  try {
    const { data } = axios.get('...');
    return data;
  } catch(error) {
    throw error;
  }
}

export const getName = () => {
  return useQuery('test/name', getNameAPI);
}

// App.tsx
import React, { useEffect } from 'react';
import { useQueryClient } from 'react-query';
import { getName } from './api';

function App() {
  const queryClient = useQueryClient();
  const { data, status, error, isLoading } = getName();
  console.log('fetching data 확인: ', data, status, error, isLoading);
  
  useEffect(() => {
    // 5초뒤에 이전에 호출했던 API에서 받아온 server state를 확인해본다.
    setTimeout(() => {
      const data = queryClient.getQueryData('test/name');
      console.log('data: ', data);
    }, 5000);
  }, []);
  
  return (
    <div>
      ...
    </div>
  )
}

어떤가?

아주 기본적인 방식으로 axios, fetch등을

이용해 데이터를 호출한뒤

useQuery에 key와 콜백함수만 등록해주면

queryClient를 이용해서

이전에 불러왔던 데이터를 확인할 수 있다.

redux를 쓸때의 코드양과 비교하면

이루 말할수없을정도로

행복한 코드라고 할수있다.

서버로 부터 불러온 데이터를 재가공할일이

많다던지 하는 경우에는

redux를 쓰라고 한다.

그건 그때가서 볼일이다.

웹/앱을 개발한지 얼마 안됐을때

그 프로젝트가 그 단계까지 갈지말지는

모르는법이다.

가볍게 시작해서

살을 더해가자

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

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

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

새로운 프로젝트를 시작하며

여러가지 상황을 고려해

next.js로 개발을 진행중입니다.

개발에서 가장 어려운건

환경 세팅이라고 그랬던가...

역시나 순탄하게 흘러가는 법이 없네요.

next.js에서 페이지 핫 로딩 후

styled-component가 먹통이 되는일이 발생하였네요.

다른 분들도 겪을듯 하여 해결 방법을 공유해봅니다.

// package.json

"babel": {
    "env": {
      "development": {
        "presets": ["next/babel"],
        "plugins": [
          [
            "styled-components",
            {
              "ssr": true,
              "displayName": true
            }
          ]
        ]
      },
      "production": {
        "presets": ["next/babel"],
        "plugins": [
          [
            "styled-components",
            {
              "ssr": true,
              "displayName": false
            }
          ]
        ]
      }
    }
  }

해당 포스팅은 Gsuite에 기반한 포스팅임을 미리 말씀드립니다.

광고x

오랜만에 정성가득 포스팅을 해보고자 합니다.

내 도메인으로 이메일을 등록하는 것부터

여러가지 상황으로 인해 내 도메인의 네임서버(NS, name server)를 변경했을때 이메일이 먹통이 됐다면..?! 에 대한 해결방안까지.

ㄱ. 도메인 구매

국내에 유명한 호스팅업체가 몇 군데 있습니다.

예를들어 Cafe24, 가비아, 후이즈, 호스팅케이알 등

개인적으로 가비아나를 주로 이용하고 호스팅케이알이 저렴하다고 생각해 종종 이용합니다.

어디든 상관없으니 들어가서 마음에 드는 도메인을 검색해 구매하도록 합니다.

ㄴ. Gsuite 시작

구매하였다면, 이제 Gsuite를 시작할 차례입니다.

workspace.google.co.kr/intl/ko/

위의 링크로 들어가면 우측상단에 "무료 평가판 시작" 이라는 버튼이 있습니다.

해당 버튼을 눌러 봅니다.

그러면 간단한 설정들이 몇가지 나오는데요.

차근차근 진행해주면 됩니다. (직원수, 국가, 연락처 등이니 부담없이 편하게 하시면 됩니다.)

자, 기본정보를 입력하고나면 도메인을 소유하고있냐고 묻는데요.

우리는 구매한 도메인이 있으니, 도메인을 소유하고 있습니다를 클릭합니다.

그리고 구매한 도메인을 입력해줍니다.
도메인이 tistory.com(www.tistory.com)이라면 tistory.com을 입력해주면 되겠죠?

 
자, 여기부터가 조금 어려울수있는데요 .

무슨무슨 설정을 하라는 가이드가 나옵니다. 방황하지 않도록 합니다.

ㄷ. 메일서버 설정

도메인을 구매했던 사이트로 돌아가

마이서비스(마이페이지) > 도메인 관리툴
로 이동합니다.

잘 살펴보면 어드 사이트던간에 도메인 관리툴에 "DNS 설정" 혹은 "DNS 레코드 설정"등의 버튼이 있습니다.
해당 버튼을 클릭해 관리 화면으로 이동해봅니다.

설정된게 아무것도 없을텐대요. 여기서 구글에서 가이드해준대로 설정을 하나씩 진행해줄 예정입니다.
1. "추가"버튼을 클릭
2. primary에 구글에서 지정해준 1,5,10, 15 등을 입력
3. value/description에 구글에서 지정해준 ASPMX.L.GOOGLE.COM. 등의 값을 입력
4. 총 5-6개정도가 가이드 됩니다. 꼼꼼하게 입력했는지 다시한번 확인합니다.
5. TTL (수명)은 기본값/공백으로 두어도 무방합니다.
6. MX 확인 레코드(mx-verification.google.com으로 끝남 <- 이것도 빼먹지 않았는지 한번 더 체크합니다.

반드시 설정을 저장하고 화면에서 나오도록 합니다.

ㄹ. Gsuite에서 연결 확인

여기까지 했다면 설정은 거의 다 끝났습니다.
다시 Gsuite로 돌아가서 다음/확인/완료 버튼을 눌러주면 Guiste연결을 체크합니다.
다만, 위의 설정을 저장하고나면 처리에 어느정도 시간이 소요될 수 있어 연결오류가 뜰수도 있습니다.

당황하지 말고 한번더 연결확인을 해주면됩니다.

설정은 모두 끝났고

test email보내기 기능을 통해 이메일을 발송, 해당 계정에서 수신해보면 됩니다.

끝!




ㅁ. 기타 이슈 해결 - 네임서버를 변경했더니 이메일이 수신되지 않아요. 

설정을 모두 마치고 잘 이용하다가
어느날 도메인 만료 혹은 호스팅 이전 등의 상황으로 인해 네임서버를 변경해야 될일이 생길 수 있습니다.
사람일은 모르는법이니까요.

그러면, 이메일이 정상적으로 동작하지 않게 되는데요.
이는, ㄹ 단계에서 연결설정 했을때와 내 도메인의 상태가 달라졌으니 사실 당연한 결과입니다.

너무 걱정하지 않아도됩니다. 걱정은 제가 미리했으니까요.

네임서버를 변경해서 도메인이 바라보게한 호스팅 서버가 있죠?
그곳에서 'ㄷ' 단계에 해당하는 설정을 해주면됩니다.

그리고, 마지막으로...
Gsuite 어드민 > 도메인 관리 > 설정
에 들어가보면 이메일 활성화 하라는 빨강색 글씨가 있을겁니다.

도움말 > support.google.com/a/answer/7009324?hl=ko&ref_topic=6302293#zippy=%2C%EB%8B%A8%EA%B3%84-%EC%83%88-%EB%8F%84%EB%A9%94%EC%9D%B8-%EC%B6%94%EA%B0%80-%EB%B0%8F-%EC%9D%B4%EB%A9%94%EC%9D%BC-%EC%84%A4%EC%A0%95%ED%95%98%EA%B8%B0

그 버튼을 꾹 눌러주면 구글에서 다시 체크를 진행하고 정상적으로 설정되어있을경우 다시 메일시스템을 복구해줍니다.

긴  글 읽어주셔서 감사합니다.

늘 하듯 AWS, GCP등을 다루다가

오랜만에 웹호스팅 문의를 받게되었다.

근데 이게 웬걸..? 오랜만에 하려니 어떻게 하면 좋을지 감을 잃었다.

솔직히 벙쪘다.

주어진건 가비아 계정과 구매된 도메인

요청사항은 HTML파일을 줄테니 호스팅 해달라는것.

호스팅 비용은 무료로.

어떻게 해야할까

내가 어떻게 했었을까

도메인은 원래 있던 사이트에서 어떻게 호스팅 쪽으로 가져올것인가\

SSL은 어떻게 붙이지?

늘 하던 작업들이지만, AWS, GCP등 클라우드 서버를 잃은 나는 무언가 무기력했다.

어떻게 위 작업을 해낼수 있을것인가...

고민끝에 떠올린 방법은

Netlify로 호스팅하고 가비아에서 도메인의 네임서버를 Netlify 네임서버로 변경해주는것

먼저, 건네받은 Html이 포함된 폴더를 통째로 Netlify에 올렸다.

그리고  차례로 절차를 밟아나갔다.

Netlify의 네임서버 사용.

그리고 Netlify의 1~4 네임서버를 복사해 가비아의 도메인 네임서버에 덮어씌우기

그렇게 약 6시간이 지난후 정상적으로 호스팅에 성공했다.

* 참고로 도메인은 무료가 아닙니다.