Sadie의 개발일기

이전에 GDD(Gpt Driven Development)로 만들었던 카드 짝 맞추기 게임. GPT 기반으로 코딩하기에는 확실히 HTML+CSS+Vanilla JS 스택을 선택하는 것이 가장 심플하고 대답도 잘 해주는 선택지겠지만... 나는 웹 게임을 붙여서 개발하겠다는 취지로 빌드해 둔 Next.js 앱이 있었고 거기에 카드 짝 맞추기 게임을 이식하고 싶었다. 그래서 GPT가 1부터 100까지 짜 준 게임 코드를 리액트 기반으로 바꾸기로 했다! 물론 GPT에게 코드를 맡겨서. 하지만 HTML 기반 프로젝트를 처음부터 코딩하는 것과 다르게, 이미 존재하는 리액트 기반 프로젝트에 코드를 변환하여 이식하는 일은 쉽지 않았다... 예전엔 순도 100%의 GPT 코드만으로도 잘 돌아가는 게임을 만들 수 있었지만,..

최근 심심한 나머지 GPT를 활용해서 카드 짝 맞추기 게임을 개발한 적이 있었다. 직접 머리 싸매고 코딩하기는 너무나 귀찮아서, GPT가 시키는 대로만 복사해서 만들었다. 그 결과, 약 30분만에 HTML, JS, CSS로 애니메이션이 담긴 멀쩡한 웹 게임 하나를 만들 수 있었다. 직접 타이핑한 코드 한 줄도 없이, 오직 GPT의 대답만으로. 그 과정이 무척 재밌었고, 마침 GPT가 예전 Chat 기록을 이제 다 보관해주는 만큼, 내 GPT 주도 개발 과정을 프롬프트와 결과 위주로 기록하려 한다. 먼저 GPT 님이 카드 짝 맞추기 게임을 모르실 수도 있기 때문에, 확실히 이 게임에 대해 알고 있는지 확인하고자 했다. 잘 알고 계셨다. 그래서 복잡하게 프롬프트 짤 것 없이 간단하게 만들어 달라고 했다. 자..

HTML 엘리먼트에 커스텀 attribute로 data-로 시작하는 이름을 지정하면, dataset으로 가져올 수 있다. 예를 들어 다음과 같은 html이 있을 때, ... div입니다 js에서 이렇게 가져올 수 있음 const $duck = document.querySelector("#duck"); const { name, age, superLong } = $duck.dataset; console.log(superLong); //superduperlong

크래프톤 정글 동기 언니가 같이 가보자고 했던 위민후코드 테크라운지. 개발자 커뮤니티에서 들어봤던 단체여서 관심이 갔고, 개발자 모임에 대한 호기심으로 주저하지 않고 신청! 지난 주 주말에 갔다 왔다. 참가 소감 우선 가기 전에는 정말 개발자들만 모이는 모임인 줄 알아서, 개발자 컨퍼런스처럼 기술 도입과정이라든지 트러블 슈팅 과정을 공유하는 그런 자리일까? 했었는데, 개발자뿐만 아니라 UI/UX 디자이너, PM 등 IT 분야에 종사하는 분이라면 모두 올 수 있는 그런 행사였다. (나처럼) 현업자가 아닌 해당 분야의 취업 준비생도 참가할 수 있었고.... 사실 크래프톤 정글을 통해 개발자를 준비하는/현업 개발자인 사람들과의 교류는 많이 가졌는데, 오히려 디자이너분이나 기획자 분처럼 같이 협업을 하게 될 사..

requestAnimationFrame이란? 자바스크립트에서 기본으로 제공하는 Window 인터페이스의 메소드이다. 왜 사용하나요? 만약 자바스크립트로 애니메이션을 구현할 때 단순히 setTimeout 혹은 setInterval을 사용하여 특정 코드를 반복 실행시키면 여러 문제점이 존재한다. 애니메이션을 자연스럽게 만드려면 fps(1초에 몇 개의 프레임이 넘어가는지의 단위)를 신경써야 한다. 사람의 눈은 60fps에서부터 애니메이션을 부드럽다고 느낀다고 한다. 이를 위해서는 16.666 밀리세컨드마다 프레임이 바뀌도록 구현해야 한다. 하지만 setTimeout이나 setInterval을 통해 코드를 반복 실행시키면 콜백 코드 부분이 프레임 시작 시간에 맞춰 실행됨을 보장하지 못한다. 타이머 함수에서 콜백..

자바스크립트는 기본적으로 모듈 시스템을 지원하지 않는다. 모듈 : 애플리케이션을 구성하는 개별적 요소로서 재사용 가능한 코드 조각. 모듈들은 자신만의 파일 스코프(모듈 스코프)를 갖는다. ⇒ 모듈의 모든 자산(변수, 함수, 객체 등)은 기본적으로 캡슐화되어 다른 모듈에서 접근할 수 없다. 모듈은 공개가 필요한 자산에 한정하여 명시적으로 선택적 공개가 가능하다(export). 또한 모듈 사용자는 모듈이 공개한 자산 중 일부 또는 전체를 선택해 자신의 스코프 내로 불러들여 재사용할 수 있다(import). 자바스크립트는 모듈이 성립하기 위해 필요한 파일 스코프와 import, export를 지원하지 않는다. 즉, 자바스크립트는 파일마다 독립적인 파일 스코프를 갖지 않으므로, 자바스크립트 파일을 여러 개로 분..

주소창에 google.com을 치면 무슨 일이 일어나나요? 주소창에 url을 입력하고 엔터를 치면, url의 도메인 이름이 DNS를 통해 IP 주소로 변환되고, 이 IP 주소를 갖는 서버에 요청이 전송된다. 도메인 이름 : 인터넷의 실제 IP주소와 연결된, 기억하기 쉬운 이름. (ex : google.com) DNS : 사람이 읽을 수 있는 도메인 이름(예: www.amazon.com )을 머신이 읽을 수 있는 IP 주소(예: 192.0.2.44)로 변환하는 시스템 해당 URL 요청의 경로에 따른 html 파일이 보내진다. URL은 이론적으로 웹에서 주어진 고유 리소스 주소이다. 세부 리소스 경로의 경우 요즘은 물리적 실체가 없는 웹 서버가 추상적으로 처리하지만, 예전에는 웹 서버내 실제 파일 위치를 나..

https://school.programmers.co.kr/learn/courses/30/lessons/42586?language=javascript 나의 풀이 슈도 코드 progresses 돌려서 완료일까지 남은 날짜수 담은 goalQueue 배열 정의 현재 날짜 date 변수를 정의하고 answer에 넣게 될 complete 변수 정의 goalQueue의 맨 앞에 있는 애 가져옴(goal) 해당 goal과 date 비교 만약 date가 goal보다 크거나 같으면 pop으로 goalQueue에서 비우고 배포 처리, complete 1 증가 위 3~5를 계속 반복. goal이 date보다 작게 나오면 반복 탈출 한번에 배포처리한 수 complete를 answer에 넣고 complete 0으로 초기화. d..

https://school.programmers.co.kr/learn/courses/30/lessons/42579 나의 풀이 슈도 코드 먼저 장르별로 담고 있는 음악과 총 재생수를 저장하기 위한 genreDic 딕셔너리를 정의한다.genreDic = { classic : { music : [각 장르에 담긴 고유번호 배열], count : 각 장르의 재생수 합 }, pop : { ... }, ... } genres를 반복문으로 돌리면서 genreDic의 각 장르별 music 배열 데이터를 채운다. genreDic 객체의 각 장르별 music 배열을 반복문으로 돌리면서 plays 배열을 참고해 count 합계를 계산하고, genreDic의 count를 채운다. genreDic의 장르들을 count들로 sor..

팀 프로젝트에서 서버 측과 연동하기 위해 스프링부트와 낮부터 씨름하고 있는데 계속 에러가 났다. 문제 상황 빌드 과정 전체가 에러의 연속이었는데, 어찌어찌 헤쳐나가다 mysql을 깔래서 깔고 서버를 실행시켰더니 에러 발생. [Spring Boot] Access denied for user 'root'@'localhost' (using password: YES)위 에러메시지를 중심으로 찾아보니 mysql 로그인 오류라고 한다. 그러나 해당 메시지로 구글링을 하면 mysql 자체에서의 해결법이 나오고, 나처럼 스프링부트 환경에서 이런 에러를 해결한 경우가 없어서 조금 헤맸다. 해결법 gradle 사용 시 스프링 부트에서 mysql 연동을 하기 위해서는 src/main/resour..