권시현 님이 스터디에서 공유한 글 6개입니다.
![[디자인 패턴] 팩토리 패턴과 프로토타입 패턴을 JS로 이해해보자! (feat. 메모리 할당량)](/_next/image?url=%2Fog%2F7fef0d3e44b2fc10.png&w=3840&q=75&dpl=dpl_BKHhBAFidVtg3WyVCedfrBWBksgF)
JS를 공부한 프론트엔드 개발자에겐 특히나 프로토타입 패턴을 한 번쯤 지나친 개념이라고 생각합니다. 팩토리 패턴은 너무나 유명하구요! 두 패턴 모두 개념 자체는 어렵지 않다 보니 아주 기본적인 개념일 뿐 실제 서비스에선 크게 의미를 두는 패턴은 아니라고 생각할 수 있습니다. 하지만, 이 두 패턴의 본질을 파악하여 어마어마한 성능 개선을 한 사례가 있습니다. 바로 Tanstack Table V9에서 메모리 사용량을 90%나 개선한 사례입니다!지금부터 팩토리 패턴, 프로토타입 패턴에 대한 간단한 개념을 Tanstack Table에서 쓸거 같은 예시 코드로 이해해 보고 어떻게 메모리 사용량을 줄일 수 있었는지 알아보도록 합시다!1. 팩토리(Factory) 패턴?팩토리 패턴은 말 그대로 '객체를 찍어내는 공장'..
![[디자인 패턴] 프록시(Proxy) 패턴을 JS로 이해해보자! (feat. 캐싱)](/_next/image?url=%2Fog%2Fd75a45b8e838b95c.png&w=3840&q=75&dpl=dpl_BKHhBAFidVtg3WyVCedfrBWBksgF)
개발자라면 프록시(Proxy)라는 단어는 뭔가 익숙할 겁니다. 하지만 이 말의 의미가 정확히 뭔지, 그리고 프록시 패턴은 또 뭔지 설명하기는 쉽지 않다고 생각이 듭니다. 이제부터 차근차근 JS를 통해서 프록시 패턴에 대해 파헤쳐보도록 하겠습니다! 1. Proxy 패턴이란?먼저 Proxy는 대리(행위)나 대리권, 대리 투표, 대리인 등을 뜻하는 단어입니다. 즉, 프록시 패턴은 대신해 주는 무엇인가 있는 패턴이지 않을까 유추해 볼 수 있을 겁니다.그렇습니다! 프록시 패턴은 어떤 값에 접근하는 과정 앞단에 프록시(대리인)을 두어 진짜 객체가 아닌 대리인이 대신 일을 처리하는 패턴을 뜻 합니다!프록시 패턴은 보안, 캐싱, 데이터 유효성 검사, 지연 초기화, 로깅 등등 다양한 곳에서 활용할 수 있습니다.간단한 ..
프론트엔드 개발자로서 '클로저'라는 단어는 많이 들어봤을 겁니다. 하지만 막상 클로저가 뭐예요?라는 질문에 선뜻 대답을 하긴 어렵습니다. 이렇게 개념이 모호하다 보니 실무에서도 내가 클로저라는 걸 쓰고 있는 건가? 그냥 말 그대로 개념적인 내용이지 실무에선 안 쓰이는 거 아닌가 하는 생각이 들었습니다.그러던 중 한 면접 시뮬레이션(https://github.com/CaesiumY/claude-interview-agents)을 해보면서 나왔던 첫 질문이 클로저가 무엇인지, 그리고 실무에서 사용한 사례가 있다면 설명해달라는 내용이었습니다. 호기롭게 면접 뿌셔보자..! 도전해 봤지만 바로 이 첫 질문에서 벽을 느꼈고, 클로저에 대해서 한 번 다시 공부해 보고 쉽게 정리하여 나와 같은 사람들이 더 이상 클로저..
결론부터 말하자면 '반드시 신경써야한다'. 사실 UX란건 사용자가 있는 제품 / 서비스를 만드는 사람이라면 누구나 반드시 고려해야하는 가장 중요한 부분이라고 생각한다.물론 사용자들의 니즈를 정확히 파악해서 사용자가 엄청나게 필요로 하는 서비스를 개발했다면 UX보단 기능에 더 중점을 두고 서비스를 운영할 수 있을 것이다. 하지만 곧 비슷한 서비스들이 생겨난다면 사용자들은 결국 UX가 좋은 서비스를 선택할 것이기 때문에, 좋았던 아이디어를 남에게 홀라당 바치는 꼴이 될 수 있다고 생각한다. 그러므로 UX는 제품 / 서비스를 기획하는 사람뿐 아니라 모든 사람이 신경써야 하는 중요한 포인트다.서비스를 만드는 모두가 UX를 고민해야 하는 이유는 명확하다. 팀 내에 UX의 중요성에 대한 공감대가 없다면 잦은 의견 ..
들어가며아마 이 글을 읽어보시려고 하는 분이라면, Sentry가 무엇인지 알고 계시리라고 생각합니다. 또한 다른 좋은 글(카카오 페이, 우아한 형제들 등)들을 통해서, 왜 Sentry를 써야 하는가? 어떻게 하면 효율적인 데이터를 모을 수 있을까?라는 고민들을 보고 공감을 얻으셨으리라고 생각합니다.저도 그런 글들을 보고 sentry 도입을 일단 해두었습니다. 무려 2년전에 말이죠.. 하지만 막상 도입은 했지만 설정할 부분이 많아 복잡하게 느껴졌고.. 당장 바쁜 업무들을 처리하며 우선순위가 점점 낮아졌습니다. 그러다 보니 Sentry를 통해 모니터링을 한다기 보다는 문제가 생긴 후에 디버깅 용도로 더 자주 사용하곤 했습니다. 또한 관리도 제대로 되지 않고 무의미한 로그들만 쌓여가곤 했지요. 그러다 이대로는..
요즘 한창 핫한 라이브러리가 있다!바로 Pretext로 AI를 중심으로 돌아가는 이 세상 속에서 순수한 JS 라이브러리가 이렇게 언급이 많이 된다는 게 신기하기도 하고 도대체 무슨 라이브러리이고 어떤 것들을 할 수 있는지 알아보고자 한다. 1. Pretext는 무엇인가?Pretext는 한마디로 "DOM 없이 텍스트 레이아웃을 계산하는 순수 자바스크립트 함수" 라고 할 수 있다.기존에는 요소의 높이를 측정하기 위해서는 요소가 화면에 그려진 후에 offsetHeight, clientHeight, getBoundingClientRect() 함수들을 이용해서 값을 가져올 수 있었다.즉, 정확한 요소의 주도권이 DOM에게 있는 상황이었고, 우린 그걸 매번 DOM에게 요청하곤 했다.여기까진 그래서? 지금까지 잘 요..