어제보다 더 나은 오늘

UI 라이브러리를 처음 사용해 보고 있다. 개발의 많은 부분이 트레이드 오프인데 UI 라이브러리 도입도 이러한 부분이 있는 것 같다. pros. - 직관적이고 깔끔한 UX 컴포넌트 지원 - 빠른 개발 속도 - 웹 접근성 준수 cons. - 커스터마이징의 한계 - 이슈가 생기면 내가 코드를 잘못 작성한 탓인지 라이브러리 자체의 이슈인지 매번 찾아봐야함 antd 도입을 결정하고 난 후 매일 antd 레포의 이슈를 뒤지는 삶을 살고 있다 해도 과언이 아니다. 그 첫 시작은 tailwind와의 충돌이었다. tailwind가 설치된 프로젝트에 antd를 추가로 설치하고 버튼 컴포넌트를 불러왔더니 버튼이 보이지 않았다 😱 개발자 도구를 보면 antd primary button의 배경색 #1677ff 가 tailwi..

1탄을 작성할 때까지만 해도 이 포스팅이 시리즈물이 될 줄은 몰랐다. (이 앞의 이야기가 궁금하신 분들은 이곳에서 확인할 수 있습니다.) 결론부터 이야기하면 한 달 전 첫 출근을 했던 회사는 1주일 만에 퇴사하고 나왔다. 회사를 나온 가장 큰 이유는 회사의 커뮤니케이션 방식이 불투명했기 때문이었다. 첫날 출근을 했을 때부터 면접 때 얘기했던 개발팀 내부 구조와 주요 업무 등이 달랐다. 그래서 출근을 하자마자 바로 퇴사를 고민했으나 신입 취업 시장이 어떤지 잘 알기 때문에 지금 상황을 받아들이고 내가 해나갈 수 있는 부분을 잘 해보자고 생각하고 다니기로 했으나.. 결국은 일주일만에 그만두기로 결정했다. 그리고 바로 재구직을 준비했다. 퇴사한 날 곧바로 여러 곳에 서류 지원을 했고, 그 중 총 네 곳에 서류..

기술 과제를 진행하면서 styled-components를 사용해 공통 ui 컴포넌트를 만들던 중 input 입력란의 텍스트 정렬을 다르게 가져가야 할 필요가 생겼다. 아래의 화면 이미지와 같이 우편번호 input은 중앙정렬, 그 외에 input은 일반적인 좌측 정렬로 화면 디자인이 구성되어 있었다. 이를 위해 input ui 컴포넌트에서 prop으로 textAlign 값을 줘서 제어하려고 시도했다. // 공통 ui 컴포넌트 선언부 export const Input = styled.input` box-sizing: border-box; width: ${(props) => props.width || 'inherit'}; height: 40px; padding: 9px 13px; border: 1px soli..

지난 여정을 먼저 간단하게 소개해 보면 아래와 같다. 2022. 10. - 2023. 04. 부트캠프(코드스테이츠) 6개월 과정 2023. 04. (3주) 포르투갈 여행 (부트캠프 수료식 바로 다음날 비행길에 올랐다) 2023. 05. (2주) 병원 투어 (부트캠프 막바지 프로젝트 때 무리한 벌을 달게 받았다) 2023. 05. (2주) 이력서 준비: 커리어 코칭 및 이력서 멘토링 서비스 참가 2023. 05. 30. 서류 지원 시작 2023. 06. 29. 최종 합격 통보 및 처우 협상 2023. 07. 10. 첫 출근 예정 신입이 발디딜 곳 없는 험난한 취업 시장에서 감사하게도 딱 한 달만에 구직 과정을 끝냈다. 여러 채용 플랫폼을 다 합치면 최종적으로 160건 가량을 지원했고, 그 중에 서류 통과를..

온라인 셀러 계산기 사이트: https://seller-calculator.vercel.app/ 개인 프로젝트로 마진, 판매가, 행사가 환원 등을 구할 수 있는 온라인 셀러 계산기를 뚝딱 만들어 보았다. 요구사항에는 없었지만 지난주 기능 구현 챌린지에서 만들었던 다크 모드 토글 컴포넌트를 가져와서 적용해 보았다. 그 과정에서 생긴 이슈와 해결책을 정리해 보기로 한다. 1. useEffect hook tailwind css를 사용하면 다크 모드를 굉장히 손쉽게 구현할 수 있다. 새로고침 시에도 테마가 유지될 수 있도록 사용자가 선택한 테마를 로컬 스토리지에 저장하기로 했다. 그리고 공식문서에서 알려준 대로 시스템 설정도 체크할 수 있도록 window.matchMedia() api를 사용했다. if ( lo..

TMDB API를 통해 영화 데이터를 받아와 무한 스크롤을 구현해 보았다. 먼저 고전적인 스크롤 이벤트를 사용하는 방식으로 구현해 본 후, Intersection Observer API를 사용하는 방식으로 리팩토링했다. - GitHub 레포: https://github.com/Ah-ae/infinite-scroll - 배포 링크: https://infinite-scroll-practice.vercel.app 구현 화면 영상 1. 스크롤 감지 방식 핵심은 다음과 같다. 1) window.scrollY로 스크롤 위치를 기억한 다음, window.scrollTo() 메소드를 사용해 해당 위치로 보내주기 2) 스크롤이 바닥에 닿았는지를 판별해 바닥에 닿았다면 다음 데이터를 fetch하기 3) scroll 이벤트..

Frontend Mentor | Expenses chart component coding challenge In this challenge, you'll create a bar chart component from scratch. We provide a local JSON file, so you can add the chart data dynamically if you choose. www.frontendmentor.io 💡 기능 구현 목표: - Bar 차트를 보고 개별 Bar 위로 마우스를 가져가면 일별 정확한 금액을 볼 수 있습니다. - 오늘 요일의 Bar는 다른 요일의 Bar와 색상이 다릅니다. - 기기의 화면 크기에 따라 콘텐츠에 대한 최적의 레이아웃을 작성합니다. (데스크탑/모바일) - hove..

회원가입과 로그인 시, 이메일과 비밀번호 유효성 검사를 한 다음 유효하지 않은 문자열을 입력시 사용자에게 경고 메시지를 주고자 했다. 이메일은 @와 . 기호가 포함되어 있는지 여부를 기준으로 정규표현식을 사용하여 검사하는 함수를 작성했고, 비밀번호는 8~20자 사이의 영문자와 숫자를 최소 1개 이상 포함하는 경우 유효한 비밀번호라는 기준을 세웠다. // It checks for a sequence of characters that starts with one or more non-whitespace characters ([^\s@]+), // followed by an @ symbol, followed by one or more non-whitespace characters for the domain n..

1. (TS 2345) Argument of type '...' is not assignable to parameter of type '...' 문제 상황: 광역시/도를 선택하면 해당 시/도에 대한 시/군/구를 select box에 보여줄 수 있게 하는 코드를 작성하려고 했다. 예를 들어 서울을 선택하면 서울의 코드 11000 중 앞의 두 자리 11을 divisionSelectValue라는 상태에 담고, 해당 상태를 useEffect의 종속성 배열에 넣어서 사용자가 시/도 단위의 지역을 선택해서 상태 변경이 일어날 때마다 districtList에 해당 시/도에 대한 시/군/구 데이터를 담으려는 게 목적이었다. // divisions.ts 파일 예시 export const DIVISIONS_DATA = [..

근 4주 간 생을 갈아넣었던 메인 프로젝트가 끝났다. 소모전 | 소모임 경기 전적 보기 소모임 경기 전적 보기, 소모전! 모임을 만들고, 경기 결과를 기록하고, 나와 모임원들의 승률을 확인해 보세요. somojeon.vercel.app 프로젝트를 처음 시작할 때는 분명 '기술 스택에 중점을 둔 프로젝트를 경험해 보고 싶다'는 마음으로 시작했는데, 프로젝트를 진행하다보니 기능 구현의 범위가 생각보다 넓었고 주어진 시간 내에 1차 기능 구현을 하기에도 시간이 급박했다. 결과적으로 새로운 기술 스택을 공부해서 프로젝트에 적용해보고자 했던 꿈은 물거품이 되었다... 새로운 기술 스택을 적용한다면 어떤 기술 스택을 사용할지에 대해 초반에 여러 이야기들이 오고갔는데 타입스크립트를 최우선으로 두기로 했다. 그나마 타..