개요

인간의 언어로 수식을 설명하면 LaTeX 로 변환시켜주고 수식 png 파일까지 제공해주는 웹페이지와 익스텐션을 개발하자.

개발동기

라텍스가 익숙한 사람은 그냥 코드쓰듯이 라텍스를 쓰면 되지만

처음 블로그 시작한 고등학생이나 많이 안써본 사람들은 라텍스를 일일히 입력하는게 힘들다.

챗지피티에게 수식을 설명하면 라텍스로 변환시켜준다는것을 발견했다. 

이 기능을 이용해서 gpt api를 사용한 크롬 익스텐션/웹사이트를 개발해보기로 했다. 

기능 설명

이 웹 페이지는 HTML, CSS 및 JavaScript를 사용하여 구축되었습니다. HTML 코드는 입력 상자, "변환" 버튼 및 이미지와 다운로드 버튼이 표시되는 출력 영역을 포함하여 페이지의 기본 구조를 정의합니다. CSS 코드는 페이지를 스타일링하고 시각적으로 매력적으로 만들기 위해 사용됩니다. JavaScript 코드는 응용 프로그램의 논리를 처리하며, 입력 텍스트를 LaTeX로 변환하기 위해 GPT API를 호출하고, 그런 다음 LaTeX를 다운로드 가능한 이미지 파일로 변환하기 위해 Math API를 호출합니다.

구현해야할 기능

웹

1. UI elements

• 채팅 입력창
• LaTeX 결과 나오는곳
• 수식 이미지 나오는곳
• 수식 이미지 저장하는 버튼

2. functions

[총 구현기능]

• 입력 받은 채팅을 ChatGPT API Input으로 넣는 기능
• ChatGPT API에서 나온 결과에서 LATEX만 추출하는 기능
• 추출한 LATEX를 실제 수식으로 바꾸는 기능
• 실제 바꾼 수식을 이미지로 바꾸는 기능

[1차구현 목표]

• 채팅을 입력 받아 ChatGPT에 나온 결과를 그대로 사용자에게 보여주기

[최종 구현목표]

• ChatGPT에 나온 결과를 전처리를 하여 원하는 부분만 추출,가공하여 원하는 파일 형태로 만들기
  • $$를 사용.

[부가 구현 목표]

• 음성인식을 ChatGPT에 입력할 텍스트로 바꾸기(구글 스피치 활용)

익스텐션

1. UI elements

• 채팅 입력창
• LaTeX 결과 나오는곳

2. functions

• 입력 받은 채팅을 ChatGPT API Input으로 넣는 기능
• ChatGPT API에서 나온 결과에서 LATEX만 추출하는 기능

마일스톤

헤커톤이 목표이기 때문이 1주일 안에 모든걸 완성해야 한다. 

사용할 프레임워크

React 를 사용하기로 했다. 

React 와 Vue 비교:

React와 Vue 모두 JavaScript 기반의 컴포넌트 아키텍처를 사용하지만, React는 학습 곡선이 높고 성능이 뛰어나며, Vue는 학습이 쉽고 크기가 작습니다. React는 단방향 데이터 바인딩을 사용하고 Vue는 양방향 데이터 바인딩을 사용합니다.

수식 투명 PNG 파일을 만들기 위한 프레임워크로는 React나 Vue 모두 사용할 수 있습니다. 다만, React는 학습 곡선이 높기 때문에 Vue가 더 쉽게 접근할 수 있을 것입니다. 하지만, 수식 투명 PNG 파일을 만드는 것은 복잡한 작업이므로 React의 성능이 더 뛰어나기 때문에 React를 사용하는 것이 더 나은 선택일 수도 있습니다.

$\int_{1}^{8} \sin x \, dx$

크롬 익스텐션 만드는 순서

구글 익스텐션을 만드는 방법은 다음과 같습니다.

1. Chrome 웹 스토어 개발자 계정 생성
   • Chrome 웹 스토어에 익스텐션을 출시하려면 개발자 계정이 필요합니다.
   • https://chrome.google.com/webstore/developer/dashboard 에서 계정을 생성합니다.
2. 익스텐션 아이디 생성
   • 익스텐션을 개발할 때, 고유한 아이디가 필요합니다.
   • 개발자 계정을 생성한 후, https://chrome.google.com/webstore/devconsole/register 에서 아이디를 생성합니다.
3. 익스텐션 개발
   • 익스텐션을 개발하기 위해 필요한 기술은 HTML, CSS, JavaScript 등입니다.
   • 익스텐션을 구현하기 위해 필요한 API는 Chrome API입니다.
   • Chrome API는 익스텐션에서 브라우저의 기능을 제어하고, 확장 기능을 제공합니다.
4. 익스텐션 패키징 및 배포
   • 익스텐션 개발이 끝나면, 익스텐션을 패키징하여 배포해야 합니다.
   • 익스텐션을 패키징하는 방법은 크게 두 가지가 있습니다.
   • 첫 번째는 개발 중에 로컬에서 실행할 때 사용하는 압축되지 않은 디렉토리입니다.
   • 두 번째는 Chrome 웹 스토어에 업로드하기 위한 압축된 .crx 파일입니다.
5. 익스텐션 검수 및 출시
   • 익스텐션을 Chrome 웹 스토어에 업로드하면 검수 과정을 거쳐야 합니다.
   • 검수 과정은 크게 두 가지 단계로 이루어집니다.
   • 첫 번째는 자동 검수로, 브라우저와 API의 호환성, 보안 등을 자동으로 검사합니다.
   • 두 번째는 수동 검수로, 익스텐션의 기능과 사용자 경험을 수동으로 검사합니다.
   • 검수가 완료되면 익스텐션이 Chrome 웹 스토어에서 출시됩니다.

Chrome API를 사용하는 방법

Chrome API는 Chrome 브라우저에서 제공하는 API로, 익스텐션을 개발할 때 사용됩니다.

Chrome API를 사용하는 방법은 다음과 같습니다.

1. Chrome API를 사용하기 위한 권한 설정
   • Chrome API를 사용하기 위해서는 익스텐션의 manifest.json 파일에 권한을 설정해야 합니다.
   • 예를 들어, 사용자의 브라우징 기록을 읽거나 쓰려면 "history" 권한이 필요합니다.
   • manifest.json 파일에 다음과 같은 형식으로 권한을 추가할 수 있습니다.

   "permissions": [
     "history"
   ]
   

2. Chrome API를 호출하기 위한 JavaScript 코드 작성
   • Chrome API를 호출하기 위해서는 JavaScript 코드를 작성해야 합니다.
   • 예를 들어, 브라우징 기록을 읽기 위해서는 chrome.history API를 호출해야 합니다.
   • 다음은 chrome.history API를 사용하여 7일 이내에 방문한 모든 URL을 가져오는 코드 예시입니다.

   chrome.history.search({text: '', startTime: Date.now() - 7 * 24 * 60 * 60 * 1000}, function(results) {
     results.forEach(function(result) {
       console.log(result.url);
     });
   });
   

   • 위 코드에서는 chrome.history.search() 함수를 호출하여 URL을 검색하고, 결과를 처리하기 위해 콜백 함수를 등록합니다.
3. 익스텐션에서 Chrome API 사용하기
   • Chrome API를 사용하는 JavaScript 코드를 익스텐션의 background 스크립트나 content 스크립트 등에서 호출할 수 있습니다.
   • background 스크립트는 익스텐션이 실행될 때 자동으로 로드되는 스크립트로, 익스텐션의 전반적인 동작을 제어합니다.
   • content 스크립트는 브라우저의 웹 페이지에서 실행되는 스크립트로, 웹 페이지의 DOM 요소를 조작하거나 이벤트를 처리하는 등의 작업을 수행합니다.

도메인 구매는 어디에서 해야하나요?

티스토리에서 공식적으로 언급한 사이트는 가비아, 후이즈입니다. 

외에 다른 사이트에서 구매한 도메인도 쓸 수 있지만 DNS 레코드를 등록해야하기 때문에

DNS 연결 기능을 제공하는 사이트에서 구매하세요. 

참고할 사이트:

https://customer.gabia.com/manual/domain/273/6653

티스토리에 도메인을 어떻게 연결하나요?

참고할 사이트:

https://ukiyoudai.com/entry/%ED%8B%B0%EC%8A%A4%ED%86%A0%EB%A6%AC-%EB%B8%94%EB%A1%9C%EA%B7%B8-%EC%8B%9C%EC%9E%91-%EA%B0%80%EB%B9%84%EC%95%84-2%EC%B0%A8%EB%8F%84%EB%A9%94%EC%9D%B8-%EC%97%B0%EA%B2%B0-%EB%B0%8F-%EA%B5%AC%EA%B8%80-%EC%84%9C%EC%B9%98%EC%BD%98%EC%86%94%EC%97%90-%EB%85%B8%EC%B6%9C%EC%8B%9C%ED%82%A4%EA%B8%B0SEO

애드센스 신청은 어떻게 하나요?

참고 사이트:

https://support.google.com/adsense/answer/7402253?hl=ko 

새로운 급발진 프로젝트가 생각나서 이번주 안에 완성하려고 급하게 시작한다.

chat gpt api 를 활용해서 크롬 익스텐션을 만들 예정이다. 

크롬 익스텐션을 만드는 순서와 방법에 대해 설명해보도록 하겠다. 

크롬 익스텐션 만드는 순서

1. ChatGPT API 계정을 만들고 API key를 발급받기

• ChatGPT API 웹사이트에서 계정을 등록하고 인증 과정을 거쳐야 함

2. 크롬 익스텐션 개발 도구 설치

• 크롬 웹스토어에서 "Chrome Extension Builder"나 "Chrome Extension Developer"와 같은 개발 도구를 설치하기

3. 익스텐션 manifest 파일 생성

• 익스텐션의 구성 정보를 담고 있는 manifest 파일을 생성하기
• 익스텐션의 이름, 버전, 아이콘 등의 정보와 ChatGPT API key 등이 포함됨

4. 익스텐션 구현

• ChatGPT API를 사용하여 익스텐션을 구현
• JavaScript를 사용하여 API 요청을 보내고 결과를 처리하는 함수를 작성해야 함

5. 익스텐션 패키징

• 익스텐션을 패키징하여 크롬 웹스토어에 업로드할 수 있도록 함
• 익스텐션 파일을 압축하여 .crx 파일로 만들어야 함 (manifest 파일과 코드 파일 등)

6. 크롬 웹스토어에 익스텐션 등록

• 크롬 웹스토어의 개발자 센터에 로그인하여 익스텐션을 등록하고 업로드
• 등록 후에는 크롬 웹스토어에서 익스텐션을 검토하고 승인하면 크롬 사용자들이 설치하고 사용할 수 있음

API 키 발급받는 방법

https://platform.openai.com/account/api-keys

사이트에 들어가면 이렇게 새로운 API key 를 만들 수 있는 창이 뜬다.

버튼을 누르고 API key 발급 후 복사하면 된다. 

구글 익스텐션 개발 도구 설치

https://developer.chrome.com/docs/extensions/

공식 문서다. 

공식 문서를 읽어보자.

파이썬을 쓰려고 했지만 html css js 로 개발이 가능하다. 

엄청 자세하게 쉽게 나와았으니까 천천히 읽으면서 따라하면 되겠다. 

구글 익스텐션 만드는 방법

1. 개발 환경 설정

구글 익스텐션을 개발하기 위해서는 구글 크롬 브라우저와 텍스트 에디터가 필요하다.

구글 크롬 브라우저는 이미 설치되어 있어야 하며, 텍스트 에디터는 Visual Studio Code, Sublime Text 등을 사용할 수 있다.

2. 익스텐션 기본 구조 생성

구글 익스텐션을 만들기 위해 먼저 익스텐션의 기본 구조를 생성해야 한다.

구글 익스텐션은 manifest.json 파일을 포함한 폴더 구조로 이루어져 있다.

manifest.json 파일은 익스텐션에 대한 정보와 설정을 담고 있다.

3. manifest.json 파일 작성

manifest.json 파일은 익스텐션의 이름, 버전, 아이콘, 권한 등의 정보를 포함한다.

또한 익스텐션에서 사용하는 자바스크립트, HTML 및 CSS 파일들을 지정할 수도 있다.

4. 익스텐션 코드 작성

구글 익스텐션에서 동작하는 코드는 자바스크립트로 작성된다.

익스텐션에서 사용되는 자바스크립트 파일은 manifest.json 파일에서 지정한 파일들을 포함하여 작성된다.

익스텐션에서는 DOM 조작, 이벤트 처리, HTTP 요청 등의 작업을 수행할 수 있다.

5. 익스텐션 테스트 및 배포

익스텐션을 완성하면, 크롬 웹 스토어에 등록하여 배포할 수 있다.

익스텐션을 배포하기 전에 반드시 테스트를 수행하여 오류를 검출하고 수정해야 한다.

시작 코드

이 코드를 manifest.json 파일에 넣어주면 Hello world 가 출력된다.

{
  "manifest_version": 3,
  "name": "Hello Extensions",
  "description": "Base Level Extension",
  "version": "1.0",
  "action": {
    "default_popup": "hello.html",
    "default_icon": "hello_extensions.png"
  }
}

코딩 면접 연습을 위한 무료 코딩 테스트 사이트 추천

우리 AI 가 추천해준 코테 사이트들. 다 무료라고 한다. 

1. HackerRank (https://www.hackerrank.com/) - HackerRank는 다양한 언어로 코딩 문제를 제공하며, 튜토리얼과 비디오 수업도 제공합니다.
2. LeetCode (https://leetcode.com/) - LeetCode는 난이도 및 카테고리별로 분류된 대규모 코딩 문제 모음을 제공합니다.
3. Codewars (https://www.codewars.com/) - Codewars는 다양한 코딩 과제를 제공하며, 피드백 및 토론을 위한 커뮤니티도 제공합니다.
4. Project Euler (https://projecteuler.net/) - Project Euler는 컴퓨터 프로그래밍을 사용하여 해결할 수 있는 수학 및 프로그래밍 문제를 제시합니다.
5. Coderbyte (https://coderbyte.com/) - Coderbyte는 코딩 과제 및 튜토리얼을 제공하며, 다른 사용자와 코딩 과제 경쟁 기회도 제공합니다.

이 모든 사이트는 무료로 제공되며, 코딩 스킬을 연습하고 코딩 면접을 준비할 수 있는 좋은 방법을 제공합니다. 행운을 빕니다!

행운을 빌라고 응원까지 해줬다. 

내가 쓰는 사이트 - Leet Code (리트코드)

원래도 이걸 쓰고 있었다. 근데 왜 알고있는진 모르겠다. 

예전의 내가 찾아봤겠지. 

역시 외국사이트 답게 링크드인 연결이 가능하다. 

AI가 추천해준대로 단계별로 잘 되어있다. 

가장 백준이랑 유사한 사이트인거 같다. 

코딩 테스트는 어떻게 준비해?

리트코드(LeetCode)는 대규모 코딩 문제 모음을 제공하며, 효과적인 코딩 테스트 연습에 적합한 사이트입니다. 이를 통해 코딩 면접 준비를 위한 스킬 향상과 문제 해결 능력을 향상시킬 수 있습니다.

리트코드에서 코딩 테스트를 연습하는 방법은 다음과 같습니다:

1. 문제 선택: 리트코드에는 1,000개 이상의 문제가 있으며, 난이도 및 카테고리별로 분류되어 있습니다. 자신의 레벨에 맞는 문제를 선택하여 시작하세요.
2. 문제 풀이: 문제를 읽고 이해한 후, 코드를 작성해보세요. 여러 가지 방법으로 문제를 해결할 수 있으며, 다른 사용자의 솔루션도 확인할 수 있습니다.
3. 제출 및 평가: 코드를 제출하면, 리트코드에서 자동으로 채점합니다. 결과에 따라 통과 여부와 실행 시간 등이 결정됩니다.
4. 토론: 다른 사용자들과 문제에 대해 토론할 수 있습니다. 이를 통해 다른 사람의 코드를 볼 수 있으며, 자신의 코드도 개선할 수 있습니다.

리트코드를 사용하여 코딩 테스트를 연습하면, 효과적으로 코딩 스킬을 향상시킬 수 있습니다. 또한, 리트코드는 다양한 기업에서도 코딩 테스트를 진행할 때 사용하는 사이트이므로, 실제 코딩 면접에서도 도움이 될 수 있습니다.

고마워 AI야!

그럼 앞으로 코테 제대로 연습해볼게 

여기 한번 붙어보고싶거든

Direct Address Table 의 한계 

direct address table은 키(key)와 값(value)의 쌍(pair)을 저장하는 자료구조로, 키를 인덱스(index)로 사용하여 값을 저장하고 검색할 수 있다. 

이 때, 인덱스의 크기가 충분히 크면(예를 들어, 0부터 999까지의 인덱스가 있을 때, 1000개), O(1)의 검색 시간을 제공한다.

그러나 인덱스의 크기가 매우 작거나 값이 희소하게 분포할 경우, 메모리 공간의 낭비가 발생하게 된다. 

이러한 direct address table의 한계를 극복하기 위해, 해싱 기법을 사용하는 해시 테이블(Hash Table)이 개발되었다.

해시 테이블은 키를 해시 함수(hash function)로 변환하여 인덱스를 생성하므로, 인덱스의 크기와 값의 분포에 구애받지 않는다.

또한, 해시 함수를 이용하여 데이터의 위치를 찾으므로, O(1)의 검색 시간을 제공한다.

하지만 해시 테이블에도 몇가지 문제점이 존재한다. 

Hash Table 의 문제점

1.  충돌 (Collision)

해시 함수에 의해 생성된 인덱스가 다른 데이터와 이미 할당된 경우 충돌이 발생한다.

충돌이 발생하면, 데이터를 추가적으로 처리하여 충돌을 해결해야 한다. 

2. 해시 함수 성능

해시 함수의 성능이 좋지 않으면 데이터 검색 시간이 길어지게 된다. 

해시 함수는 인덱스를 생성하는데 사용되므로 충돌을 최소화하면서 빠른 속도를 제공하는 함수를 선택해야 한다. 

이러한 문제점을 극복하기 위해 충돌 해결(Collision Resolution)방법과 좋은 Hash Function을 선택하는것이 중요하다.

이러한 문제점들을 극복하기 위해, 충돌 해결(Collision Resolution) 방법과 좋은 해시 함수(Hash Function)를 선택하는 것이 중요하다.

충돌 해결 방법으로는 Open Addressing, Chaining 등이 있으며, 좋은 해시 함수 선택을 위해서는 해시 함수의 충돌 가능성과 보안성을 고려해야 한다.

충돌 해결 방법

충돌은 데이터를 검색하는 데 시간이 걸리며, 해시 함수 성능을 저하시킨다.

따라서 충돌을 최소화하는 해시 함수를 선택해야 하며, 충돌이 발생하였을 때는 이를 해결하는 방법을 선택해야 한다.

1. Open Addressing

Open Addressing은 충돌된 데이터를 다른 해시 테이블 위치에 저장하는 기법이다.

충돌이 발생하면, 해당 위치 이후의 다른 위치를 검색하여 데이터를 저장한다.

이러한 방법은 충돌 해결 방법 중에서도 가장 간단한 방법 중 하나이다.

하지만 충돌이 발생할 경우 해시 함수의 성능이 저하되므로, 충돌이 적은 경우에만 사용된다.

2. Chaining

Chaining은 충돌된 데이터를 같은 위치의 연결 리스트(Linked List)에 저장하는 기법이다.

충돌이 발생하고 해당 위치에 이미 데이터가 저장되어 있으면 연결 리스트에 데이터를 추가한다.

이러한 방법은 해시 함수의 성능에 영향을 미치지 않으며, 충돌이 많은 경우에도 사용할 수 있다.

좋은 해시 함수 선택 방법

1. 좋은 해시 함수를 선택하기 위해서는 해시 함수의 충돌 가능성과 보안성을 고려해야 한다.
2. 충돌 가능성이 높으면 검색 시간이 길어지므로, 충돌 가능성이 적은 함수를 선택해야 한다.
3. 보안성이 중요한 경우에는 보안 해시 함수 또는 암호학적 해시 함수를 선택해야 한다.