본문 바로가기

개발 일지/토이 프로젝트

 (17)
React Native 프로젝트 시작 오늘부터 팀 프로젝트 시작이다. 내가 첫번째로 해야할 기능 구현 은 마이페이지 UI 제작이다. 피그마로 제작한 와이어 프레임 일단 컴포넌트 단위로 쪼개서 만들어야 한다. 그래서 프로필 먼저 시작함 시작하기 전에 파워포인트로 박스를 어떻게 나눌지 고민했다. 아마도 이건 나만 알아볼 수 있겠지? ㅋㅋㅋ 이렇게 쪼개놔야 CSS 하기가 편함 겹치는 부분은 props 를 주어서 효율을 높이려고 했다. const ProfileButtonText = styled.Text` color: ${(props) => props.color}; margin-right: 10px; `; 부분은 특별히 박스 구조를 만들 필요가 없을 정도로 간단해서 바로 진행했다. 그런데 요기는 스크롤뷰가 가능하게 해줘야 된다 + 나는 스크롤바가 보..
사망토론 프로젝트 회고 프로젝트 명: 보람3조의 사망토론 필수작업: 게시물, 댓글의 CRUD 서버, 리액트 배포 추가 작업: 좋아요 기능 로그인, 회원가입, 로그아웃 게이지 바(본문의 category A, B별 댓글 수에 따른 % 계산) My Page(내가 쓴 글, 좋아요 누른 글, 닉네임 변경) KEEP 1. 꼼꼼한 문서화 작업 현재 작업하고 있는 것, 상태 등을 바로바로 기록해서 누가 뭘 하고 있는 지 한 눈에 확인 할 수 있게 했던 것, 반복해서 하는 작업이나 공통 부분은 페이지 별로 정리해서 확인할 수 있게 했던 것 2. Git flow, PR 활용 기능개발이 끝나거나 작업이 마무리가 될때 다같이 Git PR 하는 화면을 다같이 보면서 휴면에러를 줄이고, PR을 하면서 코드리뷰도 같이 하는게 좋았음. 3. 소통 잘 한 ..
게이지바 구현 게이지바를 드디어 완벽하게 구현했다. 예외처리 까지 끝냈음 어떻게 했냐면 일단 1.게이지바를 구현 하기 위해서 중첩반복문을 통해 posts 와 comments DB값을 하나씩 필터링 2.필터링된 comments 값의 카테고리를 필터링 하여 카테고리가 A면 A값에 1 추가, B면 B값에 1을 추가하여 몇개의 득표수(댓글수) 가 있는지 확인 코드는 const PostList = () => { //DB에서 post 와 comment 를 호출 한 값을 변수에 담았음 const { posts } = useSelector((state) => state.posts); const { comments } = useSelector((state) => state.comments); //posts에 반복문을 돌려서 각각 등록..
Json-server 버그 게시판을 만드는 프로젝트 이다 보니 게시물의 id 댓글의 id 유저의 id 등 많은 아이디를 키값에 넣어두었다. 그런데.. 게시물을 삭제 하거나 커멘트를 삭제하면 유저가 삭제되는 상황이 발생되었다. 심지어 유저정보를 지우는 코드는 애당초 만들지를 않았었음.. 뭐가 문제가 있나 코드 다 뒤져 봐도 답이 안나왔음 .. 몇시간 까먹다가 우리팀원들 중 한분이 해답을 찾으셨음. 결론부터 말하자면 우리 잘못이 아니였음 Json-server 의 버그였음 https://github.com/roses16-dev/react-week-3/pull/18 error/#17 코멘트 전체삭제 오류 수정 완료 by roses16-dev · Pull Request #18 · roses16-dev/react-week-3 json-ser..
좋아요 기능 구현 내가 구현하고 싶었던 기능 1. 좋아요 버튼을 누르면 좋아요 +1 추가 2. 같은 유저가 좋아요 버튼을 한번 더 누르면 -1 추가 였다. 그럼 해당 유저가 좋아요를 눌렀다는 것을 기록을 해야하는데 .... 이걸 어떤 DB에 저장해야될지 고민이였다. 많은 시행착오 끝에 내가 내린 결론은 각 게시물DB에 좋아요를 누른 사람을 기록해 두는 것이였다. 그렇다면 어떤식으로 기록해야하나? 나의 결정은 좋아요 키값에 해당 유저의 uid를 넣는 것이였다. //db.json "posts": [ { "id": 0, "title": "탕수육", "categoryA": "부먹", "categoryB": "찍먹", "like": ["91afa703-0580-412f-93ad-7e2f6e91fc41"], "writer": "41..
리액트 프로그래스바 만들기 내가 만들고 싶은 것은 A 와 B 값에 따라 그것을 바 형태로 보여주는 것이었다. 어떻게 할까 고민하다가 일단은 데이터 불러오는거 없이 스타일 컴포넌트 부터 만들어 보자 생각했다. 일단.. 부먹파의 값이 5 찍먹파의 값이 1 이라 가정한다면 이걸 어떻게 수치로 표현할까? 백분율 구하는 식을 만들어서 부먹파(백분율), 찍먹파(백분율) 이라 는 변수에 각각 넣어주면 되겠다. let ratioA = 100 - (countA / (countA + countB)) * 100; let ratioB = 100 - (countB / (countA + countB)) * 100; 그리고 이 변수 들을 각각 props 에 담아서 스타일 컴포넌트로 상속해주면 되겠다 . {countA}표 {countB}표 처음에 BarA ,..
리액트 팀 프로젝트 오늘부터 리액트 팀 프로젝트 시작이다. 매번 프로젝트를 할때 마다 느꼈던 것은 프로젝트 시작 전에 준비를 철저하게 해야 원할한 커뮤니케이션이 된다는 것이다. 우리팀원 모두 공감하였으며, 그렇기에 프로젝트 준비하는데 많은 공을 들였다. 프로젝트 준비 과정 1. 컨셉 선정 2. 요구사항 정의 3. 와이어 프레임 작성 4. 필수/추가 기능 선별 5.API 명세서 작성 6. 파일구조 만들기 7. 업무 분담 8. 깃 브랜치 나누기 9.코딩 컨벤션 10. 기술 스택 및 라이브러리 결정 11.그라운드 룰 정하기 이번엔 출발이 좋다. 마무리 까지 잘했으면 좋겠다. 추가기능 개발 까지 꼭 완료 했으면 좋겠다 !
React B반 9조 KPT 회고 9조 어구 1. 한 주의 흐름 1) 한 일 프로젝트 명: 젬스톤 필수 작업: 팀 소개 웹페이지 제작 팀원들의 정보를 보여줄 수 있는 페이지 구현 페이지별로 방명록을 입력 받을 수 있는 백엔드 개발 DB에 저장된 정보들을 사람들에게 보여줄 수 있는 페이지 제작 프로젝트 소개 문서 추가 작업: 반응형 웹 구현 , 방명록 & 소개글 탭 전환 기능 구현 2) 느낀점 성환 - 모두들 한 가지 이상 잘하는 분야가 있어서 각자의 위치에서 최선을 다해 주었다. 또 , 서로 부족한것을 피드백 해주어 같이 성장할 수 있었다고 생각한다. 상현 - 협업이 처음이라 많이 어려웠고 어색했지만 항상끝나고나면 아쉬운부분과 후회가 많아진다. 그에 대해 다음 프로젝트에 있어 이번프로젝트에서 하지못했던일들을 더 열심히 잘 하고싶다. 윤숙..

티스토리툴바