이번 프로젝트를 진행하면서 아래와 같은 장점들을 위해 react에서 사용된 컴포넌트 기법을 이번 프로젝트에 도입할려고 했다. 기존 수업으로는 html,css만 배웠기 때문에 html파일로 컴포넌트를 만들기로 했었다.
1. 팀원들 간에 균등한 작업량
2. 작업량에 대한 효율성
3. 각자의 코드를 가시성 극대화
4. 하기 위해 react의 컴포넌트 방식을 도입하여 각 팀원들에게 일을 나누어 줄려고했다.
5. 깃을 배웠지만 브랜치 부분을 배우지 않았기 때문에 html 파일 하나로 공유하면 굉장히 많은 충돌이 일어날 것 같았다.
아래는 app.html에서 other-page.html을 불러오는 코드입니다.
여러가지 시도를 해보았지만 iframe을 사용하는 방식이 가장 쉽고 직관적이었습니다.
(iframe : HTML 문서 내에 다른 HTML 문서를 포함할 수 있게 하는 태그)
예시 코드
//app.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Main Page</title>
<link rel="stylesheet" href="app.css">
</head>
<body class="main-page">
<h1>Main Page</h1>
<iframe src="other-page.html"></iframe>
</body>
</html>
//other-page.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Other Page</title>
<link rel="stylesheet" href="other-page.css">
</head>
<body>
<h1>Other Page</h1>
<p>This is the content of the other page.</p>
</body>
</html>
각 css파일을 간단하게 색상,폰트 크기 등의 코드를 작성했습니다.
결과
파일,색상 전부 잘 가져온 것 같습니다.
'팀프로젝트 > 팀소개웹사이트' 카테고리의 다른 글
| nothing 3일차 (0) | 2024.04.03 |
|---|---|
| nothing 1,2일차 (0) | 2024.04.02 |
| 팀소개웹사이트 3일차 (1) | 2024.02.16 |
| 팀소개 웹사이트 2일차 (0) | 2024.02.16 |
| 팀소개 웹사이트 1일차 (1) | 2024.02.13 |
