[단어 빈도 분석기]로 텍스트 데이터를 한눈에!

복잡한 텍스트 분석, 이제 걱정 마세요. 단어 빈도 분석기는 텍스트에서 자주 사용되는 단어를 직관적으로 시각화하는 도구로, 학습, 프로젝트, 소셜 미디어 데이터 분석에 최적화된 서비스를 제공합니다.

단순한 텍스트 입력만으로 단어의 빈도를 빠르게 계산하고, 결과를 시각적으로 확인할 수 있습니다. 사용자 친화적인 인터페이스로 누구나 손쉽게 데이터를 분석하고 활용할 수 있습니다.

지금 바로 단어 빈도 분석기를 사용해 보세요! 여러분의 텍스트 데이터 활용을 더욱 스마트하게 만들어 드립니다. 🚀

사이트 바로가기 https://hocoword.netlify.app/

스택 및 특징

[기술 스택]

프론트엔드:

• HTML, CSS 기반으로 간단하면서도 안정적인 구조 설계
• JavaScript로 데이터 처리 로직 구성 및 직관적인 함수 분리 백엔드:

• 서버 없이 클라이언트 사이드에서 모든 로직이 동작하도록 간소화 배포:
• Netlify를 통해 안정적이고 빠른 배포

[특징]

1. 상태 관리 (State Management):

• SATAE (STATE) enum을 사용하여 애플리케이션의 상태를 명확하게 관리
• READY, ANALYZING, RESULT 세 가지 상태로 구분하여 흐름 제어
• 상태별 핸들러를 통한 체계적인 렌더링 로직

2. 모듈화된 구조:

• 기능별로 함수가 잘 분리되어 있음 (bindEvents, render, displayRanking 등)
• 각 함수가 단일 책임을 가지고 있어 유지보수가 용이

3. 이벤트 처리:

• 이벤트 위임 패턴 사용
• 파일 드래그 앤 드롭 지원
• 모달 관리를 위한 이벤트 처리
• 페이지네이션 구현

4. 데이터 처리:

• HashTable을 사용한 효율적인 단어 빈도수 계산
• 긴 단어에 대한 해시 처리로 메모리 최적화
• Map 자료구조를 활용한 랭킹 데이터 관리

5. UI/UX 개선:

• 페이지네이션을 통한 대량의 데이터 효율적 표시
• 단어 우선순위 표시 (high, medium, low)
• 모달을 통한 메뉴 관리

[주요 장점]:

1. 확장성이 좋은 구조
2. 코드의 가독성이 높음
3. 효율적인 메모리 관리
4. 사용자 경험을 고려한 기능 구현
5. 유지보수가 용이한 모듈화된 구조

[진행하며 배운 점]

협업과 커뮤니케이션: 하코 커뮤니티에서 사이드 프로젝트를 진행할 수 있도록 멘토링해주신 비누님과 프로젝트를 성공적으로 완성할 수 있도록 코드 리뷰로 많은 도움을 주신 UHD님께 깊은 감사의 인사를 드립니다. 여러분의 지원 덕분에 더 나은 서비스로 성장할 수 있었습니다!

UI/UX 개선: 사용자 경험 중심으로 반복적인 개선 작업을 거치며 직관적인 디자인의 가치를 배웠습니다.

진행 피드백 기록

2408 기획 의도=========

문장 단어 추리기

1. 실시간 미국 정세
2. 병원기록
3. 진학 자소서 분석

240828 피드백=========

-카톡txt분석기 많이 사용한 단어를 분석하기 db연결시 사용자별 많이 사용하는 단어 랭킹

241009 피드백=========

로컬스토리지저장 빈값 에러 깃허브링크 추가 리드미 수정(참고 https://github.com/classbinu/markcraft-v2) 두번째는 깃허브 업데이트

241017 피드백=========

1. Font 구글폰트를 다운받아서 쓰기
2. 파비콘 이란? 책깔피상단 아이콘그림. 기본인데 없어서 404 떴음
3. addEventListener NULL에러. js는 코드에서 상위에 위치 필수. 랜더링 순서에 따라 html보다 js가 먼저 읽히는데 불러와진게 없어서 null에러 발생. 랜더링하는방식과 js동작방식을 알기. 해결책은 js를 맨밑에 내리던가(js는 화면에 랜더링하는 것에 속하는게 아니라 헤더로 넣어야 함.), defer(한꺼번에 다운로드 하는데 순서가 있음), defer를 선호

또는 mjs 라는 모듈화 버전으로 import 형식으로 사용할 수 있음 4. callback 함수 = TDD JS는 실행이 아니라 동작을 정의하는것. // // callback function -> function used // function add(a, b, userFunc) { // const result = serverCall(a,b) // network - late // console.log(result)

// // end // if (userfunc) { // userFunc(result) // } // } 기존 함수를 정의 후 사용자 커스텀 함수를 정의하러 와서 callback이라고 일컫는다.

241024 피드백=========

1. doctype html 은 버전표시용으로 넣었다가 정규화되어 간단히 표시
2. mvc(model, view, ?), mvvl? 형식
3. html구조코드, css랜더링코드, js기능코드 를 착실히 나누기. html에 css랜더링요소를 그냥 추가할거면 하지마라.
4. css가 없어도 좋은 구조여야 함.
5. region 쓰면 구역 접었다 펼 수 있음. 주석 조차 가능. 단순 임시방편. 근데 이렇게 묶일 정도면 분류별 함수로 따로 빼야함.
6. Todo 쓰면 나중에 뭘 하라는 등의 기록을 남길 수 있음.
7. js는 mdn사이트를 참고해라.
8. 숙제: js의 dataset을 이용한 연동방법 이용해보기. 기록해준 step 따라서 변화보기.
9. 다음시간: event.currenttarget.pageId
10. 2009-2011 LG, 클래지콰이, Sunwas - [] 에 대해 시간날때 얘기해달라

241127 피드백=========

앞으로의 개선점:

1. 오타 및 명명 규칙 문제:

• SATAE가 STATE로 잘못 작성됨
• 일관되지 않은 변수 명명 규칙 사용

2. 전역 상태 및 변수 관리 문제:

• 전역 변수들이 너무 많음 (state, analysisResults, rankingData, currentPage 등)
• 상태 관리가 분산되어 있어 추적이 어려움 3.에러 처리 부족:

const onAnalyzing = params => {
    try {
        // ...existing code...
    } catch (error) {
        console.error('Analysis failed:', error);
        state = SATAE.READY;
        render();
    }
}

const handleFileDrop = e => {
    try {
        // ...existing code...
    } catch (error) {
        console.error('File reading failed:', error);
        alert('파일을 읽는데 실패했습니다.');
    }
}

4. 성능 이슈:

• 대용량 텍스트 처리 시 최적화 없음
• 불필요한 DOM 조작이 많음

5. 모듈화 부족:

• UI, 비즈니스 로직, 이벤트 핸들링이 한 파일에 혼재
• 단일 파일에 모든 기능이 집중됨

6. UI/UX 미흡:

• 페이지네이션 상태 표시 부재
• 로딩 상태 표시 없음

7. 테스트 용이성:

• 순수 함수가 적어 테스트하기 어려운 구조
• 의존성 주입이 없음

8. 메모리 관리:

• 큰 데이터셋 처리 시 메모리 해제 로직 부재

최종업데이트 2024-11-27