전체 글 81

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

[AWS]비용 최적화 아키텍쳐

개요클라우드 기반의 개플리케이션 구현에 앞서 비용 관련한 철저한 분석이 필요하다. 또한 적절한 비용으로 리소스를 실행할 수 있게 준비했다 하더라도 낭비되는 리소스가 발생할 수 있고, 해커에 의해 예기치 못한 비용이 지출될 수 있다.비용 계획, 추적, 제어AWS 관리 콘솔 상단 결제 대시보드에서 대금, 비용 관리 대시보드를 확인할 수 있다.AWS Budgets비용 대시보드 좌측, 기본 설정에서 비용 청구에 대한 설정 페이지를 확인할 수 있다. 이를 통해 Amazon CloudWatch Alarms을 통한 경고 메시지, AWS Budgets를 통한 비용 추적을 사용할 수 있다.budgets는 실행 중인 리소스 관련 비용을 추적하며, 기준선을 벗어나면 경고 메시지를 전송한다. 리소스에 비용 할당 태그를 부착해..

aws 2024.08.22

[AWS]보안성 아키텍처

개요정보 보안의 기본 목표는 데이터의 보호, 특히 해당 데이터를 저장한 리소스 보호, 접근 보안이다. 데이터를 보호하기 위해 다음 세 가지 오류를 준수해야한다.기밀성특정 데이터에 대한 접근 권한이 있는 사람, 시스템만이 해당 데이터에 접근할 수 있어야 한다. 데이터 암호화와 ACL은 기밀성을 강화하는 주요 매커니즘이다.무결성데이터는 악의적으로 또는 우연히 변조돼서는 안 된다. 암호화를 위한 해싱, 로그 관리는 무결성을 검증하는 주요 도구다.가용성데이터를 필요로 하는 사람은 해당 데이터에 접속할 수 있어야 한다. 데이터가 무결성을 유지하고 있더라도 해커 등의 Dos 공격으로 해당 데이터에 접속할 수 없다면 가용성이 부족한 것이다.신분 및 접근 권한 관리AWS에서의 보안은 IAM에서 제공하는 신분을 기준으로..

aws 2024.08.20