분류 전체보기 (35) 썸네일형 리스트형 React 와 Firebase 로 학점관리 웹사이트 개발 프로젝트 이번 게시물에선 제가 개발한 웹사이트에 대해간략하게 소개하고 다음 게시물부턴코드 공유 및 리뷰를 올릴 예정입니다~! 배포 완료 된 학점관리 사이트 주소:https://react-grade.web.app/login타 학교나 한국에 있는 대학교들 학교 홈페이지에선대부분 학점조회가 되는 것으로 알고 있다.하지만 내가 다니는 학교는 무슨 이유인지 모르겠지만학교 사이트에서 학점조회가 되지 않는다.덕분에 궁금할 때마다학교 국제처에 찾아가 기기로 알아보거나국제처 담당 교수님한테 물어봐야 한다^^ 그래서 학점조회 사이트를 만들기로 결심했고,이왕 만들 거 남은 과목들에 목표 점수를 넣어보면서 미래의 목표한 성적을 받았을 때 나오는학점을 볼 수 있도록 하는 기능도 개발하기로 결심했다.내가 데이터를 입력시켜 놓았기 때문에로.. 학점관리 웹/앱 환경구축 React.js with Node.js최신 LTS 버전 (2024.03.30 기준)node 버전 : v21.7.3구축 방법 (Windows 로컬 서버 개발용)Visual Studio Code 상에서 React 프로젝트 폴더 생성프로젝트 폴더를 Visual Studio Code에서 열고, 터미널 창에 다음 명령어 실행:npx create-react-app grade-appcd grade-appnpm install react-router-domnpm fundyarn add react react-domyarn add --dev webpack webpack-dev-serveryarn add --dev babel-core babel-loader babel-preset-react-appyarn add --dev w.. Microsoft PHI-3 TECHNICAL REPORT 메타 AI에서 개발한 대규모 언어 모델인 Llama-3가 4월 18일 날 출시되었는데요 Llama-3 는 세 가지 모델 크기로 제공되었습니다 8B, 70B, 400B인데 400B는 아직 학습단계에 있다고 합니다. 이런 메타AI와 경쟁 중인 마이크로소프트가 고성능 생성형 인공지능 기술을 모바일 기기나 차량 등 더 많은 플랫폼으로 지원을 하기 위해서 확대하기 위해서 새로운 소형 언어 모델(SLM) Phi-3을 4월 24일에 발표를 해서 알아보게 되었습니다. 마이크로소프트는 Phi-3가 27억 개의 parameter를 이해할 수 있는 Phi-2 기반이며 최대 스물다섯배 더 큰 LLM 즉 대형 언어 모델만큼 성능이 뛰어나다고 발표를 했습니다. 파라미터는 언어 모델이 이해할 수 있는 복잡한 명령어의 수를 나타내는.. 로그인 후 보여지는 화면 Figma로 UI/UX 디자인 제작 게시판 옆 사진칸에 각 게시판 관리자 아이디로 사진을 업로드해 꾸밀 수 있다. 익명 게시판을 눌렀을 때 보이는 화면이다. 글 쓰기 버튼을 눌렀을 때의 화면으로 사진을 첨부하거나 카메라로 찍어 글을 익명 또는 실명으로 작성할 수 있다. 게시글을 올리고 댓글이 달린 화면이다. 좋아요와 스트랩 기능이 있으며부적절한 게시글이나 댓글을 신고할 수 있으며, 게시글과 댓글 작성자는 자기 글만 삭제할 수 있다. 아래 네비게이션 바에서 게시판을 눌렀을 때 뜨는 화면으로 자기가 즐겨찾기 해둔 게시판 외에다른 게시판을 검색해서 즐겨찾기로 추가할 수 있다. 사진 프로필을 눌렀을 때 이동되는 페이지로 계정설정과 커뮤니티 이용 제한 내역 및 앱에 대한 각종 정보를 볼 수 있다. 하단 네비게이션 바에서 마이페이지를 눌렀을 때 이동.. 깃허브 협업 팀 프로젝트에서 main에다 바로 push 할 수 없기 때문에brunch 을 새로 개설해서 cmd를 이용해 올려줬다. PS C:\Users\sunli\Desktop\VisualCode\Everytime_project\react-grade\react-grade> git init PS C:\Users\sunli\Desktop\VisualCode\Everytime_project\react-grade\react-grade> git add . PS C:\Users\sunli\Desktop\VisualCode\Everytime_project\react-grade\react-grade> git commit -m " 학점관리 " PS C:\Users\sunli\Desktop\VisualCode\Every.. [React.js] .end 백엔드와 통신 전역변수 설정하기 백엔드와 통신할 때 전역 변수를 사용하여 백엔드 호스트를 지정하는 것은 일반적으로 좋은 아이디어다.이렇게 하면 나중에 백엔드 호스트가 변경되거나 다른 환경으로 전환해야 할 때 코드의 여러 부분을 수정할 필요 없이 전역 변수만 변경하여 쉽게 적용할 수 있고 유지 보수 및 확장성 측면에서 매우 편리하기 때문이다.전역 변수를 사용하여 백엔드 호스트를 지정하는 것은 편리하지만, 보안상의 이슈가 있을 수 있기 때문에 보안을 고려해야 한다. 백엔드 호스트가 민감한 정보를 포함하고 있다면, 이를 절대 외부에 노출하지 않도록 보호해야 한다.보안 문제: 전역 변수로 백엔드 호스트를 노출하면 악의적인 공격자가 해당 호스트에 대한 정보를 얻을 수 있습니다. 이 정보를 통해 서버에 대한 공격을 시도할 수 있다.데이터 노출: .. 로그인,회원가입,비밀번호 찾기 모듈 구축 완료 추가 기능인 시간표기능, 중고거래 기능이 추가된다면 시간이 좀 더 걸리겠지만 대략적인 계획표이다. 처음에 메인 부분인 App.js 부분에서 개발을 하다보니 메인 부분임에도 코드 길이가 200줄을 훨씬 넘어 극악의 가독성과 유지보수성을 보여줬다. 그래서 로그인 부분은 LoginForm, 비밀번호 찾기 부분은 PasswordResetPage 등 컴포넌트 기능을 활용해 나누었다.그 결과 메인 App.js 부분에선 import로 갖고오고 Router로 읽어왔기 때문에 전체 코드를 30줄이내로 할 수 있어 가독성과 유지보수성을 높일 수 있게 되었다.당연히 코드 재활용성도 높아졌다. 이번 컴포넌트를 활용해서 개발하는 도중 문제점이 발생 했다.컴포넌트 분리 시 메인 로그인 페이지가 작동하지 않는 문제점 발생한 것이.. README.md 이전 1 2 3 4 5 다음
