JH 기술 블로그

보호되어 있는 글입니다.

프론트엔드 개발을 하다보면 텍스트가 너무 길어질 경우에 말줄임표로 표현을 해주는 니즈를 맞춰야 하는 경우가 많다.창피하지만 솔직히 어떻게 구현해야 하는지 떠오르지가 않았고, CSS 공부가 소홀했구나 싶은 생각이 들었다.요즘은 간단한 퍼블리싱이야 AI가 너무 잘해주다 보니 (특히 Figma MCP) 점점 CSS 영역에 있어서 퇴화하는 느낌... 공부를 게을리 하지 않아야겠다.오늘은 길어진 텍스트에 대하여 말줄임표로 표현하고, 말줄임표를 표현된 Text에 hover하면 Tooltip을 보여주는 코드를 만들어보자!CSS 적용해보기.ellipsis-tooltip { max-width: 200px; // 말줄임 적용 영역 너비 overflow: hidden; // 넘친 텍스트 숨김 wh..

글을 시작하기에 앞서, 약 2달 간 진행하였던 전형 간 친절하게 응대해주시고, 결과도 빠르게 전달해주신 담당자 분들께 감사의 인사를 전한다. 본론으로 들어가자면 현대오토에버에 최종 합격을 하였다...!!! 현대오토에버를 준비하면 할 수록 현대오토에버에 대한 사랑이 커져갔는데, 입사 후에도 이 사랑을 바탕으로 나의 역량을 100%, 200% 보여주며 기여하고 싶다! 다만, 준비하는 과정은 많이 지치고 힘들었었다. 스펙이 좋으신 분들이 너무나도 많았기 때문에, 어떻게 하면 나의 역량을 어떻게 하면 보여줄 수 있을지 고민과 불안의 연속이었었다. 힘들었지만 돌아보면 경험이고 추억이라고, 준비 과정들을 기록하고 싶어 이렇게 글을 남긴다. 다만, 면접에 관한 내용은 보안을 지켜야 하니 생략할 예정이다!채용 일정서..

디자인 시스템을 관심을 바탕으로 현재 진행 중인 프로젝트에 있는 컴포넌트들을 라이브러리화 해서 다른 프로젝트에서도 설치 한번으로 컴포넌트들을 사용할 수 있으면 좋을 것 같다라는 생각을 하였다.굳이 이러한 일을 왜하냐면 규모가 있고, 프론트엔드 개발 생산성에 초점을 맞춘 회사라면 다양한 프로젝트에서 라이브러리화 된 컴포넌트를 적극적으로 사용할 수 있겠다는 생각이 들어서이다. 자 그럼 거두절미하고 라이브러리로 만드는 여정을 떠나보자!버튼 컴포넌트 라이브러리로 만들기1. tsconfig 파일declaration 옵션으로 타입 선언 파일(.d.ts) 생성outDir에 컴파일 산출물을 저장라이브러리 소스는 src 폴더에 위치{ "compilerOptions": { "target": "ES5", "li..

서론여전히 프로젝트를 진행 중이다! 프로젝트를 진행하면서 불편한 점이 하나 있었다.나를 포함해 다른 분들이 컴포넌트 작업을 하시고 PR을 올리실 때 파일 첨부 칸에 Figma 디자인 캡처본 하나, 실제 구현한 컴포넌트 캡처본 하나 이렇게 총 2개의 첨부 사진을 올려야 했다는 것이다.스토리북과 피그마를 번갈아가면서 작업을 하신 다는 것이 굉장히 번거롭다고 생각이 들기도 하였고, 이런 사소한 점이 개발 생산성과 개발자 경험을 저하시킨다고 생각을 하였다.📚 Storybook addon/designstorybookjs/addon-designs: A Storybook addon that embeds Figma, websites, or images in the addon panel. GitHub - storybo..

잡담여전히 사이드 프로젝트를 진행 중이다! 현재는 Bottom Sheet에 대한 요구사항이 생겨서 구현해야 하는 상황이다. 그러나 Bottom Sheet을 깡으로 구현하는 것 보다는 라이브러리가 있고, 커스텀이 가능하다면 해당 라이브러리를 가져와도 좋지 않을까? 라는 생각을 하였고, React Spring Bottom Sheet이라는 훌륭한 라이브러리가 존재한다는 것을 알게 되었다.생각보다 해당 라이브러리 사용에 대한 설명이 부족한 것 같아 추가적으로 필요한 정보들을 기록하고자 한다. + 이 글이 아니어도 공식 문서나 아래의 Github 저장소 링크를 참조할 수 있다.react-spring-bottom-sheet/GET_STARTED.md at main · stipsan/react-spring-botto..

좋은 코드란 어떤 코드라고 생각하세요? 개발자라면 개발자끼리의 대화를 할 때나, 면접에서나 아마 한 번쯤은 들어봤을 질문이라고 생각한다. 그리고 그에 대한 답변은 각양각색일 수 있다고 생각한다. 나와 같은 경우에는 면접에서 이러한 질문을 받았을 때  '유지보수 측면에서 가독성이 좋은 코드가 좋은 코드라고 생각합니다.'라고 대답했었던 기억이 있다. 지금 생각하면 구체적으로 생각해본 적이 많이 없기 때문에 근거가 부족한 애매한 답변이었다는 생각이 든다. 마침 토스에서 FE 지침서 만들었다는 소식을 지인에게 들었고 다음에 같은 질문을 받았을 때는 내가 내린 좋은 코드에 대한 정의를 자신있게 말할 수 있기 위해서 해당 글을 읽고 정리하고자 한다. 이번 포스팅에서는 가독성과 관련된 글 위주로 다룰 예정이다.좋은 ..

MSW 도입 배경사실 프론트엔드 개발자에게 가장 이상적인 개발 과정은 MVP 모델 수립 이후 백엔드 개발이 완성되어 있는 상태에서 프론트엔드 개발을 하는 것이다. 그러나 지금까지 겪어 왔던 프로젝트들은 이러한 이상과는 거리가 있었다. 바로 아래의 그림처럼 말이다.  설상가상으로 이전 독서 토론 플랫폼 지성인 프로젝트를 진행하면서 백엔드 개발자 분들이 바쁜 시기가 있어 예정된 시기에 API를 제공 받지 못하였다. 백엔드 개발에 의존적인 프론트엔드 개발의 특성 상, 프론트엔드 개발 일정도 덩달아 길어지게 되었고, 우리 팀은 MSW를 적용해 백엔드 개발에 의존적이지 않은 개발 환경을 구축하기로 하였다.MSW에 대해 알아보기 MSW(Mock Service Worker)는 프론트엔드 개발에서 API를 모킹하기 위..