전체 글 (172) 썸네일형 리스트형 Chrome DevTools MCP 써보기 2025. 11. 29. 18:47 평화로운 어느 날 아침...종근님께서 무언가를 보내주셨다 https://duck-blog.vercel.app/blog/web/chrome-devtools-mcp-game-changer 안 쓰고 있다면 진짜 이건 손해입니다: Chrome DevTools MCPChrome에서 공식 제공하는 DevTools MCP로 console 디버깅, 바이브 코딩, AI 기반 E2E 시나리오 자동 생성까지. Puppeteer, Playwright와는 차원이 다른 개발 경험을 소개합니다.duck-blog.vercel.app 일단 제목부터 레전드 어그로 (이목을 끈다는 뜻, positive)>> 안쓰고 있다면 진짜 이건 손해입니다 넵 (뼈 부러져서 순살치킨 됨) Chrome DevTools 시작하기 의외로 간단함! cur.. [매일메일+개발] 쌓임 맥락 + 실무 경험담 2025. 11. 29. 16:52 크아악 겪어보지 않으면 모르는 쌓임 맥락(겪어보고 뒤통수가 얼얼해서 정리한다는 뜻)화면 중앙에 표시되는 요소를 만들고 나서, 좌측에 있는 요소를 만들었다대략 아래와 같은 상황 중앙 요소는 항상 가운데 위치하지만, 평소에 노출되지 않을 땐 투명하다.따라서, 배치 상으로는 좌측 요소와 겹치더라도 ui 상으로는 문제가 없다 근데 좌측에 있는 요소가 클릭이 안되길래 확인해보니,저 그림에서 겹치는 영역을 클릭했을 때 좌측 요소의 클릭이 안먹히고 있었다어라?! 이상한 점...중앙 요소의 z-index는 10, 좌측 요소는 100으로 훨씬 높았다좌측 요소(z-100)가 더 위에 렌더링 될 것이라고 생각했지만, 실제로는 중앙 요소(z-10)가 클릭을 가로채고 있었음 그것은 Stacking Context (쌓임 맥락) .. [개발] Relay(GraphQL) 사용 경험 2025. 10. 23. 23:55 입사 후 내게 펼쳐진 거대한 Relay 10년차 시니어 FE 개발자님께 질문을 드렸다'Relay...가 뭔가요?' 그리고 내가 받은 답변:https://relay.dev/docs/tutorial/intro/ Tutorial Intro | RelayThis tutorial will get you started with the most important and frequently-used features of Relay. To do that, we’ll build a simple app that displays a newsfeed. We will cover:relay.dev???: 자 이제 이걸 보고 Relay가 뭔지 알아보시면 됩니다 GraphQL에 대하여- Meta가 모바일 앱의 성능 문제를 해결하기 위.. [개발] framer motion (motion.div) 사용 경험 2025. 10. 21. 00:15 입사 후 framer motion과 싸우다가 대학 개발 동아리방에 남겼던 혼잣말지금도 막 잘 아는 건 아니지만 7개월의 경험 속에서 나오는 뭔가뭔가...를 정리해 봄 framer motion이란 무엇인가?https://motion.dev/docs/react Motion for React — Install & first React animation | MotionLearn Motion for React animation library: Install, animate HTML and SVG elements with spring animations, staggering effects. Complete guide with examples.motion.dev React(혹은 JavaScript) 기반 ui에서 요.. [개발] Rive 도입 이유 + 사용 경험 2025. 10. 19. 01:32 내가 현재 개발 중인 프로덕트는 rive를 쓰고 있다 Rive가 무엇인가?https://rive.app/ Rive — a new way to design, build, and ship user interfacesRive combines an interactive design tool, a new stateful graphics format, a lightweight multi-platform runtime, and a blazing-fast renderer. This pipeline brings interfaces to life with motion across apps, games, websites, products, and vehicles.rive.app(공식 사이트) 상태 머신(state machi.. CTO님께서 내주신 연휴 숙제 - 마인드맵 2025. 10. 11. 17:13 연휴 전날 엔지니어링 토크에서 CTO님께서 숙제를 내주셨다 올해 2월까지 대학생이었던 내가 이해한 것: 교수님께서 연휴 기간을 맞이하여 과제를 내주심 학생 본능으로 과제를 수행했다 긴 연휴 기간동안 자신을 되돌아보는 시간을 가져보라는 취지로 내주셨다쓰다 보니 정말 자아 성찰 효과가 있었다생각보다 내가 하고 싶은 게 많아서 이거 이루려면 열심히 살아야 된다는 자각도 하게 됐다 마인드맵마인드 맵 쓰면서 했던 생각을정말 의식의 흐름대로 줄줄 풀자면... 근데 이건 정말 제 머릿속이랑 비슷해서 부끄러우니까 너무 자세히 읽지는 말아주세요 ㅎ 일생가족은 멀리 떨어져 있지만, 시간을 내서 챙기고 싶다.고등학교와 대학교를 연구 중심 대학을 나왔지만, 취업을 했다.주변에 거의 대부분의 친구들은 대학원에서 연구를 하고 .. [개발] FECONF25 로띠 세션에서 알게 된 닷로띠를 실무에 적용하기 2025. 10. 9. 22:54 보통 컨퍼런스를 듣고 와서"아~ 재밌었다~"로 끝나게 되면...기억 지속이 잘 안된다 그럼 답은 뭐다?"이론 및 실습" 괜히 대학교 과목이 이론 3시간 실습 1시간으로 구성된 게 아님(기억 속에 주마등처럼 스쳐지나가는 수많은 레시테이션 시간들...크아악) 아무튼 개발 컨퍼런스? 실제로 실무에 유의미하다라는 증거를 남기고자...글을 씁니다배경(2025년 8월 25일 오후 8시 쯤에 있었던 실화를 재구성했습니다) FECONF25를 듣고 와서우리 스쿼드 디자이너님께 로띠 이야기를 했다 우리 디자이너님께 헌정한 로띠 세션 후기 글은 요기 👇https://developer-dreamer.tistory.com/181 [FECONF25] 개발자를 위한 모션 그래픽 솔루션: Lottie의 기술 진화와 활용전략feco.. [토스 컨퍼런스] TOSS MAKERS CONFERENCE 25 후기 2025. 10. 9. 00:28 세미나 정보2025.07.25. 토스 메이커스 컨퍼런스 - 엔지니어링 데이 참가 개요CTO님이 토스 메이커스 컨퍼런스 25에 참석하지 못하는 팀원들을 위해 참석한 팀원들이 후기를 공유해 줄 것을 요청하셨고,저도 정리해두면 나중에 보면서 오래 기억할 수 있어서 정리해봤어요! 토스 컨퍼런스 세션 목록 중 제가 다니는 회사의 현재 문제 상황에 실마리가 될 수 있는 세션을 골라서 들었어요 이 정리한 내용 바탕으로 엔지니어링 토크 때 앞에서 발표했어용CTO님이 본인이 본 컨퍼런스 다녀온 사람 중 가장 열심히 듣고 자세히 정리한 사람이라고 칭찬해주심 (이거 극찬아닌교 유후)지식 공유는 즐겁당요약[FE] 60개의 RN 패키지 - 하나의 프레임워크로패키지들을 하나로 묶는 프레임워크를 만들어서 관리 (버전 이슈 최소화).. 이전 1 2 3 4 ··· 22 다음
