Y_FE_Toy1_Team5 HIGHFIVE WIKI #8
Conversation
- Add npm packages - Add vite / react-ts - Add firebase - Add .env - Add sass - Add redux
Remove .env file from git repository
gitflow install
Feat: "Add header"
Feat: add sidebar
Chore: "Add react-icons"
Chore: "Set route"
Feat: "toast API install"
Add component for login page - FormTitle - InputEmail - InputPassword - SubmitButton Set way to import component - Add index.tsx for export Auth folder
Docs: "README.md update"
Update project README.md
Update project README.md
Docs:"Add readme"
NamgungJongMin
assigned NamgungJongMin, tkyoun0421, humnyenye, developer-jyyun and IAMISTP
| "@tanstack/react-query": "^4.35.3", | ||
| "@toast-ui/editor-plugin-color-syntax": "^3.1.0", | ||
| "@toast-ui/react-editor": "^3.2.3", | ||
| "@types/react-slick": "^0.23.10", |
There was a problem hiding this comment.
@types는 devDependencies 에 포함되어야 할 것 같습니다.
|
|
||
| const dispatch = useDispatch(); | ||
|
|
||
| if (isLogin) { |
There was a problem hiding this comment.
isLogin의 값을 비교하면
JSON.parse(isLogin) 을 하여
조건문이 깊어지지 않을 것 같습니다.
|
|
||
| if (isLogin) { | ||
| if (JSON.parse(isLogin)) { | ||
| dispatch(login({ userName, userEmail })); |
There was a problem hiding this comment.
login 에서 localStorage.getItem 하여 유저명과 유저이메일을 업데이트 해주어도 될 것 같습니다.
App 내에서 추가로 사용하는 곳이 없는 것 같습니다.
| swal({ | ||
| className: 'success', | ||
| title: '회원가입이 성공적으로 완료되었습니다.', | ||
| icon: 'success', | ||
| }).then(async () => { | ||
| try { | ||
| const docRef = await setDoc(doc(db, 'users', email), { | ||
| name: name, | ||
| }); |
There was a problem hiding this comment.
swal 모달에서 회원가입이 성공이라고 나오는데
모달을 닫지 않고 페이지 이탈 혹은 새로고침을 하면
setDoc 이 실행되지 않을 것 같습니다.
그리고 setDoc의 return은 void 입니다. 변수로 잡아서 console을 찍을 이유가 없을 것 같습니다.
| console.error('Error adding document: ', e); | ||
| } | ||
| }); | ||
| return 'success'; |
| {isShow ? <NavDetail /> : ''} | ||
| </> | ||
| ) : ( | ||
| <Link to={item.path} className="nav-depth__link"> |
There was a problem hiding this comment.
NavLink와 같은 기능이 필요해 보입니다.
홈에서 바로 갤러리 사진을 누르면 사이드의 메뉴가 홈인 상태로 남아있고
러리를 클릭해야만 스타일이 변경됩니다.
| return '이름을 제대로 입력해 주세요.'; | ||
| } | ||
| if (target === 'password') { | ||
| return '영문 또는 숫자를 6~12자 입력하세요.'; |
| const { title, status } = docSnapshot?.data() as MyDocumentData; | ||
| if (index < 7) { | ||
| return ( | ||
| <li className="mainP-item" key={index}> |
There was a problem hiding this comment.
key로 index를 주는 것은 지양하는 것이 좋습니다.
| } | ||
| console.log(pageNumbers); | ||
| return ( | ||
| <div className="pagenation" style={{ display: 'flex' }}> |
| @@ -0,0 +1,15 @@ | |||
| const Placeholder = ({ type }: PlaceholderProps): JSX.Element => { | |||
| return ( | |||
| <div className={`placeholder ${type ? type : ''}`}> | |||
There was a problem hiding this comment.
PlaceholderProps에 선언된 것을 보면 불필요한 삼항 연산자 인것 같습니다.
HIGHFIVE WIKI
👭 참여 인원 및 구현 기능
기술 스택 및 라이브러리
프로토타입 디자인
페이지별 주요 기능
회원가입
로그인
공지사항
공지사항 작성
공지사항 수정
공지사항 상세
프로젝트 페이지 마크다운
프로젝트 페이지 마크다운 수정
프로젝트 페이지 삭제
갤러리 추가
갤러리 삭제
갤러리 모달 / 좋아요 추가 및 취소 기능
근태관리 페이지
후기
남궁종민
처음 팀장으로서 진행해본 프로젝트인만큼 부담감도 있었지만 매우 의미가 깊었던 2주임에 틀림이 없습니다. 처음 기획부터 개발환경 세팅까지 혼자할 때와는 전혀다른 느낌이 들었습니다. 모르는 것들을 서로에게 물어가며 어려운 난관들을 헤처 나갈 수 있었고, 팀원들이 몰랐던 것을 질문하고 그것을 해결해 줄 때의 뿌듯함이 매우 컸던 것 같습니다. 물론 혼자 하는 프로젝트보다 진행이 더디고, 서로에게 맞춰가며 진행해야했지만 함께 공부하고 함께 무언가를 만들어 나간다는 것 자체가 저에게 큰 의미로 다가왔습니다. 실제 현업에 가서도 다른사람들과의 협업을 통해 프로젝트가 진행될 것이기에 앞서 경험한 팀 프로젝트는 제게 큰 힘이 되어줄 것 같습니다.
윤태관
처음으로 리액트와 타입스크립트를 사용하여 이것들에 대해 잘 모르는 상태로 프로젝트를 진행하다보니 부족한 점이 정말 너무 많았습니다. 기능구현 하는 것에 급급해서 리액트를 사용하는 목적성을 제대로 느껴보지 못한 부분이 참 아쉬웠습니다. 더욱 리액트 개념을 많이 공부해서 적절한 hooks의 사용과 react가 어떨 때 재랜더링이 되고 이것을 어떻게 이용하면 좋을지, 컴포넌트간에 데이터를 어떻게 주고 받는게 효율적일지에 대해 공부를 더 많이 해야겠다는 생각이 들었습니다. 또한 타입스크립트에 대해서도 컴파일 단계에서 버그를 잡아 효율성을 높이는 목적으로 사용되는 것인데, 오히려 타입스크립트를 잘모르다보니 이것 때문에 오류가 나서 프로젝트 진행이 힘들었었습니다. 타입스크립트를 더 공부하여 코드의 가독성을 높여 협업의 효율성을 높여야겠다는 생각을 하였습니다. 하지만 조원분들 덕분에 프로젝트를 무사히? 완성할 수 있었고 어떻게 프로젝트가 진행이 되어야 하는지에 대해 알게되어서 정말 감사했습니다!
박지송
한 프로젝트 전체를 팀원들과 함께 해 볼 수 있어서 좋은 경험이었습니다. 아직 이용해 본 적 없는 다양한 기술들을 접하게 된 계기가 되었습니다. 또한 스스로의 모자란 점을 확인할 수 있었습니다. 팀 프로젝트에서 크게 느꼈던 점이 자기 자신을 객관화할 수 있다는 점이었습니다. 나의 강점과 부족한점들을 팀원들과 비교하면서 확인하게 되었고, 이번 프로젝트를 기회로 부족한점은 보완하고 강점을 더욱 강화해서 개발자로서의 역량을 부트캠프 기간동안 키워나가야 겠다는 다짐을 했습니다.
협업을 통해 프로젝트 기획에서부터 폴더 구조 설정, 번들링 도구, gitflow 사용 등 혼자서 공부할땐 미처 공부하지 못했던 부분들까지 공부하며 많이 배울 수 있어 너무 유익하고 좋았던 시간이었습니다! 아직 리액트와 타입스크립트가 많이 어렵고 버겁지만 이번 과제를 통해 더욱 열정을 불태울 수 있는 계기가 된 것 같습니다!
윤지영
협업을 통해 프로젝트 기획에서부터 폴더 구조 설정, 번들링 도구, gitflow 사용 등 혼자서 공부할땐 미처 공부하지 못했던 부분들까지 공부하며 많이 배울 수 있어 너무 유익하고 좋았던 시간이었습니다! 아직 리액트와 타입스크립트가 많이 어렵고 버겁지만 이번 과제를 통해 더욱 열정을 불태울 수 있는 계기가 된 것 같습니다! 이번 프로젝트에서 정말 좋았던 점은 다른 사람들과 의견을 주고 받으면서 여러 해결 방법에 대해 알 수 있었다는 점입니다. 개발에 대한 시야가 넓어진 느낌을 받아서 참 좋았던 것 같습니다. 어렵고 모르는 부분들도 조원분들께서 친절히 알려주셔서 너무 너무 감사했습니다!!!!
박혜민
🥹 아쉬운 부분
짧은 기간안에 리액트 쿼리와 타입스크립트를 적용하여 toast UI editor 이용한 마크다운 기능을 구현하려다 보니 완벽하게 구현하지 못하여 아쉬웠습니다. 남은 기간동안 완벽하게 구현하지 못했던 부분들은 개선해 나갈 생각입니다.
먼저 반응형 구현을 다시한번 복습하고 프로젝트에 적용할 것입니다. 또한 이번에 겪언던 여러 오류들을 디버깅 하면서 앞으로 만날 문제에 대한 해결 능력을 키우려고 합니다. 이번 프로젝트에서 페이지네이션에 대해 부족했던 점과 렌더링 관련해 겪었던 오류들 또한 다시 잘 공부해서 완벽한 프로젝트를 완성할 수 있도록 하겠습니다.
*참고 링크
기획 및 프로토타입 페이지
그룹 노션 페이지