: WIL (Week I Learned) :
처음 스파르타코딩클럽의 모집 공고 글을 보고 실무형 AI 웹 백엔드 개발자 과정에 들어갔습니다.
그렇게 시작한 낯선 곳에서 각각의 개성이 뚜렷한 여러 사람들을 마주하며 공부에 임했습니다.
내가 보고 느끼고 배우며 공부한 것들을 이제 매주 끄적끄적 열심히 적어가며 시작해보겠습니다.
백엔드 개발자를 꿈꾸는 3명과의 첫 만남
처음 만났을때는 많이 어색하고 과묵했던 것 같습니다.
그래도 공통 관심사도 찾아보고 공부 얘기도 해보고..
처음 만났을 때보다는 어색함이 조금은 덜어진 것 같네요.
저 그리고, 김성호님, 김주훈님, 최희원님과 함께 프로젝트를 진행하였고, 저는 우선 팀장을 맡았습니다.
얼떨결에 팀장을 맡아서 처음에는 당황도 하고 허둥지둥 댔지만, 팀원 분들이 격려해주고 도와주시니 감동일 따름입니다.
3일간의 길다면 길고, 짧다면 짧았던 미니 프로젝트
저를 포함한 총 4명의 팀원들과 3일이었지만, 다 같이 열심히 만들어 보았습니다.
아직은 처음이고 밟아가는 과정에 있어 처음 만들어보는 미니 프로젝트이지만 만족스럽습니다.
저희의 "미니 프로젝트 : 팀 소개 웹 페이지 만들기"에서 제가 맡았던 부분들을 적어볼까 합니다.
1. 우리 팀의 메인 페이지
메인 페이지는 다 같이 고민하고 결정하였습니다.
미리 상의해 둔 컨셉으로 만들었고, 저는 메인 페이지에서의 상단 타이틀과 소개 타이틀을 맡았습니다.
- 맨 위 상단의 메인 타이틀
/* 맨 위 상단 */
.main_title {
/* 가로, 세로 크기 및 바깥 여백 */
width: 80%;
height: 270px;
margin: auto auto 50px auto;
/* 백그라운드 사진 및 명암, 위치 설정 */
background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url('메인 사진 URL');
background-position: center; /* 백그라운드 이미지 위치 조정 */
background-size: cover; /* 이미지 한도 내 크게 설정 */
color: white; /* 폰트 색상 */
/* mytitle의 Flex Container 정의 */
display: flex;
flex-direction: column; /* 주 축 정의 : 수직 */
align-items: center; /* 주 축 정렬 방식 : 중앙 */
justify-content: center; /* 교차 축 정렬 방식 : 중앙 */
}해당 CSS를 넣어주기 위해 .main_title 클래스를 지정해주고 세부적인 위치를 구성시켰습니다.
가로와 세로 값을 조절하기 위해 width와 height를 이용하여 크기를 조정해주고 margin값을 설정해주어 위치를 결정해주었습니다.
그리고 background설정을 통해 배경의 이미지와 위치, 크기를 조절해준 뒤 linear-gradient(0deg, rgba(0,0,0,0.2),rgba(0,0,0,0.2))설정을 해주어 그라데이션 효과를 주었습니다.
그리고 display : flex;를 통해 .main_title의 세부적인 레이아웃 위치를 조절해줍니다.
- 중간중간 구간을 나눠주자!
/* 각 타이틀 사이를 나눠주는 구간 */
.contents {
width: 75%;
margin: 50px auto 50px auto;
padding-top: 40px;
padding-bottom: 30px;
/* 테두리 스타일 */
border-top: solid;
border-bottom: solid;
border-width: 1px;
text-align: center; /* 텍스트 위치 중앙 */
}우선 .contents 클래스로 해당 구역을 설정해주려고 생각했습니다.
width으로 가로 최대 크기를 나눠주고, margin과 padding(top, bottom)을 이용하여 안쪽과 바깥 여백을 지정해주었습니다.
위와 아래의 테두리를 border-top과 border-bottom에 solid 형태의 실선으로 1px 만큼의 크기를 주었습니다.
그리고 텍스트가 깔끔하게 보이도록 text-align : center로 중앙에 위치하게끔 설정해주었습니다.
- 우리 8팀 식탐이들을 소개합니다!
/* introduce 안에 들어가는 설정 */
.introduce {
background-color: lightblue;
width: 80%;
height: 350px;
margin: 50px auto 50px auto;
}
/* introduce 안에 들어가는 모든 <p> 태그들의 설정 */
.introduce p {
font-size: 20px;
line-height: 100%;
margin-top: 20px;
}
/* introduce 안에 들어가는 모든 <h1> 태그들의 설정 */
.introduce h1 {
font-size: 37px;
border-bottom: solid;
border-width: 2px;
margin: 10px 0px 0px 370px;
padding: 20px 0px 20px 0px;
}
/* team_title의 설정 */
.team_title {
width: 350px;
height: 350px;
float: left; /* 이미지 바로 옆에 텍스트 추가가 가능하게끔 설정 */
margin: auto 30px auto auto;
/* team_title에 들어가는 이미지에 대한 설정 */
background-image: url("/static/출출이.jpg");
background-size: cover;
background-position: center;
}
/* team_text 안에 들어가는 값을 위한 여백 설정 */
.team_text {
margin: 30px 30px 30px 10px;
}팀을 소개하는 곳은 .Introduce 클래스로 같은 공간에 넣어주고 .team_title과 .team_text를 추가 지정해줌으로써 양 옆으로 이미지와 텍스트 구역이 나눠지게끔 설정해주었습니다.
해당 구역들의 width과 height를 이용하여 사진과 텍스트 구역이 최대한 같은 크기로 있을 수 있도록 해주었습니다.
그리고 소제목 밑에 border-bottom : solid;를 사용하여 소개 타이틀 밑에 실선을 삽입해서 구역을 나눠주는 느낌을 주고, 이미지 옆 공간에 텍스트를 배치할 수 있게끔 float : left;를 해주었습니다.
2. 개인의 소개를 맡아주는 웹 페이지
개인 페이지는 팀원 분들이 틀을 만들어주시고 개인 정보를 적고 CSS를 조금 수정했습니다.
저는 이 페이지에서 맡은 파트가 JQuery와 Ajax를 이용하여 MongoDB에 데이터를 넣어주는 백엔드 파트를 담당했습니다.
- MongoDB에 데이터를 저장
# 칭찬 등록(POST) API
@app.route('/member1', methods=['POST'])
def member1_post():
name_receive = request.form['name_give']
praise_receive = request.form['praise_give']
doc = {
'name': name_receive,
'praise': praise_receive,
}
db.member1.insert_one(doc)
return jsonify({'msg': '칭찬 고마워요!'})
# 등록된 칭찬 목록 읽어오기(Read) API
@app.route('/member1', methods=['GET'])
def member1_get():
praise_list = list(db.member1.find({}, {'_id': False}))
return jsonify({'praises': praise_list})// 웹 페이지 시작 시 띄워 줄 것
$(document).ready(function () {
show_praise();
});
// 이름과 칭찬에 들어간 데이터를 생성(POST)
function save_praise() {
let name = $('#name').val()
let praise = $('#praise').val()
$.ajax({
type: "POST",
url: "/member1",
data: {'name_give': name, 'praise_give': praise},
success: function (response) {
alert(response["msg"])
window.location.reload()
}
});
}
// 칭찬하기 버튼을 누르면 칭찬이 추가되는 칸 (GET 방식으로 생성된 데이터 값 표시)
function show_praise() {
$('#praise-list').empty()
$.ajax({
type: "GET",
url: "/member1",
data: {},
success: function (response) {
let rows = response['praises']
for (let i = 0; i < rows.length; i++) {
let name = rows[i]['name']
let praise = rows[i]['praise']
let temp_html = `<div class="card praises_title">
<h5 class="praises_name">[ 이름 : ${name} ]</h5>
<p class="praises_text"> : ${praise}</p>
</div>`
$('#praise-list').append(temp_html)
}
}
});
}데이터를 넣어주는 방식인 POST방식과 넣어준 데이터를 조회하고 표시해주기 위해 GET방식을 사용했습니다.
: POST :
Javascript에서 /member1 경로에 name_give에 name값을 Python의 name_receive에 딕셔너리 형태(doc = { })로 만들어진 데이터 값을 db.member1.insert_one(doc)로 값을 넣어줍니다.
넣어주려는 해당 값이 넣어지면 window.location.reload()를 이용해 현재 웹 페이지를 새로고침 시킵니다.
: GET :
praise_list = list(db.member1.find({}, {'_id': False}))로 praise_list에 id값을 제외한 상태로 /member1 경로에 있는 데이터를 찾아서 리스트의 형태로 저장합니다.
그 후 return jsonify({'praises': praise_list}), JSON의 형태로 praise_list에 담긴 값을 리턴을 통해 가져와줍니다.
이후 해당 Javascript에서 GET방식으로 praises의 값을 rows에 담은 뒤 반복문(for문)을 통해 0 ~ 최대 길이(length) 값만큼 반복해줍니다.
let name = rows[i]['name']을 사용하여 rows에 담긴 0번째 name 값을 let name에 담아주고 백 틱(`) 안에 담긴 내용 중 이름과 내용을 ${name}으로 변경하여 해당 데이터 안에 있는 값을 담아줍니다.
그리고 html의 내용을 temp_html에 담아준 뒤 JQuery를 이용하여 praise-list에 temp_html을 추가(.append)해줍니다.
마지막으로 $(document).ready(function(){});을 사용하여 show_praise();의 값을 웹 페이지 시작 시 출력해주면 끝이 납니다.
3일간 미니 프로젝트를 진행하고 느낀 점
처음에는 프로젝트를 어떻게 만들지.. 하고 고민과 걱정이 가득했습니다.
하지만 팀원분들의 격려와 서로서로 도와주며 조급해하지 않고 만드니 고민과 걱정이 점차 줄어들었습니다.
그리고 프로젝트를 만들 때 개인의 능력도 중요하지만 가장 중요한 것은 팀과의 커뮤니케이션과 협업이 가장 중요하다는 생각을 했습니다.
제가 공부해 본 것을 토대로 JQuery와 Ajax도 활용해보고 프론트엔드와 백엔드 쪽을 만들어 보면서 많은 경험과 지식을 쌓았다고 생각됩니다.
처음 만든 팀 프로젝트여서 다소 부족한 모습도 있었지만, 완성본을 보고 팀원분들과 함께 기뻐하며 고생했다고 서로 격려하던 기억이 가장 크게 남았습니다.
항상 감사합니다.
'TIL 및 WIL > WIL (Week I Learned)' 카테고리의 다른 글
| [WIL] 22.05.23 ~ 22.05.27 (사물인식 팀 프로젝트 끝, Django 시작) (0) | 2022.05.27 |
|---|---|
| [WIL] 22.05.16 ~ 22.05.20 (머신러닝 강의, 사물인식 팀 프로젝트) (0) | 2022.05.20 |
| [WIL] 22.05.09 ~ 22.05.13 (인스타 팀 프로젝트의 끝, Git과 머신러닝) (0) | 2022.05.14 |
| [WIL] 22.05.02 ~ 22.05.06 (시작, 팀 프로젝트) (0) | 2022.05.06 |
| [WIL] 22.04.25 ~ 22.04.29 (프로젝트의 연속, 개인 프로젝트) (0) | 2022.04.29 |
