멋쟁이사자처럼 시간표 앱 만들기 #5 (최종)
2022. 8. 18. 00:44
개발/React
해결 개발 현황 Auth 인증 페이지 생성 ( 운영진, 멤버 코드 분리 ) Auth 인증 Logic 구현 ( URL 접근 X , Redux State 이용) 따로 계정생성을 해서 만들지 않은 이유는 큰 필요성을 느끼지 못했다. 멤버와 운영진의 코드를 따로 분리시켜 화면을 달리하는 방법을 선택했다. ** 왜냐하면 멤버가 출석체크 관리 페이지에 들어가면 크나 큰 오류이기 때문!** 인증방식 Redux를 활용하여 간편한 인증절차를 만들었다. 접속 코드 { setcode(e.target.value) }} /> 이 페이지는 🦁멋쟁이사자처럼 at 순천향대학교 출석부 입니다. 접속하기 해당 코드에서 인증페이지에서 폼에 대한 구성 현황이다. 코드를 입력받는 부분에 onChange 함수를 인라인으로 구현하여, Value..
멋쟁이사자처럼 시간표 앱 만들기 #4
2022. 8. 18. 00:42
개발/React
해당 프로젝트는 이곳 에 들어가시면 확인 가능하며, 개인 미니 프로젝트 입니다. 완료 구현 총 출석 현황 리스트 페이지 구현 출석현황 페이지 이동 버튼 SidePanel_Header에 추가 왼쪽 / 오른쪽 스크롤 구현 *하루만에 2번이나 갈아엎은 피땀눈물 가득했던 AttendanceList 페이지였다. * 바둑판 UI가 얼마나 구현이 힘들고, 고려해야 할 사항이 많은지 느꼈다...^^ 나는 행/열 둘 다 계속 변화되어서 적용되는 페이지를 구성해야 했다. 사실 모양 상 테이블 형식의 표 모양이기 때문에... table 태그를 이용해서 구성을 시작했다. 이 선택은 고통의 시작이였다. 페이지 구성방식에 대해서 간단하게 과정을 적어보도록 하겠다. 종합 출석 리스트 구현하기 - 이용 사실이 table 태그는 정말..
멋쟁이사자처럼 시간표 앱 만들기 #3
2022. 8. 18. 00:39
개발/React
파일 구성 파일 디렉토리에 대해서 간단하게 구상하여 명시해보았다. 파일 Components 및 Redux 구성 📦src ┣ 📂components ┃ ┣ 📂AuthPage ┃ ┃ ┗ 📜AuthPage.js ┃ ┗ 📂MainPage ┃ ┃ ┣ 📂MainPanel ┃ ┃ ┃ ┣ 📜AttendList.js ┃ ┃ ┃ ┣ 📜MainHeader.js ┃ ┃ ┃ ┣ 📜MainList.js ┃ ┃ ┃ ┗ 📜MainPanel.js ┃ ┃ ┣ 📂SidePanel ┃ ┃ ┃ ┣ 📜SideFooter.js ┃ ┃ ┃ ┣ 📜SideHeader.js ┃ ┃ ┃ ┣ 📜SideList.js ┃ ┃ ┃ ┗ 📜SidePanel.js ┃ ┃ ┗ 📜MainPage.js ┣ 📂redux ┃ ┣ 📂actions ┃ ┃ ┣ 📜schedule_a..
멋쟁이사자처럼 출석부 앱 만들기 #2
2022. 8. 18. 00:37
개발/React
필요 기능 정리 혼자 진행하는 토이 프로젝트이니 기본 UI구성에 대해서 고민을 많이 했다. 멤버 정보가 보여야 할까? 벌금 자동 계산? 페이지가 몇개? 필요점을 정리를 해봤는데, 참고 할 만한 UI를 찾기 어려웠다. 날짜 선택(세션 날짜)을 하여서 해당 세션 출석체크가 필요함. 벌금 등에 대해 기준을 세워서 벌금을 자동으로 계산해야함. 벌금을 냈으면 정산하여 벌금을 감하는 시스템이 필요함. 지금까지는 여기까지의 구성만 생각해보았다. 개발 중 필요한 구성이 생긴다면 추가 할 예정이다. 페이지 구성하기 나 같은 경우 2가지나 1가지 페이지를 통해, Panel을 나누어서 화면에 띄울 생각이다. 간단하게 Adobe XD를 통해서 레이아웃을 만들어보았다. 멤버 리스트 페이지 왼쪽에는 아기사자 멤버 리스트, Cli..
멋쟁이사자처럼 출석부 앱 만들기 #1
2022. 8. 18. 00:35
개발/React
운영진 스터디 중.. 멋쟁이사자처럼 9기 운영진 스터디 활동을 진행하면서, 2020년 1월 1일자를 시작으로하여, 벌써 2주차에 접어들었다. 각자 선정한 기술 스택을 가지고 운영진들끼리 팀을 꾸려서 공모전 나갈 수준의 실력을 키워서 준비중이다. 프레임워크 및 언어를 선택하여 각자 서로 다른 부분을 공부하고 있다. Django REST API, Node.js, React.js, Flutter 정도를 각자 다루고있다. 결국에는 단순하게 이론 및 실습 공부를 해도 실전에서 사용 할 수 있을까? 라는 의문이 들었던 참에, 같이 스터디를 진행하는 운영진 팀원이 토이프로젝트를 제안했다. *배운지 2주밖에 안됐는데 가능하려나..? *라는 고민이 먼저 들었다. 진행하자고 하는 프로젝트 주제가 흥미롭고 간단해보여서 토이..