전체 글 83

React Dev Tools는 정확한 성능 측정을 방해할 수 있다.

개요React 디버깅을 돕는 Chrome 확장 프로그램 React Developer Tools는 분명히 편리한 도구이다. 이 확장 프로그램을 사용하면 어떤 부분에서 re-rendering이 발생하는지, 어떤 컴포넌트의 렌더링에 얼마나 시간이 걸리는지를 쉽게 파악할 수 있다. 하지만, React Developer Tools는 정확한 성능 측정에는 오히려 문제가 될 수 있다는 사실을 발견하였다. 최근, 매우 큰 테이블을 다루는 작업 중 최악의 성능 환경에서 성능 최적화를 진행한 적이 있다. DOM 크기가 매우 커진 상황에서 element.focus() 요청 시, 예상보다 훨씬 속도가 느려지는 현상을 발견했다. memoization 적용, 렌더링 관리, 상태 분리, 알고리즘 최적화 등 성능 향상을 위한 다양한..

frontend 2024.10.24

immer, Redux Toolkit 성능 문제

immer란React에서 상태의 불변성은 성능에 큰 영향을 미친다. 상태가 불변하게 유지되면 React는 변경된 부분만 효율적으로 다시 렌더링할 수 있기 때문에 성능 최적화가 가능해진다. 하지만 불변성을 수동으로 관리하는 것은 번거로울 수 있는데, 이때 immer 라이브러리는 개발자가 불변성을 유지하는 데 신경을 많이 쓰지 않더라도 이를 쉽게 관리할 수 있도록 도와준다. immer는 프록시(proxy)를 사용하여, 객체나 배열을 직접 수정하는 요청을 가로채어 새로운 객체에서 해당 요청을 작업한다. immer의 핵심 함수인 produce는 두 가지 인자를 받는데, 첫 번째는 원본 상태, 두 번째는 상태를 변경하는 콜백 함수이다. 이 함수 내에서 원본 객체는 수정할 수 있는 것처럼 보이지만, 실제로는 프록시..

frontend 2024.10.11

기가막힌 디자인/개발 툴 소개(v0.dev)

개요Vercel에서 몇 년 전부터 개발해온 웹 디자인 및 개발 도구인 v0.dev이라는 제품이 있다. 처음 출시되었을 때는 크게 눈에 띄지 않았지만, 최근 사용성이 크게 향상되었다는 소식을 듣고 테스트용으로 사용해보니 놀랄 정도로 훌륭하다는 생각이 들어 이렇게 소개하게 되었다. 사용법은 매우 간단하다. 첫 페이지에 접속하면 ChatGPT처럼 채팅 형식으로 원하는 요청을 입력할 수 있게 되어 있어 누구나 쉽게 사용할 수 있다.  단순하게 채팅으로 요구사항을 요청해도 잘 동작하지만 간단한 그림과 함께 요청한다면 정말 알아서 페이지를 다 만들어준다. 아래는 실제로 테스트한 내용이다.실제 사용 모습요청 사항딜리버리 메이트라는 회사에서 점심, 저녁에 배달을 같이 시켜먹을 파티원을 모집하는 웹 프로젝트를 만들거야아..

etc 2024.10.06

인스타그램 크롤러 개발(1)

이전 글 https://jjongsk.tistory.com/entry/Instagram-Crawler-Deployment-Using-AWS-Design Instagram Crawler Deployment Using AWS: DesignOverviewI was given the job of deploying an Instagram crawler using the GPT API to ensure stable operation for a side project currently in progress. The crawler itself has been fully developed by the PM I'm collaborating with, andjjongsk.tistory.com  개발 요구사항볼드 처리된 요구..

aws 2024.09.22

프론트엔드 전체 테스트 환경 구축해보기(3.웹서버)

2편(CLI 구축) 보러가기https://jjongsk.tistory.com/entry/frontend%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%EC%A0%84%EC%B2%B4-%ED%85%8C%EC%8A%A4%ED%8A%B8-%ED%99%98%EA%B2%BD-%EA%B5%AC%EC%B6%95%ED%95%B4%EB%B3%B4%EA%B8%B02CLI 프론트엔드 전체 테스트 환경 구축해보기(2.CLI)1편(설계) 보러가기https://jjongsk.tistory.com/entry/1%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%EC%A0%84%EC%B2%B4-%ED%85%8C%EC%8A%A4%ED%8A%B8-%ED%99%98%EA..

frontend 2024.09.22

기술 블로그와 시니어 개발자(나의 생각)

개요기술 블로그, 시니어 개발자 내가 최근들어 가장 많이 생각하는 주제들이다. 글로 쓸정도의 내용인지는 잘 모르겠지만 나조차도 아직 내가 이것들에 대해 어떻게 생각하는지 제대로 정리해본적이 없기에 나 스스로를 위해 그리고 앞으로를 위해 이를 글로 정리해보려고 한다. 기술 블로그나는 작년부터해서 기술블로그를 열심히 쓰고 있다. 처음 시작은 어색하고 억지로 쓰는 느낌이였지만 지금은 습관이되어 일주일에 한 개 정도는 기술블로그를 작성하지 않으면 성에 안차는 느낌을 받는다. 기술블로그란 뭘까? 내가 왜 기술블로그를 열심히 쓰기로 결정했을까? 이제부터 그 이유와 나의 생각들을 적어보겠다.개발자가 외부에 자신을 표현할 수 있는 방법은 대표적으로 두 가지가 있다고 생각한다. 한 가지는 깃헙이고 나머지는 기술블로그이다..

etc 2024.09.04

프론트엔드 전체 테스트 환경 구축해보기(2.CLI)

1편(설계) 보러가기https://jjongsk.tistory.com/entry/1%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%EC%A0%84%EC%B2%B4-%ED%85%8C%EC%8A%A4%ED%8A%B8-%ED%99%98%EA%B2%BD-%EA%B5%AC%EC%B6%95%ED%95%B4%EB%B3%B4%EA%B8%B0%EC%84%A4%EA%B3%84 프론트엔드 전체 테스트 환경 구축해보기(1.설계)서론본격적으로 글을 작성하기에 앞서 요즘 하는 생각들을 주저리주저리 적어보자면, 고민이 이만저만이 아니다. 현재 회사가 마음에 들고 커리어적으로 엄청난 성장을 할 수 있을 것 jjongsk.tistory.com  위 글에서 설계를 완료했으니 이제 다음 단계인 cli쪽..

frontend 2024.08.30

[AWS]기타 서비스

배포 도구AWS AmplifyAmplify는 개발자가 좀 더 간단하게 코드를 배포할 수 있는 방법을 제공한다. 풀 스택 개발 팀원 모두가 Amplify CLI 또는 브라우저 기반 Studio 등의 도구로 협업할 수 있다.Amplify를 통해 데이터 베이스, 스토리지, 권한 인증 등 완벽한 리소스를 구현하고 UI 디자인도 가능하다.CloudFormation 등의 서비스와 통합해 상용화 준비단계 및 상용화 단계에 맞는 배포 환경을 제공한다. Amplify 프로젝트 환경은 템플릿으로 export 한뒤 DevOps 도구에 재배포 할 수 있다.AWS Serverless Application RepositoryAWS Serverless Application Repository는 관련 리소스를 재구성해 새로운 요구사..

aws 2024.08.25

프론트엔드 전체 테스트 환경 구축해보기(1.설계)

개발 목표현재 회사의 테스트 코드는 작성은 잘 되어 있지만 이를 실행하는 환경이 너무 느려 모든 테스트를 한 번 실행하는데 수십분 길면 한 시간이 넘는 시간이 걸린다. 심지어 제대로 전역으로 테스트를 실행하는 로직도 없어 사실상 유닛 테스트를 여러 번 실행하는 느낌으로 동작하고 있다. 약 1~2주 정도 타임라인을 잡고 단위 테스트, 전체 테스트를 빠르게, 테스트 코드 개발자가 편하게 작성할 수 있도록 하는것이 목표로 개발을 진행할 예정이다. 아래는 기획, 설계에 앞서 정리한 개발 요구사항이다.CLI로 실행 가능해야한다. ex)ecDev testRun —path테스트 파일에서 F6과 같이 shorcut 입력 시 동작해야한다.백그라운드에 테스트를 위한 웹 서버 실행스토리북 서버: 스토리북 UI에서 단순 클릭..

frontend 2024.08.22