한 걸음씩 성장하기

Introduction 개발초기 빠른 메이킹을 위해서 UI 라이브러리 중 MUI를 주로 사용하였었습니다. 그러다 보니 컴포넌트를 만드는 실력은 크게 늘지 않았습니다. 대신 자연스럽게 다른 방법을 찾게 되었습니다.MUI 컴포넌트들은 어떤 방식의 구조와 코드로 만들어진걸까? 그렇게 작업하면서 틈이 생기면 가끔 들여다보곤 했습니다. 이번에는 새로운 프로젝트를 진행하면서 MUI에서 제공하는 기능은 챙기면서 커스텀이 필요하다고 판단되어 최근 MUI에서 제공하는 Input을 커스텀하여 Input Component를 만들어보게 되었습니다.빠르게 최종적인 코드는 아래와 같고, 이번 작업을 하면서 배워간 요소들을 작게나마 풀어보려 합니다.import { Box, Input as MUIInput, styled, Typog..

들어가며이 글은 평소 저의 개발 습관에 대해서 반성하며 피드백하고자 회고 글을 남깁니다. 최근 프론트엔드 관련 테스트를 볼 수 있는 기회가 생겨서 테스트를 진행하였습니다. 제출된 문제는 주로 실무와 관련된 문제로 이루어져 있었고 저는 문제를 풀기 시작했습니다. 저의 기준으로 생각보다 난이도가 있었고 테스트를 마쳤을 땐 무언가 아쉬움이 크게 남았습니다. 그렇게 아쉬운 테스트를 끝내고 저는 고민에 빠졌고 문득 떠오른 한 가지, "평소 프론트엔드에 대한 기초들을 더욱 탄탄하게 학습해 왔다면 결과는 달랐을까?", 후회만 하면 남는 건 없겠죠. 더욱 본질적인 문제를 생각하였습니다. "다음에 또 테스트를 한다면 어떻게 해야 좋은 결과를 낼 수 있을까?" 위 생각에 대한 답은 "평소 저의 개발 습관을 고치자." 였습..

1. 종속성 설치yarn add --dev jest @testing-library/react @testing-library/jest-dom @testing-library/user-event @types/jest ts-jest jest-environment-jsdom Jest, React Testing Library를 사용하기 위해 필요한 종속성을 설치해 줍시다.2. jset.config.js & jset.setup.js설정jest.config.js | tsimport nextJest from "next/jest";const createJestConfig = nextJest({ dir: "./",});const customJestConfig = { setupFilesAfterEnv: ["/jest.se..

온보딩(onboarding)이란 무엇일까?간단하게 말하자면 신입사원들을 위한 하나의 프로세스입니다.우리 조직에 적응을 하기 위한 가이드이죠.신입사원의 적응을 위한 것도 있지만 기존 직원들의 유지력, 몰입력, 생산성을 증가시키기도 합니다.정리하자면 이렇습니다. - 신입사원들의 체계적이고 빠른 적응- 기존직원들의 유지력, 몰입력, 생산성을 증가 온보딩 가이드가 없는 경우, 개발자들은 팀원들과 소통 및 기술을 배우는 데 어려움이 생기고 결국 생산성이 떨어지는 일이 발생할 수 있습니다. 브랜든 홀 그룹(Brandon Hall Group)의 연구에 따르면, "체계적인 온보딩 프로세스를 갖춘 조직은 신입 고용 유지율을 82%, 생산성을 70% 이상 향상시킨다"라고 밝혔습니다.어떤 내용으로 구성되어야 할까?그렇다면 ..

CI/CD를 배워야 하는 이유 업무 효율을 위해서 특정 프로세스들을 자동화시키는 것은 중요합니다. 반복적인 테스트, 코드 품질 확인, 배포 등 등의 작업... 특정한 틀에서 반복되는 작업은 자동화라는 친구에게 맡겨두고 더욱 본질적으로 중요한 일에 집중하는 것 간단하게 CI/CD에 대해서 알아보겠습니다. 품질 보증 자동화 된 테스트를 통해 코드 품질을 지속적으로 관리할 수 있습니다. 효율성 증대 수동 배포 과정을 줄여 개발 시간을 단축하고, 더 많은 시간을 코드 개선에 할애할 수 있습니다. 팀 협업 개선 코드 변경사항이 자동으로 통합되므로, 팀 내 충돌을 줄이고 협업을 강화합니다. 고객 만족도 향상 지속적인 개선과 빠른 배포를 통해 사용자의 피드백을 빠르게 반영할 수 있습니다. CI/CD란 무엇일까? CI..