App+Web 커뮤니티 웹앱 (6) 썸네일형 리스트형 강아지 정보 제공 사이트 프로젝트 prettier는 코드 포맷터로 우리가 작성한 코드를 가독성 좋게 만들어주는 환경도구이 도구를 사용하면 여러 개발자들의 코드 스타일을 통일하여 균일한 코드품질을 가질 수 있게 된다. 설치방법 :yarn add --dev prettier npm install -D prettier 이용하고자 하는 프로젝트 폴더에 .prettierrc 파일을 생성 후 아래 코드 저장!{ "arrowParens": "always", "bracketSameLine": false, "bracketSpacing": true, "embeddedLanguageFormatting": "auto", "htmlWhitespaceSensitivity": "css", "insertPragma": false, "jsxSingleQuo.. 로그인 후 보여지는 화면 Figma로 UI/UX 디자인 제작 게시판 옆 사진칸에 각 게시판 관리자 아이디로 사진을 업로드해 꾸밀 수 있다. 익명 게시판을 눌렀을 때 보이는 화면이다. 글 쓰기 버튼을 눌렀을 때의 화면으로 사진을 첨부하거나 카메라로 찍어 글을 익명 또는 실명으로 작성할 수 있다. 게시글을 올리고 댓글이 달린 화면이다. 좋아요와 스트랩 기능이 있으며부적절한 게시글이나 댓글을 신고할 수 있으며, 게시글과 댓글 작성자는 자기 글만 삭제할 수 있다. 아래 네비게이션 바에서 게시판을 눌렀을 때 뜨는 화면으로 자기가 즐겨찾기 해둔 게시판 외에다른 게시판을 검색해서 즐겨찾기로 추가할 수 있다. 사진 프로필을 눌렀을 때 이동되는 페이지로 계정설정과 커뮤니티 이용 제한 내역 및 앱에 대한 각종 정보를 볼 수 있다. 하단 네비게이션 바에서 마이페이지를 눌렀을 때 이동.. [React.js] .end 백엔드와 통신 전역변수 설정하기 백엔드와 통신할 때 전역 변수를 사용하여 백엔드 호스트를 지정하는 것은 일반적으로 좋은 아이디어다.이렇게 하면 나중에 백엔드 호스트가 변경되거나 다른 환경으로 전환해야 할 때 코드의 여러 부분을 수정할 필요 없이 전역 변수만 변경하여 쉽게 적용할 수 있고 유지 보수 및 확장성 측면에서 매우 편리하기 때문이다.전역 변수를 사용하여 백엔드 호스트를 지정하는 것은 편리하지만, 보안상의 이슈가 있을 수 있기 때문에 보안을 고려해야 한다. 백엔드 호스트가 민감한 정보를 포함하고 있다면, 이를 절대 외부에 노출하지 않도록 보호해야 한다.보안 문제: 전역 변수로 백엔드 호스트를 노출하면 악의적인 공격자가 해당 호스트에 대한 정보를 얻을 수 있습니다. 이 정보를 통해 서버에 대한 공격을 시도할 수 있다.데이터 노출: .. 로그인,회원가입,비밀번호 찾기 모듈 구축 완료 추가 기능인 시간표기능, 중고거래 기능이 추가된다면 시간이 좀 더 걸리겠지만 대략적인 계획표이다. 처음에 메인 부분인 App.js 부분에서 개발을 하다보니 메인 부분임에도 코드 길이가 200줄을 훨씬 넘어 극악의 가독성과 유지보수성을 보여줬다. 그래서 로그인 부분은 LoginForm, 비밀번호 찾기 부분은 PasswordResetPage 등 컴포넌트 기능을 활용해 나누었다.그 결과 메인 App.js 부분에선 import로 갖고오고 Router로 읽어왔기 때문에 전체 코드를 30줄이내로 할 수 있어 가독성과 유지보수성을 높일 수 있게 되었다.당연히 코드 재활용성도 높아졌다. 이번 컴포넌트를 활용해서 개발하는 도중 문제점이 발생 했다.컴포넌트 분리 시 메인 로그인 페이지가 작동하지 않는 문제점 발생한 것이.. README.md Figma UI 제작 본격적인 앱 개발 시작에 앞서 그 동안 팀 내부에서 나왔던 아이디어를 시각적으로 표현하고 간단한 디자인 해보고자Figma를 이용해 팀원 한 분과 같이 만들었다. Figma는 별도의 프로그램 없이 웹사이트에서 공동작업이 가능해 매우 편리한 장점이 있어 선택하게 되었다. /*이제 시작이지만 팀 프로젝트가 처음이고 항상 이렇다한 output이 없는 학교 과제만 해와서 걱정이 많이 된다.그래도 다른 팀원들에게 폐 끼치지 않고 도움이 될 수 있도록 최선을 다해서 한 번 부딪혀 봐야겠다!! */ 이전 1 다음
