음.. 우선 개요부터 설명하자면, 예전부터 텍스트로만 구성된 간단한 웹 RPG게임을 자주 만들었었는데 이게 어느정도 수준에 오르니까 유저들이 직접 나무위키도 만들어주고.. 뭐 이런저런 사건사고가 많았다. 운영이나 좋아해주시는 분들도 많았는데, 정작 게임물 관리 등급 위원회에서 제지를 받아서 서비스를 종료하긴 했지만.. 따라서 이번엔 그냥 한국에서의 영향을 받지 않게끔. 아예 영문으로 제작하고, 해외에 배포를 해보기로 결정했다. 현재 서비스중인 도메인을 그대로 쓸 예정이고.. 음 현재 서비스중인 비영리 웹게임은 천천히 어느정도 런칭 준비가 되면 그때가서 오픈채팅에 공지를 하고 옮길예정.. 최초 서비스 됐던 프로젝트는 순수하게 html, js, css 만을 이용했었는데, 여기서 발생했던 장단점은 Vanill..
지난번 nextJS 포스팅에서 @vercel/postgres의 sql에 직접적으로 템플릿 리터럴을 넣으면 오류가 발생하는 부분에 대해 작성했었다. 일단 템플릿 리터럴도 그냥 되고, 편하니까 사용하고 있었는데 이왕 정식 명칭을 알았으니 이제부턴 있어보이게 템플릿 리터럴이라고 표현해야겠다. (그전까진 그냥 백틱이라고만 표현했음..) 템플릿 리터럴 자바스크립트에서 문자열을 생성하는 방법중 하나. ``으로 감싸진 문자열로, 변수, 표현식을 ${}의 형태로 사용할 수 있다. const name = 'John'; const greeting = `Hello, ${name}!`; console.log(greeting); // 출력: "Hello, John!" 그렇다면 sql`템플릿 리터럴`의 형태로 사용하던 함수는 뭘..
이전 포스트의 캐싱문제를 해결 후 바로 작업을 이어나가려..... 고했지만 table 생성 후 기존 users 데이터를 Insert하는 과정에서 오류가 발생했다. NeonDbError: syntax error at or near "$1" 오잉.. 보내는 sql을 콘솔에 찍어봐도 눈씻고 찾아봐도 $1이라는 문자열은 존재하지 않는다. 혹시나 하는 마음에 vercel dashboard UI에서 쿼리를 붙여넣기 해보았더니.. 이번엔 데이터가 제대로 들어간다. 그러면 또.. 뭔가.. 문제를 해결해야 하는데 흠.. 다시 늘 하던대로 확실한 부분 부터 정리를 하자면, 1. sql 쿼리 자체에는 문제가 없다. = @vercel/postgres에서 가져온 sql이 쿼리문자열을 뭔가 처리하는 과정에서 생긴 오류로 판단. ..
지난번 nextJS 포스팅에서 @vercel/postgres의 sql에 직접적으로 템플릿 리터럴을 넣으면 오류가 발생하는 부분에 대해 작성했었다. 일단 템플릿 리터럴도 그냥 되고, 편하니까 사용하고 있었는데 이왕 정식 명칭을 알았으니 이제부턴 있어보이게 템플릿 리터럴이라고 표현해야겠다. (그전까진 그냥 백틱이라고만 표현했음..) 템플릿 리터럴 자바스크립트에서 문자열을 생성하는 방법중 하나. ``으로 감싸진 문자열로, 변수, 표현식을 ${}의 형태로 사용할 수 있다. const name = 'John'; const greeting = `Hello, ${name}!`; console.log(greeting); // 출력: "Hello, John!" 그렇다면 sql`템플릿 리터럴`의 형태로 사용하던 함수는 뭘..
자바스크립트 데이터 타입(javascript data type) 자바스크립트에는 8가지 데이터 타입이 있고, 그중 7가지는 원시 데이터 타입이라고 한다. Number BigInt String Boolean null undefined Symbol Object 이중 Object를 제외한 나머지 7개가 원시 데이터 타입이다. 원시 데이터 타입(Primitive value) 변경할 수 없는 불변의 데이터 타입으로, 다른 데이터들을 구성하는 가장 기본적인 단위 한 번 생성되면 변경할 수 없다. 값을 직접 수정할 수 없다. 복사될 때 값 자체가 복사된다.(참조가 아닌 값 자체를 저장) 객체가 아니기 때문에 매서드를 가지지 않는다. *단, 일부 원시 값은 임시로 객체로 변환되어, 매서드를 사용 가능한 경우도 있다. ..
자바스크립트란? ‘웹페이지에 생동감을 불어넣기 위해’ 만들어진 프로그래밍 언어 프로그래밍 언어라고는 하지만 컴파일 없이 실행이 가능. 예를 들면, 브라우저에서 바로 스크립트를 입력해서 실행이 가능하다. 통상적으로 브라우저에서만 사용하기 위해 만들어졌지만 브라우저 밖에서도 자바스크립트를 돌아가게 해주는 엔진이 있으면 브라우저 외의 환경에서도 동작이 가능하다. 하지만 통상적으로 브라우저 내에서 작동하는 자바스크립트를 기반으로 포스팅을 이어갈 계획이다. 자바스크립트로 브라우저에서 다양한 것들을 할 수 있는데 대표적으로 아래의 작업들을 수행할 수 있다. 웹페이지에 새로운 HTML을 추가하거나 기존 HTML, 혹은 스타일 수정하기 ( CRUD ) 사용자 행동에 반응하기 ( 클릭, 스크롤, 기타 등등.. ) 클라이..
개요 38가지 자바스크립트 튜토리얼에서 갑자기 뜬금포로 플랫포머 게임 만들기가 나와버려서.. 해당건은 진행 안하는걸루 ^^.. 포스트 한 5개분량은 써야될것 같아서, 추후 시간이 나면 진행하는걸로 결정했다. 그런고로 이번에는 요즘 회사에서 진행하는 프로젝트중 이벤트 페이지에 들어가는 룰렛 기능을 작업했었는데, 그 룰렛을 만드는 법에 대한 튜토리얼을 작성해보려고 한다. 역시나 완성본 링크부터 공유를 하고 시작을 하겠다. https://mooky1007.github.io/roulette/ Roulette mooky1007.github.io 아, 룰렛의 이미지는 그냥 구글에서 검색해서 아무거나 나온걸로 쓴건데.. 만약 문제가 된다면 댓글남겨주시면 바로 교체하도록 하겠습니다~ 이번 룰렛 개발 작업의 주요 요청 ..
개요 [JS] 아코디언 라이브러리 - 1에서 기본적으로 만들었던 아코디언 라이브러리를 조금 더 업데이트 해보자. 작업 세부 사항 전체 아코디언 아이템들을 접거나, 펼칠 수 있는 매서드 제작 초기 셋팅시 className 및 초기 펼침 여부, 중복 펼침 허용 여부 설정 Accordion class Accordion { constructor(el, config) { this.el = document.querySelector(el); this.open = config?.open || false; this.multi = config?.multi || false; this.className = config?.className || 'active'; this.init(); } init() { this.items =..
개요 그동안 신나게 자바스크립트로 이런저런 문제도 풀고 뭐 만들기도 하고.. 로직도 만들고 해봤으니 이제 그 자바스크립트로 실제 html 페이지를 조작해보자. 각각의 자세한 설명은 다른 포스트에서 하나하나 깊게 해보고, 이번 포스트에서는 그냥 간단한 CRUD(create, read, update, delete) - 즉, 생성, 읽기, 수정, 삭제를 해보자. 준비물 크롬 브라우저(다른 브라우저도 가능하지만.. 따라하려면 크롬으로) 인터넷 실습 환경 설정 우선 크롬 브라우저를 열어서 다음 포털을 열고, F12 혹은 Ctrl+Shift+i 키로 개발자 도구를 열고, "콘솔"탭을 눌러 아래와 같은 화면이 나오면 준비 완료. CRUD Create - 특정 요소를 생성해서 페이지에 추가해보기 사심을 담아 내 블로그..
