분류 전체보기
-
[리액트 에러] Did you accidentally call a React Hook after an early return?프론트엔드 개발자가 될거야./react 2022. 8. 25. 16:48
error React Hook “useStyles” is called conditionally. React Hooks must be called in the exact same order in every component render. Did you accidentally call a React Hook after an early return? react-hooks/rules-of-hooks 무서운 검은화면.. 이 코드를 이렇게 위치만 바꿔주니 오류가 해결됨
-
[기업협업 1주차] mac ffmpeg 설치하는 법 / RTSP(동영상 실시간 스트리밍 프로토콜)프론트엔드 개발자가 될거야. 2022. 8. 18. 15:48
기업협업 첫주차...... 다음주부터 본격 업무 들어갈 것 같고 이번주에는 공부를 많이 해둬야한다. 기술스택이 많이 다르기 때문이다! * 기업협업 기술스택 FE Specification : typescript or javascrip 사용 React: React js v18 상태관리 : mobx v6, mobx-react-lite v3 라우팅 : react-router-dom v6 CSS : Tailwind CSS v3 국제화 : i18next v21 상태관리는 mobx, CSS는 Tailwind CSS 구나!!!! 나는 redux도 아직 써보지 않아서 상태관리에 감이 잘 잡히지 않는다. 이번에 감 잡아봐야지..!! 그런데 더 중요한 것이 있다. 내가 하는 업무는 실시간 CCTV 영상을 활용한 공정 모니터..
-
git rebase프론트엔드 개발자가 될거야./git 2022. 8. 14. 21:38
Merge 와의 공통점 → 브랜치를 합친다! Merge 와의 차이점 → Merge보다 깨끗한 commit history를 만든다! → Merge와는 다르게 선형적으로 그려진다! 어떻게 commit history를 깨끗하게 만들까? Rebase는 현재 브랜치의 베이스를 재설정해서 합치겠다는 것이다. → base가 바뀔 commit들을 복사해서 연이어 붙이는 것이다! 요약. Merge보다 깨끗한 commit history를 만든다! → Merge와는 다르게 선형적으로 그려진다! 현재 브랜치의 base를 바꾸겠다는 것이다! : 생성된 커밋들은 새롭게 복사되어 base가 변경된다. Rebase 주의점! 복잡한 conflict! 커밋을 너무 쌓아두면 안된다!! 더이상 merge 하지마라. commit도 하지말라!..
-
[위코드 2차 프로젝트 회고(2)] 팀 프로젝트에 관한 회고 (JEJUPASS 클론코딩 )회고록 2022. 8. 14. 21:24
https://jeongeuni.tistory.com/53?category=1103401 [위코드 2차 프로젝트 회고(1)] 기능 구현에 대한 회고 (JEJUPASS 클론코딩) 유튜브 최종 데모 영상 https://www.youtube.com/watch?v=S5ElqSBUMzM 2022년 8월 1일 ~ 8월 12일, 약 2주간 프론트 4명, 백엔드 2명으로 구성된 팀으로 JEJUPASS를 클론코딩하는 팀 프로젝트를 진행했다. 이번.. jeongeuni.tistory.com -- 취뽀 FREEPASS 깃허브 https://github.com/wecode-bootcamp-korea/35-2nd-FREEPASS-frontend/blob/master/README.md GitHub - wecode-bootcamp..
-
[위코드 2차 프로젝트 회고(1)] 기능 구현에 대한 회고 (JEJUPASS 클론코딩)회고록 2022. 8. 14. 18:36
https://jeongeuni.tistory.com/54?category=1103401 [위코드 2차 프로젝트 회고(2)] 팀 프로젝트에 관한 회고 (JEJUPASS 클론코딩 ) https://jeongeuni.tistory.com/53?category=1103401 [위코드 2차 프로젝트 회고(1)] 기능 구현에 대한 회고 (JEJUPASS 클론코딩) 유튜브 최종 데모 영상 https://www.youtube.com/watch?v=S5ElqSBUMzM 2022년 8월.. jeongeuni.tistory.com -- 유튜브 최종 데모 영상 https://www.youtube.com/watch?v=S5ElqSBUMzM -- 취뽀 FREEPASS 깃허브 https://github.com/wecode-boo..
-
react 리팩토링의 중요성프론트엔드 개발자가 될거야./react 2022. 8. 7. 22:41
코드가 길수록 효율성, 가독성이 떨어진다. 또한 일단 처음에 코드를 짤 때는 어떻게든 돌아가도록 구현하는 것에 꼳혀서 코드가 비효율적일 수가 있다. 이에 코드를 다 짠 후 리팩토링하는 시간을 가져야 코드의 효율도 올라가고 실력도 더 up 된다고 할 수 있다. 이번에 2차 프로젝트를 하면서 리팩토링한 부분에 대해 정리해보려고 한다. 비구조화 할당 const [adultPassengel, setAdultPassengel] = useState(1); const [childPassengel, setChildPassengel] = useState(0); const [babyPassengel, setBabyPassengel] = useState(0); const [rating, setRating] = useStat..
-
리액트 캘린더 라이브러리 Datepicker 사용법, 커스텀하기프론트엔드 개발자가 될거야./라이브러리 2022. 8. 7. 22:17
제주패스를 클론코딩하면서 내가 맡았던 부분에서 가장 도전적인 부분은 캘린더 라이브러리를 사용하는 것 이었다. 라이브러리라는 것을 처음 시도해보았기 때문이다. 일단 결과물부터 보여주자면 출발일, 도착일을 선택하면 탑승일에 해당 날짜가 표시되고 검색 버튼도 편도면 편도, 왕복이면 왕복으로 잘 구현된다. 또한 캘린더도 커스텀하여 화이트 앤 블루로 스타일링했다. 다운로드 하는 법 https://www.npmjs.com/package/react-datepicker react-datepicker A simple and reusable datepicker component for React. Latest version: 4.8.0, last published: 3 months ago. Start using react..
-
[위코드 2차 프로젝트] 제주패스 클론코딩 : menu Tap 구현하기프론트엔드 개발자가 될거야./react 2022. 8. 7. 10:50
이번 2차 프로젝트로 제주패스를 클론 코딩한다. 나는 꽤 중요한 모달 부분을 맡았다! 이 모달에서 도착지, 출발지, 탑승일(캘린더 라이브러리), 인원 및 좌석등급을 선택해줘야 하기 때문이다. 중요한 부분을 맡았으니 열심히 책임감을 가지고 해보려고 한다. 모달에는 tap 기능이 참 많다. 첫번째로 위의 사진처럼 항공, 자동차, 숙박, 맛집, 카페의 menu tap이 있다. 비행기를 누르면 항공에 대한 탭이 나오고 자동차를 누르면 자동차에 대한 탭, 숙박을 누르면 숙박에 대한 탭 ... 탭 지옥(?)이다. 두번째로는 위에서 볼 수 있듯이 항공에 대한 탭에 또 탭 기능이 있다. 도착을 선택했을 때, 출발을 선택했을 때, 탑승일을 선택했을 때, 인원 및 좌석등급을 선택했을 때의 레이아웃이 모두 다르다.. 레이아..