개발 블로그

최근 개발자 도구 의 성능 탭을 분석하다가 Flame chart 를 보다가 도대체 '자바 스크립트 실행' 이라는 건 내부적으로 어떻게 돌아가는 걸까? 라는 생각이 들었다. 자바 스크립트를 활용하다 보면, 코드가 잘 돌아가는지 " 표면적인 결과 " 만 보게 되는 경우가 많은 것 같다.하지만 성능을 분석하거나 예상치 못한 버그를 디버깅 하려고 하면 그 밑바닥에서 엔진이 어떻게 실행하는지 인지하고 있어야 디버깅 시간이 효율적으로 단축되지 않을까 하는 생각이 들었다. 바로 그 핵심이 실행 컨텍스트 와 스코프 인 것 같다. Flame chart에서 노란색 Scripting 구간은 JS가 " 현재 어떤 실행 컨텍스트 위에서 동작 중인지" 를 시각화한 것이다.즉, 실행 컨텍스트의 원리를 이해해야 Flame char..

이미지 최적화를 공부하기로 마음 먹었을 때, 처음에는 막막했다.단순히 이미지의 용량을 줄이거나 포맷을 바꾸는 것 과 같은 테크닉이 먼저 떠올랐지만막상 무엇이 느린지, 어디서 병목이 생기는지를 알아야 개선이 가능하다는 걸 깨달았다.그래서 제일 먼저 이 현상을 관찰할 도구를 찾았다..! 그건 바로 개발자 도구였다.그중에서 Performance 탭을 열면 브라우저가 실제로 어떻게 렌더링하는지, 어떤 리소스가 오래 걸리는지,이미지가 언제 로드되는지를 눈으로 볼 수 있다. 결국 이미지 최적화의 첫 단계는 '이미지를 줄이는 기술' 이 아니라 현재 상태를 정확히 진단하는 능력인것 같다. 우선 개발자 도구란 무엇일까? 크롬 공식 홈페이지에서 서술하고 있는 정의는 다음과 같다.Chrome DevTools는 Chrome ..

최근 회사에서 새로운 프로젝트 MVP 개발을 진행하고 있다.MVP 개발을 하면서 대용량 & 고화질 이미지들을 많이 다루게 되면서 꽤나 큰 고민거리가 생겼다..바로 렌더링 속도 저하 문제이다. 이미지 한 두장은 괜찮지만, 리스트나 갤러리 형태로 여러 장이 한번에 로드되면 페이지가 버벅이고 사용자 경험이확 떨어졌다. 이걸 MVP라는 명목상 냅두고 가려니.. 너무 신경쓰이고 이걸 해결하는 과정이 나에게큰 도움이 될것 같다는 생각이 들어서 개선 과정을 블로그에 작성해보려고 한다. 회사에서는 프론트엔드만 담당하고 있어 서버에서 주는 이미지들만 렌더링하는 작업을 하고 있지만 추가적으로 전송부터 렌더링까지 전체 파이프라인을 체계적으로 다뤄보고 싶다는 생각이 들었다.(1) 이미지 렌더링 최적화(2) 이미지 전송 최적화..

현업에서 '모달' 컴포넌트에 자주 사용되는 리액트 훅 모음 이라는 아티클을 읽고 이를 적용해서 스터디를 해보았다.프로젝트를 진행하다 보면 모달은 정말 자주 사용되는 UI 중 하나이다!그런데 막상 직접 만들어 쓰려고 하면 상태 관리, 키맵 사용해 이벤트 처리, 재사용성 등에서 고민이 많아진다.현재 회사에서도 자주 개발하는 모달 컴포넌트를 hook 기반으로 JavaScript와 TypeScript 두 가지를 활용해서 개발하는 과정들을 기록하려고 한다.그리고 마지막으로는 모노레포 구조로 프로젝트를 재구성하는 것까지 기록할 예정이다. 내가 참고했던 아티클은 다음과 같다.https://yozm.wishket.com/magazine/detail/3267/?data=6dQERqqqkUCmpSl8GBOPV0nURB8p..

드디어 .. 작년부터 진행한 Flab 과정을 모두 수료하게 되었다 ㅠㅠ 만세.. 이직과 함께 시작한 flab이고.. 지금 회사를 다닌지 거의 1년이 다 되어가니 처음 멘토링을 시작한 때가 아득하게 느껴진다. 작년에 내가 멘토링을 시작하게 된 계기는 그 당시에 퇴사 상태여서 이직하기 위해 시작했다.한창 주변 지인들이 flab을 많이 시작하고 수료했다는 소식을 들어서 흥미로운 상태였기도하고 성장하고 싶다는 욕심도 많았기 때문에 멘토링을 신청했었다. 항해도 있고 다른 부트 캠프들도 있었는데 1대1 멘토링이라는 점이 가장 맘에 들어서 flab을 선택했었다. 멘토링을 진행하기 전에는 내가 내 자신에게 확신이 없었고 어떤 부분을 개선해야하는지도 명확히 알지 못했다.분명 뒤떨어지고 더 해야할것 같은데 어떤 부분을 더..

Next.js 15로 프로젝트를 올린 뒤, 평소처럼 params에서 id를 꺼내려다가 갑자기 빌드 에러가 터졌습니다.분명 이전 버전에서는 아무 문제 없던 코드인데, 이번에는 타입 에러가 발생하면서 빌드조차 되지 않았습니다.처음엔 단순한 오타나 설정 문제라고 생각했지만, 원인을 찾아보니 Next.js 15부터 params와 searchParams가 Promise로 바뀌었다는 사실을 알게 되었습니다.이번 글에서는 제가 직접 겪은 빌드 에러 상황을 예제로 보여드리고, 왜 이런 변화가 있었는지, 어떻게 수정했는지, 그리고 이 과정에서 어떤 개념을 다시 정리하게 되었는지를 기록해보려고 합니다.문제상황은 다음과 같았습니다!export default async function Page({ params,}: { p..

제주도로 워케이션을 가기전 회사에서 팀원들에게 무료로 심리상담을 3번 정도 할 수 있는 기회가 있다며 공유를 해줬다.그 당시에 나는 별로 힘든건 없지만 그 상담에서 MBTI 같이 자신에 대해 검사할 수 있는 게 있다그래서 단순 호기심으로 신청을 했다. 상담은 비대면으로 이뤄질 예정이었고 나는 상담이 시작하기 1분 전까지 할 얘기가 없으면 어떡하지..? 그래도 전문가인데 상담을 리드해주겠지? 라며 별 생각없이 있었다. 그런데 웬걸 상담이 시작하고 상담가 선생님이 왜 상담을 신청했고 요새 가장 많이 경험하고 있는 감정이 뭐냐고 물어보셨다.마치 드라마 "유미의 세포" 에 나오는 세포들이 내 머리에 있다면 "이성이"는 어디 묶여져 있어 통제권이 없고바닥에 꽁꽁 감춰져 있던 "본심이"이가 튀어나와서 이야기하는 듯..

추상 팩토리 패턴을 공부하다가.. 너무너무 이해가 안되는거다..도대체 이게 뭔데!? 를 반복하다가 팩토리 메서드 패턴을 먼저 공부해야 이해가 될것 같아 팩토리 메서드 패턴부터 공부해보려고 한다. 우선 팩토리 메서드 패턴, 왜 필요한 걸까?객체 지향 프로그래밍을 하면서 굉장히 자주 아래의 코드를 작성하게 된다.const coffee = new Americano();굉장히 단순하고 .. 직관적이다. 그런데 이 방식이 점점 문제를 일으키기 시작하는 시점이 있다.바로 프로그램이 점점 커지고, 제품 종류도 많아지고 제품 생성 방식이 다양해질 때이다. 문제는 어디서 시작되는 것일까?예를 들어 커피 전문점 프로그램을 만든다고 가정할때 처음엔 아메리카노 하나만 만들면 됐기 떄문에 new Americano() 만 해도 ..

이전 포스팅에서 객체지향의 4대 특성에 대해서 공부해봤는데 이번에는 객체 지향 프로그래밍에서 유지보수성과 확장성을 높이기 위한 5가지 설계 원칙인 SOLID 원칙에 대해서 공부해보려고 한다.우선 위키에 정리되어있는 SOLID 원칙의 정의 부터 살펴보자!두문자약어개념SSRP단일 책임 원칙 (Single responsibility principle)한 클래스는 하나의 책임만 가져야 한다.OOCP개방-폐쇄 원칙 (Open/closed principle)소프트웨어 요소는 확장에는 열려 있으나 변경에는 닫혀 있어야 한다.LLSP리스코프 치환 원칙 (Liskov substitution principle)프로그램의 객체는 프로그램의 정확성을 깨뜨리지 않으면서 하위 타입의 인스턴스로 바꿀 수 있어야 한다.IISP인터페..

최근에 디자인 패턴에 대해서 공부를 하면서 SOLID 원칙, OOP의 4대 특성에 대해서 잘 모르고 있다는 생각이 들었다.그래서 디자인 패턴 공부를 잠시 멈추고 기본적인 공부부터 진행해보려고 한다. 우선 객체 지향 프로그래밍 ( object-oriented programming, OOP ) 는 무엇일까?검색창에 검색해보면 다음과 같은 정의를 찾아볼 수 있다.1. 객체 개념을 기반으로 하는 컴퓨터 프로그래밍의 패러다임.2. 컴퓨터 프로그램을 명령어의 목록으로 보는 시각에서 벗어나 여러 개의 독립된 단위, 즉 '객체들의 모임'으로 파악하고자 하는 것3. 유연하고 변경이 쉬운 프로그램을 만들기 때문에 대규모 소프트웨어 개발에 많이 사용된다.한마디로 객체 지향 프로그래밍은 단순한 프로그래밍 스타일 중 하나 가 ..