레이커 갓생일기

프론트엔드에서 "상태" 란

- 사용자와의 인터랙션을 통해 동적으로 계속해서 변화하는 데이터
- 상태들은 일관적이어야한다.
- 서로 다른 여러개의 컴포넌트들이 어떤 동일한 상태를 다루면, 그 데이터의 정확성을 보장하기 위해 데이터의 변경을 제한해 데이터의 상태를 항상 같게 유지해야한다

상태관리는 왜 필요한가?

- 서로 다른 두 컴포넌트에 같은 데이터가 필요하다고 할 때, 각 컴포넌트가 부모자식 관계로 되어있지 않은 이상, 각 컴포넌트 간의 직접적인 데이터 전달은 어렵다.

- 데이터를 부모 컴포넌트로 보내고, 다시 그 상데이터 필요한 컴포넌트로 전달해야한다. 하지만 이렇게 Prop Drilling이 많아지면 이 prop이 어디에서 왔는지 확인하기 정말 어려워진다. 
- 이때 사용하는 상태관리 툴이 Context API, Redux, React Query, MobX

React 에서 "상태"

- React에서 "상태"는 컴포넌트의 데이터를 나타내는 것을 의미한다.

- 컴포넌트의 상태는 해당 컴포넌트가 렌더링되는 동안 변할 수 있는 값입니다. 상태는 컴포넌트 내부에서 관리되며, 컴포넌트를 업데이트하거나 다시 렌더링할 때 사용됩니다.

- React에서 상태는 클래스 컴포넌트와 함수형 컴포넌트에서 모두 관리할 수 있습니다.

클래스 컴포넌트에서는 state 객체를 사용하여 상태를 관리

함수형 컴포넌트에서는 React의 useState 훅을 사용하여 상태를 관리

클래스 컴포넌트의 상태 예시:

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Increment
        </button>
      </div>
    );
  }
}

함수형 컴포넌트의 상태 예시:

import React, { useState } from 'react';

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

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

이 예시에서 count는 컴포넌트의 상태를 나타내며, 버튼을 클릭할 때마다 상태가 업데이트되고, 해당 변경 사항이 UI에 반영됩니다. 상태는 컴포넌트 내에서 필요한 데이터를 저장하고 관리하는 데 사용되며, 필요에 따라 컴포넌트의 다른 부분에서 상태를 사용할 수 있습니다.

웹 페이지가 렌더링되는 과정

1. HTML 다운로드: 웹 브라우저는 서버에 웹 페이지를 요청하고, 서버는 해당 페이지의 HTML 파일을 응답으로 전송합니다.
2. HTML 파싱: 웹 브라우저는 수신한 HTML 문서를 파싱하여 문서 객체 모델(Document Object Model, DOM)을 생성합니다. DOM은 HTML 문서의 구조와 요소들을 표현하는 트리 형태의 데이터 구조입니다.
3. CSS 다운로드: 웹 페이지에 포함된 CSS 스타일 시트 파일들을 서버로부터 다운로드합니다.
4. CSS 파싱: 다운로드한 CSS 파일들을 파싱하여 스타일 규칙들을 해석하고, 각 요소에 적용될 스타일 정보를 계산합니다.
5. 렌더 트리 구성: DOM 트리와 CSS 스타일 정보를 결합하여 렌더 트리(Render Tree)를 생성합니다. 렌더 트리는 화면에 실제로 표시될 요소들을 포함한 구조입니다.
6. 레이아웃: 렌더 트리의 각 요소들에 대해 위치와 크기를 계산하여 페이지의 레이아웃을 설정합니다. 이 단계에서 요소의 박스 모델과 배치 정보가 결정됩니다.
7. 페인팅: 레이아웃 단계에서 계산된 정보를 바탕으로 실제로 화면에 픽셀을 그리는 작업을 수행합니다. 이 단계에서 각 요소의 색상, 텍스트, 배경 등이 실제 화면에 표시됩니다.
8. 페이지 로드 완료: 위 단계들이 완료되면 웹 페이지의 로딩이 완료되고, 사용자는 렌더링된 페이지를 볼 수 있게 됩니다.

일반적인 브라우저의 동작 방식을 설명한 것이며, 실제 브라우저마다 세부적인 동작이 조금씩 다를 수 있습니다.

DOM (Document Object Model) 이란

- 웹 페이지의 구조와 콘텐츠를 나타내는 표준화된 인터페이스

- HTML, XHTML, XML 등의 문서를 계층적인 트리 구조로 표현합니다.

- 모든 요소, 속성, 텍스트를 객체로 만들어 이 객체들을 부자 관계에 따라 트리 구조로 구성한 것

- DOM은 웹 브라우저가 HTML 문서를 이해하고 조작할 수 있도록 제공되는 프로그래밍 인터페이스이다. 이를 통해 JavaScript와 같은 스크립트 언어를 사용하여 웹 페이지의 요소에 동적으로 접근하고 수정할 수 있다.

- DOM 트리는 HTML 문서의 요소(Element), 속성(Attribute), 텍스트 등을 노드(Node)라는 객체로 표현합니다. 각 노드는 트리 구조에서 부모-자식 관계를 가지며, 서로 연결되어 문서의 구조를 형성합니다.

- DOM은 웹 페이지의 구조에 접근하고 수정하는 다양한 메서드와 속성을 제공합니다. 예를 들어, 특정 요소를 선택하거나 생성, 삭제, 수정할 수 있으며, 요소의 스타일, 내용, 속성 등을 변경할 수 있습니다.

- 또한, DOM은 이벤트 처리와 상호작용에도 사용됩니다. 사용자의 동작(클릭, 마우스 오버 등)을 감지하고, 이벤트 핸들러를 등록하여 특정 동작에 대한 응답을 구현할 수 있습니다.

- DOM은 크로스 플랫폼 및 플랫폼 독립적이며, 웹 브라우저를 비롯한 다양한 환경에서 사용될 수 있습니다.

웹을 동적으로 제어 = DOM 을 제어

- 웹을 개발한다는 것은 정적인 HTML만을 작성하는 게 아니라, Javascript를 통해 동적으로 동작할 수 있는 웹을 개발하는 것

그럼 DOM을 동적으로 제어(조작)해야 하는데, 이를 Javascript가 해 줄수 있도록 DOM API 라는 것이 기본적으로 제공된다.

DOM API

- DOM 을 조작하기 위한 프로그래밍 인터페이스

- DOM API는 웹 브라우저에서 JavaScript와 같은 스크립트 언어를 사용하여 웹 페이지의 요소에 접근하고 조작하는 메서드와 속성의 집합

- DOM API를 사용하면 웹 페이지의 요소에 동적으로 접근하고 수정 가능하다

- 일반적으로 DOM API는 다음과 같은 기능을 제공합니다:

1. 요소 선택: 특정 요소를 선택하기 위해 ID, 클래스, 태그 이름 등을 사용하여 요소를 찾을 수 있습니다. getElementById, getElementsByClassName, getElementsByTagName, querySelector, querySelectorAll 등의 메서드를 사용합니다.
2. 속성 및 내용 조작: 선택한 요소의 속성 값을 읽거나 변경할 수 있습니다. 예를 들어, getAttribute, setAttribute, innerHTML, textContent 등의 메서드를 사용하여 요소의 속성 값을 가져오거나 설정할 수 있습니다.
3. 요소 생성 및 추가: 새로운 요소를 동적으로 생성하고, DOM에 추가할 수 있습니다. createElement, appendChild, insertBefore 등의 메서드를 사용하여 요소를 생성하고 다른 요소에 추가합니다.
4. 이벤트 처리: 사용자의 동작(클릭, 마우스 오버 등)을 감지하고, 이벤트 핸들러를 등록하여 특정 동작에 대한 응답을 구현할 수 있습니다. addEventListener를 사용하여 이벤트 핸들러를 등록하고, 이벤트가 발생했을 때 실행될 코드를 작성합니다.
5. 스타일 조작: 선택한 요소의 스타일을 동적으로 변경할 수 있습니다. style 속성을 사용하여 요소의 스타일을 설정하거나 변경할 수 있습니다.

이외에도 DOM API는 DOM 트리의 탐색, 노드의 추가 및 삭제, 이동, 애니메이션 등 다양한 기능을 제공합니다. DOM API는 웹 개발에서 가장 일반적으로 사용되며, 웹 페이지의 동적인 특성을 구현하는 데 중요한 역할을 합니다.

DOM API 를 통해서 DOM을 조작한다는 건, 일반적으로 다음과 같은 동작을 의미합니다.

DOM API

1. DOM에 요소를 추가한다.
2. DOM의 요소를 수정한다.
3. DOM의 요소를 삭제한다.

Virtual DOM

- DOM 을 직접 조작하는 건 안정성이 떨어지고, DOM API 가 low-level 이기 때문에 이걸로 DOM 을 조작시 코드의 복잡도가 높아진다. ( = 앱의 규모가 커질수록 복잡도가 높아짐)
- Virtual DOM의 조작은  React와 같은 라이브러리가 비교적 쉽게 해준다.

- 그리고 Virtual DOM이 실제 Real DOM을 직접 조작한다. 그 조작하는 과정(Diffing 알고리즘)은 React가 알아서 해주게 됩니다.

React

- 사용자 인터페이스(UI)를 구축하기 위한 JavaScript 라이브러리입니다.

- Facebook에서 개발되었으며, 웹 애플리케이션의 UI를 구성하는데 중점을 둔다.

React 특징

1. React는 컴포넌트 기반 아키텍처를 사용하여 UI를 작은 독립적인 조각으로 분할합니다. 각 컴포넌트는 자체 상태(state)와 속성(props)을 가지며, 이를 조합하여 전체 애플리케이션을 구축합니다. 컴포넌트는 재사용 가능하고 모듈화된 방식으로 작성할 수 있어 개발 생산성과 유지 보수를 향상시킵니다.

2. Virtual DOM(가상 DOM)을 사용하여 성능을 최적화합니다. 변경된 부분만 실제 DOM에 적용하여 업데이트하므로 효율적인 렌더링을 가능하게 합니다. 이를 통해 복잡한 UI를 효과적으로 처리하고 사용자에게 빠른 반응성을 제공할 수 있습니다.

3. React는 단방향 데이터 흐름을 따르는 개념인 "상태 관리"를 강조합니다. 일반적으로 Redux, MobX와 같은 상태 관리 라이브러리와 함께 사용되며, 상태를 중앙 집중식으로 관리하여 애플리케이션의 복잡성을 줄이고 데이터의 일관성을 유지합니다.

4. 웹 애플리케이션 개발뿐만 아니라, React Native를 통해 모바일 애플리케이션 개발에도 사용됩니다. React Native는 React를 기반으로 하여 네이티브 앱을 개발할 수 있는 크로스 플랫폼 프레임워크입니다.

5. React는 커뮤니티와 생태계가 활발하며, 다양한 도구와 라이브러리가 제공되어 개발자들이 효율적으로 작업할 수 있도록 지원합니다.

React에서 리렌더링이 일어나는 경우
1. Props가 변경되었을 때
2. State가 변경되었을 때
3. forceUpdate() 를 실행하였을 때.
4. 부모 컴포넌트가 렌더링되었을 때

React는 상태나 속성 값이 변하게 되면 리렌더링 이라는 과정을 통해서 바뀐 상태나 속성 값으로 화면을 그린다.

Virtual DOM 을 사용해서 React는 값이 변할 때 화면의 깜빡임 없이 빠른 속도로 값을 변경 시킬 수 있다.

만약 상태나 속성값이 변경된 경우, 변경된 값으로 React는 가상의 돔을 그리게 됩니다.

그린 Virtual DOM과 Real DOM을 비교하여 변경된 사항만 반영하여 해당 내용을 실제 돔에서 수정한 이후 새로운 화면을 렌더링  변경사항을 감지하고 Virtual DOM을 새로 그린 다음 Real DOM과 비교하여 바뀐 내용만 반영해서 새로 화면에 렌더링

ChatGPT는 일반적인 웹 프로그래밍 언어나 프레임워크를 사용하여 HTML 페이지를 만들지는 않습니다. 하지만, 로그인 페이지를 이쁘게 만들기 위해서는 HTML, CSS, JavaScript 등의 웹 프로그래밍 기술을 사용해야 합니다.

 

로그인 페이지를 이쁘게 만드는 방법에 대한 일반적인 가이드

 

1. 디자인 컨셉 설정 로그인 페이지를 만들기 전에 먼저 디자인 컨셉을 설정해야 합니다. 로그인 페이지의 느낌이나 분위기, 컬러 팔레트 등을 정하고, 그에 맞는 디자인을 구성해야 합니다.
2. HTML 구조 작성 HTML은 웹 페이지의 구조를 정의합니다. 로그인 페이지의 HTML 구조를 작성합니다. 로그인 폼, 아이디/비밀번호 입력 필드, 로그인 버튼 등을 포함해야 합니다.
3. CSS 스타일 작성 CSS는 웹 페이지의 스타일을 정의합니다. 로그인 페이지의 스타일을 작성합니다. 배경색, 폰트, 버튼 스타일 등을 포함합니다.
4. JavaScript 작성 JavaScript는 웹 페이지의 동작을 정의합니다. 로그인 페이지의 동작을 작성합니다. 예를 들어, 입력 필드에 입력된 아이디와 비밀번호가 맞는지 검사하는 코드를 작성합니다.
5. 적절한 이미지 사용 적절한 이미지를 사용하여 로그인 페이지를 더욱 이쁘게 만들 수 있습니다. 로고나 배경 이미지 등을 사용할 수 있습니다.
6. 반응형 디자인 적용 로그인 페이지는 다양한 기기에서 접속될 수 있습니다. 따라서, 반응형 디자인을 적용하여 다양한 크기의 화면에서도 로그인 페이지가 잘 보이도록 합니다.

위의 가이드를 참고하여, 로그인 페이지를 이쁘게 만들 수 있습니다. 디자인이나 스타일 등에 따라 다양한 방법으로 구성할 수 있으므로, 창의적인 아이디어를 적용하여 개성 있는 로그인 페이지를 만들어보세요!

 

이 가이드를 따라 작성해보자

 

예시

 

 

ChatGPT 가 작성한 코드

<!DOCTYPE html>
<html>
  <head>
    <title>Login Page</title>
    <style>
      body {
        background-color: #f2f2f2;
        font-family: Arial, sans-serif;
      }
      #login-form {
        background-color: #fff;
        border: 1px solid #ccc;
        border-radius: 5px;
        box-shadow: 0px 0px 5px #ccc;
        margin: 50px auto;
        max-width: 400px;
        padding: 20px;
        text-align: center;
      }
      #login-form h1 {
        color: #000;
        margin-bottom: 20px;
      }
      label {
        display: block;
        font-size: 14px;
        font-weight: bold;
        margin-bottom: 5px;
        text-align: left;
      }
      input[type="text"],
      input[type="password"] {
        border: 1px solid #ccc;
        border-radius: 3px;
        box-sizing: border-box;
        display: block;
        font-size: 16px;
        margin-bottom: 20px;
        padding: 10px;
        width: 100%;
      }
      input[type="submit"] {
        background-color: #000;
        border: none;
        border-radius: 20px;
        color: #fff;
        cursor: pointer;
        display: inline-block;
        font-size: 16px;
        margin-top: 10px;
        padding: 10px 20px;
        text-align: center;
        text-decoration: none;
        transition: background-color 0.2s ease-in-out;
      }
      input[type="submit"]:hover {
        background-color: #333;
      }
      #login-form a {
        color: #000;
        font-size: 14px;
        text-decoration: none;
      }
      #login-form a:hover {
        text-decoration: underline;
      }
      #error-message {
        color: red;
        font-size: 14px;
        margin-bottom: 10px;
        text-align: left;
      }
    </style>
  </head>
  <body>
    <form id="login-form">
      <h1>Login</h1>
      <label for="username">Username:</label>
      <input type="text" id="username" name="username" minlength="7" maxlength="15" required>
      <label for="password">Password:</label>
      <input type="password" id="password" name="password" minlength="5" maxlength="20" required pattern=".*[!@#$%^&*()].*">
      <input type="submit" value="Login">
      <div>
        <a href="#">Forgot username?</a>
        <a href="#">Forgot password?</a>
      </div>
      <div id="error-message"></div>
    </form>
    <script>
      const loginButton = document.querySelector('input[type="submit"]');
      loginButton.addEventListener('mouseover', () => {
        loginButton.style.backgroundColor = '#333';
      });
      loginButton.addEventListener('mouseout', () => {
        loginButton.style.backgroundColor = '#000';
      });
    </script>
  </body>
</html>

 

 

 

대충 작성한건데도 코드를 꽤 잘써준다 굿

부트스트랩 이것저것 찾아볼것도 없이 답변으로 바로 코드를 작성해주니 정말 편하다

ChatGPT 모델을 사용하는 파이썬 프로그램을 만들고, Colab을 사용하여 해당 프로그램을 검증하는 방법은 다음과 같습니다.

1.  ChatGPT 모델 설치

먼저, 파이썬 프로그램에서 ChatGPT 모델을 사용할 수 있도록 설치해야 합니다. OpenAI에서 공식적으로 제공하는 Python API인 openai 모듈을 사용하여 설치할 수 있습니다. 다음과 같이 명령어를 입력하여 openai 모듈을 설치합니다.

pip install openai

2. OpenAI API key 생성

openai 모듈을 사용하기 위해서는 OpenAI API key가 필요합니다. OpenAI API key를 생성하기 위해서는 OpenAI 웹사이트에서 API key를 생성할 수 있습니다. https://beta.openai.com/docs/quickstart

3. 파이썬 프로그램 작성

ChatGPT 모델을 사용하는 파이썬 프로그램을 작성합니다. 예를 들어, 다음과 같이 ChatGPT 모델을 사용하여 문장 생성을 수행하는 간단한 예제 코드를 작성할 수 있습니다.

import openai
import os

# OpenAI API key 설정
openai.api_key = os.environ["OPENAI_API_KEY"]

# 문장 생성 함수
def generate_text(prompt):
    # 문장 생성 요청
    response = openai.Completion.create(
        engine="davinci",
        prompt=prompt,
        max_tokens=60,
        n=1,
        stop=None,
        temperature=0.5,
    )
    # 생성된 문장 반환
    return response.choices[0].text.strip()

# 문장 생성 예제
generated_text = generate_text("Hello, how are you?")
print(generated_text)

위 코드에서 OPENAI_API_KEY는 API key를 환경변수로 설정한 경우에 사용하는 코드입니다. API key를 직접 입력하는 경우에는 다음과 같이 코드를 작성합니다.

openai.api_key = "YOUR_API_KEY"

4. Colab에서 실행

작성한 파이썬 프로그램을 Colab에서 실행하여 결과를 확인할 수 있습니다. Colab에서는 다음과 같이 코드를 작성하고 실행할 수 있습니다.

• Colab 파일 생성: https://colab.research.google.com/ 에서 파이썬 파일(.ipynb)을 생성합니다.
• 코드 작성: 위에서 작성한 파이썬 코드를 Colab 파일에 붙여넣습니다.
• API key 설정: Colab에서는 아래와 같이 API key를 설정합니다.

import openai_secret_manager

assert "openai" in openai_secret_manager.get_services()
secrets = openai_secret_manager.get_secret("openai")

# OpenAI API key 설정
openai.api_key = secrets["api_key"]

• 코드 실행: Colab 파일에서 위 코드들을 실행합니다.

5. 결과 확인

코드 실행 후, ChatGPT 모델이 생성한 문장이 출력되는지 확인합니다. 만약 문장이 출력되지 않거나 에러가 발생한다면, 코드를 재검사 합니다.

import re

s = """
    park 010-9999-9988
    kim 010-9909-7789
    lee 010-8789-7768
"""

pat = re.compile("(\d{3}[-]\d{4})[-]\d{4}")
result = pat.sub("\g<1>-####", s)

print(result)

package p2022_11_29;

public class test1 {
	public static void main(String[] args) {
		
		int even = 0; //짝수 합계 저장을 위한 변수 선언
		int odd = 0; //홀수 합계 저장을 위한 변수 선언
		
		for(int i=1; i<=10; i++) {
			if(i%2 == 0) { //짝수 여부 확인
				even = even+i; //기존에 저장된 even값과 i값을 더해서 다시 even 변수에 대입
			}
			else { //홀수 여부 확인
				odd = odd+i;
			}
		}
		System.out.println("짝수 합계 : "+even);
		System.out.println("홀수 합계 : "+odd);

	}
}

package p2022_11_29;

import java.util.Date;

public class test1 {
	public static void main(String[] args) {
		
		Date d = new Date();
		System.out.println(d);

	}
}

package p2022_11_29;

import java.beans.Statement;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.util.ArrayList;
import java.util.List;
import java.util.Scanner;

public class test1 {

	 public static void main(String[] args) throws Exception {
		 int result = 0;
		 	Scanner sc = new Scanner(System.in);
		 	System.out.print("부서번호 > ");
			int deptno = sc.nextInt();
			sc.nextLine();
			System.out.print("부서명 > ");
			String deptname = sc.nextLine();
			System.out.print("지역 > ");
			String deptloc = sc.nextLine();
	  
			Connection con = null;
			PreparedStatement pstmt = null;
			
			String driver = "oracle.jdbc.driver.OracleDriver";
			String url = "jdbc:oracle:thin:@localhost:1521:xe";
	  
			try {
				// JDBC 방식
				Class.forName(driver);
				con = DriverManager.getConnection(url, "scott", "tiger");
				
				String sql = "insert into dept values(?,?,?)";
				
				pstmt = con.prepareStatement(sql);
				pstmt.setInt(1, deptno);
				pstmt.setString(2, deptname);
				pstmt.setString(3, deptloc);
				
				result = pstmt.executeUpdate();	// SQL문 실행
				
			} catch(Exception e) {
				e.printStackTrace();
			} finally {
				if(pstmt != null) try { pstmt.close(); } catch(Exception e) {}
				if(con != null) try { con.close(); } catch(Exception e) {}
			}
	 
	 }
}

점수

95/100

jumin = input('주민번호 13자리를 입력하세요?')

if len(jumin) != 13:
    print('13자리를 입력하세요')
elif jumin[6] == '1' or jumin[6] == '3':
    print('남자')
elif jumin[6] == '2' or jumin[6] == '4':
    print('여자')
else:
    print('똑바로 입력하세요')

people.sort(key=lambda x: x['age'])
print(people)

n = int(input('몇번째 피보나치 수열을 구하세요?'))    # n=3
a = [1, 1]

for b in range(2, n):               # b = 2
    a.append(1)
    a[b] = a[b - 2] + a[b - 1]      # a[2] = a[0] + a[1] = 2
print(n, '번째 값 : ', a[n - 1])

import random

lot = []

while True:
    r = random.randint(1,45)
    if r not in lot:
        lot.append(r)
        if len(lot) == 6:
            break

print(sorted(lot))

점수

100 / 100

점수

100 / 100

2) 발명

1) 단위 테스트

2) 비공개 상용 소프트웨어의 경우 고가이며, 인력과 교육에 대한 유지관리 비용이 높다.

3) 시스템 테스트 기법

2) 통합테스트

3) 시스템테스트  

2) 유스케이스 

[문항8]  자바에서 프로그램 많이 사용하는 테스트 라이브러리는 무엇인지 쓰시오.[10점]

jUnit

[문항9]  다음은 보기는 어떤 프로토콜에 대한 설명인지 쓰시오.[10점]

SMTP

[문항10]  다음은 무엇에 대한 설명인지 쓰시오.[10점]

WebSocket

점수

100 / 100

2022.10.12 ~ 2022.10.14 (프로젝트 전)

- 프로젝트 주제 선정

2022.10.17 ~ 2022.10.21 (프로젝트 전)

- 요구사항 분석

- 카카오 오븐 사용 UI 기초 작업

- 작업 흐름도 작성

2022.10.24 (프로젝트 최종 발표 D-26)

- 카카오 오븐 사용 UI 기초 완성

- DB 설계

2022.10.25 (프로젝트 최종 발표 D-25)

- DB 설계, DB 컬럼 및 관계 설정

- AWS 원격 서버에서 오라클 환경 구축 및 프로젝트용 오라클 계정 생성

2022.10.26 (프로젝트 최종 발표 D-24)

- DB 데이터 타입 및 제약조건 확정

- eXERD 에서 포워드 엔지니어링으로 원격 서버 오라클에 테이블 생성

- Spring MVC 프로젝트 초기 환경설정 시작, DB 연결 확인 완료(SELECT 실행해봄)

- GIT Clone, 이클립스와 로컬 레포지토리 연결, Commit, Push 연습

2022.10.27 (프로젝트 최종 발표 D-23)

- Spring MVC 프로젝트 초기 환경설정 완료

- pom.xml, web.xml, servlet-context.xml, root-context.xml, Mapper 파일 생성 및 namespace 지정, Mybatis 환경설정 파일, 인터셉터 구현 초기 설정 완료

- GITHUB 원격 저장소 생성

- GITHUB 에 초기 환경설정 완료된 Spring MVC 프로젝트 Commit and Push

- 멤버들 각각 Branch 생성 및 Push 테스트

- EVENT 생성 (INSERT) 기능 구현

2022.10.28 (프로젝트 최종 발표 D-22)

- EVENT 생성 시 지도 API 기능 추가

- EVENT 리스트 불러오기, 출력하기

- EVENT 생성시 파일명 난수화해서 중복 방지

- 중간발표 발표 준비, PPT 준비

2022.10.29 (프로젝트 최종 발표 D-21)

- 전체 이벤트 리스트, 특정 지역의 이벤트 리스트, 특정 모임의 이벤트 리스트, 이벤트 검색결과 리스트 출력

- 이벤트 리스트 페이징 처리

2022.10.31 (프로젝트 최종 발표 D-20)

- 이벤트 상세페이지, 수정폼, 수정, 삭제 기능 추가

- 프로젝트 중간 발표