본문 바로가기

프론트엔드 17

[리액트] Devtool로 확인하고 성능개선하기 들어가며 안녕하세요. 핸디입니다. 최근에 모바일 버전에 대응하여 반응형 레이아웃과 컴포넌트로 변경했습니다. 다만 데스크톱에서 원활하게 돌아가던 서비스가 구형단말기에서는 랜더링 중에 멈추는 현상이 발견되었습니다. 그래서 이번에는 간단한 성능테스트하는 방법, 리펙토링 하는 방법, 그리고 최종결과에 대해 살펴보도록 하겠습니다. 결과부터 말씀드리면 성능향상의 기준이 각자 다르지만 유휴시간 기준으로 16배, 스크립팅시간으론 4배 빨라졌어요. 성능테스트하는 방법 일단 데스크탑 기준으로 성능을 측정해 보겠습니다. 우리의 영원한 친구 크롬 개발자 도구와 리액트 개발자 도구로 측정해보겠습니다. 크롬 개발자 도구 일단 보시면 Idle 시간이 10초 중에 0.5초밖에 없습니다. 바쁘게 열일하고 있었군요.. 리액트 개발자 도.. 2023. 2. 8.
[포트폴리오] AI로 만드는 연차별 포트폴리오 (ChatGPT) 들어가며 금요일 오후, 퇴근을 업무도 업무를 마무리하면서 ChatGPT를 가지고 놀고 있었습니다. 불현듯 ChatGPT가 써주는 프론트엔드 개발자의 포트폴리오는 어떨까라는 생각을 가지고 한번 물어봤습니다. 아무래도 많은 포트폴리오 데이터를 학습했으니깐 평균적인 데이터가 아닐까 생각됩니다. 그럼 한번 가보시죠. 포트폴리오 주니어 개발자 주니어 프론트엔드 개발자로 기술 스택은 typescript, react, next, aws를 넣어봤습니다. write resume that junior frontend devolper with typescript, react, next, aws 하나의 단락씩 살펴보도록 하겠습니다. ㅋㅋ Summary TypeScript, React, Next.js, AWS에 경험이 있는 .. 2023. 1. 27.
[이직] 4년차 프론트엔드 개발자의 이직 후기 들어가며 이 글은 처음 경력직 이직에 마구잡이로 시도해보면서 반성과 후회가 쌓인 프론트엔드 개발자가 적은 글입니다. 엄청난 정보는 없지만 이직에 도전하는 동료개발자분들에게 한줌의 도움이 되길 바라며, 그럼 후기글 시작하겠습니다. 이직 이직... 이름만 보아도 벅차고 가슴 끓어오르는 단어입니다. 저는 이직을 마음먹으면 바로 할 줄 알았어요. 이와 비슷하게 다이어트도 마음만 먹으면 할 줄 알았습니다. 이번에 2개를 병행하면서 아 마음먹기가 가장 어려운 거구나 라는 반성을 했네요. ㅎㅎ 이직을 막상 하려고 하는 두렵고 귀찮고 피말립니다. 저는 압도적인 개발자가 아니기때문에 저의 작고 소중한 강점과 언젠가는 고쳐야할 단점을 이쁘고 잘 꾸며서 어필해야하기 때문이죠. 동기 일단 이직을 마음먹게 된 계기, 동기가 있.. 2022. 6. 12.
[리액트] React.memo를 이용해 성능 최적화를 해보자 React.memo가 필요한가? 어느 때와 같이 기획문서를 보고( 실은 기획자가 없어서 뇌리에 스치는 게 기획) 컴포넌트를 만들고 있었습니다. 이번엔 차트와 관련된 컴포넌트를 구현하고 있어서, Plotly 라이브러리를 활용해 미리 만들어놨던 컴포넌트에 테스트를 붙이고 구현하고 푸시를 했습니다. 문제 인식 | 성능이 구려 푸시를 하면 일단 기분이 좋기 때문에 완성된 모습을 뿌듯하게 쳐다보고 있는데 자꾸 버벅이는 느낌이 들어 바로 파고들어가 봅니다. 콘솔 창을 열고 확인을 해보니 같은 요청이 여러번 날아가는 것을 확인했습니다. 데브툴로 봐도 같은 prop임을 확인했습니다. 같은 요청 & 같은 데이터 --> 여러번 랜더링 -> 잘못된 구조 --> 최적화라는 뇌피셜 로직이 수행되었고 바로 어떤 컴포넌트인지 확인.. 2022. 1. 3.

티스토리툴바