UI 설계 및 구현

1.문제

react 를 이용하여 위 화면을 그대로 만들 것
* 플러스 버튼을 누르면 해당 행의 나이가 증가해야한다.
* 마이너스 버튼을 누르면 해당 행의 나이가 감소해야한다.

import React, { useState } from 'react';
import './App.css';

function App() {
  const [users, setUsers] = useState([
    { name: '유저1', age: 20, gender: '남자', phone: '010-1111-1111' },
    { name: '유저2', age: 30, gender: '남자', phone: '010-2222-2222' },
    { name: '유저3', age: 40, gender: '남자', phone: '010-3333-3333' }
  ]);

  const plusAge = (index) => {
    const newUsers = [];
    for (let i = 0; i < users.length; i++) {
      newUsers[i] = { name: users[i].name, age: users[i].age, gender: users[i].gender, phone: users[i].phone };
    }
    newUsers[index].age += 1;
    setUsers(newUsers);
  };

  const minusAge = (index) => {
    const newUsers = [];
    for (let i = 0; i < users.length; i++) {
      newUsers[i] = { name: users[i].name, age: users[i].age, gender: users[i].gender, phone: users[i].phone };
    }
    newUsers[index].age -= 1;
    setUsers(newUsers);
  };

  return (
    <div className="App">
      <table>
        <thead>
          <tr>
            <th>이름</th>
            <th>나이</th>
            <th>성별</th>
            <th>전화번호</th>
            <th>나이증가</th>
            <th>나이감소</th>
          </tr>
        </thead>
        <tbody>
          {users.map((user, index) => (
            <tr key={index}>
              <td>{user.name}</td>
              <td>{user.age}</td>
              <td>{user.gender}</td>
              <td>{user.phone}</td>
              <td>
                <button onClick={() => plusAge(index)}>플러스</button>
              </td>
              <td>
                <button onClick={() => minusAge(index)}>마이너스</button>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

export default App;

.App {
  text-align: center;
  padding: 20px;
}

table {
  width: 80%;
  margin: 0 auto;
  border-collapse: collapse;
}

th, td {
  border: 1px solid black;
  padding: 10px;
  width: 200px;
}

th {
  background-color: black;
  color: white;
  height: 30%;
}

button {
  padding: 5px 10px;
  margin: 5px;
  border-radius: 5px;
  border: 1px solid black;
  cursor: pointer;
}

 

2.문제

모범답안

1. 브라우저에서 WAS 측으로 요청을 보내는 방법 모두 작성 >> url 입력 a태그 form태그 JS 활용하여 주소 변경 (location.href) AJAX 통신 2. 다음에서 말하는 마이바티스 설정에대한 name 값을 작성 "JDBC타입을 파라미터에 제공하지 않을때 null값을 처리한 JDBC타입을 명시" >> jdbcTypeForNull 3. 마이바티스가 ResultSet 을 java Object와 mapping 하는 과정에 대해 설명 >> "RS의 컬럼명"과 "resultType의 field명"을 비교하여 mapping시킨다. 4. mapper 파일의 select 태그의 resultType 속성에 작성하는 클래스파일의 경로에 대해 별칭을 등록하기위한 작업에 대해 작성 >> <typeAliases>   <typeAlias alias="BoardVo" type="cohttp://m.kh.app.board.vo.BoardVo"/> </typeAliases> 5. mapUnderscoreToCamelCase 는 어떤 경우에 사용하는가? >> rs 의 컬럼명 중 snake_case 를 camelCase 로 변경하여 맵핑한다. 6. 특정 문자열을 추가하거나 제거하기위한 마이바티스의 동적SQL 태그는? >> trim 태그 7. Connection Pool 에 대하여 설명 >> Connection 객체들을 보관하는 공간. conn객체가 필요하면 pool 에서 꺼내 사용하고,  사용을 마치면 pool에 반납한다. 8. Java 클래스를 WebComponent(Servlet) 로 만들어서 WebCotainer 에 등록되게 하려면, 어떤 설정을 해야하는가? (xml 방식 , annotation 방식 둘 중 하나만 작성) >> [annotation 방식] HttpServlet 상속받기 @WebServlet("/경로") 를 class 위에 추가하기 [xml 방식] 은 쓰신분들이 한분도 없으니 패스하겠습니다. 9. Controller layer 의 역할 작성 >> 데이터 꺼내기(+데이터 뭉치기) 서비스 호출 결과처리(문자열 내보내기) 10. Service layer 의 역할 작성 >> 비지니스 로직 처리 DAO 호출 트랜잭션처리 , 자원반납 11. Dao layer 의 역할 작성 >> SQL 실행 12. WEB-INF 폴더의 특징은? >> 외부에서 접근 불가능 (관계자 외 출입금지) 13. localhost 의 ip주소는? >> 127.0.0.1 14. ajax 통신방식에서 데이터를 전달할 때 일반적으로 사용하는 형식 2가지 >> XML , JSON 15. http status code 중, 4XX 는 어떤의미인가? >> 클라이언트가 잘못함 16. http status code 중, 5XX 는 어떤의미인가? >> 서버가 잘못함 17. JSP의 동작 방식에 대해 작성 >> JSP에 요청이 들어오면, Servlet 으로 변환되어 실행됨. 18. http status code 중 4XX 코드는 어떤 의미를 가지는가? >> 클라이언트가 잘못함 19. http status code 중 5XX 코드는 어떤 의미를 가지는가? >> 서버가 잘못함 20. 마이바티스를 사용하기 위한 준비과정(환경설정)에 대해 작성 >> - jar 파일 준비 - 설정(conf.xml) 파일 작성하기 - 설정파일을 이용하여 SqlSession 얻는 자바코드 작성 - mapper 파일에 쿼리문 작성하기 - conf 파일에 mapepr 파일 연결하기