첫 번째 장 : 좋은 이름 붙이기 피해야 하는 명명법 그릇된 정보 피하기 - 실제 List가 아닌 변수를 -List라 명하지 않기 의미없는 변수명 피하기 - a1, a2, a3 같은 연속적인 숫자를 덧붙인 이름이나, Info, Data와 같이 의미가 불분명한 용어 추가하지 않기(Product와 ProductInfo의 차이는? 구분 못함…) 발음하기 어려운 이름 검색하기 어려운 이름(ex: 한 글자짜리 이름) - 한 문자 이름은 간단한 메서드에서 로컬 변수일 때만.(이름 길이는 범위 크기에 비례해야 한다) 인코딩한 이름 본인만 기억하는 이름 기발한 이름 추천하는 명명법 클래스/객체 : 명사나 명사구 사용하기. Manager, Processor, Data, Info 등과 같은 단어는 피하고 동사는 사용하지 ..

코드를 클린하게 짜는 게 기능을 빨리 완성하는 것보다 중요한가요? 코딩하는 모습을 녹화한 편집 세션을 재생해보면, 코드를 읽는 시간이 코드를 짜는 시간의 열 배를 넘김 새 코드를 짜는 과정에서 우리는 계속 기존 코드를 읽는다. => 코드가 읽기 쉬우면 새 코드를 짜기도 쉽다! 코드 퀄리티 보존을 위한 규칙 : 보이스카우트 규칙 캠프장은 처음 왔을 때보다 더 깨끗하게 해놓고 떠나라. 첫 번째 장 : 좋은 이름 붙이기 의도를 분명히 밝히기 int d; 처럼 아무 의미도 없는 이름은 코드의 의도를 드러내지 못한다. 코드의 목적과 기능에 맞는 이름을 붙이면 이해하기가 훨씬 쉽다!

클린 코드란 무엇인가? 읽기 쉬운 코드 남이 고치기 쉬운 코드 한 가지 목적을 수행하는 코드 테스트 케이스가 있는 코드 나쁜 코드가 쌓일수록 개발 생산성은 0에 수렴한다.

이전에 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은 이론적으로 웹에서 주어진 고유 리소스 주소이다. 세부 리소스 경로의 경우 요즘은 물리적 실체가 없는 웹 서버가 추상적으로 처리하지만, 예전에는 웹 서버내 실제 파일 위치를 나..