hunter-hwang-dev / _hunterpedia-vue

React로 마이그레이션 하기 전 Vue.js 테스트 (2024-11-19 현재 사용하지 않음.)
1 stars 0 forks source link

raw-blog에 작성했던 quick-tips.js 파싱은 이미 json 형식으로 써서 쉬웠다. #2

Closed hunter-hwang-dev closed 3 weeks ago

hunter-hwang-dev commented 3 weeks ago

Image 266줄짜리 js 코드. 사실 코드랄 것도 없고 하나의 json const가 벌크로 뚝. 하니 놓여져 있다. DB를 잘 모를 때에 이렇게 작성했다. 하하! 파싱하기는 좋겠다. 각각의 {중괄호}가 MongoDB 상의 document가 되도록 할 것이다.

Image

맨날 헷갈리니까 이미지로 보자. database라는 책꽂이에 collection이라는 수첩이 있고, document라는 페이지가 있는 것이다.

그런데, 파싱 시 까다로운 부분은 이렇다. 각각의 item(이라고 해야 할지? js에 안 익숙함)을 적다 보니, 표기법이 조금씩 다르게 됐다.

    { // case 1:  "question", "answer", "hashtags". 이에 대응하는 값은 한 뭉텅이의 ""로 구분되어 있음.
        "question": "왜 Java에서 boolean은 true 또는 false 두 개의 값만 가지는데, 차지하는 비용은 1 byte인가요?",
        "answer": "...",
        "hashtags": "#Java #data-type #boolean"
    },

    { // case 2:  가끔 비어있는 "" 도 있다.
        "question": "Java에서 Queue 쓰는 법!",
        "answer": "Queue<자료형> 변수명 = new LinkedList<>(); Queue 변수명 = new LinkedList();",
        "hashtags": "#Java #queue #LinkedList",
        "createdAt": "2024-08-09",
        "revisedAt": "",
        "related-tips": "Stack<Integer>를 IntArray로 바꾸고 싶어요!"
    },

    { // case 3: 심지어는 ""도 없이 뻥 비어있는 경우도 있으며, 여러 줄을 깔끔하게 적기 위해  + 로 string을 합쳐놓은 부분도 있다.
        "question": "Java에서 HashMap 쓰는 법!",
        "answer": 

        "HashMap<String, Integer> map1 = new HashMap<String,Integer>();//HashMap생성" + 
        "HashMap<String,Integer> map2 = new HashMap<>(); //타입 파라미터 생략" +
        "HashMap<String,Integer> map3 = new HashMap<>(10);//초기 용량 설정" +
        "map.add(...) 안되고 map.put(...) 써야 함." +
        "map.containsKey(key) + map.replace(key, map.get(key) + ...) 조합 코테 할 때 유용하게 사용 중.",

        "hashtags": "#Java #data-type #HashMap",
        "createdAt": "2024-08-09",
        "revisedAt": "",
        "related-tips": ""
    },
// 이하 생략
hunter-hwang-dev commented 3 weeks ago

그러면 내가! 기계라고 생각해 보자. 재봉틀 바늘을 떠올리고 한 글자 한 글자 확인하며 어디서 잘라야 할 지 판단해 보자구. 더 복잡하게 파싱할 수도 있지만 이게 제일 빠르고 간단하겠지? 가장 효율적인 방식이 먹힌다면 더 생각할 필요도 없다.

아까 가져왔던 3종류의 documents 케이스를 단순/간략화해 보자.

{
    "question": "질문",
    "answer": "답변, 답변, 답변.",
    "hashtags": "#해시태그 #해시태그"
},

{ 
    "question": "질문: 질문",
    "answer": 답변",
    "hashtags": "#해시태그",
    "createdAt": "1970-01-01",
    "revisedAt": "",
    "related-tips": "다른 질문의 question값"
},

{ 
    "question": "질문",
    "answer": "답변" + "답변 답변, 답변" +
    "답변 답변" +
    "답변."
    "hashtags": "#해시태그 #해시태그"
    "createdAt": "1970-01-01",
    "revisedAt": "",
    "related-tips": ""
},

아니, 변수가 너무 많다. 나는

  1. "따옴표로 표시된 String" 안에 들어가지 않는
  2. 쉼표 , 를 기준으로 끊으면 될 줄 알았어.

그런데 컴파일된 코드는 String을 구분하지만, 통짜 JSON을 파싱하려면 어느 "가 시작이고 어느 "가 끝인지도 구분지어야 한다. 복잡하다.

hunter-hwang-dev commented 3 weeks ago

그럼 결론: 수동 입력하는 것이 차라리 인력이 적게 들 것이다!

JSON 파싱은 개발 블로그 개발을 하다 보면 언젠가는 쓸 것이다. 간단한 파싱은 이미, 하나의 document에 달린 여러 해시태그가 하나의 String에 담겨 있기에 어차피 해야 한다.

hunter-hwang-dev commented 3 weeks ago

Image 엥, MongoDB 형식 그대로니까 그냥 { } 단위로 끊으면 될 것 같은데?

hunter-hwang-dev commented 3 weeks ago

다시 해보자!

hunter-hwang-dev commented 3 weeks ago

Image ChatGPT의 도움을 받고 있다. JSON 파일로 변환하면 파싱하는 데 장점이 있나 보다.

Image 그러나 JSON 파일은, JS 내 JSON object (꺽쇄 괄호로 묶는 거 object 맞아? js 문법 헷갈려) 완 달리 string 더하기가 되지 않는다.

hunter-hwang-dev commented 3 weeks ago

Image 그리 많진 않으므로 일일이 합쳐 주겠다.

hunter-hwang-dev commented 3 weeks ago

Image 오 이런. 그렇게는 못 하는가 보네.

hunter-hwang-dev commented 3 weeks ago

Image

hunter-hwang-dev commented 3 weeks ago

Image 오예! Image 잘 들어갔다. 이게 되네? 아주 쉽게 되는군! db 수기로 작성할 때 json 형식을 추천한 이유가 다 있었구나.

hunter-hwang-dev commented 3 weeks ago

수동 입력(노가다)를 해 보니, 웹페이지에서 document 추가하는게 너무 느리고 답답, 불편함 > 차라리 코드 쓰자. 이렇게 결정한 이유.