본문 바로가기

🍿 Project15

FE 프로젝트 시 선택하는 기술스택들 - yarn, emotion, materail UI... 프로젝트를 시작하면, 수많은 선택의 기로에 놓이게 된다. 바로.. 기술스택들 사실 일전엔 큰 고민없이 많이 쓰이기 때문에 선택한 것들이 있었지만, 이번 프로젝트는 나에게 매우 크고 소중하기에 선택지들을 비교해보겠다! 1. Package Manager - npm vs yarn npm (node package Manager) Node.js 기본 패키지 관리자 yarn npm과 크게 차이는 없지만 , 버전 차이로 인한 버그를 방지하고 패키지가 약간 더 가벼움 가볍고 빠르다 속도와 안전성이 미세하게 좋지만 performance 차이는 크지 않다. 병렬적 패키지 설치, 버전차이로 인한 버그 방지 가능 ✔️ 둘 사이에 큰 의미가 없지만 장점이 더 한 yarn을 안 쓸 이유가 없기에 yarn선택 2. Frame Wo.. 2021. 12. 19.

[☕️블랙커피Lv1] TodoList 작성기 지금껏 html에 직접 Web 화면을 구성했다면 이제 그만~~ DOM 에 직접 구현하는 방식의 한계 - DOM에 접근하고 업데이트하는 시점에 명확한 기준점이 없기 때문에 UI 가 많아질수록 DOM 업데이트 구간 추적이 어려워진다. - DOM 에 뿌려줄 data가 변경될 때마다 일일히 찾아서 조작해야 한다. - 중복 코드가 많아지고 DOM 접근이 많아진다. 따라서 Data를 관리하는 component와 Data를 뿌려줄 component를 분리시킬 필요가 있다. 그렇다면 기존 DOM에 직접 접근하는 방식의 코드를 보다 컴포넌트 형태로 추상화해보자! 📌 컴포넌트 형태로 변경 기존 코드 TODOS 총 0 개 전체보기 해야할 일 완료한 일 위와 같인 index.html 은 index.js 스크립트만 쏙 걸어두고.. 2021. 8. 3.

[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.

[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.

이전 1 2 다음

티스토리툴바