본문 바로가기
안녕하세요, 프론트엔드 개발자 김현우라고 합니다. 제 블로그에서는 개발과 관련된 다양한 이야기들을 풀고있어요. 아무리 어려운 문제라도, 쉽게 풀어 설명할 수 있는 방법은 무조건 존재한다고 생각을 해요. 제가 연재해드리는 내용이 선한 영향력을 가져다 주었으면 좋겠어요.

전체 아티클155

word-break의 auto-phrase 속성은 어떤 역할을 할까? 목차· auto-phrase 속성은 어떤 역할을 해요?· 너무 좋은 기능이지만, 실험적인 기능· keep-all도 CJK 문자와 관련있는거 아닌가요? 그러면 keep-all과 차이는 무엇인가요?· 글을 마치며· 레퍼런스프로덕트를 만드는 도중에 word-break에서 auto-phrase 라는 속성을 접하게 되었어요, 단어 단위로 자연스럽게 줄바꿈을 해주기에 속성을 적용하고 릴리즈를 진행했는데, 모바일 사파리에서 동작을 하지 않는 경우가 있어 이 속성이 대체 무엇인지 한번 톺아보고자 이렇게 기록을 남기게 되었어요. 먼저 간단하게 auto-phrase 속성을 설명을 하면 auto-phrase는 현재 실험적인 단계의 CSS 속성 값으로, 주로 CJK (중국어 · 일보언 · 일본어) 를 포함한 언어의 문장을 더.. 2025. 5. 26.
React와 Vue의 이벤트 바인딩 방식은 왜 다를까? 목차· React의 이벤트 바인딩 방식· React에서는 왜 () => handleClick(id) 형태로 선언해야해요?· Vue의 이벤트 처리 방식· Vue에서는 왜 handleClick(id) 형태로 선언해야해요?· Vue는 HTML에 이벤트 바인딩이랑 상당히 유사한데, 어떤 차이가 있어요?· JavaScript 코드에서의 element.onclick = handleClick()· 글을 마치며회사에서 업무를 진행하다가 문득 React에서 이벤트 바인딩 방식과 Vue의 템플릿에서의 이벤트 바인딩 방식이 다르다는 점에서, 어떤 방식으로 이벤트가 적용이 되고 왜 바인딩 방식이 다른지 궁금해졌어요. 우리가 흔히 아는 React와 Vue의 차이점은 React의 경우 JSX를 이용해 프로그래밍적으로 명확하고 제.. 2025. 5. 22.
여러 프로덕트를 마주하며 느꼈던 프로덕트에 대한 고찰 "내가 만드는 프로덕트들은 모두 포트폴리오 용도였는데요.." 엊그제 자료들을 정리하며 자바스크립트를 처음 접했던 2022년이 생각났다. 프론트엔드 개발자로 성장하기 위해서 여러 토이 프로젝트들을 시작으로, 조금 더 규모 있는 사이드 프로젝트들에 도전하며 단순 포트폴리오를 위한 프로덕트들을 마구마구 양산해냈다. 그때의 프로덕트를 만드는 기준은 조금만 불편해보이면 바로 프로덕트로 만드려고 실행부터 옮겼다. 그러다보니 런칭을 해도 1~2일 잠깐 반짝이고 지는 프로덕트들이 많았다. 덕분에 포트폴리오에는 넣을만한 프로덕트들이 많았지만, 프로덕트라고 하기에는 애매한 것들이 참 많았다. 대학 졸업을 할 때 쯔음 회사 생활을 하며 여러 팀원들을 만나 다양한 프로덕트들을 새롭게 만들면서 이를 디벨롭 시키기 위해 모두가 .. 2025. 5. 15.
Search Params 잘 쓰고 있었는데, Next 15에서는 왜 타입이 Promise 일까? 목차· SearchParams의 타입 에러· 잘 쓰고있었는데 왜 바뀐걸까? · React use()의 등장· 변경된 요소로 인한 주의사항· 레퍼런스SearchParams의 타입 에러최근에 주변 취업을 준비하는 친구들이 자주보던 서비스가 사라져서 직접 만들던 도중에, Next의 Page Router만 많이 사용을 해봤던 경험을 뒤로 App Router로 프로젝트를 만드는 도전을 해봤어요. Next 버전이 생각보다 많이 올라서 라우팅 방식이 어떻게 달라졌을지 경험도 해볼겸(?) 현재 제작 중인 서비스는 다른 사람들에게 정보 공유도 가능하기에 URL에 여러 category, company 명과 같은 부가 값들을 제어하며 진행해야하기에 SSR을 택하게 되었고, 그래서 URL에 담긴 값들을 활용할 일들이 되게.. 2025. 5. 10.
[...].filter(Boolean)을 넣으면 어떤 일이 일어날까? 코드 리팩토링을 진행하면서 filter 메서드는 보통 "~와 일치하는"의 키워드를 초점으로 항상 사용을 해왔던 것 같아요. 그러다 우연히 아래와 같은 문법을 보게 되었는데 명확한 값을 넣어준 것도 아니고, "자바스크립트에서 제공하는 Boolean을 넣었다고 값이 필터되어 나올까?" 에 대한 의문점이 생겼어요. 예를 들어 아래의 코드가 있다고 가정을 해보아요const arr = [0, 1, false, 2, '', 3, null, undefined, NaN];const filtered = arr.filter(Boolean);console.log(filtered); // [1, 2, 3]개발자가 유효한 값만 명시적으로 표시를 해주지 않았음에도 불구하고 [1, 2, 3] 이라는 유효한 값만 필터링된게 정말 신.. 2025. 5. 2.
클라이언트 사이드 말고, 서버 사이드로도 mixed content 에러가 뜰까? 목차· 브라우저에서 mixed content가 발생하는 이유는 뭘까?· mixed content의 종류· Next 서버 사이드에서는 왜 에러가 발생하지 않을까?https 환경에서 http 환경의 api에 통신을 할 때 많이 볼 수 있는 mixed content 에러를 많이 보셨을 것 같아요.서버리스 환경의 프로덕트에서 DB와 다양한 기능들을 추가하기 위해 서버 개발자들과 협업 하는 과정에서 클라이언트 사이드 환경에서는 mixed content를 경험해보았지만 Next를 사용하다보니 서버에서 데이터 패칭을 할 때는 mixed content가 발생을 할까? 에 대한 궁금점이 들었어요. 그래서 궁금점을 조금 해소해보고자 이렇게 포스팅을 하게 되었답니다. 브라우저에서 mixed content가 발생하는 이유는 .. 2025. 5. 2.
npm install vs npm ci 목차· package.json과 package-lock.json · "dependencies"와 "devDependencies"의 차이점은 뭐예요?· npm install npm ci 무엇이 다를까?프론트엔드 개발을 진행하다보면 사내 빌드 서버에서 npm이 돌아간 후에 rpm 패키지로 배포가 되는데, 이 rpm 패키지를 기반으로 putty를 통해 프론트엔드 스테이징 서버에 올려 풀리퀘스트를 같이 올리는 과정을 진행해요. 이때 빌드 과정을 유심히 보면 npm ci 라는 명령어가 동작이 되는 것을 확인할 수 있었는데, npm install과 npm ci 둘 다 모두 패키지 설치에 관련된 역할을 하지만, 명확하게 두 역할의 구분이 가지 않아 한번 정리를 해야겠다는 생각이 들었어요. npm install 과.. 2025. 4. 29.
4월이 되서야 하는 프론트엔드 회고 목차· 개발자를 꿈꾸게 해준 회사로의 입사· 엊그제 입사했는데 DAU 2000 이상인 블로그를 리뉴얼하라구요?· 안랩에서의 1년 동안· 신기한 경험들이 많았던 지난 1년들· 세 번의 디프만 그리고 성장의 연속· 회고를 마치며개발자를 꿈꾸게 해준 회사로의 입사안랩에서 자그마치 1년을 넘게 다녔어요. 생각보다 인력 규모도 너무 컸고, 인프라 구조가 너무 방대하다보니 아직도 이해를 못하는 것들 투성입니다. 그래도 지금 제가 개발하고 있는 도메인에는 어느 정도 적응을 하기 시작을 했던 것 같아요. 안랩 안에서도 스타트업 같은 TF에서 새롭게 신설된 팀의 프론트엔드 개발자로 배치받으면서, 여러 도전적인 업무들을 많이 받게 되었어요. 물론 성장을 하고 있는 조직이라 개발이 아니어도 다양한 업무 배분받긴하지만(?) .. 2025. 4. 22.
Vue의 Composable · React의 Custom Hook을 사용하는 이유와 분리 기준 목차· 로직을 Composable · Custom Hook으로 나눠 사용을 하는 이유는 무엇일까?· 그러면 어떤 기준으로 분리를 해요?· Composable · Custom Hook과 유틸함수의 차이는 무엇일까?회사에서 개발을 하다보면 공통된 로직이나 다양한 관심사를 가진 로직이 존재한다면 무의식적으로 쪼개는 버릇이 생겼어요. 몸이 이에 적응되어 어느샌가부터 이유도 모르고 쪼개는 버릇이 생기다보니 근본적으로 어떤 기준으로 관심사 분리를 해야하는지, 그리고 더 근본적으로 가다보니 왜 관심사 분리를 해야할까에 대한 생각들이 들더라구요. 그래서 오늘은 커스텀 훅을 사용하는 이유와 더불어 분리하는 기준에 대해서 한번 복기 차 포스팅을 해보려고 해요.로직을 Composable · Custom Hook으로 나눠 사.. 2025. 4. 17.