분류 전체보기
-
[Vite] 내가 Vite를 사용해야 하는 이유카테고리 없음 2024. 9. 4. 18:12
평소 React로 프로젝트를 진행할 때 가장 많이 사용하는 번들 툴로써 그냥 간단하게 왜 필요한지 사용할 때마다 간단하게 찾아보고 넘어갔던 것 같다. 근데 포트폴리오를 작성하던 중 갑자기 이 Vite라는 것을 내가 왜 사용하는지에 대한 의문에 정확히 답을 못하는 자신을 보고서 사용해야하는 이유 즉 강점에 대해서 한 번 확실하게 분석을 해보고자 생각이 들어서 글을 작성하게 되었다. 💻 Vite의 등장 배경 📦이런 문제점이 있었어요1. ESM이란 무엇인가?ES6에서 도입된 모듈 시스템으로 import, export를 사용해서 자바스크립트 파일을 서로 접근하게 해준다.초기 자바스크립트는 독립적으로 작업을 수행하며, 큰 스크립트가 없었지만 jQuery가 등장하면서 어플리케이션의 규모도 커지고, scrip..
-
[실습] Zustand와 createPortal을 활용한 Modal카테고리 없음 2024. 7. 24. 10:59
개요1. 배경 요인2. 이전 코드 및 문제점3. 개선된 코드, 느낀점 및 나의 노력 📖 배경 요인프로젝트를 진행하면서 createPortal을 통해서 상위 CSS에 영향을 받지 않는 Modal을 구현하고자 createPortal과 Zustand를 통해서 alertModal을 구현하였다. 그리고 이를 예시 삼아서 Modal기능을 하는 다른 여러 컴포넌트들을 부가적으로 만들게 되었는데, 각자가 본인의 Modal과 Portal을 생성해서 구현하다보니 중복된 로직과 비슷한 구조를 가지는 부분이 많아져서 이를 동적으로 작동할 수 있는 하나의 모듈화된 컴포넌트로 생성하고자 하였다. 또한 SOLID원칙에서 OCP(Open-Close Principle)를 만족하여 확장에 유연해 효율적이고 견고하며 유지보수가 용이한 ..
-
[모닥불] EP3. 테스트 자동화에 대한 영상을 보고..카테고리 없음 2024. 7. 17. 15:02
개요1. 테스트 자동화가 필요한 이유2. 테스트 코드의 종류3. 앞으로 해볼 도전 toss tech에서 새롭게 영상이 올라와서 시청하게 되었다...현재 취업과 개발 실력을 향상시키는 방법 중에 고민이 되는 것이 디자인 시스템을 공부를 하는 것과 테스트 코드를 공부 하는 것 크게 2가지가 있었고 이전에 Figma API를 이용한 디자인 시스템 구축 및 라이브러리 만들어보기라는 매력적인 계획을 세워 놓은 상태에서 영상을 시청하게 되었다. 🔶 테스트 자동화가 가지는 Benefit본문에 들어가기 전 한가지 유의해야할 점으로 테스트 자동화는 무식하게 모든 부분에서 사용되는 것이 아니다. 사용되는 테스트의 종류도 다양하고, TDD를 고수하는 것이 아니며 방어적인 목적으로도 사용 가능하다 🎈생산성의 향..
-
[CS Study] 실시간 업데이트 기법(웹소켓과 SSE)네트워크/CS Study 2024. 6. 18. 16:36
개요1. 실시간 업데이트 기법2. SSE(Server-Sent-Event)란?3.웹소켓이란? ✅ 실시간 업데이트 알람 기능과 채팅 기능 등 실시간으로 백엔드에서 정보를 받아서 클라이언트에 나타내야하는 기능들이 많아진 근래의 애플리케이션에서는 기존의 HTTP 통신만으로는 실시간성을 보장하기 힘들고 효율적이지 못한 부분이 생기게 되었다. 실시간 업데이트를 위해 사용되는 다양한 기법과 우리가 주로 사용하고 있는 SSE 및 웹소켓에 대해 알아보자! 📦 폴링(Polling)클라이언트가 일정 주기로 서버에 필요한 데이터를 요청하는 방식으로 가장 쉽지만 데이터의 변경 유무에 관계 없이 계속 요청을 보내 서버에 부담을 주며, 주기가 짧아질수록 부담이 가증된다.(요청과 응답이 1대1로 이루어짐)주기적인 데이터 요청은 ..