프론트엔드 개발자가 될거야.
-
[react-google-maps/api] 구글맵 사용하기, marker, circle, env프론트엔드 개발자가 될거야./react 2022. 9. 1. 10:47
이번 기업협업을 하면서 처음으로 구글맵을 사용해봤다. 위코드에서 부트캠프할 때 구글맵을 하다가 어려워서 카카오맵으로 간 동기들을 보았기 때문에 걱정을 좀 했지만 다행히 구글맵을 깊게 다루지는 않아서 구현할 수 있었다. 이런식으로 카메라 위치와 주변 반경을 표시해주었다. 1. 구글맵 사용하기 npm i -S @react-google-maps/api 리액트 구글맵을 다운받아준다. https://www.npmjs.com/package/@react-google-maps/api @react-google-maps/api React.js Google Maps API integration. Latest version: 2.12.2, last published: 8 days ago. Start using @react-g..
-
[MUI Table Custom] 내가 원하는 테이블로 커스텀하기, 앞으로 자주보자 MUI Table!!!!프론트엔드 개발자가 될거야./react 2022. 8. 26. 20:25
위의 테이블은 완성본이다. 라이브러리를 가져와서 쓰는 거는 너무 편리하고 좋지만 레이아웃 커스텀하기 너무 복잡하다!! 테이블에 border, border-radious, width, height 등 내가 원하는 모양으로 바꾸는데 시간이 꽤 걸렸다.. 기능 구현하는 것 보다 더 많은 시간을 할애했다.. 먼저 makeStyles를 install 해주어야한다. const useStyles = makeStyles({ tableContainer: { border: '1px solid #D5DDE4', borderRadius: '4px', borderBottom: 0, }, tableRow: { height: 40, background: '#EFF2F5', }, tableCell: { width: '25%', '&..
-
[리액트 에러] 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도 하지말라!..
-
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..