cotnmin

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

어느 날 시간이 좀 나서 큰 프로젝트를 만들기는 애매하고 간단하게 뭘 만들어볼까? 하다 만든 오델로입니다! 오델로는 간단한 게임으로 내 돌로 상대 돌을 감싸면 상대 돌이 뒤집는 방식으로 간단하게 플레이할 수 있습니다.좀 더 자세한 룰은 아래와 같습니다.상대 돌을 자신의 돌로 감싸면 뒤집을 수 있습니다.상대 돌을 감싸 뒤집을 수 있는 곳에만 둘 수 있습니다.만약 상대 돌을 뒤집을 수 있는 위치가 없다면 패스할 수 있습니다.둘 다 둘 곳이 없어 연속으로 패스를 하면 게임은 종료됩니다.게임 당 패스는 두번까지만 가능하고 세 번째 패스와 동시에 게임은 종료됩니다.보드를 모두 채우면 게임이 끝납니다.게임 종료 후 더 많은 돌을 가지고 있는 사람이 승리합니다.화면은 간단하면서 직관적으로 만들었습니다.제일 중요한 보..

1년이 넘는 기간동안 손을 놓고 있었네요.그 동안 회사일 + 여러 다른 일들을 하느라 못건드렸는데... 다 변명이고 반성하고 다시 열심히 써보겠습니다! 그래서 일단 앞으로의 계획을 써보려합니다.1. 포트폴리오 리팩토링 완료2. 오델로 Next.ts로 띄우기당장은 위 2가지를 진행하면서 진행사항을 블로그에 조금씩 끄적여보겠습니다!

입력단계용 이메일 입력 /^[^a-zA-Z0-9]*([a-zA-Z0-9]+)(@?)[^a-zA-Z0-9]*([a-zA-Z0-9]*)(\.?)[^a-zA-Z0-9]*([a-zA-Z]{0,3}).*$/ 전화번호입력 /^(\d{2,3})(\d{3,4})(\d{4,})$/ 검증용 영문자 숫자 특수문자 최소 하나씩 + 8 ~ 16자리 /^(?=.*[a-zA-Z])(?=.*[0-9])(?=.*[`~₩~!@#$%^&*()\-=_+|;:'",/?])[a-zA-Z0-9`~₩~!@#$%^&*()\-=_+|;:'",/?]{8,16}$/ 이메일 검증 /^[a-zA-Z0-9]{3,}@[a-zA-Z0-9]{2,}\.[a-zA-Z]{2,3}$/

프론트엔드에서도 입력자의 값을 검증하거나 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진법: ..