본문 바로가기

분류 전체보기

 (90)
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 useEffect Lifecycle 컴포넌트에는 Lifecycle 이라는 개념이 있다. 컴포넌트는 1.생성-mount 2.재렌더링-update 3.삭제-unmount 과정을 거친다. 이 과정에서 중간중간 코드를 넣어서 각각의 주기에 기능을 넣어줄수있는데 이것을 갈고리(hook)를 건다고 하고 Lifecycle hook 이라고 한다. useEffect 함수형 컴포넌트에서 Lifecycle hook 을 사용할때는 useEffeect 라는 함수를 쓴다. import {useState, useEffect} from 'react'; function Detail(){ useEffect(()=>{ //여기적은 코드는 컴포넌트 로드 & 업데이트 마다 실행됨 console.log('안녕') }); return (생략) } useEffec..
JavaScript async/await Promise 함수를 사용하는게 불편하다면 그보다 쉽게 쓸 수 있는 ES8문법이 있다. async, await 라는 키워드 인데 각각 Promise와 then을 쉽게 만들어 주는 문법이다. async 함수 앞에 async 를 앞에 붙이면 함수 실행 후 Promise 오브젝트를 리턴한다. 그래서 async function test() { return 1 + 1; } test().then(function (result) { console.log(result) console.log("성공"); }); 이렇게도 가능하다. 왜냐하면 async를 붙이는 순간 함수가 Promise 함수가 되어버리기 때문.. await anync 키워드를 쓴 함수 안에서는 await 를 사용할 수 있다. await 는 .then() ..
JavaScript Promise Promise 함수는 자바스크립트의 코드/함수 디자인 패턴중 하나 이다. new Promise()문법으로 프로미스라는 변수 오브젝트를 하나 생성하면 끝이다. Promise 함수 구조 const promise = new Promise(); promise.then(function(){ }).catch(function(){ }); 1. 변수를 만들고 2. 변수.then() 변수안의 코드가 완료 됬을때 실행 3..catch() 는 변수안의 코드가 실패 했을때 실행 한다. 콜백함수가 아닌 Promise를 쓰는 경우 1. 콜백함수와는 다르게 순차적으로 뭔가를 실행할때 코드가 옆으로 길어지지 않는다. 2. 콜백함수에는 없는 '실패시 특정코드 실행' 이 가능하다. const promise = new Promise((r..
React CRA CRA(Creat-react-app)이란? 리액트 프로젝트를 시작하기 위해 필요한 여러 프로그램을 자동으로 설치해주는 도구이다. CRA로 프로젝트 생성 1. node.js 설치 2.윈도우는 git bash 또는 power shell에서 mac os는 터미널에서 아래 코드를 입력 맥들은 터미널을 사용 ls #현재 내가 위치하고 있는 곳이 어디인지 확인 cd 폴더이름 #리액트 프로젝트를 생성하고 싶은 폴더로 들어감 yarn create react-app week-1 혹은 npx create-react-app week-1 3. 에디터에서 프로젝트 구동 에디터 실행 후 생성한 프로젝트를 불러온다음 터미널 실행 yarn start 혹은 npm start 4. 완료 브라우저에 위와 같은 창이 뜨면 실행이 잘 된것임

티스토리툴바