안동민
4년차 프론트엔드 개발자. 만드는 것을 좋아합니다.
"AI한테 던져주기 편한" React 컴포넌트 인스펙터, 그리고 QA 마스터 도구
15개의 디자인 QA 티켓을 처리하면서 느낀 반복의 고통에서 시작된 두 개의 크롬 익스텐션
Back to Basic : 자료구조로 살펴보는 리액트 의 렌더링
React의 작동 원리를 공부하다 보면 다음과 같은 말을 자주 듣게 됩니다“React는 가상돔을 사용해 렌더링을 최적화한다”“Fiber 구조가 도입되면서 중단 가능한 렌더링이 가능해졌다”“React는 스케줄러를 통해 작업 우선순위를 조절한다”...
필요해서 만들어버린 웹표준 검사기 크롬익스텐션 With Cursor AI
최근 회사에서 공공기관에 납품해야 하는 프로젝트를 진행하면서 웹표준을 준수해야 합니다라는 요구사항을 받았습니다.
프론트개발자가 인프라와 씨름하는 법
최근에 프론트 배포 파이프라인에서 문제를 발견하고 해결 과정을 복기 하면서 웹이 서빙되고 배포할때 필요한 개념들을 다시 공부해 보았습니다.
2024년 회고
크로스핏을 처음 접한 건 22년도였을 것이다. 그때 막 개발자로 취준을 준비하던 시기였고, 전공 외에 다른 영역으로 취업을 준비한다는 불안감에 매일매일 성취감을 운동에서 얻었던 시기였다.
자발적 B작업(2), 상세페이지로 들어가는 시간이 느려요.
최근에 회사에서 아래와 같은 요청사항이 들어왔다.'상세페이지를 들어가는데 많이 느린 것 같아요'그렇다. 항상 미루고있던 숙제같은 성능개선의 요구사항을 받았던 것이다.
자바스크립트 + 리액트 디자인 패턴 스터디 - 중간 회고
지난 9월 7일 토요일 스터디 킥오프부터 매주 자바스크립트 + 리액트 디자인 패턴이라는 책으로 스터디를 진행하고 있는 중입니다. 아직 스터디가 끝나지 않았지만 1달 정도 지남 & 책의 중반을 다 읽음의 진행 상황에서 회고를 가져보는 게 좋을 것 같아서 글로 정리했습니다
![[글또] 삶의 지도](/_next/image?url=%2Fimages%2Fposts%2F%EA%B8%80%EB%98%90-%EC%82%B6%EC%9D%98-%EC%A7%80%EB%8F%84%2Fthumbnail_image.jpg&w=3840&q=75)
[글또] 삶의 지도
29년 정도 되는 삶을 돌아봤을 때, 현재 나를 이루고 있는 점 같은 순간들일 존재 하는 것 같다. 그런 순간들을 나열하다 보면 지도가 되지 않을까 싶어서 몇 가지 순간을 (혹은 기간들을) 정리해 보았다.
자발적 B작업(1), 매 번 반복되는 일회용, 아니 이벤트 페이지... 개선기 with supabase
자발적 B작업이란, 책에서 "더글러스 엥겔바트"의 작업 구분법을 가져와서 A작업 (원래 하기로 했던 일), B작업 (A작업을 개선하는 일), C작업 (B작업을 개선하는 일) 로 나누어 설명합니다. 이 부분을 읽었을 때, "나는 회사에서 A작업만 하고 있는 게 아닐까
web 에서 video 를 넣는 방법, <video/>
프론트엔드 영역에서 web을 이루는 요소가 많지만 내가 잘 다뤄보지 못한 영역은 video 영역이였습니다.그러나, video를 사용해서 만들어진 웹들은 굉장히 많고 web 에서 어떻게 다루는지 궁금하여 이 글을 작성하였습니다.
TDD Clean Code with JavaScript 4기- 1주차
nextstep 에서 진행하는 TDD Clean Code with JavaScript 4기 강의를 듣고 정리한 내용입니다
React Query - Query invalidate
react query - 이제는 tanstack query- 에서는 데이터의 상태를 fetching -> fresh -> stale -> inactive -> delete 의 흐름으로 가지고 있습니다. fetching : 데이터 요청 상태.fresh : 데이터가 만료되
반복적인 코드 작성, Snippet 으로 시간 단축해보자!
팀의 컨벤션과 프레임워크의 컨벤션으로 새로운 모듈이나 파일을 만들때만다 매 번 똑같은 코드를 쳐야되는 상황을 종종 겪는다
eslint 를 이용해서 import 순서를 자동으로 바꿔보자!
우리는 종종 프로젝트 협업을 하다보면 무수한 import 구문들을 만나게 된다.사소하지만 종종 import 구문 순서가 맞지 않아서 다른 팀원들과 충돌 나는 경우가 많았다.
git merge, rebase
이 글은 뻔하디 뻔한 git merge 와 rebase 의 글이지만 저의 이해를 높히기 위해 적은 글입니다.Merge 란 브랜치를 통합하는 명령어 입니다. 어떤 브랜치에서 git merge “브랜치 이름” 을 명령하게 되면 현재 브랜치가 브랜치 이름을 가진 브랜치로
테오의 스프린트 오전반 회고
유감스럽지만 개인적으로 너무 힘든 협업이었고 협업 이렇게만 하지 않으면된다! 라는 큰 교훈을 얻은 스프린트 였기 때문에 회고를 정리 하지 않을 수 없었다.
Vite 는 Webpack을 대체 가능할까?
vite 공식문서 Getting started 의 첫 줄을 보면,vite 는 프랑스어로 빠르다 를 의미합니다.라는 설명이 있습니다.이 설명 그대로 vite 는 "빠른" 자바스크립트 번들링 툴입니다. 대표적인 자바스크립트 번들링 툴은 Webpack 과 Rollup 등이