Categories
Tags
8
16
32
![커버: [JAVASCRIPT] 핵심 이해: Lexical Scope와 Execution Context의 모든 것 커버 이미지](/assets/images/post/covers/TIL-javascript.png)
자바스크립트의 기초 지식을 보강하기 위해 시리즈로 작성 중인 포스트입니다. Scope와 Execution Context 스코프와 실행 컨텍스트는 서로 관련이 있기 때문에 이 포스팅에서 묶어서 정리합니다. 가장 기초이고, 필수로 알아야하는 개념입니다. Scope(이하 스코프) 스코프의 개념부터 알아보겠습니다. 스코프는 변수나 함수와 같은 식별자가 접근 가능한 범위를 뜻합니다. 코드의 부분에서 어떤 변수들을 사용할 수 있는지, 어디서 해당 변수의 참조를 찾을 수 있는지를 정의하는게 스코프입니다.
2024년 03월 17일![커버: [JAVASCRIPT] 잘 알지만 자주 놓치는 예외 처리의 기본 커버 이미지](/assets/images/post/covers/TIL-javascript.png)
최근 이직을 준비하면서 가지고 있는 기술 스택에 비해 제작했던 프로젝트가 모두 스프링 부트 또는 파이썬 프로젝트인 것을 알았습니다. 때문에 `Node(이하 노드)`를 사용해서 새 프로젝트를 제작하고 있습니다. 프로젝트를 제작하면서 자주 예외 처리를 하게 되는데, `try-catch`는 익숙하면서도 "왜 이렇게 동작하지?" 혹은 "왜 이 부분은 건너뛸까?" 하는 생각이 들었습니다. 익숙하면서도 자세히 모르는 `try-catch`에 대해서 바쁘다는 핑계로 들여다보지 못 했습니다. 언젠가는 정리해야 할 주제이기도 하고, 공부할 겸 이번 기회에 블로그에 테스트 내용을 정리하려 합니다.
2023년 12월 13일![커버: [CORDOVA] JavaScript 프로젝트를 모바일 앱으로 만들어보자 커버 이미지](/assets/images/post/covers/TIL-javascript.png)
JavaScript 프로젝트 앱으로 만들기 최근 웹 게임을 제작하면서 앱으로 설치해서 게임을 즐겨보고 싶다는 생각이 들었습니다. 모바일 애플리케이션을 제작하는데 지식이 없었지만 항상 똑똑한 사람들이 편리한 도구를 제작하여 오픈소스로 제공하기 때문에 앱으로 빌드하는 도구 또한 있으리라 생각하고 무작정 시도했습니다. 기존 자바스크립트 프로젝트를 빌드하고 애플리케이션으로 빌드하고 APK 파일을 얻어내는 과정에서 많은 삽질이 있었고, 편리하게 APK로 만든 경험과 방법을 기록하려합니다. 시도해본 도구 중에서 ionic과 react native, cordova가 있었는데요. ionic은 apk로 빌드하는 과정에서 문제가 있는지 모르겠지만 apk 실행 시 마우스 이벤트가 오작동하는 등의 자잘한 문제가 있었습니다. cordova를 사용하여 빌드 한 후에는 마우스, 터치 이벤트가 정상 작동하여 cordova를 채택하게 되었지요. 때문에 앱 빌드에 많은 도움을 얻은 코르도바(Cordova)를 소개해드리려 합니다. Apache Cordova 아파치 코르도바는 코도바라고도 하며, 니토비가 만들고 어도비 시스템즈가 인수한 모바일 개발 프레임워크입니다. 오브젝티브 C 처럼 기기에 특화된 언어들 대신 자바스크립트, HTML5, CSS3을 이용해 모바일 기기를 위한 응용 프로그램을 만들 수 있게 도와 줍니다. 로고는 네모 박스에 귀엽게 생긴 캐릭터가 평평하게 붙여진 모양입니다. 여담이지만 이전 명칭은 "코도바"가 아닌 "폰갭"이었다고 하네요.
2023년 10월 10일모방 할 게임 찾기 여유 시간을 가질 때면 항상 무언가를 만들기 위해서 찾아보고 직접 구현하는 시간을 가졌습니다. 그림을 그리거나 악보를 보며 기타를 치는 취미처럼 프로그램을 만들어 가지고 놀거나 지인에게 배포하여 함께 공유하기도 합니다. 지금까지도 그러고 있습니다. 이제까지 생각만 했던 게임을 만들어보고자 했습니다. 해당 게임은 위메이드플레이에서 개발, 유통한 모바일 게임입니다. 친구들과 순위로 경쟁도하고 스팸같은 하트 메세지도 남발했습니다 🤔 모방할 게임을 선정하고 필자가 사용하는 언어와 지식으로 제작해보고자 했습니다. 막연하게 "만들어 봐야지"로 시작했다가 완성하긴했지요. 게임 규칙 파악하기 모방하고자 하는 게임은 셀 수도 없을 만큼 많을 수 있습니다. 어떤 게임이 됐건 간에 만들어보고 시행착오를 겪으면서 기술을 이해하는데 목적이 있는 것이기 때문에 부담가질 필요도, 좌절할 필요도 없다고 생각합니다. 모방할 게임은 애니팡입니다. 애니팡을 기준으로 규칙을 나열해봅시다.
2023년 10월 06일![커버: [GPT] ChatGPT로 블로그 챗봇을 만들어보자 커버 이미지](https://user-images.githubusercontent.com/71887242/227789231-90f9ee56-1436-4fc9-b076-4062a50913cb.png)
ChatGPT란 무엇인가 요즘 ChatGPT를 써봤냐는 말을 자주 들었습니다. 주변에서 GPT가 무엇을 해주었다는 둥, 번역을 한다던가, 기사 내용을 요약해준다. 혹은 코드를 작성해준다 등의 이야기였습니다. 그래서 도대체 GPT가 뭐길래, 무엇을 위해 만들어진 것이길래 다들 사용해보고 열광하는 지 궁금했습니다. 필자는 인공지능의 영역에는 일자무식이라 GPT에게 ChatGPT가 무엇인지 물었습니다. ChatGPT는 OpenAI에서 개발한 대화형 인공지능 모델이라고 합니다. 보통 GPT-3.5 또는 현재 버전인 GPT-4로 알려져 있습니다. ChatGPT(이하 GPT)는 사용자들과 자연스럽게 대화할 수 있는 인공지능을 만들기 해 개발되었고, 정확한 답변을 제공하기 위해서 학습 및 버그 수정이 이루어 지고 있는 것으로 보입니다. 그래서 한 가지 생각이 드는 것이 바로 "서비스 사이트들이 가진 딱딱한 챗봇을 대체할 수 있지 않을까" 입니다. 테스트 한 결과를 토대로 먼저 말씀 드리자면, 머지 않아 인공지능이 서비스 업무(상담 또는 안내 등)에 대해서 자리를 차지하지 않을까 생각이 듭니다. 제가 GPT로 만들고자 한 목표와 테스트한 내용, 이슈에 대해서 이야기하려 합니다.
2023년 03월 27일![커버: [HMAC] HMAC SHA-256을 알아보자 커버 이미지](/assets/images/post/covers/TIL-javascript.png)
HMAC이란 HMAC은 Hash-based Message Authentication Code의 약자입니다. 여기서 뒤에 붙는 SHA-256은 해시 알고리즘 종류 중 하나로 HMAC SHA256이라 하면 HMAC을 SHA 256알고리즘으로 조합하여 해시코드를 생성하는 것을 말합니다. HMAC의 원리를 단순히 이야기하면 클라이언트와 서버단에 동일한 시크릿 키를 사용하며, 클라이언트에서 메세지 + 시크릿 키를 서버로 보내어 서버에서 메세지 + 시크릿 키로 해시 값을 만들어 대조하는 대칭키 방식입니다. HMAC SHA256 사용 개발 환경은 아래와 같습니다. 1. fastify 2. typescript 3. node 18.11.0 4. npm 9.5.1 설명 기준은 제가 현재 사용하는 javascript가 될 것 입니다. 아래는 개발 환경에 대한 정보입니다. fastify로 api서버를 구축했다는 가정 하에 진행하겠습니다. (무엇을 사용하던 별 상관은 없습니다.)
2023년 03월 11일![커버: [WEBRTC] OpenVidu를 시작해보자 02 커버 이미지](/assets/images/post/covers/TIL-javascript.png)
OpenVidu 배포 버전을 사용해보자 이전 포스팅에서는 openvidu-dev 컨테이너를 사용해서 로컬에서 테스트 환경을 구축하는 방법에 대해 알아보았는데요. 포스팅을 다듬을 시간이 없어 최대한 목차를 짜내어 글을 쓰고 있지만 여전히 정리되지 않아 불편하기 그지없습니다. 아무쪼록 내용은 어디까지나 참고만 하시고, 본 내용은 모두 OpenVidu가 제공하는 범위 내에 모두 설명되어 있기 때문에 OpenVidu를 사용하여 환경을 구축하면서 만났던 에러 상황을 어떻게 풀어나갔는지에 대해 좀 더 신경써서 쓰고자 합니다. 이번 포스팅에서는 OpenVidu의 무료 버전인 CE를 사용해서 온프레미스와 AWS서버에 배포하는 과정을 알아보면서 트러블 슈팅 중점으로 포스팅하려합니다. OpenVidu는 앞서 말씀드린 것 처럼 3가지 버전으로 제공하고 있습니다. CE, PRO, ENTERPRISE 입니다. 그 중에서도 무료로 제공되는 CE를 다룰 것 인데요, CE를 온프레미스에 설치하고 어떻게 테스트했는지를 공유하겠습니다. 먼저 온프레미스 기준으로 설명을 하고 AWS 서버 환경에서 설명하겠습니다.
2023년 02월 27일![커버: [WEBRTC] OpenVidu를 시작해보자 01 커버 이미지](/assets/images/post/covers/TIL-javascript.png)
WebRTC를 좀 더 쉽게 사용하는 무료 플랫폼 이전 WebRTC 3편까지 WebRTC API를 사용한 기본과 멀티 스트리밍에 대해서 포스팅을 했습니다. 일주일 전 WebRTC를 보다 쉽게 사용해서 개발 가능한 플랫폼을 소개 및 사용방법을 포스팅하려고 합니다. 워낙에 소개할 내용이 많기 떄문에 이번 포스팅을 시작으로 2 ~ 3 개의 포스팅이 추가로 작성 될 예정입니다. WebRTC를 개발하는데 필요한 제반 지식은 굉장히 광범위합니다. 단순히 자신의 영상, 다른 사람의 영상을 교환하는데 그치지 않고 더 많은 사람을 수용하고 끊김없는 멀티 스트리밍 환경을 구축하는데 미디어서버 또한 필요하지요. 페이스북에는 WebRTC 관련한 커뮤니티가 이미 있고 이 커뮤니티는 국내에 많은 분들이 WebRTC 개발을 전문으로 하는 것으로 보입니다. 쉽게 생각하고 시작했다가 많은 고생을 하고 있는데요🥲 나름 지식의 바닥에서 먼지만한 노력을 1미리정도는 쌓아올린 기분이 듭니다. 각설하고 WebRTC를 보다 편하게 사용하고 미디어 관련 처리를 대신 해주는 고마운 플랫폼을 소개하면서 기본적인 사용 방법을 알아보고 이번 포스팅은 마치려 합니다.
2023년 02월 12일