cotnmin

React-Native로 간단한 모바일 브라우저 만들기갑작스럽게 기존에 하려던 프로젝트가 아닌 React-Native 프로젝트를 준비하게 되었습니다.모바일 브라우저의 기능을 구현하면서 코드를 작성할 때 외에는 AI의 도움을 여러모로 받아보려 합니다.단순히 React-Native을 연습할 겸 브라우저를 만들어보려는 거지만요 제가 재미로 쓸만한 정도는 되었으면 합니다.1. 기획하기일단 저는 React-Native을 기획을 연습하는 게 아니니 빠르게 Claude화 함께 진행했습니다.Certainly, I'd be happy to help you plan and create a mobile browser app with React Native. Let's break this down into steps:Plan..

원래 여러 계획을 세우고 블로그도 열심히 쓰려했는데 예상치 못한 급한 일 들에 All Stop 되었습니다. ㅠㅠ 네 변명이라면 변명인 근 한 달간의 근황을 적어봅니다. ㅎㅎ  7월 중순 사건은 발생했습니다. 살던 집에서 보름 뒤에 새 입주자가 들어오기로 했다고 나가래서 이사 갈 집을 급하게 구해야 했습니다.이미 연장한 중기청 80% + 목적물 변경 전세로 이사하려다 보니 전세사기 걱정 없는 안전한 집이며 회사와의 거리 역과의 거리 방크기 등 수많은 조건을 만족하는 집을 찾으려다 보니 쉽지 않았습니다. 알아본 집 중 가장 괜찮은 집은 또 퇴거일과 입주일이 맞지 않아서 이사를 두 번 해야 하는 불상사까지 발생했습니다. 그래도 새 집주인분이 계약일도 조정해 주시고 시원하게 계약해 주셔서 지금 집이 너무 맘에..

어느 날 유튜브를 보던 중 조코딩 채널에서 해커톤을 진행한다고 해서 도전해 보기로 했습니다. ㅎㅎ수상을 노리기보다는 재밌어 보여 진행하는 느낌으로 부담 없이 참여해보려 합니다.(게다가 대회 참여만 해도 피자를 준답니다...)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..