1. 지원서 데이터 전송하기 1) 문제 이 부분에서 많이 고민하고 논의했다. 가장 많이 했던 질문은 이 질문이었다. "지원 데이터를 어떻게 받아야 할까?" 여기서 서버가 절실히 필요해서 서버 공부도 병행하려고 했지만 3주가 조금 안되는 시간안에 리액트를 처음 입문하면서 서버까지 공부하기엔 시간이 도저히 안났다. 회의결과 다음 세 가지로 의견이 좁혀졌다. 그래도 어떻게든 서버에 DB를 구축해서 JSON파일과 마크다운문서로 데이터를 받고 싶다. 시간이 없으니 구글폼으로 받자. 서버까지는 아니어도 지원서 페이지를 만들었으니 활용할 방안을 찾자. 이미 지원서를 열심히 만들었으니 최대한 활용하고 싶어서 3번 의견에 동의하여 대안을 찾아보았다. 구글 스프레드시트 API를 이용하면 지원은 Apply 페이지에서 구현한..

1. 웹 페이지 배포 1) 웹 서버 공부 배포를 하기 전에 웹에 관한 지식이 거의 없었다. 그래서 프론트 배포에 관한 웹 지식에 대해 더 공부해보았다. 그 결과 웹 페이지 배포를 위한 웹서버의 필요성을 느끼게 되었다. 현재 동아리 소개 페이지는 기본적인 html, css, javascript등의 파일을 보여주기만 하는 정적 호스팅이다. 따라서 DB나 SQL등의 백엔드 서버가 필요하지 않다. 2) 정적 페이지 호스팅하기 웹페이지 배포하기 사실 우리 학교에는 동아리 전용 우분투 서버가 있다. 이 서버를 사용하여 배포하며 배포에 관한 지식도 같이 공부할 생각이었다. 하지만 현재 가장 급한건 신입생 모집 일정을 맞춰서 우선 배포부터 하는 것이다. 회의 결과 빠른 배포를 위해 Netlify를 이용해서 배포를 진행..

1. 페이지 구현 1) 초안 Recruit 페이지는 지원을 위한 페이지이다. 사실 여기에서 의견이 조금 엇갈렸었다. 시간이 촉박하니 여기까지만 하고 지원하기 버튼은 구글 폼 링크를 연결해서 끝내자는 의견과 그래도 소개 페이지까지 만들었는데 조금만 더 노력해서 지원서 양식까지 만들어보자는 의견이었다. 회의 결과 결국 지원서 양식까지 만들기로 했고 지원서 양식은 내가 구현하기로 했다. 2) content Recruit 페이지 Recruit 페이지는 모집을 위한 페이지이다. 간단하게 지원하러 가기 버튼과 FAQ로 구성했다. 버튼을 누르면 지원서 양식 페이지로 이동하도록 구성했다. 이 과정에서 결국 나중에 하려고 미루었던 React의 Router을 접하게 되었다. Apply 페이지 Apply page는 지원서 ..

1. 구현하기 1) 초안 Members 페이지에는 동아리 멤버들의 기본 정보와 졸업한 선배들의 기본 커리어를 넣기로 했다. 이 과정에서 CSS의 Grid를 이용하기로 했다. 이 과정에서 또한 어떻게하면 임펙트있고 기억에 오래 남게 우리 동아리의 멤버들을 보여줄 지 고민했고 그 결과 필요한 정보만 깔끔하게 보여주기로 했다. IT동아리에서 보여줘야 할 건 동아리원의 경우 기술 스텍, 졸업한 선배의 경우 현재 커리어이다. Members 페이지는 이 페이지를 맡은 친구가 구현해주었다. 2) content 동아리 멤버 정보 동아리 멤버들의 정보에는 관심 기술스택들과 간단한 자기 소개를 넣었다. 졸업생 커리어 졸업생 커리어에는 기술 스택과 현재 커리어를 넣었고 현재 다니는 회사들의 로고를 넣었다. 또한 가독성을 위..

1. 페이지 구현 1) 초안 About Us 페이지는 이름 그대로 우리에 대해 소개하는 페이지이다. 대표 이미지, 소개 사진, 임원진들, 동아리 활동 사진 등을 넣기로 했다. 다음 사진은 회의에서 나온 초안이다. 2) content 구현 기본 content들의 구성은 About Us 페이지를 맡은 팀원이 해주었다. 3) 동적 기능 추가하기 이미지 슬라이드 개인적으로 우리동아리를 소개하는 페이지에서는 "무엇을 하는 동아리인지 간단명로하고 기억에 남도록 보여주는 것" 이 가장 중요하다고 생각했다. 그래서 내가 About Us 페이지에 동아리 활동 사진들을 slide의 형태로 넣을 것을 제안했고 내가 갑작스럽게 제안한 것이기 때문에 내가 맡는게 맞다고 생각했다. 그래서 내가 직접 구현해서 넣기로 했다. 처음에..

1. 구현하기 1) 초안 지난 회의때 작성안 초안이다. 이 초안을 바탕으로 React를 이용하여 여러 페이지들의 body를 간단하게 구현하였다. 2) contets 구현 위의 contents를 Home페이지의body에 넣어주었다. 간단하게 태그를 이용했다. 대충 contents를 넣은 화면이다. CSS를 적용한 화면이다. CSS를 적용한 결과이다. CSS 파일에서 에 backgroundimage의 경로를 넣어 배경 이미지를 주었고 나머지는 기본적인 색과 크기, border 등을 넣었다. 3) 동적 기능 추가하기 효과 넣기 React의 useEffect hook을 이용하였다. 로고 애니메이션 적용하기 화면이 랜더링될 때마다 로고에 애니메이션이 적용되도록 넣었다. 2. 문제 해결 과정에서 배운 것들 useE..

1) Header 구현하기 Header에는 동아리의 로고와 네비게이션 바가 들어간다. 동아리 로고를 클릭하면 홈 화면으로 이동하고 나머지 링크들을 입력하면 해당 페이지로 이동한다. 동아리 로고 Header의 왼쪽에는 i태그를 이용하여 동아리의 로고를 넣었다. link들 Header이 오른쪽에는 다른 페이지로 연결되는 link들을 넣었다. 이 과정에서 ui와 li 태그를 이용하였으며 미리 navigationLinks의 배열을 만들고 데이터 바인딩을 통해 map함수로 넣어 주었다. 2) Footer 구현하기 Footer에는 홈페이지의 정보와 다른 계정들이 들어간다. 왼쪽에는 개발자들의 정보, copyright문구를, 오른쪽에는 로고들, 관련 사이트의 아이콘을 넣어 주었다. 아이콘을 클릭하면 해당 사이트로 이..

1. 홈페이지 설계 기본 페이지의 구성은 다음과 같다. 선배들이 만든 페이지, sopt, Mash Up, 프로그라피 등 많은 IT동아리의 웹페이지의 구성을 참고하였다. 역대 동아리 선배들이 만든 동아리 소개 페이지 다른 IT연합 동아리의 웹페이지 회의 결과 공통된 결론이 처음 보는 사람 입장에서 정보들이 한눈에 들어와 무슨 페이지인지 바로 알 수 있도록 하는 것이었다. 실제로 참고한 여러 IT동아리들도 이렇게 한 것을 알 수 있었다. 이를 바탕으로 회의에서 웹페이지의 기본 구조와 페이지별 로드맵을 설계하였다. 회의 결과 도출된 웹페이지 기본 구조 웹페이지는 는 일반적으로 로 구성되어 있다. 회의 결과 도출된 웹페이지 로드맵 Home: 동아리에 대한 전반적인 내용을 소개 페이지이다. → 동아리의 main ..