반응형 sidepj10 [SidePJ] Issue-Cracker 4부 - v0.1.0🍪 데굴데굴 굴러가는 이슈크래커 📌 Component 공유와 상태관리 FrontState 와 BackEnd State를 어떻게 관리해야 할까? 처음에는 담당자와 레이블마일스톤 을 어떻게 관리해야 할까 고민했다. 1) 눌러서 추가할 때마다 서버에 전송 2) FrontState에서 관리하고 이슈 작성을 누를 때 전송 GitHub에서는 어떻게 관리하는지 확인해보았느데 누르때마다 서버로 전송이 되는건가? 했지만 로치의 말로는 아폴로 서버같이 동작하는것이지 실제로 그럴리가 없을 것이라 했다. ㅎㅎ 결과적으로 2번을 선택 이슈 생성하기 전까지 저 세가지 정보는 필요 없기 때문에 FrontState로 관리하다 이슈 작성 시 전송한는것이 경제적이라 생각했다. 처음 SideBar를 만들 때 IssueAdd 에서 동작하게만 만들다 보니 상태값을 다 가지.. 2021. 7. 10. [SidePJ] 깃허브 Issue Cracker 3부 - Recoil 상태관리의 시작 드디어 마지막 주가 왔다. 이번 미션의 마지막 주이자 , 코드스쿼드의 마지막 주다.. 6개월동안 열심히 달렸는데 끝이 보이는 것 같아 너무 아쉽다. (물론 나의 실력은 아직 갈길이 멀다) 그래도 화이팅하며 이번주 미션 최선을 다해서 라쿤과 함께 끝내볼 것~!!!!!! 아Zㅏ~~~~🔥 📌TypeScript와 Recoil을 활용한 모달 외부영역 클릭시 닫힘 처리 사실 airbnb에서 했어서 간단히 될 거라 생각했는데 생각보다 타입스크립트의 길은 험난했다. ❖ 원하는 상황 +아이콘 click : SideBarDrop 열림 모달 외 영역 click : SideBarDrop 닫힘 ❖ 오류 상황 Type '{ ref: RefObject; }' is not assignable to type 'IntrinsicAttr.. 2021. 7. 9. [SidePJ] 깃허브 Issue Cracker 2부 - Material UI 와 style-components의 대결 + 오류 해결 행복한 2주차 시작 📌 uuid 사용하기 React에 유일한 key 값을 제공하는 패키지 React에서의 유일한 key prop 값은 리액트가 리스트 아이템을 구분할 수 있게 한다. 그 전에는 배열의 key값에 인덱스를 넣었는데, 배열의 인덱스는 0,1,2,3.. 이므로 고유한 값이 아니므로 React가 렌더링을 잘못할 수 있기 때문에 고유한 값을 넣어야 한다. -> 배열에 data 추가 수정 시 전체 배열을 다 수정해야 하기 때문에 위 코드에서 uuid 패키지를 사용해 key값으로 사용할 유일한 UUID를 만들수 있고 이처럼 유일한 ID는 충돌할 염려가 거의 없습니다. uuid 같은 패키지를 사용함으로써 ID는 유일하고 예측가능해지고, 우리는 각 아이템에 대해 새로운 ID를 생성할 방법을 고민할 필요도.. 2021. 6. 29. [SidePJ] 깃허브 Issue Cracker 1부 - 프로젝트 시작 마지막 프로젝트를 시작했다! 벌써부터 끝이 너무 아쉽지만 그래도 이번 프로젝트도 더더더 열심히 해보고자 한다. Issue Tracker Issue Cracker 🍪 시작! 이번 프로젝트는 Raccon , pyro, 노을, Neo와 함께하는 5인 대가족!!!!!! ( 다같이 밥도 못먹음!@ ) 우리의 목표는 이것! 1) 타입스크립트와 친해지기 2) Recoil 이랑도 친해지기 3) 에러처리와 최적화까지 4) CSS 강박에서 벗어나자!!!! ( 과연 될까 ) 단순히 깃허브 이슈 크래커 완성을 넘어서 리코일 라이브러리를 찐하게 이해하고 직접 구현해보는 시간을 가질 예정이다. 그러기 위해서는 첫주부터 달려야 하는데 면접이 하나 있어서 마음이 급하긴 하지만 열심히 해봐야지! 게시글을 쓰던 중에 타입에러인 경우가 .. 2021. 6. 29. [SidePJ] airdnd 3부 - 회고와 마무리 주말동안 코드리뷰 받은걸 고치며 월요일 한주 시작 ! 📌 연속클릭 방지하기 현재 airdnd의 달력 화살표를 누르면 다른 달로 넘어가는데, 여기서 사용자가 연속으로 클릭을 하게 되면 이벤트가 꼬일 수 있어 preventClick이라는 함수로 방지를 해놓았다. 변경 전 const preventClick = () => { setTimeout(() => { setDisabled(false); }, 200); const handleClick = () => { if (disabled) return; setDisabled(true); preventClick(); 클릭을 누르면 disabled를 true로 바꿔 preventClick이 다 동작하는 2초동안 클릭이 불가했다가 2초 후에는 disabled = false.. 2021. 6. 6. [React] OAuth Github 로그인 구현하기 전부터 너무나도 해보고 싶었던 깃허브 OAuth 로그인을 성공적으로 구현했다. 구현단계와 방법을 설명해볼 예정! 📌 프로젝트 구성 * React 함수형 컴포넌트 (jsx) 방식으로 구현한 프로젝트입니다! * BE와 함께한 프로젝트로 BE 단에서는 access-token 발급과 정보 요청을 맡아 처리했습니다. * FE단에서는 code요청한후에 Github 계정 정보를 바로 요청했습니다. 깃허브 로그인 구현을 검색해보면 구현하는 여러가지 방법이 있지만 크게 두가지로 나뉘는 느낌을 받았고, 2번 방법으로 처리했다 . 1) FE단에서 code 요청한 후 POST 로 jwt 요청 : 참고 (https://devhyun.com/blog/post/15) 2) ✅ FE단에서 code 요청한 후 GET으로 jwt 요청 .. 2021. 6. 5. [Side PJ] airdnd 2부 - 상태에 따른 CSS 변화 (상태지옥 State) 이번에는 왜 안찾아오나 싶었던 상태관리의 혼란이 다시금 찾아왔다.😵 📌 날짜 data state를 이용한 CSS 변화 ❖ 상황 체크인과 체크아웃 된날짜와 그 사이를 CSS 로 표시하기 캘린더를 만들고 클릭을 누르면 해당 dataset을 받아 ContextAPI로 관리하는 CheckIn, CheckOut 에 반영시켰다. click 이벤트가 발생했을 때 그 가능성을 조건문으로 비교하여 CheckIn, CheckOut 에 반영하는 방식으로 data흐름을 짰는데 여기서 문제는 클릭된 날짜의 상태관리다. CheckIn, CheckOut data는 전역관리가 되고 있는데 clickedData는 click이벤트 (handleTdBtnClick )안에서만 관리되고 있기 때문에 rendering시에 해당 값을 가져올 수.. 2021. 6. 5. [SidePJ] React 모달 영역 밖 클릭시 닫기 📌 전체 구조 PayModalWrapper 가 RoomPayModal을 감싸고 있는 상태 동작 : 숙소를 누르면 모달창이 뜨고 모달창 외의 영역 클릭 시 모달창이 닫힌다. 📌 코드 handlePayModalOff 함수로 모달 외 영역 클릭 시 닫히는 클릭이벤트를 제어할 예정 return 부분 return ( {isPayModalClicked && ( handlePayModalOff(e)} > )} ); handlePayModalOff const ReservationMain = () => { const [isPayModalClicked, setIsPayModalClicked] = useState(false); const handlePayModalOff = (e) => { const clicked = e.t.. 2021. 6. 3. [side PJ ] ⚾️야구게임 - 문제상황과 해결과정 리액트에서의 상태관리는 중요하다는 것을 느끼게 하는 프로젝트였는데, 이번에는 상태관리의 문제로 착각한 경우로 짝궁인 오톰과 함께 3시간을 삽질했다.&0& 📌문제발생 1 팀을 선택했을 때 선택한 팀의 정보를 setState하여 하위 다른 component에서 사용하려 했으나 데이터가 렌더링 되지 않음 StartScreen안의 handleClickTeam const handleClickTeam = async () => { let teamId; if (type === 'home') { teamId = game.homeTeamId; } else { teamId = game.awayTeamId; } try { const { data } = await axios.get( `http://13.209.109.186/b.. 2021. 5. 20. 이전 1 2 다음 반응형
