분류 전체보기
-
[코딩테스트] 배열, 문자, 숫자 메서드 총정리프론트엔드 개발자가 될거야./코딩테스트 2022. 10. 11. 11:13
코딩테스트는 개발자에게 첫번째 관문이다. 아직 초반이라 어렵지만 그만큼 성장하고 배우고 있다는 증거겠지? 많이 틀리고 고치고 고민하는 이 과정이 개발자로서의 나를 더 단단하게 하고있다고 믿고 꾸준히 해야겠다. 현재 프로그래머스 1, 2단계를 풀고있고 그러면서 문제에 나오는 메서드들을 총정리 해보았다. 메서드들의 사용법이 바로 떠올라야 코딩테스트에 도전장을 내밀 수 있다!!!!!!!!! 코딩테스트의 고수가 되는 그날까지.. 파이팅.....⭐️ 📌 배열 메서드 - 요소추가 ⇒ push(인자): 뒤, unshift(인자): 앞 - 요소 뽑기 ⇒ pop(): 뒤, shift(): 앞 [ 1, 2, 3, 4 ].pop() ⇒ 4 - 잘라서 원하는 부분만 남김 ⇒ slice(순서,순서) (원본 배열 변형X , 새로..
-
[컴포넌트 최적화] React.memo, useMemo, useCallback의 차이점과 활용프론트엔드 개발자가 될거야./react 2022. 9. 26. 16:46
세 달 동안 React기반으로 세 개의 프로젝트를 완성했다. 구현하는 것을 목적으로 달려왔기에 프로젝트가 끝난 이후 리팩토링을 진행하면서 나의 코드가 효율적인지 아닌지 고민해 보게 됐다. 그러면서 리액트의 렌더링에 대해 더 깊게 알고 싶었다. 리액트는 매우 유용하지만 렌더링에 주의하여 사용해야 한다. 렌더링을 할 필요가 없는 컴포넌트까지 항상 렌더링이 된다면 이는 성능이 좋지 않다고 할 수 있다. 이를 위해 활용해야 하는 것이 바로 React.memo, useMemo, useCallback이다. 먼저 알아야 하는 것은 리액트에서 리렌더링이 발생하는 3가지 조건이다. 리액트에서 리렌더링이 발생하는 3가지 조건 1. 본인이 가진 state에 변화가 생긴 경우 2. 부모 컴포넌트가 리렌더링이 일어난 경우 3...
-
비전공자의 개발자 도전기 본격적 시작. (feat.위코드 3개월 회고)회고록 2022. 9. 23. 00:19
6월 20일 ~ 9월 8일. 약 3개월. 위코드에서의 시간이 끝났다. 3개월 동안 열심히 달렸다. 위코드 오기 전에 내가 할 수 있는 거라곤 달랑 HTML/CSS, 그리고 겨우 todolist 만들 수 있는 Javascript 정도였다. 그래서 따라갈 수 있을까 걱정되기도 했다. 하지만 포기하지 않고 목표한 바를 끝까지 이뤄내는 나를 알았기에 3개월은 죽었다 생각하고 내 온 열정을 쏟아부을 각오하고 들어갔다. 그렇게 1주차, 2주차 잘 다니다가 1차 프로젝트할 때 첫 번째 현타가 왔다. 내가 구현하는데 어려움을 겪고 있던 장바구니 기능을 뚝딱 해내 준 동기를 보고 잠시 슬럼프가 왔었다. '왜 나는 못했지?', '왜 나는 이렇게 할 생각을 못했을까?'하고 마음이 아팠다. 하지만 내 실력을 인정했다. 인정하..
-
[기업협업 회고] 기능 구현에 대한 회고 - 실시간 CCTV 영상을 활용한 공정 모니터링 시스템회고록 2022. 9. 12. 00:02
드디어 위코드에서의 3개월이 끝났다. 쉼 없이 달려온 3개월... 주말에는 쉬어도 되는데 노트북이 내 옆에 없으면 불안해서 항상 가지고 다녔다.. 그 정도로 정말 열과 성을 다하여 3개월을 임했던 것 같다. 이번에는 위코드에서의 마지막 프로젝트! 3개월 차 프로젝트에 대한 회고를 작성해보려고 한다. 위코드는 3개월 차에 기업협업을 나간다. 나는 백엔드2명, 프론트2명(나 포함) 총 4명이 함께 기업협업을 나갔는데 '무스마'라는 회사에 가게 됐다. '무스마'는 건설산업의 안전과 생산성, 효율성 향상을 목표로 industrial IoT 분야에서 다수의 대기업, 중소기업 고객을 확보하고 있는 IoT Solution 회사이다. 이에 내가 맡은 업무는 실시간 CCTV 영상을 활용한 공정 모니터링 시스템 이었다. ..
-
[import 정리] 같은 파일에 있는 모듈을 Index 파일로 묶어 export 하기프론트엔드 개발자가 될거야./react 2022. 9. 6. 13:01
이번 기업협업을 통해 import를 깔끔하게 정리하는 법을 알 수 있었다. import React, { useState, useEffect } from 'react'; import { useNavigate } from 'react-router-dom'; import { observer } from 'mobx-react-lite'; import EquipPieChart from './components/EquipPieChart'; import TruckBarChart from './components/TruckBarChart'; import EquipDate from './components/EquipDate'; import timeStore from '../../stores/timeStore'; impo..
-
[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%', '&..