<팀원>

소프트웨어학과 최유정

소프트웨어학과 김유진

소프트웨어학과 유태훈

소프트웨어학과 오세영

소프트웨어학과 최정인

<팀원별 활동내용>

최유정

react.js를 이용하여 각 페이지들간의 연결과 페이지 내에서 js를 활용하여 목록을 추가하고 삭제하기, 현재 시간 띄우기, 자신의 이름을 입력하면 “Hello, 이름명”을 띄우는 등

 html에서 만들 수 있는 것들을 js를 활용하여 만드는 방법을 배웠다. 또한, local storage에 저장을 할 수 있는 방법을 배우게 되었다. 

이를 적용하여 프론트엔드를 담당한 팀원들이 만든 페이지들을 연결 할 수 있었다. 

처음에는 node.js와 mysql을 활용하여 진정한 백엔드를 하고 싶었으나 아직은 역량 부족으로 react.js로 마지막에 틀었다. 홈페이지들 간의 연결은 쉽게 되었으나, 

react.js를 학습을 할 때에는 혼자서 html,css,js를 다 해서 혼동이 오지 않았지만, 프로젝트를 할 때에는 html, css를 다른 팀원들이 만들었던 것도 있어 

그들이 어떤 것을 요구하는지 혼동이 올때도 있었지만, 그때 그때 물어서 해결을 하였다. 

이번 활동을 통해서 프로젝트를 하면서 서로간의 소통이 개발에 있어 얼마나 중요한 것인지 알게 되었던 활동인 것 같다.

김유진

HTML과 CSS 기초 공부를 통해 html은 웹 페이지의 구조를 정의하는 방법을 알게 되었고, css를 통해 스타일과 레이아웃을 제어하는 공부를 할 수 있었다. 

또한, 프론트엔드를 공부하면서 시각적 디자인 기술의 필요성을 알게 되었고 이를 공부하면서 나만의 웹 디자인을 개발하는 과정을 배워나갔다. 

프론트엔드 관련 기초를 배운 후 팀원과 상의 한 주제를 통해 관련 주제에 어떤 페이지들이 필요하며 어떤 기능들이 있어야하는지 토론해보면서 

웹에 필요한 기능들을 구체화하였다. 그리고 필요한 화면들의 디자인을 코딩을 통해 하면서 내가 짠 코드를 통해 어떤 부분이 변하는지 직접적으로 눈으로 관찰하면서 

html과 css에 대한 공부를 늘려갈 수 있었다. 마지막으로 웹 하나를 만드는데 필요한 화면을 다 만든 후, 백엔드와 결합하면서 온전한 웹 하나를 만들 수 있었다.

유태훈

우리 팀은 일기장 플랫폼 개발을 위해 백엔드 팀과 프론트엔드 팀으로 나누어서 협력하는 것을 목표로 설정했다. 

프론트엔드 팀에서 HTML과 CSS 기초 강의를 들으며, 이를 배우고 적용하는 것으로 시작했다. 

웹 페이지의 기본적인 구조와 스타일링을 구현하여 사용자가 편안하게 이용할 수 있는 환경을 구축했다. 

이를 토대로 팀원과 지인의 피드백을 수용하여 UI 디자인과 기능을 지속해 개선했다. 

추가로, 백엔드 팀과 협력하여 로그인/회원가입 정보와 작성한 일기 데이터의 안정적인 관리를 위한 데이터 저장 기능도 추가되었다. 

이처럼 다양한 활동을 통해 일기장 플랫폼을 성공적으로 구현하였으며, 이러한 과정을 통해 HTML과 CSS에 대한 숙련도를 높일 수 있었다.

오세영

node,js Express와 mysql을 사용하여 백엔드를 공부 후 실전에 적용했다. js 기초를 공부한 후 node.js 기초를 공부했다. 

그 후 구글링을 통해 mysql 연동, 회원가입 기능, 로그인 기능, 글 작성, 수정, 삭제 기능 등을 학습하고 웹에 추가했다. 

Express와 mysql을 연동해서 하는 것은 처음이었기에 개발 도중 많은 에러가 발생했다. 

구글링을 통해 해결하는 과정에서 더 깊은 학습 내용을 습득하고 실전에서 관련 이론들이 어떻게 사용되는지 몸소 체험하였다. 

최정인

백엔드 관련 이론을 습득하고 간단한 데이터들을 통제해보는 게 이번 하계 모각소의 목표였다. 

하지만 노트북 고장 등 여러 가지 개인 사정 때문에 내가 생각했던 계획대로 활동하지 못한 게 매우 아쉽다. 

원래 node.js를 다뤄보려고 했는데 자바스크립트를 습득하는 것으로 끝마치게 됐다. 자바스크립트의 기본 문법들을 배우고 js파일을 어떻게 html파일과 연동하는지, 

자바스크립트를 활용하여 html을 어떻게 수정하고 내가 원하는 코드를 가져올 수 있는지, 자바스크립트가 어떻게 웹사이트를 동작하게 하는지에 대해 배웠다. 

여기까지 개인적인 수학 내용이었다. 팀과 함께 활동하면서, 물론 내 실력이 부족했던 것도 있지만, 팀원간 소통의 중요성을 깨달았다. 

서로 협업하는 과정에서 어쩌면 당연한 말일지도 모르지만 당연한 걸 완벽하게 해내는 게 참 어렵다는 생각이 들었다.

<팀원별 최종성과>

최유정

해당 버튼을 눌렀을 때 프론트담당 팀원들이 이동하고 싶어하던 페이지로 이동하게 만들었다.

또한 따로 학습을 하며 react.js와 관련한 것들을 만들어 보았다.

김유진

프론트엔드 담당

유태훈

프론트엔드 담당

오세영

데이터베이스 만들고 회원가입을 하면 회원 정보가 데이터베이스에 저장되도록 하였다. 

회원 정보 데이터베이스에 따라 로그인이 가능하도록 하였다. 글을 작성하면 글의 정보에 따라 데이터베이스가 저장되고, 게시판 목록에 글을 나타내었다. 

더보기를 누르면 글의 상세 정보가 보이며 수정과 삭제를 통해 데이터베이스를 수정하고 삭제할 수 있다. 

최정인

자바스크립트에서 사용하는 대부분의 문법에 대해 이해할 수 있게 됐다. 

관련 인터넷강의의 코드를 따라해보고 읽어보면서 이 코드가 어떤 역할로 쓰이는지 어떻게 코드를 작성해야하는지 알 수 있게 됐다.

<팀원별 향후계획>

최유정

스스로 만든 html, css에서 적용하는 것은 할 수 있지만 아직 다른 팀원이 만든 html,css에서는 js의 적용이 어렵다는 것을 알게 되었다, 

물론 나의 실력이 부족하다는 것도 원인중에 하나라는 생각이 들었다. 

추후에 조금 더 공부하여 다른 팀원이 만든 html,css에서 local storage를 사용하는 것을 가능하도록 하고 싶다.  

김유진

html과 css 뿐만 아니라 자바스크립트를 더 배워서 프론트엔드의 경험을 다양하게 쌓을 계획이다. 

또한 웹 디자인에 필요한 기능들이 무엇이 있는지 등을 정확히 파악하는 공부를 해봐야겠다는 생각이 들었다. 

또한, 이번 하계 모각소를 통해 프론트엔드를 공부했지만 다음에는 백엔드를 공부해 내가 만든 프론트엔드를 백앤드와 연결해 직접 온전한 웹 페이지를 만들고 싶다. 

유태훈

이번 모각소 활동을 통해 프론트엔드 개발의 핵심 요소인 HTML과 CSS를 학습하고 기초를 다지는 작업을 마쳤다. 

이제는 HTML과 CSS에 대한 숙련도를 더 향상하기 위해 클론 코딩 프로젝트를 진행하고 싶다. 

또한, 이번 활동에서는 데이터를 저장하고 관리하는 백엔드의 역할은 다루지 않았기 때문에, 다음 기회에는 백엔드 개발까지 폭넓게 공부하고 싶다.

오세영

express에서 세션을 사용하여 로그인 여부 확인, 로그아웃 기능을 제작하고 싶었지만 내용을 이해하지 못해 적용하지 못했다. 

자신이 쓴 글만 삭제할 수 있도록 기능을 제작하는 것을 계획하였는데 못했다. 향후에 세션을 사용하고 자신이 쓴 글만 삭제할 수 있도록 하는 기능을 위해 추가 학습하고 싶다.

 추가적으로 TypeScript로 공부하고 싶다. 

최정인

원래 계획했었던 데이터베이스 통제를 다시 공부한 후 내가 짠 js코드들이 html, css 파일과 어떻게 상호작용하는지 공부하는 게 필요할 것 같다. 

그리고 컴퓨터 언어 말고도 프레임워크 등 다양한 것들이 개발에 사용되는 것을 알았기 때문에 그 중에 하나를 잡아서 깊게 파보는 것도 좋을 것 같다.

<발표자료>