cotnmin

어느 날 유튜브를 보던 중 조코딩 채널에서 해커톤을 진행한다고 해서 도전해 보기로 했습니다. ㅎㅎ수상을 노리기보다는 재밌어 보여 진행하는 느낌으로 부담 없이 참여해보려 합니다.(게다가 대회 참여만 해도 피자를 준답니다...)Google에서 출시한 Gemini API를 활용한 서비스나 애플리케이션을 만들어 출품하면 되는데, 개발을 모르는 분이어도 간단하게 따라 만들 수 있는 부분인 것 같습니다!저는 간단한 애플리케이션을 만들어 출품해 볼 생각입니다! 그전에 간단하게 공부해 보면서 Gemini를 소개해보려고 합니다.조코딩 해커톤 안내 (유튜브 커뮤니티)Google Gemini 란?최근 많은 LLM들이 주목받고 있습니다. 가장 유명한 것으로는 OpenAI사의 Chat GPT가 있습니다.하지만 이제는 LLM을..

프론트엔드에서도 입력자의 값을 검증하거나 API를 통해 가져온 값을 분석 또는 재구성해서 사용하고 싶을 때 정규표현식을 이용할 수 있다. 정규표현식(Regular Expression)이란? 특정한 규칙을 가진 문자열의 집합을 표현하는 데 사용하는 형식 언어이다. 프로그래밍을 하는 과정에서 문자열을 검증하거나 문자열 일부를 추출하고 싶을 때 많이 사용한다. Javascript에서 정규식 사용하기 일단 Javascript에서는 정규식 리터럴이나 RegExp 객체를 이용해 정규표현식을 선언할 수 있다. 생성된 정규식은 문자열이 아닌 정규식 객체이다. const regexp1 = /a\d{1,}/i; const regexp2 = new RegExp(/a\d{1,}/, 'i'); const regexp3 = ne..

Javascript의 Class 문법은 기본적으로 Private 메서드나 변수를 제공하지 않는다. _(underscore) 등으로 이름을 시작하는 경우 명시적으로만 프라이빗하게 선언하려고 만들었다는 걸 알릴 수 있다. (다만 사용자가 해당 메서드나 변수에 직접적으로 접근이 가능하다.) 하지만 Javascript의 스코프 범위를 이용해 클로저(Closure)를 만들어 Private 한 메서드와 변수를 가질 수 있는 Class를 생성할 수 있다. 1. Closure(클로저)란? Closure는 함수가 일급객체 취급받는 언어에서 선언 후 반환하게 되면 스코프가 닫히게 되어 접근할 수 없는데, 함수 스코프 내부에 영향을 줄 수 있는 함수를 반환해 해당 함수를 호출할 때만 스코프에 영향을 줄 수 있는 방식이다. ..

Throttling과 Debouncing는 불필요한 연산을 줄이는 방법으로 이벤트나 비동기 요청을 할 때 주로 사용한다. 예를 들어 DOM를 크게 변경하는 이벤트가 scroll이나 resize 이벤트 같은 곳에 묶여있을 경우, 수많은 함수가 호출되고 키보드 입력을 받는 경우 엔터없이 자동완성을 한다고 했을 때 한 글자 한 글자 입력 시마다 요청을 보내게 될 것이다. 즉, 함수의 호출 비용(시간이나 컴퓨팅 성능이 될 수도 있고, api같은 경우 이용료나 트래픽 비용이 될 수 있다.)이 큰 경우 비용 절감을 위해 성능을 조절하는 기법이다. 둘의 차이점은 아래와 같다. Throttling: 함수 호출 후 정해진 시간동안 같은 함수 호출 X Debouncing: 지연 호출되는 함수를 호출 시 이전 호출은 취소하..

git stash는 git에서 변경사항을 임시로 저장하거나 롤백할 때 사용할 수 있는 명령어이다. 해당 명령어와 이를 적극적으로 활용할 수 있는 방법에 대해 작성하였다. 명령어 살펴보기 git stash 아래에는 수많은 명령어가 있지만 아래 8가지 명령어 만으로 stash를 완전 활용 가능하다. 1, 2, 3, 6번 만으로도 웬만한 활용은 가능하다. git stash (push) git stash list git stash pop git stash apply git stash drop git stash clear git stash show git stash branch 1. git stash 현재 변경사항들을 임시저장하는 명령어로 임시저장할 수 있는 공간에 스택으로 저장한다. push를 생략해 git s..

Javascript에서 순회를 사용할 때 주로 forEach를 사용합니다. 하지만 forEach는 반복도중 중단을 할 수 없다는 단점이 있습니다. 이를 for 문을 이용해 해결할 수 있지만 좀 더 깔끔하고 명확하게 쓸 수 있는 몇 가지 메서드를 알아보겠습니다 1. Array.prototype.some()과 Array.prototype.every() some과 every는 각 배열을 순회하며 주어진 조건의 반환값에 참이 존재하는지, 모든 값이 참인지 알려주는 메서드입니다. some은 참을 만나면 순회를 중단하고 참을 반환하며 순회를 마칠 때까지 참이 나오지 않으면 거짓을 반환합니다. every는 거짓을 만나면 순회를 중단하고 거짓을 반환하며 순회를 마칠 때까지 거짓이 나오지 않으면 참을 반환합니다. con..

1. _로 숫자 구분하기 (numeric separator) 가끔 큰 단위의 숫자를 적는 경우 한눈에 들어오지 않는 경우가 많은데, 이때 언더바(_)를 이용해 숫자를 쉽게 구분해 줄 수 있습니다. let num1 = 1000000; let num2 = 1_000_000; let num3 = 100_0000; // num1 == num2 == num3 언더바를 입력하는 위치는 꼭 3자리씩 끊어서 표시할 필요는 없습니다. 다만, 아래처럼 두 개를 이어서 나타내지는 못합니다. let num_err = 100__000; // Uncaught SyntaxError: Only one underscore is allowed as numeric separator 2. n진법 let num1 = 11; // 10진법: ..

Web API Javascript IntersectionObserver 사용해 보기 여러 Web API 중 변경사항을 감지하는 Observer들이 존재합니다. 이 중 매우 유용하게 쓰일 수 있는 IntersectionObserver, MutationObserver 등이 있는데 이 중에서 IntersectionObserver를 사용해보고자 합니다. IntersectionObserver 란? IntersectionObserver는 Web API 중 하나로 Viewport나 정해진 영역과 다른 영역이 겹치는지, 얼마나 겹치는지 감지하는데 이용하는 API입니다. 대부분 Modern browser에서 간단하게 사용가능합니다. 해당 API의 존재를 알기 전에는 주로 addEventListener('scroll', ..

HTML Object overflow 감지 HTML 내 요소에서 자식요소가 부모요소보다 클 때 css 상에서 overflow 속성을 정의해 처리를 할 수 있습니다. 하지만 이를 javascript에서 동적으로 처리를 하고 싶다면 다른 방법을 이용해야 합니다. 이때 2가지 방법을 이용할 수 있습니다. 1. scrollWidth 이용 위 이미지를 참고하면 clientWidth와 scrollWidth를 비교하여 scrollWidth가 clientWidth보다 크다면 overflow가 발생했음을 알 수 있습니다. 아래의 예제를 따라 해보면 문제없이 결과를 얻을 수 있습니다. Lorem ipsum dolor sit amet consectetur adipiscing elit, sed do eiusmod tempor..