[내일배움캠프] 1주차 10/31 ~ 11/4 WIL
길다면 길고 짧다면 짧은 1주차가 끝났다.
처음에는 정말 긴장되고.. 떨렸는데 정말 좋은 팀원분들과 팀장님을 만나서 정말 재밌고 알차게 프로젝트를 마친 것 같다.
The four Fs 템플릿을 참고해서 글을 작성하였다!
FACT. 사실, 객관
첫째날 에는 조 배정을 받았다. 처음에는 다들 어색어색했지만 팀장님이 먼저 말도 걸어주시고 정말 잘해주셔서
다들 말이 트였고 바로 S.A를 만들기 위해 아이디어를 짰고, S.A 제출 후 역할분담을 정했다.
내 역할은 개인페이지 팀 소개페이지 댓글기능 구현을 맡았고 첫째날은 여기서 끝났다.
둘쨋날에는 본격적으로 팀 소개페이지 댓글 기능을 만들었고, 만든 후에는 개인페이지를 만들었다.
개인페이지 만드는 것 부터 조금 꼬였다 ㅋㅋㅋ S.A에서 만든 틀대로 만들고 싶어 나름대로 고생을 해봤는데 완전 망해버렸다...
밤 늦게까지 으쌰으쌰 만들다가 결국 포기하고 갈아 엎기로 했다.
셋째날엔 홈페이지 다 갈아엎고 새로 만들었다. 대문은 웹개발 종합반에서 배운 대문 그대로 가져가기로 했고
먹고 싶은 음식들은 부트스트랩에 있는 Carousel ( 슬라이드 ) 를 이용해서 만들었다.
만든 뒤에 댓글 기능을 구현하려고 이틀차에 만든 팀 소개페이지 댓글 기능을 이용해 만들었다.
넷째날에는 https://www.w3schools.com/howto/howto_js_toggle_dark_mode.asp
How To Toggle Between Dark and Light Mode
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
해당 코드를 참고해 버튼을 누르면 다크모드/라이트모드로 전환된다.
<style 부분>
.body {
padding: 25px;
background-color: white;
color: black;
font-size: 25px;
}
.dark-mode {
background-color: black;
color: white;
}
<script> 부분
function myFunction() {
const element = document.body;
element.classList.toggle("dark-mode")
<body 부분>
<h5 STYLE="text-align: center">버튼을 누르면 다크모드/라이트모드로 전환됩니다.</h5>
<button onclick="myFunction()" style="display: block ;margin: 10px auto 10px auto;
box-shadow: 0px 0px 4px 0px gray;" title="버튼을 누르면 다크모드/라이트모드로 전환됩니다.">다크모드 전환
</button>
<style> 에서
.body 의 스타일을 수정 해준다.
padding을 25픽셀만큼 늘려주고 백그라운드 색깔을 하얀색으로 변경한다.
글자 색을 검은색으로 바꾸고 폰트 사이즈를 25px로 조절한다.
.
.dark-mode의 스타일을 수정 해준다.
백그라운드 색깔을 검은색으로 변경합니다. 글자 색을 하얀색으로 바꾼다.
<script> 에서
function myFunction을 선언한다.
Document.body는 문서의 콘텐츠를 수용하는 요소. document.body 속성을 통해 <body> 요소에 접근할 수 있다.
document.body 를 변수 element로 선언한다.
토글은 element의 classList에 dark-mode가 있는지 확인해서 없으면 제거해주고 있으면 생성해준다.
<body>에서 ..
버튼에 myFunction()온플릭 함수를 선언합니다. 그 다음 실행 후 버튼을 누르면 다크모드/라이트모드로 전환된다.
<style> 에서
.body 의 스타일을 수정 해줍니다.
padding을 25픽셀만큼 늘려주고 백그라운드 색깔을 하얀색으로 변경합니다. 글자 색을 검은색으로 바꾸고 폰트 사이즈를 25px로 조절합니다.
.
.dark-mode의 스타일을 수정 해줍니다.
백그라운드 색깔을 검은색으로 변경합니다. 글자 색을 하얀색으로 바꿉니다.
<script> 에서
function myFunction을 선언합니다.
Document.body는 문서의 콘텐츠를 수용하는 요소. document.body 속성을 통해 <body> 요소에 접근할 수 있습니다.
document.body 를 변수 element로 선언합니다.
토글은 element의 classList에 dark-mode가 있는지 확인해서 없으면 제거해주고 있으면 생성해줍니다.
<body>에서 ..
버튼에 myFunction()온플릭 함수를 선언합니다. 그 다음 실행 후 버튼을 누르면 다크모드/라이트모드로 전환됩니다.
그 후 티스토리 이미지를 누르면 내 티스토리 블로그로 넘어가지는 하이퍼링크를 만들었다.
팀장님한테 내 프로젝트를 보낸 후 팀장님이 말씀하신 발표에 필요한
프로젝트를 만들면서 어려웠던 점, 해결하지 못한 점 , 각자 마음에 드는 코드를 뽑아 자랑하기를 금요일 10시까지
제출 해 달라고 하셔서 셋째날에 조금 틀을 만들어뒀다.
넷째날에 일어나서 바로 만들고 제출했다. 제출 한 후 점심 식사를 한 뒤 프로젝트 발표를 했다.
Feeling , Finding
첫날에는 긴장됐으나 팀장님이 정말 분위기를 잘 살려주셔서 재밌게 미니프로젝트 구성 및 S.A 제출을 하였고
둘쨋날~ 발표날까지 정말 재밌게 만든 것 같다.
개인별 홈페이지 만들때 진짜 너무 어지러웠다. ㅋㅋㅋㅋ S.A에서 짠 틀로 만들고 싶었는데 생각보다 너무 어려웠다.
어찌저찌 해서 만들었는데 창 최소화를 하거나 모니터 크기가 작은 곳으로 옮겼더니 가운데 정렬이 되지 않고
뒤죽박죽 섞인 채로 나와서 멘붕이 크게 왔다.ㅋㅋㅋ 그래서 다음날에 그냥 싹 다 갈아엎고 처음부터 다시 만들었다.
내가 생각한대로 만들어지지 않아서 너무 아쉬웠다 ㅠㅠ 그래도 다크모드/라이트모드 버튼은 잘 만든 것 같다 ㅋㅋㅋ
그 후에 팀장님한테 냈는데 혼났다. 이유는 팀장님이 슬랙에 app.py를 올리셨는데 거기에 db에 guestbooks로 가는 것과
comment 로 가는 코드를 주셨는데 나는 guestbook이 팀 방명록 소개페이지에 쓸 코드고 comment가 개인 소개 홈페이지로 가는 코드인 줄 알고 comment로 만들었는데 guestbook으로 만들어야 했었다 ㅠㅠ
그리고 비밀번호도 같이 받도록 만들었었는데 이것도 만들면 안됐었다.
팀장님한테 먼저 물어보고 했었어야 했는데 말도 없이 너무 나 혼자 앞서간 것 같았다.
팀장님은 최대한 우릴 배려 해줬는데.. 정말 죄송했다 ㅠㅠ 그래서 얼른 comment를 guestbook 으로 수정하고
비밀번호 받는 코드를 없앤 뒤 제출했다. 너무 죄송스러웠다. 안그래도 바쁘신데..
그 후에 코드를 짜면서 어려웠던 코드, 해결하지 못한 점, 내가 자랑하고 싶은 코드를 적어서 냈다.
어려웠던 코드는
1-1 개인 홈페이지를 만들기 전 팀 소개페이지 댓글기능 구현을 만들때 웹개발 종합반때 만든 프로젝트를 참고하며 만들었는데
실행한 후 localhost:5000 에서 닉네임, 비밀번호, 댓글을 적고 버튼을 누르면 계속 raise exceptions.BadRequestKeyError(key)
werkzeug.exceptions.BadRequestKeyError: 400 Bad Request: The browser (or proxy) sent a request that this server could not understand.
KeyError: 'name_give' 이런 오류가 나와 app.py 와 index.html 에서 name_give 가 들어간 부분 중에 틀린 부분이 있는지 살펴보는데 나오지 않아
html 쪽에 바디 부분 중에 틀린 부분이 있나 봤는데
<div class="card1">
<div class="form-floating mb-3">
<input type="email" class="form-control" id="name2" placeholder="name@example.com">
<label>이름/닉네임 입력</label>
</div>
여기서 id 값이 달라서 출력이 안되는 것이었다. 그래서 id값을 수정 했더니 POST가 정상적으로 작동했다.
1-2 따로 .js 파일을 만들어서 그 파일에 ajax 함수들을 적고 (GET,POST) 실행하면 POST는 되는데 GET은 출력이 안된다..
다른 것들을 수정하고 해봐도 출력은 계속 안되서 고생했는데 팀원 분이 그냥 웹개발 종합반에서 배운 대로 html 안에 <script> 태그에 넣으라고 해서
넣어봤더니 놀랍게도 바로 GET이 출력이 됬다.
해결하지 못한 점은 댓글 삭제 기능은 구현을 했으나 수정 하는 법을 해결을 못했다.
자랑하고 싶은 코드는 버튼을 누르면 다크모드/라이트모드로 전환 되는 코드를 적어서 팀장님께 드렸다.
발표를 하면서 느낀 점은 다들 너무 잘만들었고, 확실히 전공자와 비전공자 차이가 확실하게 났다. 정말 감탄밖에 안나왔다 ㅋㅋㅋ 또 팀 이름이 너무 웃겼다. 분위기가 너무 좋았던 것 같다. 우리 팀 발표 차례가 왔는데 팀장님이 진짜 대박이었다..
레크리에이션 강사를 보는 것 같았다. 텐션을 너무 올려주셔서 내가 발표 할 때도 긴장 없이 재밌게 말 했던 것 같다.
발표가 끝난 후 저녁을 먹고 팀 별 KPT 작성을 했다. 우리 팀의 문제점은 너무 팀장님만 하신 것 같다.
처음에 역할 배정은 했으나 .. 팀장님이 거의 대부분을 하셔서.. 이 부분은 무조건 고쳐야 할 것 같다.
그리고 git과 github 활용을 하지 않았다. 그래서 슬랙으로 파일을 주고 받다보니 너무 비효율적이었던 것 같다.
팀장님 외에 말을 주도적으로 꺼낸 사람이 별로 없었다. 팀장님 제외 mbti가 다 i로 시작해서 그런 것 같은데.. 이 부분도
고쳐야 할 것같다 ㅠㅠ 그리고 팀원들과 상의 없이 멋대로 이상한 코드를 넣지 말고, 넣기 전에 꼭 미리 물어봐야겠다.
모르는 부분이 생기면 바로 팀원들에게 물어봐야겠다! 이번 미니프로젝트를 통해 뼈저리게 느꼈다.
Future
의사소통이 제일 중요한 것 같다. 그리고 적절한 역할 분배를 통해 빠르고 깔끔하게 프로젝트를 완성 해야 할 것 같다.
모르는 부분이 있으면 무조건 팀원들한테 물어보고, 팀원들도 모르면 튜터님한테 가서 물어봐야되겠다.