본문 바로가기

개발 일지

 (84)
Redux Tool Kit 초기 세팅 리덕스 툴킷으로 프로젝트를 끝냈으나 정리를 안하면 무조건 까먹을 것이니 정리를 해봐야겠다. (정리를 해도 까먹겠지만..) 일단 리덕스를 쓰는 이유는 1.파일 하나에 state를 몰아 넣어서 상태관리가 편함 2.프롭스 드릴링을 할필요가 없음 리덕스 툴킷은 리덕스의 개선버전이라고 보면 됨 문법이 좀더 쉬워짐(4줄 써야될거 2줄됨) 리덕스 툴킷 설치 하려면 리액트 & 리액트 돔 이 18.1.x 버전 이상이여야함 npm install @reduxjs/toolkit react-redux 리덕스툴킷 세팅은 import { configureStore } from '@reduxjs/toolkit' export default configureStore({ reducer: { } }) store.js 파일을 만들어서 위 ..
React Native React Native 리액트로 모바일앱을 만들 수 있는 프레임 워크 리액트로 android, ios 네이티브앱을 동시에 만들 수 있는 크로스플랫폼 React Native 장점 1.하나만 만들면 되니깐 개발 비용이 절감된다. 2.리액트 알고있으면 배우기 쉽다. React Native 세팅하려면 1.Expo Go 쉬운 셋업 및 빠른 초기개발 Native 코드 수정은 불가능 2.React Native CLI 모든 React Native 를 위한 인프라를 직접 설치 Native 코드 직접 수정 가능 3.CRNA CRA 에서 영감을 받고 만든 React Native Boiler Plate로 Expo SDK와 Cli의 특징을 모두 가지고 있음 Android Studio 또는 Xcode 설치 필요 4.ignite ..
프로그래머스- 숨어있는 숫자의 덧셈 (1) 문제설명 문자열 my_string이 매개변수로 주어집니다. my_string안의 모든 자연수들의 합을 return하도록 solution 함수를 완성해주세요. 제한사항 1 ≤ my_string의 길이 ≤ 1,000 my_string은 소문자, 대문자 그리고 한자리 자연수로만 구성되어있습니다. 입출력 예 설명 입출력 예 #1 "aAb1B2cC34oOp"안의 한자리 자연수는 1, 2, 3, 4 입니다. 따라서 1 + 2 + 3 + 4 = 10 을 return합니다. 입출력 예 #2 "1a2b3c4d123Z"안의 한자리 자연수는 1, 2, 3, 4, 1, 2, 3 입니다. 따라서 1 + 2 + 3 + 4 + 1 + 2 + 3 = 16 을 return합니다. 내가 풀이한 과정 1.정규식을 써보자 숫자만 선택하는 ..
사망토론 프로젝트 회고 프로젝트 명: 보람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 ,..

티스토리툴바