chatGPT가 생각하는 가장 멋진 JavaScript 코드는 무엇일까? (2) (feat. IIFE)

 

chatGPT가 생각하는 가장 멋진 JS 코드 (2)

최근 chatGPT에 GPT-4가 업데이트되었다.
GPT-3.5가 나온 지 얼마나 됐다고 벌써 GPT-4가 나오다니...
심지어 GPT-4를 탑재한 MS는 미쳐 날뛰고 있다.
워드, 엑셀, PPT 들을 자동으로 생성해주고 분석까지 다 해준다니...
구글이 몰락할 것이라곤 생각하지 않지만 MS가 이번에 칼을 제대로 꺼내든 것 같다.
기술의 발전이 정말 빠른 속도로 이루어지고 있는데 너무 빨라서 무서워진다.
과연 내 일자리는 남아 있을 수 있을까?
사실 내 포지션보다는 연구부서, 보고서 작업을 하는 팀의 포지션이 가장 위험해 보인다.
제안서, 보고서 등을 모두 AI가 생성해 준다면 사실 1인 기업도 충분히 가능해 보이기도 한다.
이런저런 생각을 최근에 많이 했지만 결론은 이 기술의 발전 속도에 얼른 익숙해지고
활용할 줄 아는 능력을 키우는 것이 더 중요하다고 개인적으로 생각한다.
지금은 chatGPT를 통해 주관적인 결과를 출력해서 리뷰하는 포스트를 작성 중이지만
나중에 좀 더 익숙해진다면 여러 가지 시도를 해보아야겠다.

서론이 길었는데, 이번에도 chatGPT가 생각하는 가장 멋진 JavaScript 코드를 질문해 보았다.
이번엔 GPT-3.5가 아닌 GPT-4를 사용해 봤는데, 과연 GPT-3.5와는 얼마나 차이가 있을지 기대해 본다.

Question

너가 생각했을 때 가장 멋진 Javascript 코드를 작성해줘

Answer

Javascript에는 다양한 멋진 코드가 있지만, 여기 간단한 예시로 가장 인상적인 코드를 작성해봤어요.

(function iife() {
  const maxLength = 100;

  function randomHexColor() {
    return '#' + Math.floor(Math.random() * 16777215).toString(16);
  }

  function createBall() {
    const ball = document.createElement('div');
    ball.className = 'ball';
    ball.style.backgroundColor = randomHexColor();
    ball.style.left = `${Math.random() * 100}vw`;
    ball.style.top = `${Math.random() * 100}vh`;
    return ball;
  }

  function addBalls(n) {
    const container = document.getElementById('ball-container');
    for (let i = 0; i < n; i++) {
      container.appendChild(createBall());
    }
  }

  function init() {
    const container = document.createElement('div');
    container.id = 'ball-container';
    document.body.appendChild(container);
    addBalls(maxLength);
  }

  init();
})();
	

이 코드는 웹 페이지에서 무작위 위치와 색상을 가진 100개의 원들을 생성합니다. 이 코드는 즉시 호출되는 함수 표현식(IIFE)를 사용해 자체 실행되며 전역 스코프를 오염시키지 않습니다.

여기에 사용된 CSS는 다음과 같습니다.

.ball {
  position: absolute;
  width: 50px;
  height: 50px;
  border-radius: 50%;
}
	

이 예제는 단순하지만, 동적인 웹 페이지를 구현하는데 중요한 기능을 보여줍니다. 이러한 기능을 활용해 사용자 인터랙션에 반응하는 멋진 웹 사이트를 만들 수 있습니다.

이번 코드는 무작위 위치에 무작위 색상을 가진 100개의 원을 생성하는 코드를 만들어주었다.
특히 이번에는 "즉시 호출되는 함수 표현식(IIFE)"라는 방식을 사용했다고 한다.
해당 코드를 리뷰 후에 IIFE에 대해서도 공부하는 시간을 가졌다.
우선 해당 코드이 결과는 아래와 같다.
이번 결과물은 편의상 이미지로 대체했다.

(아무것도 없는 html 파일에 적용)

으아아
환공포증이 아주 약간 있는 나에게 이런 걸 만들어다 주다니...!
뭐... 이 정도는 참을만하다.
그렇다면 왜 이 코드가 멋지다고 생각했을까?

Question

너는 왜 저게 멋지다고 생각해?

Answer

저 코드가 멋지다고 생각하는 이유는 다음과 같습니다:

1. 동적 요소 생성: 이 코드는 JavaScript를 사용하여 동적으로 요소를 생성하고, 웹 페이지에 추가합니다. 이 기능은 사용자 인터랙션에 반응하거나 동적인 콘텐츠를 제공할 때 중요합니다.

2. 무작위성: 코드에서 무작위 위치를 적용하여 예측할 수 없는 시각적 효과를 만듭니다. 이러한 무작위성은 사용자의 관심을 끌고 즐거움을 더하는 요소로 작용합니다.

3. 즉시 실행 함수(IIFE): 코드를 IIFE로 작성하여 전역 스코프를 오염시키지 않고, 코드를 자체 실행하도록 합니다. 이것은 코드의 구조와 유지 관리를 개선하는 좋은 방법입니다.

물론 이 코드는 단순한 예시이지만, 이러한 기능을 활용하여 사용자 인터랙션에 반응하거나 동적인 콘텐츠를 제공하는 멋진 웹 사이트를 만들 수 있습니다. 웹 개발의 강력함과 자유도를 보여주는 좋은 예입니다.

이유를 물어볼 때 항상 느끼는 것이지만 말을 진짜 잘한다...
다른 건 그렇다치고, 우선 즉시 실행 함수(IIFE)는 같이 일하는 친구와 이야기하다가 얼추 듣기만 했었던 건데
이참에 알아보는 시간을 가져보고자 한다.

즉시 실행 함수 표현식(Immediately Invoked Function Expression, IIFE)

IIFE는 선언과 동시에 실행되는 함수 표현식이다.
전역 스코프를 오염시키지 않고 코드를 캡슐화한다.

(function() {
	// CODE ...
})();
	

위처럼 익명함수로 보통 작성하지만 기명함수로도 작성 가능하다.
하지만 기명함수로 작성해도 호출이 불가능하기 때문에 사실상 의미가 없다.
IIFE는 아래와 같은 장/단점을 가지고 있다.

[장점]
1. 스코프 제한: IIFE는 전역 스코프를 오염시키지 않고 코드를 캡슐화하여 변수의 유효 범위를 제한한다.

2. 코드 구조 개선: IIFE를 사용하면 코드를 작은 단위로 나누어 모듈화하고 가독성을 높일 수 있다.

3. 프라이빗 변수 및 메소드: IIFE 내부에 선언된 변수와 함수는 외부에서 접근할 수 없다. 이를 통해 프라이빗 변수 및 메소드를 구현할 수 있다.

[단점]
1. 디버깅 어려움: IIFE 내부의 함수는 이름이 없기 때문에 디버깅 시 함수를 식별하기 어려울 수 있다.

2. 가독성 저하: IIFE는 코드 구조를 개선할 수 있지만, 과도한 사용은 코드 가독성을 저하시킬 수 있다.


요약하자면, IIFE는 전역 스코프 오염을 방지하고 코드 구조를 개선하는 데 도움이 되지만, 과도한 사용은 디버깅 어려움과 가독성 저하를 초래할 수 있다. 상황에 따라 적절하게 사용하는 것이 중요할 것 같다.

IIFE에 대해서도 함께 알아보는 시간을 가졌다.
그렇다면 이제 chatGPT가 작성해 준 저 코드를 활용해서 무언가를 만들어보자.
나는 저 결과물을 보자마자 빵빠래??? 라고 해야 하나...
축포처럼 위에서 색종이가 떨어지는 효과라고 해야 할까...
그런 효과를 주기 좋을 것 같아서 한번 만들어보았다.
아래 버튼을 클릭하면 해당 코드가 실행되게 만들어보았다.

(티스토리 모바일 앱 환경에서는 작동하지 않는다)

따단 ~ 🎊

이번 포스트에서는 chatGPT가 작성해 준 코드로 IIFE에 대해 알아보았으며, 해당 결과물을 활용해서 간단한 애니메이션 효과를 만들어보았다.
이번건 나름대로 유익한 시간을 가진 것 같아서 뿌듯하다.
이번에 만들어둔 애니메이션 효과는 나중에 조금 더 개선해서 사이드 프로젝트에도 한 번 적용해 봐야겠다. 😁

<div style="margin: 10px 0 10px 0;" class="tada-show">
	<button class="tada-btn">따단 ~ 🎊</button>
</div>
	

.square {
  position: fixed;
  width: 20px;
  height: 20px;
  animation-name: fall, rotate;
  animation-timing-function: ease-in, linear;
  animation-fill-mode: forwards;
}

@keyframes fall {
  0% {
    top: -20vh;
  }
  100% {
    top: 200vh;
  }
}

@keyframes rotate {
  0% {
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  }
  100% {
    transform: rotateX(390deg) rotateY(390deg) rotateZ(390deg);
  }
}

.tada-btn {
  background-color : #ccc;
  border: 1px solid #10a37f; 
  border-radius: 10px; 
  width: 100px; 
  padding : 10px;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); 
  cursor: pointer;
  transition: 0.5s all;
  width : 100px;
  height : 20px;
  text-align: center;

}

.tada-btn:hover{
	background-color: #10a37f;
	color: white; 
}
	

(function iife() {
  const maxLength = 150;

  function randomHexColor() {
    return '#' + Math.floor(Math.random() * 16777215).toString(16);
  }

  function createSquare() {
    const square = document.createElement('div');
    square.className = 'square';
    square.style.backgroundColor = randomHexColor();
    square.style.left = `${Math.random() * 100}vw`;
	square.style.setProperty('--random-start', Math.random());
	square.style.setProperty('--random-end', Math.random());
    square.style.animationDuration = `${Math.random() * 2 + 1}s, ${Math.random() * 2 + 1}s`;
    return square;
  }

  function addSquares(n) {
    const container = document.getElementById('square-container');
    for (let i = 0; i < n; i++) {
      container.appendChild(createSquare());
    }
  }

  function init() {
    const container = document.createElement('div');
    container.id = 'square-container';
    const containerCheck = document.querySelector('#square-container');
    if( containerCheck ){
    	containerCheck.remove();
    }
    document.body.appendChild(container);
    addSquares(maxLength);
  }

  const tada = document.querySelector('.tada-btn');
  tada.addEventListener('click', ()=>{
  	init();	
  })
})();