제각각 여러 기능을 추가하다 보니 코드가 너무 제각각이었다. 처음엔 클린코드였을지라도 기능을 하나하나 추가하는 과정에서 금방 난잡해졌다. 따라서 회의를 통해 현재 코드의 구조를 하나하나 뜯어보고 코드 리팩토링을 적용하려고 한다. 1. 파일 분리하기 https://ko.legacy.reactjs.org/docs/faq-structure.html 파일 구조 – React A JavaScript library for building user interfaces ko.legacy.reactjs.org 공식 문서를 참고하였다. 공식문서에서 5분 이상 고민하지말고 편한대로 나누라고 써있다. 2. 함수의 기능, 추상화 단계 명확히 하기 토스의 SLASH 21의 프론트엔드 진유림님의 React 클린 코드 강의를 참고하..

1. 문제점 이미 구현은 끝났지만 페이지의 렌더링 속도가 약 5초정도 나와서 성능개선이 필요해 보였다. 회의 결과 성능 웹페이지의 성능 개선은 두 가지 부분에서 가능할 것 같았다. 첫 번째 문제점 이미지 파일들이 조금 무거워서 렌더링 시간의 대부분을 차지하는 것이었다. 특히 슬라이드의 이미지들이 많은 페이지들이 문제였다. 한 친구가 이미지 렌더링 부분을 맡기로 했다. 두 번째 문제점 은 지원서의 form부분에 textarea와 input 태그들이 useState를 통해 onChange 이벤트가 발생할 때마다 값이 리렌더링되고 있어서 불필요한 렌더링이 일어난다. 이렇게 useState로 상태를 관리하는 것을 제어 컴포넌트라고 한다. 2. 성능 개선 사항들 이미지 렌더링 속도 개선 먼저 jpg, png에서 ..

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..