본문 바로가기

분류 전체보기184

프론트엔드 개발자 2023.08 ~ 2024.01 회고 📒 2023.08 ~ 2024.01 회고 원래 23년 안으로 회고록을 작성하려 했지만 너무 바쁘고 정신이 없어서 이제야 작성해본다. 분기마다 작성하려 했던 회고를 거진 6개월만에 작성하며 그동안 내가 무엇을 했고 어떤 생각을 주로 해왔는지 복기해보려 한다. 📌 회사에서 내가 22년 8월에 입사했으니 벌써 1년 6개월이 지나버렸다. 마지막 회고로부터 6개월 밖에 지나지 않았지만 생각보다 많은 경험을 했던 것 같다. 🔎 신입 뽑기 회사에 프론트 인원이 적은 관계로 내가 프론트 채용을 담당하게 됐다. 500명 가까운 인원 중 이력서를 추려서 10명 가까운 인원들에게 합격 연락을 돌리고 기술 면접관으로 들어가기도 했다. 윗 사람들이 어떻게 나한테 전권을 맡겼고 내가 이 경력에 이런 중요한 일을 덥썩 물었는지 지.. 2024. 1. 25.

사내 Nexus 저장소에 npm 저장소 구축하고 리액트 패키지 배포 및 설치하기 📒 Nexus npm repository 구축 사내에서 여러 프로젝트들을 진행하며 공통 컴포넌트들을 만들어두고 사용하고 있었습니다. 항상 사용해야 하는 공통 컴포넌트들을 만들어만 두고 그저 파일을 복사 붙여 넣기 하며 조금씩 수정하다 보니 프로젝트가 늘어날수록 감당이 안 됐습니다. 그래서 이 참에 백엔드 팀에서 사용하는 Nexus서버도 이미 있겠다, 여기에 private npm repository를 구축하고 유틸, 공통 컴포넌트, 디자인 시스템을 제대로 패키지화해서 관리해 보기로 다짐했습니다. 그럼 그 험난한 과정의 첫 번째 과정. npm repository 구축과 패키지 빌드 그리고 publish와 install 하는 과정에 대해 설명하겠습니다. Nexus Repository는 소프트웨어 개발에서 사용.. 2024. 1. 24.

react-hook-form + yup + forwardRef()를 이용한 input 컴포넌트 제작하기, 오류해결 📒 react-hook-form를 이용한 Input 컴포넌트 npm i react-hook-form @hookform/resolvers yup react-hook-form은 손쉽게 form을 조작하고 최적화할 수 있도록 도와주는 패키지입니다. 거기에 @hookform/resolvers와 yup을 더하면 손쉽게 validation 처리와 에러메세지를 관리할 수 있습니다. 회사 동료들이 이 조합으로 야무지게 사용하는 것을 보고선 저도 사용할 때만 기다리다, 마침 새로운 프로젝트를 시작하는 김에 바로 도입했습니다. 기획을 대충 보니 input에 중복되는 여러 기능이 있어서 그냥 하나로 기능들을 묶으면 좋겠다 싶어 다음과 비슷한 형태로 컴포넌트를 만들어봤습니다. import { yupResolver } from.. 2024. 1. 23.

1년 5개월차 경력, 프론트엔드/리액트 신입 이력서를 검토하다 📒 1년 5개월 경력에 신입 프론트엔드 채용 1차 서류 심사한 후기 회사에 프론트 직무가 생긴지 얼마 안됐고, 그나마 있는 인원도 저 포함 1년~3년차 3명인 상황. 그나마 채용시즌에 시간적으로 이력서를 검토하고 기술 면접을 볼 수 있는 인원이 저 밖에 없었습니다. 그렇게 채용이란 중요한 임무를 부여받고 나름 재미있지 않을까 생각하며 이력서 검토를 시작했습니다. 그런데 재미는 개뿔 그냥 이력서 수백개가 쌓여있어서 2주 동안 업무와 이력서 검토를 병행 하느라 눈알이 개박살 나는줄 알았습니다. 이번 글에서는 이력서를 검토하며 느꼈던 시장 상황과 함께 지원자 분들이 보완했으면 하는 부분들에 대해 이야기 해보겠습니다. 📌 Frontend 레드오션 프론트 공고 뿐 아니라 임베디드 및 백엔드 공고를 냈음에도 지원자.. 2024. 1. 18.

yarn berry로 리액트 프로젝트 생성하기, zero-install이란? 📒 yarn berry로 리액트 프로젝트 생성하기 기존 패키지 매니저 대비 yarn berry의 가장 큰 변화 중 하나는 Plug'n'Play (PnP) 기능입니다. PnP는 node_modules 폴더를 사용하지 않고 의존성을 관리합니다. 대신, Yarn은 프로젝트 설정과 의존성 정보를 .pnp.js 파일에 저장하여, Node.js가 필요한 패키지를 직접 찾을 수 있도록 합니다. 설치 속도를 높이고 디스크 공간을 절약하는 yarn berry의 zero-install을 이용하기 위해서 설치 방법과 프로젝트 생성 방법을 알아보겠습니다. 📌 yarn beery 설정 🔎 1. Node.js 설치 Node.js Node.js® is a JavaScript runtime built on Chrome's V8 Ja.. 2024. 1. 18.

떠오르는 차세대 빌드 툴 Vite는 왜 빠른가? 📒 Vite 바이트가 아닌 프랑스어로 “빠른”을 의미하는 비트는 차세대 번들러로서 점차 두각을 나타내고 있습니다. 기존 Webpack을 사용할 때 보였던 답답한 개발서버와 번들링 성능을 엄청나게 끌어올린 것으로 점점 유명세를 타고 있기 때문에 알아보지 않을 수 없겠습니다. 그럼 어떠한 방식으로 개발 서버와 번들링 속도를 끌어올렸는지 알아보겠습니다. 📌 빠른 Cold Start CRA로 생성한 리액트 프로젝트는 기본적으로 Webpack을 탑재하고 있습니다. Webpack은 여러 상황에 유연하게 대처하며 개발 하기는 좋지만 프로젝트의 사이즈가 커질 수록 개발 서버 구동시간이 지루할 정도로 길어지는 단점이 있습니다. 이는 번들러 기반의 개발 서버가 모든 소스 코드에 대해 크롤링 및 빌드 작업을 마쳐야지만 브라.. 2024. 1. 4.

나만의 React + TypeScript 라이브러리를 NPM에 배포해보자 📒 시작하기 전에 React 프로젝트를 위한 TypeScript 라이브러리를 개발, 버전 관리, 그리고 발행하는 과정은 간단하지만 몇 가지 준비 사항이 필요합니다. 📌 Node.js 및 npm 설치 라이브러리를 개발하려면 Node.js와 npm이 설치되어 있어야 합니다. 이미 설치되어 있는지 확인하세요. node -v npm -v 설치되어 있지 않다면 Node.js 공식 웹사이트 혹은 NVM을 통해 Node.js를 설치해주세요. 📌 npm 회원가입 npm | Home Bring the best of open source to you, your team, and your company Relied upon by more than 17 million developers worldwide, npm is com.. 2023. 12. 2.

[React, JS, TS] 간결한 import를 위한 index(barrel) 파일을 자동으로 생성해보자 📒 JavaScript, Barrel 파일 자바스크립트에서 특정 디렉토리 내의 여러 모듈을 하나의 파일에서 re-export 함으로써 다른 파일에서 간결한 import문을 사용할 수 있게 하는 index 파일을 Barrel 파일이라고 합니다. 처음엔 Barrel이란 명칭을 몰라 그냥 인덱싱한다고 하며 1년 동안 검색도 제대로 못했었는데, 최근 아티클을 보다 이러한 index 파일을 Barrel이라 한다는 것을 보곤 속이 시원해졌습니다. 뭐 어쨌든 다들 아시겠지만 다음 코드들은 주로 index.js, index.ts로 사용되는 Barrel 파일의 일반적인 예시입니다. //barrel 적용 전 import { ModuleA } from 'utils/ModduleA'; import { ModuleB } fro.. 2023. 11. 7.

[React] React Children Props의 기묘한 렌더링 최적화 현상의 원인 📒 React의 children prop 리액트에서는 동적으로 자식 컴포넌트를 렌더링 하기 위해 부모 컴포넌트에서 children prop을 이용할 수 있습니다. 모두가 잘 알고 있듯 사용법은 다음과 같습니다. const Children = () => { return Children; }; const Parent = ({ children }: { children: JSX.Element }) => { return {children}; }; export const Container = () => { return ( ); } 이러한 사용 방식은 React Context의 Provider, BrowserRouter, RecoilRoot를 사용할 때도 동일합니다. 여기까진 늘 알고 있었던 내용입니다. 📌 Chil.. 2023. 11. 1.

이전 1 2 3 4 5 ··· 21 다음

티스토리툴바