지피티로 코드치기학 개론(씹덕컨샙주의)

프갤러 · 2024.07.08 21:54:42

7ce58473e4d63ca36cbb84e442877c65700ffa467dbdcb3b7b33407f9e5f646bfb9c

보보보보... 봇치데스.

원래는 닉도 봇치 혹은 코드히어로라 하려 했는데

디시 운영자 놈들이 프갤은 프갤러만 쓰도록 만들어 놨어요.

이게 원종이 배출한 디시의 고담시티라 그런건가 했는데 그냥 다 그런거라고요.

어쨌든 생성 인공지능에 대해서는 크게 두가지의 존나 극단적인 의견으로 나뉘는거 같아요.

1. 이거 다 거품이다. 이걸로 할 수 있는거 좆도 없다!

2. 이제... 우리 다 끝났다. 인간은 공부할 필요가 없다.

결론적으로 말하면 봇치짱은 둘 다 씨발 헛소리라고 생각해요..

1. LLM은 구조적으로 데이터 인풋이 존나 커지면 커질수록 예가 얼을 타요. 주로 얀르쿤이란 할아버지가 그거 지적하는 걸로 유명한데, 거기에 대한 전문가적인 반박은 봇치땅이 알기론 없어요. 오픈 에이아이 사장으로 유명한 샘 알트만이란 개인아저씨도 말을 돌려 말할뿐, 그걸... 어찌.... 반박하지는 못해요.

2. 하지만 작은 것은 존나 잘만들어요. 따라서 우리가 할것은.

1. 특정한 로직을 머릿속에 떠올리고.

2. 그 로직을 어떤식으로 할건지 나눠서 지피티한테 잘 시키는 거에요.

viewimage.php?id=3dafdf21f7d335ab67b1d1&no=24b0d769e1d32ca73de981fa11d02831c5c0f05347e0c24fad56a75fb953cc6cc1ee3f389a3fd6a7c627d226809e6e34bf3edc1278b4ae611a74b31290c40ed7fb0d195135c390

그러기 위해서 우선 대다수의 대다수의 문제는 mvc 패턴 하에서 해결해야 된다고 봐요.

저 패턴 정도는 머릿속에 때려박아도 손해보는 일 없을 거에요.

요는 주 데이터 영역.

주 데이터를 조작하는 영역.

주 데이터를 보여주는 영역.

이렇게 3개를 나누는 거에요. 보통 웹 프레임워크 공부할떄 저걸 왜쓰는지도 모르고 ... 우겨 넣다시피하는 패턴이지만

사실 웹 뿐만 아니라 대다수의 것. 가령 게임이라면...간단한 퍼즐게임부터 스타크래프트 같은 실시간으로 진행되는 복잡한 게임도 저걸로 해결이 쌉가능해요.

저렇게 하면 큰 문제를 나누기도 쉽고.

각각의 영역중 하나가 버그를 일으켜도 나머지에 영향이 잘 미치지 않게 될거에요.

물론 봇치짱은 시간이 없으니까... 일단 여기서는 존나 간단한걸 만들거에요.

바로

https://play2048.co/

2e8fc83ce3870d88459cdaa004da0065a5567b611a73cf190f7f9068d7d5775a12035a4e87e39b90428f250ccf46dd192c45a6cd9d5ecfc79146934daddac89a0a6319383a130d85120da20daacb9a34c2273efb557e6c69d987dc8ed7141447a28e0d1ad0

이 게임. 2048 이에요.

굳이 이게임인 이유는 간단해요. 4*4 배열에 데이터가 전부 들어가 있어서

데이터 중심으로 설계하고 해당 데이터의 컨트롤러와 뷰를 빠르게 설계한다는 것이 왕도라는 봇치짱의 계획에 맞는거에요.

생성 인공지능은 지피티 짱을 쓸거에요. 사실 클로드 3.5가 성능적으론 앞서지만 대부분 지피티를 사용하기 떄문이에요.

mvc 패턴을 지키는 것도 딱히 한것은 없어요. 그냥... 모델 데이터는 전역변수에 때려박고 뷰는 css와 html로 애당초 분리되어 있어요

사실 그거면 충분해요. 저정도 작업에선

ac5939a70001b942813e33669735c1bcc2a977c21c773585f0dabed5e42e074dc2d2542d4ea3fd29c0a114c2d1971e9edc8c0dd7680bb613fbbf51679f045de9c64a61ce3fa1f066a903a55e73

주 데이터는 전역변수로 만들 거에요.

주 데이터니까 전역변수를 써도 쌉 괜찮은 거에요.

지피티짱은 다음과 같은 코드를 만들어 줘요.

<!DOCTYPE html>

<head>

<style>

table {

border-collapse: collapse;

width: 50%;

margin: 20px auto;

}

th, td {

border: 1px solid black;

padding: 10px;

text-align: center;

}

</style>

</head>

<body>

// 4x4 배열을 전역 변수로 선언하고 초기화

var array = Array.from({ length: 4 }, () => Array(4).fill(0));

// 배열을 HTML 표로 출력하는 함수

function displayArray() {

var container = document.getElementById('arrayContainer');

var table = document.createElement('table');

for (var i = 0; i < array.length; i++) {

var tr = document.createElement('tr');

for (var j = 0; j < array[i].length; j++) {

var td = document.createElement('td');

td.textContent = array[i][j];

tr.appendChild(td);

}

table.appendChild(tr);

}

container.appendChild(table);

}

// 배열 출력 함수 호출

displayArray();

</script>

</body>

</html>

직접 분리해도 되는 부분이지만....

존나 귀찮으니 분리해달라 했어요.

몇달 전같으면 직접 분리하는게 빨랐겠지만

요즘은 빠르게 해줘서 속도는 비슷비슷해요. 그리고 덜 귀찮죠.

ac5939a70001b942813e33669735c1bcc2a977c21c773585f0dabed5e42e074dc2d2542d4ea3fd29c0a114c2d1971e9edc8c0dd7680bb613fbbf52679b005de9ef5dea8e9967b992a3fda55f36

ac5939a70001b942813e33669735c1bcc2a977c21c773585f0dabed5e42e074dc2d2542d4ea3fd29c0a114c2d1971e9edc8c0dd7680bb613fbbf54679e0e5de923d261d993adee7da3b8dd3916

주 배열을 html과 연동시켜요.

<!DOCTYPE html>

<head>

<style>

table {

border-collapse: collapse;

width: 50%;

margin: 20px auto;

}

th, td {

border: 1px solid black;

padding: 10px;

text-align: center;

}

</style>

</head>

<body>

</body>

</html>

...

// 4x4 배열을 전역 변수로 선언하고 초기화

var array = Array.from({ length: 4 }, () => Array(4).fill(0));

// 배열을 HTML 표로 출력하는 함수

function displayArray() {

var container = document.getElementById('arrayContainer');

container.innerHTML = ''; // 기존 내용을 초기화

var table = document.createElement('table');

for (var i = 0; i < array.length; i++) {

var tr = document.createElement('tr');

for (var j = 0; j < array[i].length; j++) {

var td = document.createElement('td');

td.textContent = array[i][j];

tr.appendChild(td);

}

table.appendChild(tr);

}

container.appendChild(table);

}

// 4x4 배열에서 랜덤한 위치의 값을 2 또는 4로 변경하는 함수

function updateRandomCell() {

var emptyCells = [];

for (var i = 0; i < array.length; i++) {

for (var j = 0; j < array[i].length; j++) {

if (array[i][j] === 0) {

emptyCells.push({ x: i, y: j });

}

if (emptyCells.length > 0) {

var randomIndex = Math.floor(Math.random() * emptyCells.length);

var cell = emptyCells[randomIndex];

array[cell.x][cell.y] = Math.random() < 0.5 ? 2 : 4;

displayArray();

} else {

console.log("No empty cells available");

}

// 배열 출력 함수 호출

displayArray();

하니까 요청하지도 않은 테스트 버튼까지 줬어요. 일단 냅뒀어요.

ac5939a70001b942813e33669735c1bcc2a977c21c773585f0dabed5e42e074dc2d2542d4ea3fd29c0a114c2d1971e9edc8c0dd7680bb613fbbf56679a015de955ccf231eda6ce5d8b78ec4c55

그 다음에는 이렇게 쓸거에요. 생각해보니 저걸 하나 저걸 자스로 하나 큰 차이는 없을거 같아요.

하지만 좀 격식있게 말하면 자연어 코딩인 거에요.

function processArray(arr) {

if (arr.length !== 4) {

throw new Error("Array must contain exactly 4 elements.");

}

// 0을 제외한 숫자를 왼쪽으로 밀기

let nonZeroArray = arr.filter(num => num !== 0);

while (nonZeroArray.length < 4) {

nonZeroArray.push(0);

}

// 숫자 합치기 로직 적용

if (nonZeroArray[0] === nonZeroArray[1] && nonZeroArray[2] === nonZeroArray[3]) {

// 2-1. 앞 두개, 뒤 두개가 같은 경우

return [nonZeroArray[0] + nonZeroArray[1], nonZeroArray[2] + nonZeroArray[3], 0, 0];

} else if (nonZeroArray[0] === nonZeroArray[1]) {

// 2-2. 앞 두개가 같은 경우

return [nonZeroArray[0] + nonZeroArray[1], nonZeroArray[2], nonZeroArray[3], 0];

} else if (nonZeroArray[2] === nonZeroArray[3]) {

// 2-3. 뒤 두개가 같은 경우

return [nonZeroArray[0], nonZeroArray[1], nonZeroArray[2] + nonZeroArray[3], 0];

} else if (nonZeroArray[1] === nonZeroArray[2]) {

// 2-4. 두번째와 세번째가 같은 경우

return [nonZeroArray[0], nonZeroArray[1] + nonZeroArray[2], nonZeroArray[3], 0];

} else {

// 어떤 경우에도 해당하지 않는 경우

return nonZeroArray;

}

// 테스트 예제

console.log(processArray([2, 0, 4, 4])); // [2, 4, 4, 0]

console.log(processArray([0, 0, 2, 4])); // [2, 4, 0, 0]

console.log(processArray([2, 2, 4, 4])); // [4, 8, 0, 0]

console.log(processArray([2, 2, 4, 8])); // [4, 4, 8, 0]

console.log(processArray([4, 8, 2, 2])); // [4, 8, 4, 0]

console.log(processArray([2, 4, 4, 2])); // [2, 8, 2, 0]

대충 쓱 흝어보니 문제 없어 보여요.

그 다음에는...

ac5939a70001b942813e33669735c1bcc2a977c21c773585f0dabed5e42e074dc2d2542d4ea3fd29c0a114c2d1971e9edc8c0dd7680bb613fbbf59679d0e5de9eef46ef3c1133f935a131d5dd2

왼쪽 키와 위쪽 키의 동작 함수를 만들어 달라 할거에요.

테스트 해보니까 잘 작동해요. 원래느 gif 를 넣으려고 했는데 넣고 보니까

존나 버벅거려서 뺀버린 거에요.

오른쪽과 아래 키는 그냥 왼쪽 키와 위쪽 키의 함수에 각각 열과 행을 뒤집는 함수를 더해서 동작시키면 되요.

물론 이 역시 지피티가 완료시켜 줘요.

이거면.... 로직은 ....

75ec8924b7813cf338ba8ee741d0706f09eb43d5dc5f854c67324f61310f90d7e8686d3d3308ed3055e1f6d0f354d571

사실상 끝이에요.

여기까지만 만들어도 아무런 문제가 없어요.

하지만 여기서 끝나면 섭하니 css를 입혀볼 거에요.

물론 지피티가.

사실 로직은 대충 5분~ 10분만에 만든 기분인데 css는 좀 걸렸어요.

애가 css 잘짠다고 하는데... 평소 짜는거나 잘짜요.

ac5939a70001b942813e33669735c1bcc2a977c21c773585f0dabed5e42e074dc2d2542d4ea3fd29c0a114c2d1971e9edc8c0dd7680bb613fbbe57679a015de9833605a16f0ac46d89287183ca

이새끼가 말귀를 못쳐들어 먹어서 무려 무려 무려 6번이나 리트한 거에요.

ac5939a70001b942813e33669735c1bcc2a977c21c773585f0dabed5e42e074dc2d2542d4ea3fd29c0a114c2d1971e9edc8c0dd7680bb612fbb956679a065de945a35df77c94c69fdbed81d28a

색깔은... 애가 말귀를 못알아 먹어서 구별할 겸 넣어달라고 헀어요.

그나마 이걸로 했어요. 근데... 애가 직사각형이에요.

보아하니 반응형으로 디자인 해서 이렇게 된거 같아요.

하여. 반응형 좆까고 고정형으로 만들어달라고 하니.

ac5939a70001b942813e33669735c1bcc2a977c21c773585f0dabed5e42e074dc2d2542d4ea3fd29c0a114c2d1971e9edc8c0dd7680bb613fbbe59679a005de92a3307fdaacdf0adab8ede59aa

ac5939a70001b942813e33669735c1bcc2a977c21c773585f0dabed5e42e074dc2d2542d4ea3fd29c0a114c2d1971e9edc8c0dd7680bb612fbb851679f045de9aa6624472e9135c1b139e4ec8a

이렇게 되도록 css 를 만들어 줬어요. 이제 솔찍히 거의 다 끝난거에요.

ac5939a70001b942813e33669735c1bcc2a977c21c773585f0dabed5e42e074dc2d2542d4ea3fd29c0a114c2d1971e9edc8c0dd7680bb613fbb951679f015de90979c7adfe8181b9829e1010fa

ac5939a70001b942813e33669735c1bcc2a977c21c773585f0dabed5e42e074dc2d2542d4ea3fd29c0a114c2d1971e9edc8c0dd7680bb613fbb951679d055de93d03da23b12c16e3a049efec

ac5939a70001b942813e33669735c1bcc2a977c21c773585f0dabed5e42e074dc2d2542d4ea3fd29c0a114c2d1971e9edc8c0dd7680bb613fbb951679c065de9fce842d6b2a9cee9f48c2812c1

맨 아래 부분은 Js도 좀 건드린 작업이지만 대부분 css만 건드렸어요.

하면... 와...

ac5939a70001b942813e33669735c1bcc2a977c21c773585f0dabed5e42e074dc2d2542d4ea3fd29c0a114c2d1971e9edc8c0dd7680bb613fbbd51679e0f5de9af88df2d1139e3c8940ab98f

하면 대충 뚝딱 만들어줘요. 여기서 니지카짱이나 키타짱 같은 디자인 감각이 뛰언나 사람은 좀더 예쁘게 만들수도 있을 거에요.

하지만 지금은 봇치짱 인격이고.... 귀찮으니까 노란색 부분 폰트만 도로 까만색으로 하도록 할거에요. 하면....

아래와 같이 완성이 되어요.

ac593ba70018b940a53e325c9734e1bca596832d309329801be6a3d3702c29d7cede

물론 이건... 존나 간단한 작업이에요. 널리 알려진 게임이기도 하고

그냥 코드를 쳐라 지피티 하면 기깔나게 뽑아줄 거에요. 아마 깃허브에서 퍼온 css 도 저보단 났겄죠.

하지만....

이미 있는거 카피하려 하는게 아니잖아요.

봇치짱 수준이여도... 그리고 진정한 개발자니 그레윗 프로그래머니 하는 사람들은.

저걸로 생산성은 수십배로 끌어올릴 수가 있어요.

머릿속에 로직을 새우고, 해당 로직의 구현을 패턴에 따라 나누고 조그만 패턴을 인공지능에게 일임하는 식으로요.

내 모두 아키텍트가 되어야 해요.

24b0d121e0c176ac7eb8f68b12d21a1d2fad6dc0

그렇다고 이딴거 사보진 말고요.

저거 순 약팔이에요.

번호	제목	글쓴이	작성일	조회	추천
설문	사이버 렉카로 가장 피해 입은 것 같은 스타는?	운영자	24/07/22	-	-
2730142	2020년 ~ 2022년 국비 교육자들 근황 통계 내보고싶음 [7]	호루스	07.24	105	0
2730140	maui로 만든앱 첨봤음 [4]	foobar	07.24	71	0
2730138	개발자 채용 시장 어카냐 [3]	ㅇㅇ(210.178)	07.24	190	0
2730134	회사가 바보도아니고 진짜 1인분도 못하면 짤림 [14]	프갤러(121.170)	07.24	130	0
2730133	이거 입사 해야되냐? [13]	프갤러(39.119)	07.24	111	0
2730129	근데 솔직히 어떤 저능아새끼가 카카오 클라우드를 쓰냐? [2]	텬됴대한의아들	07.24	69	0
2730128	나보다 개발잘하면 미친놈임 [16]	멍청한유라ㅋ	07.24	172	0
2730127	근데 골드정도 코딩테스트로 뽑으면 살아남는 비율 어느정도됨? [4]	딘퐁	07.24	62	0
2730125	[kakao x goorm] 구름톤 딥다이브 프로덕트 매니지먼트 과정	allforyoung(14.32)	07.24	32	0
2730124	블로그 하루에 1000명 넘게 찍히는데 1인 사업 급꼴리노 [10]	호루스	07.24	85	0
2730121	신입 개발자 오늘 한 일.list [5]	cvs.	07.24	138	0
2730120	뭐야 티몬 위메프 사태 근들갑 레전드네 ㅋㅋㅋㅋㅋㅋ [11]	딘퐁	07.24	153	0
2730118	3년의 법칙이 잘하고 못하고만의 문제는 아니더라고 [19]	호루스	07.24	99	0
2730117	개발자 토익 필요함?? [6]	프갤러(222.235)	07.24	98	0
2730116	그런데 카카오가 젤 실력앖는 애들이 대가리차지하는곳이지? [1]	텬됴대한의아들	07.24	58	0
2730114	애널의 수면영상✨ [2]	♥냥덩이♥	07.24	70	0
2730112	티몬 위메프 걱정 없지 않겠나?? [7]	AIRE	07.24	113	1
2730111	근데 위메프 티몬 개발직 2년차는 퇴직금떼먹혀도 개이득아니냐? [1]	텬됴대한의아들	07.24	82	0
2730110	오늘도 한남들이 쳐둔 유리장벽에 난 좌절하고말아 [8]	멍청한유라ㅋ	07.24	43	0
2730109	아니 뭐이리 개발자가 되려는 사연있는 비전공자들이 많은거임? [1]	딘퐁	07.24	72	0
2730108	지방은 엔지니어가 많네 [1]	ㅇㅇ	07.24	55	0
2730107	공부해서 뭐하냐 [1]	ㅇㅇ	07.24	38	0
2730106	[kakao x goorm] 구름톤 딥다이브 백엔드 개발자 과정 모집	allforyoung(14.32)	07.24	32	0
2730105	개발인생 유일한 후회가 싸피 대신 42 간 것 [5]	호루스	07.24	108	0
2730104	아렉스 왜 해킹당했는지 나왔다	멍청한유라ㅋ	07.24	34	0
2730103	구름톤 보안과정 넣었다	ㅇㅇ	07.24	33	0
2730101	장비 관리 업체 이런곳만 가도 풀칠은함 [2]	호루스	07.24	51	0
2730100	게이들 다들 일 잘다니고 있음?	호루스	07.24	32	0
2730099	백수로있지말고 쿠팡이라도 돌아라 예전과다르게 쿠펀치만 깔아도 바로가능하다	프갤러(125.240)	07.24	50	0
2730098	[kakao x goorm] 구름톤 딥다이브 프론트엔드 개발자 과정 모집	allforyoung(14.32)	07.24	45	0
2730097	솔까 PC유지보수쪽 가라 [6]	프갤러(121.170)	07.24	98	0
2730096	결국에 개발 살아남은 사람들은 억대 인생산다 [2]	프갤러(14.39)	07.24	86	0
2730095	외국사이트는 쿠키팝업땜에 짜증남 [2]	헬마스터	07.24	47	0
2730094	유관업계는 블루오션입	ㅇㅇ	07.24	42	0
2730093	개발 망한 이유 [2]	ㅇㅇ	07.24	163	0
2730092	개발자 말고 다시 노가다뛰러가야하나.. [5]	ㅇㅇ(112.161)	07.24	95	0
2730091	지금이라도 전산직으로 돌려야하냐.. 중경외시 컴공인데 [9]	딘퐁	07.24	126	1
2730088	다들 취업됨? [10]	ㅇㅇ(112.161)	07.24	142	0
2730087	맨날 일많다고 공개적인 장소에서 투덜대면서 [1]	프갤러(121.170)	07.24	36	0
2730086	rx씨랑 멍유씨 같이 돌아가신거 아냐? [4]	헬마스터	07.24	52	1
2730085	[AI답변] Gemini 가 알려주는 Coding 백과. [2]	+abcd3421	07.24	40	1
2730084	형님들 컴퓨터랑 맥미니 업그레이드 하려 할까 고민중인데 생각만,	도리스아(112.170)	07.24	60	0
2730083	할 일 목록 [4]	주아	07.24	35	0
2730082	나님 냥덩이로서 민폐 캣충들은 다 죽여야한다는것에 동의함	♥냥덩이♥	07.24	21	0
2730081	2시까지만 자야지	주아	07.24	20	0
2730080	[유명강의] 손흥민처럼 코딩하라 ㅡ 1강	코딩낭인(58.236)	07.24	30	0
2730077	안녕하세요 형님들. 국비 학원쪽으로 질문 하나만 받아주세요 [9]	프갤러(58.29)	07.24	107	0
2730076	개발 다 부질없다 [2]	ㅇㅇ(210.178)	07.24	80	1
2730074	머리가 안 돌아간다 [2]	주아	07.24	42	0
2730073	+ 캘린더나 메모 영어로 쓰면 영어 공부에 조금이라도 도움될까요??	qu(121.171)	07.24	24	0

최근 방문

즐겨찾기

즐겨찾기 갤러리

갤러리 이슈박스, 최근방문 갤러리

연관 갤러리

개념글 리스트

차단하기

[프로그래밍 갤러리]

갤러리 본문 영역

게시물을 간편하게 NFT로 만들어 보세요!

NFT 발행 방법

NFT 발행

비회원 글삭제,수정

추천 비추천

댓글 영역

① NFT 발행

② NFT 구매

하단 갤러리 리스트 영역

왼쪽 컨텐츠 영역

갤러리 리스트 영역

페이지 이동

오른쪽 컨텐츠 영역

알림 설정

알림

디시콘 리스트

디시콘

디시콘 검색결과(0)

인기 디시콘

지갑 연결