React를 ChatGPT에게 배우다.

 

[ 설치 ]

React를 설치하려면 다음 단계를 따라주세요:

1. Node.js와 npm을 설치하세요. (https://nodejs.org)
2. 명령 프롬프트 또는 터미널에서 다음 명령어를 실행하세요: 'npx create-react-app my-app' (my-app은 원하는 프로젝트 이름으로 변경하세요)
3. 프로젝트 디렉토리로 이동하세요: cd my-app
4. 다음 명령어를 실행하세요: npm start

이제 브라우저에서 http://localhost:3000을 열면 React 프로젝트가 실행되고, 애플리케이션을 개발할 준비가 되었습니다.

 

 

 

[ 기본 예제  ]

메시지를 표시하는 간단한 예제입니다.

 

App.js

import React from 'react';
import Welcome from './Welcome';

function App() {
  return (
    <div>
      <Welcome name="John" />
      <Welcome name="Jane" />
      <Welcome name="Jim" />
    </div>
  );
}

export default App;

 

Welcome.js

import React from 'react';

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

export default Welcome;

 

위 코드가 렌더링 되면, 각자 다른 이름의 h1 헤더가 보여집니다.

 

 

[ 클래스 컴포넌트 ]

기본적인 리액트 클래스 컴포넌트 예제입니다:

import React, { Component } from 'react';

class Example extends Component {
  constructor(props) {
    super(props);
    this.state = { message: 'Hello, World!' };
  }

  render() {
    return (
      <div>
        <p>{this.state.message}</p>
      </div>
    );
  }
}

export default Example;

 

이 예제에서 Example 클래스는 React.Component를 확장하고 구성 요소의 초기 상태를 설정하는 생성자 메서드를 정의합니다. render 메서드는 화면에 표시되어야 하는 내용에 대한 설명을 반환합니다.

 

 

 

[ 함수 컴포넌트 ]

기본적인 리액트 함수형 컴포넌트 예제입니다:

import React from 'react';

const MyComponent = (props) => {
  return (
    <div>
      <h1>Hello, {props.name}</h1>
      <p>This is a functional component.</p>
    </div>
  );
};

export default MyComponent;

 

이 구성 요소는 단일 소품 이름을 사용하고 간단한 인사말을 렌더링합니다. 구성 요소는 props를 인수로 사용하고 렌더링할 JSX를 반환하는 함수를 사용하여 정의됩니다. 그런 다음 구성 요소를 가져와 응용 프로그램의 다른 곳에서 사용할 수 있습니다.

 

 

 

[ 라우팅 ]

React에서 라우팅을 구현하는 간단한 예제는 다음과 같습니다:

1. npm install react-router-dom 명령어를 실행하여 React Router DOM을 설치하세요.
2. App.js 파일에서 import 문을 추가하세요:

import { BrowserRouter as Router, Route, Link } from "react-router-dom";

 

3. Router 컴포넌트를 사용하여 각 페이지에 맞는 라우트를 정의하세요:

function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              <Link to="/users">Users</Link>
            </li>
          </ul>
        </nav>

        <Route path="/" exact component={Home} />
        <Route path="/about" component={About} />
        <Route path="/users" component={Users} />
      </div>
    </Router>
  );
}

 

4. 각 페이지에 대한 컴포넌트를 정의하세요:

function Home() {
  return <h2>Home</h2>;
}

function About() {
  return <h2>About</h2>;
}

function Users() {
  return <h2>Users</h2>;
}

 

이제 웹 브라우저에서 홈, 어바웃, 유저 페이지를 각각 접속할 수 있습니다. 새로운 페이지를 추가하기 위해서는 라우트와 컴포넌트를 추가하면 됩니다.

 

 

 

[ 주요 훅(Hooks) ]

React Hooks에서 제공하는 주요한 훅은 다음과 같습니다:

1. useState: 클래스 컴포넌트에서 state 변수를 사용하는 것과 같습니다.
2. useEffect: 클래스 컴포넌트에서 componentDidMount 및 componentDidUpdate 메소드를 대체합니다.
3. useContext: React Context API를 쉽게 사용할 수 있도록 도와줍니다.
4. useReducer: useState를 대체하여 복잡한 state 로직을 구현할 수 있습니다.
5. useCallback: 렌더링 성능을 향상시키기 위해 함수 재사용을 제공합니다.
6. useMemo: 렌더링 성능을 향상시키기 위해 결과값을 재사용할 수 있습니다.
7. useRef: DOM 요소에 접근하거나 값을 저장하는데 사용됩니다.
8. useImperativeHandle: 커스텀 훅을 구현할 때 사용됩니다.
9. useLayoutEffect: 화면 렌더링과 동시에 처리되는 side-effect를 제공합니다.
10. useDebugValue: 개발자 도구에서 훅의 값을 표시할 수 있도록 합니다.

 

 

 

[ useState ]

import React, { useState } from 'react';

function Example() {
  // Declare a state variable called "count" and initialize it to 0
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

 

이 코드에서 useState는 count 변수와 그 값을 변경하는 setCount 함수를 반환합니다. count 변수는 0으로 초기화되고, setCount 함수를 호출하면 값이 업데이트됩니다. 버튼을 클릭할 때마다 setCount 함수가 호출되어 count 값이 1씩 증가합니다.

 

 

 

[ useEffect ]

import React, { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  // Similar to componentDidMount and componentDidUpdate:
  useEffect(() => {
    // Update the document title using the browser API
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

 

이 코드에서 useEffect 함수는 렌더링 이후에 실행되는 훅입니다. 이 훅은 count 값이 변경될 때마다 호출되며, 브라우저 API를 사용하여 문서 제목을 업데이트합니다.

useEffect의 첫 번째 인자로 특정 값을 명시하지 않으면, 기본적으로 렌더링 된 후에 매번 호출됩니다.

두 번째 인자로 배열을 전달하면 특정 값의 변경에 따라 호출되거나 호출되지 않을 수 있습니다. 배열에 값을 전달하지 않으면, 기본적으로 훅이 언마운트되기 전에 호출됩니다.

 

[ useContext ]

import React, { useState, createContext, useContext } from 'react';

// Create a context with a default value
const ThemeContext = createContext('light');

function Example() {
  const [theme, setTheme] = useState('light');

  return (
    <ThemeContext.Provider value={theme}>
      <h1>Current theme: {theme}</h1>
      <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
        Toggle theme
      </button>
      <Content />
    </ThemeContext.Provider>
  );
}

function Content() {
  const theme = useContext(ThemeContext);

  return (
    <div style={{ background: theme === 'light' ? 'white' : 'black', color: theme === 'light' ? 'black' : 'white' }}>
      <p>This is some content</p>
    </div>
  );
}

 

이 예제에서, ThemeContext는 createContext 함수를 사용하여 light 값으로 생성된 컨텍스트입니다. Example 컴포넌트는 테마 값을 저장하는 theme 상태 변수와 그 값을 변경하는 setTheme 함수를 가지고 있습니다.

ThemeContext.Provider 컴포넌트를 통해 현재의 테마 값이 제공됩니다. Content 컴포넌트에서는 useContext 훅을 사용하여 테마 값을 가져와서 스타일을 적용합니다.

 

 

 

[ useReducer ]

import React, { useReducer } from 'react';

const initialState = { count: 0 };

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      throw new Error();
  }
}

function Example() {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <>
      <h1>Count: {state.count}</h1>
      <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
    </>
  );
}

 

이 예제에서, useReducer 훅을 사용하여 count 값을 저장하는 상태와 그 값을 변경하는 dispatch 함수를 생성합니다. reducer 함수는 현재의 상태와 액션 객체를 입력으로 받아 새로운 상태를 반환합니다.

컴포넌트에서는 count 값을 보여주고 "Increment" 및 "Decrement" 버튼을 클릭할 때마다 dispatch 함수를 호출하여 상태를 변경합니다.

 

 

 

[ useCallback ]

import React, { useState, useCallback } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  // useCallback hook을 사용하여 handleClick 함수를 캐시
  const handleClick = useCallback(() => {
    setCount(c => c + 1);
  }, [setCount]);

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
}

 

이 예제에서, useState 훅을 사용하여 count 값을 저장하는 상태를 생성합니다. handleClick 함수는 setCount 함수를 사용하여 count 값을 증가시킵니다.

useCallback 훅을 사용하여 handleClick 함수를 캐시하고, setCount 값이 변경될 때만 새로운 함수 인스턴스를 생성합니다. 이를 통해 하위 컴포넌트가 리-렌더링될 때마다 handleClick 함수가 새로 생성되는 것을 방지하고, 컴포넌트의 성능을 향상시킬 수 있습니다.

 

 

 

[ useMemo ]

import React, { useState, useMemo } from 'react';

function Example() {
  const [width, setWidth] = useState(window.innerWidth);
  const [height, setHeight] = useState(window.innerHeight);

  // useMemo hook을 사용하여 heavyComputation 함수의 결과를 캐시
  const heavyComputation = useMemo(() => {
    let sum = 0;
    for (let i = 0; i < 1000000000; i++) {
      sum += i;
    }
    return sum;
  }, []);

  return (
    <div>
      <h1>Window size: {width} x {height}</h1>
      <h2>Heavy computation result: {heavyComputation}</h2>
    </div>
  );
}

 

이 예제에서, useState 훅을 사용하여 width와 height 값을 저장하는 상태를 생성합니다. heavyComputation 함수는 매우 무거운 계산을 수행합니다.

useMemo 훅을 사용하여 heavyComputation 함수의 결과를 캐시하고, 필요에 따라 다시 계산할 수 있습니다. 이를 통해 컴포넌트의 성능을 향상시킬 수 있습니다.

 

 

[ useRef ]

import React, { useState, useRef } from 'react';

function Example() {
  const [value, setValue] = useState('');
  const inputRef = useRef(null);

  function handleSubmit(event) {
    event.preventDefault();
    console.log(inputRef.current.value);
  }

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={value}
        onChange={event => setValue(event.target.value)}
        ref={inputRef}
      />
      <button type="submit">Submit</button>
    </form>
  );
}

 

이 예제에서, useState 훅을 사용하여 value 값을 저장하는 상태를 생성합니다. useRef 훅을 사용하여 inputRef 레퍼런스를 생성합니다. inputRef는 폼 요소의 DOM 노드에 액세스할 수 있는 레퍼런스를 제공합니다.

handleSubmit 함수를 통해 inputRef를 사용하여 폼 요소의 값을 얻고, 콘솔에 출력할 수 있습니다.

 

 

[ useImperativeHandle ]

import React, { forwardRef, useImperativeHandle, useState } from 'react';

const Input = forwardRef((props, ref) => {
  const [value, setValue] = useState('');

  useImperativeHandle(ref, () => ({
    focus: () => {
      inputRef.current.focus();
    },
    setValue: newValue => {
      setValue(newValue);
    },
    getValue: () => value
  }));

  const inputRef = React.createRef();

  return (
    <input
      type="text"
      value={value}
      onChange={event => setValue(event.target.value)}
      ref={inputRef}
    />
  );
});

function Example() {
  const inputRef = React.createRef();

  function handleClick() {
    inputRef.current.setValue('Hello');
    inputRef.current.focus();
  }

  return (
    <div>
      <Input ref={inputRef} />
      <button onClick={handleClick}>Focus and set value</button>
    </div>
  );
}

 

이 예제에서, forwardRef 함수를 사용하여 Input 컴포넌트를 정의합니다. useImperativeHandle 훅을 사용하여 ref를 제어할 수 있는 객체를 정의합니다. 이 객체는 focus, setValue, getValue 메서드를 제공합니다.

Example 컴포넌트에서는 inputRef 레퍼런스를 생성하고, handleClick 함수를 통해 inputRef를 사용하여 Input 컴포넌트의 value를 설정하고, 포커스를 주는 기능을 수행할 수 있습니다.

 

 

 

[ useLayoutEffect ]

import React, { useState, useLayoutEffect } from 'react';

function Example() {
  const [width, setWidth] = useState(0);

  useLayoutEffect(() => {
    setWidth(document.getElementById('myDiv').offsetWidth);
  }, []);

  return (
    <div>
      <div id="myDiv">My Div</div>
      <p>The width of myDiv is: {width}</p>
    </div>
  );
}

 

이 예제에서는 useLayoutEffect 훅을 사용하여 myDiv 요소의 너비를 계산하고, width state를 설정합니다. useLayoutEffect 훅은 렌더링 후 DOM 변경을 기다지 않고 바로 동작하므로, 요소의 너비를 정확하게 계산할 수 있습니다.

useLayoutEffect 훅은 useEffect 훅과 매우 유사하지만, 구현이 약간 다릅니다. useEffect 훅은 렌더링이 완료된 후 동작하지만, useLayoutEffect 훅은 렌더링과 동시에 동작합니다. 따라서, 보이는 결과에 영향을 미치는 변경을 할 때 주로 useLayoutEffect 훅을 사용합니다.

 

 

 

[ useDebugValue ]

import React, { useState, useDebugValue } from 'react';

function useFriendStatus(friendID) {
  const [isOnline, setIsOnline] = useState(null);

  useDebugValue(isOnline ? 'Online' : 'Offline');

  return isOnline;
}

function Example() {
  const isFriendOnline = useFriendStatus(1);

  return (
    <div>
      <p>Is friend online: {isFriendOnline ? 'Yes' : 'No'}</p>
    </div>
  );
}

 

이 예제에서는 useDebugValue 훅을 사용하여 useFriendStatus 커스텀 훅의 상태를 개발자 도구에 표시합니다. useDebugValue 훅은 상태 값의 표시 이름을 제공하여, 개발자가 훨씬 빠르게 검색하고 찾을 수 있습니다.

useFriendStatus 훅에서 isOnline이 온라인이면 'Online'이라는 값을, 아니면 'Offline'이라는 값을 useDebugValue 훅에 전달합니다. 개발자 도구에서 이 훅의 값을 확인할 때, 'Online' 또는 'Offline' 값이 표시됩니다.

 

 

 

[ 상태 관리 라이브러리 ]

React에서 사용할 수 있는 상태 관리 도구로는 다음과 같은 것들이 있습니다:

1. React context API - React 애플리케이션의 전역 상태 관리에 사용할 수 있는 API
2. Redux - 애플리케이션 전역 상태 관리 도구, 큰 규모의 애플리케이션에서 효과적으로 사용
3. MobX - 간결하고 적은 구문을 사용하여 상태 관리
4. Unstated - React context API와 같은 기능을 가진, 간결하고 편리한 상태 관리 도구
5. Zustand - 간결하고 편리한 상태 관리 도구, MobX와 비슷한 기능을 제공
6. Recoil - 편리하고 간결한 상태 관리 도구, 복잡한 그래프 구조를 유지하면서도 효과적으로 상태 관리할 수 있도록 지원함

어떤 도구를 사용하는 것이 좋은지는 프로젝트의 크기와 복잡성, 팀의 선호도 등에 따라 다릅니다.

 

 

 

[ React context API ]

React Context API 예제를 살펴보겠습니다. 아래의 예제에서는 "theme"이라는 전역 상태를 관리하는 예제를 보여줍니다.

1. Context 생성:

import React, { createContext } from 'react';

export const ThemeContext = createContext();

 

2. Provider 컴포넌트:

import React, { useState } from 'react';
import { ThemeContext } from './themeContext';

function ThemeProvider(props) {
  const [theme, setTheme] = useState('light');

  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      {props.children}
    </ThemeContext.Provider>
  );
}

export default ThemeProvider;

 

3. Consumer 컴포넌트:

import React, { useContext } from 'react';
import { ThemeContext } from './themeContext';

function Button() {
  const { theme, setTheme } = useContext(ThemeContext);

  return (
    <button
      style={{ backgroundColor: theme === 'light' ? 'white' : 'black' }}
      onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}
    >
      Change theme
    </button>
  );
}

export default Button;

 

4. 애플리케이션 루트:

import React from 'react';
import ThemeProvider from './themeProvider';
import Button from './button';

function App() {
  return (
    <ThemeProvider>
      <Button />
    </ThemeProvider>
  );
}

export default App;

 

위의 예제에서는 ThemeContext라는 Context를 만들고, ThemeProvider 컴포넌트에서 theme 상태를 관리하고, Button 컴포넌트에서 theme 상태를 접근하여 테마를 변경할 수 있는 예제입니다.

 

 

 

[ Redux ]

Redux 예제를 살펴보겠습니다. 아래의 예제에서는 "count"라는 상태를 관리하는 예제를 보여줍니다.

1. action 생성:

const increment = () => {
  return {
    type: 'INCREMENT',
  };
};

const decrement = () => {
  return {
    type: 'DECREMENT',
  };
};

 

2. reducer 생성:

const countReducer = (state = 0, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1;
    case 'DECREMENT':
      return state - 1;
    default:
      return state;
  }
};

 

3. store 생성:

import { createStore } from 'redux';
import countReducer from './countReducer';

const store = createStore(countReducer);

 

4. 애플리케이션 루트:

import React, { useState } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement } from './actions';

function App() {
  const count = useSelector(state => state);
  const dispatch = useDispatch();

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={() => dispatch(increment())}>+</button>
      <button onClick={() => dispatch(decrement())}>-</button>
    </div>
  );
}

export default App;

 

위의 예제에서는 countReducer에서 상태를 관리하고, store에서 count 상태를 저장하고, App 컴포넌트에서 count 상태를 접근하여 카운트를 증가/감소시키는 예제입니다.

 

 

 

[ MobX ]

MobX 예제를 살펴보겠습니다. 아래의 예제에서는 "count"라는 상태를 관리하는 예제를 보여줍니다.

1. store 생성:

import { observable, action } from 'mobx';

class CounterStore {
  @observable count = 0;

  @action
  increment = () => {
    this.count++;
  };

  @action
  decrement = () => {
    this.count--;
  };
}

const store = new CounterStore();

 

2. 애플리케이션 루트:

import React, { useState } from 'react';
import { observer } from 'mobx-react';
import store from './store';

const App = observer(() => {
  return (
    <div>
      <h1>{store.count}</h1>
      <button onClick={store.increment}>+</button>
      <button onClick={store.decrement}>-</button>
    </div>
  );
});

export default App;

 

위의 예제에서는 CounterStore에서 상태를 관리하고, App 컴포넌트에서 store.count 상태를 접근하여 카운트를 증가/감소시키는 예제입니다.

 

 

 

[ Unstated ]

Unstated 예제를 살펴보겠습니다. 아래의 예제에서는 "count"라는 상태를 관리하는 예제를 보여줍니다.

1. store 생성:

import { Container } from 'unstated';

class CounterContainer extends Container {
  state = {
    count: 0,
  };

  increment = () => {
    this.setState({ count: this.state.count + 1 });
  };

  decrement = () => {
    this.setState({ count: this.state.count - 1 });
  };
}

const store = new CounterContainer();

 

2. 애플리케이션 루트:

import React from 'react';
import { Subscribe } from 'unstated';
import store from './store';

const App = () => (
  <Subscribe to={[store]}>
    {counter => (
      <div>
        <h1>{counter.state.count}</h1>
        <button onClick={counter.increment}>+</button>
        <button onClick={counter.decrement}>-</button>
      </div>
    )}
  </Subscribe>
);

export default App;

 

위의 예제에서는 CounterContainer에서 상태를 관리하고, App 컴포넌트에서 Subscribe 컴포넌트를 사용하여 store에 접근하여 카운트를 증가/감소시키는 예제입니다.

 

[ Zustand ]

Zustand 예제를 살펴보겠습니다. 아래의 예제에서는 "count"라는 상태를 관리하는 예제를 보여줍니다.

1. store 생성:

import { createStore } from 'zustand';

const useCounter = createStore((set, get) => ({
  count: 0,
  increment: () => set(state => ({ count: state.count + 1 })),
  decrement: () => set(state => ({ count: state.count - 1 }))
}));

 

2. 애플리케이션 루트:

import React from 'react';
import { useStore } from 'zustand';
import useCounter from './store';

const App = () => {
  const counter = useStore(useCounter);

  return (
    <div>
      <h1>{counter.count}</h1>
      <button onClick={counter.increment}>+</button>
      <button onClick={counter.decrement}>-</button>
    </div>
  );
};

export default App;

 

위의 예제에서는 useCounter 훅을 사용하여 count를 관리하고, App 컴포넌트에서 useStore 훅을 사용하여 store에 접근하여 카운트를 증가/감소시키는 예제입니다.

 

 

 

[ Recoil ]

Recoil 예제를 살펴보겠습니다. 아래의 예제에서는 "count"라는 상태를 관리하는 예제를 보여줍니다.

1. Recoil state 생성:

import { atom } from 'recoil';

const countState = atom({
  key: 'countState',
  default: 0,
});

 

2. 애플리케이션 루트:

import React, { useState } from 'react';
import { useRecoilState } from 'recoil';
import countState from './state';

const App = () => {
  const [count, setCount] = useRecoilState(countState);

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={() => setCount(count + 1)}>+</button>
      <button onClick={() => setCount(count - 1)}>-</button>
    </div>
  );
};

export default App;

 

위의 예제에서는 countState atom을 사용하여 count를 관리하고, App 컴포넌트에서 useRecoilState 훅을 사용하여 count에 접근하여 카운트를 증가/감소시키는 예제입니다.

 

 

 

[ 라이브러리 ]

1. React Router: 웹 애플리케이션에서 URL 라우팅을 구현할 때 사용
2. Redux: 애플리케이션의 상태 관리를 도와주는 라이브러리
3. Material-UI: 구글의 Material Design을 React 컴포넌트로 구현한 라이브러리
4. Axios: HTTP 요청을 보내고 응답을 처리하는 라이브러리
5. Lodash: JavaScript 라이브러리로서 배열, 객체, 숫자 등에 대한 유용한 유틸리티 함수를 제공
6. Formik: React 폼을 만들고 관리하는 라이브러리
7. Reactstrap: Bootstrap을 React 컴포넌트로 구현한 라이브러리.

 

 

 

[ React 커뮤니티 ]

1. 리액트 네이티브[React Native] 한국 사용자 그룹: https://www.facebook.com/groups/1379462192112559
2. Reactjs.org: React 공식 웹사이트에서 제공하는 커뮤니티
3. Reddit React: React 관련 정보와 논의를 공유하는 Reddit 커뮤니티
4. Reactiflux: React 개발자들이 온라인으로 소통하는 Slack 커뮤니티
5. Stack Overflow React: React 관련 질문 및 답변을 공유하는 Stack Overflow 커뮤니티
6. React Native Community: React Native 관련 정보와 논의를 공유하는 커뮤니티.

 

 

 

 

 

2023.02.06 - [IT 인터넷/Python] - 파이썬을 ChatGPT에게 배우다 :: Python

파이썬을 ChatGPT에게 배우다 :: Python

2023.02.06 - [IT 인터넷/Python] - Django를 ChatGPT에게 배우다 :: Python

Django를 ChatGPT에게 배우다 :: Python

2023.02.05 - [IT 인터넷/Golang] - Go 언어를 ChatGPT에게 배우다 :: Golang

Go 언어를 ChatGPT에게 배우다 :: Golang

2023.02.06 - [IT 인터넷/일반] - Ruby를 ChatGPT로 배우다 :: 루비 언어

Ruby를 ChatGPT로 배우다 :: 루비 언어

2023.02.05 - [IT 인터넷/Flutter] - Dart와 Flutter를 ChatGPT에게 배우다.

Dart와 Flutter를 ChatGPT에게 배우다.

2023.02.04 - [IT 인터넷/일반] - Rust를 ChatGPT에게 배우다.

Rust를 ChatGPT에게 배우다.