최근 프로젝트에서 패키지 관리 도구인 Yarn과 npm을 사용하면서 이들이 버전 호환성 문제를 다루는 방식의 차이를 경험했습니다. 경고 메시지와 오류 처리 방식의 차이를 이해함으로써, 각 도구의 장단점을 파악하고 향후 개발 환경을 더욱 효율적으로 관리할 수 있는 인사이트를 얻게 되었습니다. 1. npm의 명확한 경고 메시지npm은 설치 과정에서 버전 호환성 문제가 발생하면, 구체적이고 상세한 경고 메시지를 제공합니다.npm WARN EBADENGINE { package: '@typescript-eslint/type-utils@8.11.0', required: { node: '^18.18.0 || ^20.9.0 || >=21.1.0' }, current: { node: 'v20.2.0', ..
전체 글
23년 2월 10일 경영악화로 인한 권고사직을 하게 되었습니다. 더욱 함께하고 더더욱 오래오래 같이 일하고 싶은 사람들이었지만, 흩어지게 되어 너무 아쉬울 따름이었습니다. 하지만 좋은 사람을 만났으며 팀장님과 팀원분들께 많은 것들을 배우며, 그냥 단순히 개발하는 게 아닌 기술과 비즈니스 사이의 균형 잡힌 접근 방법을 찾아나가 문제를 해결하려는 접근 방식 등의 문화를 배웠습니다. 재취업 권고사직 후 이력서 업데이트 후 주변 개발자 동료분들께 이력서 피드백 반영하며 틈틈이 채용공고를 찾아보았다. e커머스 도메인 지식을 더 쌓고 싶은 부분도 있었지만, 이전에 재직했던 회사에서 내가 가장 일하면서 즐거웠던 기억을 돌이켜 보니 좋은 사람들과 같이 지식을 공유하고 배우고 열심히 고생하여 성장을 했던 기억이었다. 채..
main 브랜치에 직접 병합하며 vercel에 자동으로 배포되었습니다. 그러나 개발 팀 인원이 늘어나고 팀원 간 협업 및 안정성을 위해 GitHub Actions를 활용한 배포 과정을 도입하게 되었습니다. 이전의 문제점 안정성 부족 - 직접 Main Branch에 병합하여 배포하면, 개발 중인 기능들이 완전히 테스트되지 않은 상태일 수 있습니다. 이로 인해 예상치 못한 문제가 실제 환경에 영향을 줄 수 있습니다. 개발 과정 혼란 -개발 중인 기능들이 Main Branch에 반영되면서, 개발과 배포 사이의 경계가 모호해지고 개발자들 사이에 혼란을 야기할 수 있습니다. Git-Flow 전략을 접근하여 구성하였습니다. Main Branch - Product의 안정적으로 버전이 유지되는 브랜치(배포가 가능한 상..
문제 : 배포하는 과정에 빌드가 너무 오래걸려요. 원인: PDF를 렌더링하기 위해 pdfjs-dist 라이브러리를 사용하고 있습니다. 이미지를 보면 node_modules/canvas/build 의 용량을 보면 상당히 많은 용량을 가지고 있으며, 많은 용량을 차지하는 canvas를 여러페이지에서 dependency를 가지고 생긴 이슈입니다. pdf를 렌더링하는 곳만 동적으로 모듈을 불러와 사용할수 있도록 dynamic import를 이용하여 성능최적화를 하였습니다. 11분에서 2분!!! dynamic import(동적 임포트)란 dynamic import란 자바스크립트에서 모듈을 피요한 시점에 동적으로 로드하는 기능을 말합니다. dynamic import(동적 임포트) 동작원리 동적 임포트 함수 호출 모..
Before Tooltip으로 감싸준 컴포넌트를 마우스 오버시 자식노드가 생성되어 툴팁이 나타나는 구조. CSS로 제어를 하고 있었음. hover interface TooltipProps { children: React.ReactNode text: string direction?: 'top' | 'bottom' | 'left' | 'right' } const Tooltip = ({ children, text, direction = 'top' }: TooltipProps) => { return ( {children} {text} ) } export default Tooltip export const Tooltip = styled.div` postion: relative; ` export const Cont..
타입스크립트를 처음 사용 했을 때는 타입을 모르는 경우 any 타입을 남발 했던 경험이 있어 경험을 바탕으로 any 타입은 되도록 사용하지 않는게 좋아 둘의 차이점을 알아보려합니다. any와 unknown은 모두 어떤 값이든 할당할 수 있습니다 하지만 이 둘은 사용 방법과 제한 사항에서 차이가 있습니다. any any는 모든 타입의 값을 할당할 수 있으며, 컴파일러는 해당 값의 타입 검사를 수행하지 않습니다. 매우 유연한 타입 시스템을 제공하지만, 타입 안정성을 보장하지 않습니다. any 타입을 남발하면 코드 유지보수가 어려워지고 버그 발생 가능성이 높아집니다. 또한 개발자 친구들이 이거 애니스크립트냐고 애니비아인가라고 놀리는 경험이 있었습니다 ~ ㅎㅎ unknown unknown은 any와 마찬가지로 ..
타입스크립트에서는 interface와 type 두 가지 방법으로 타입을 정의할 수 있습니다. Interface interface는 객체의 구조를 정의하는 데 사용됩니다. interface Person { name: string; age: number; address?: string; } 위의 코드에서 Person이라는 인터페이스를 정의하고 있습니다. name과 age라는 필수 속성과 address라는 선택적 속성을 가지고 있습니다. const person: Person = { name: 'John', age: 30 }; Type type은 특정 타입을 정의하는 데 사용됩니다. type Person = { name: string; age: number; address?: string; } 위의 코드에서 P..
CORS 정책 위반 에러는 웹 개발을 하면 누구나 한번쯤은 겪는다. CORS란? CORS는 Cross-Origin Resource Sharing의 약자이며, 직역 했을 경우 교차 출처 리소스 공유라고 합니다. 웹 브라우저에서 다른 도메인 간에 리소스를 공유할 수 있는 메커니즘을 말합니다. 브라우저에서는 보안상의 이유로 브라우저에서 다른 도메인에서 제공되는 리소스에 접근할 수 없도록 제한하고 있습니다. SOP(동일 출처 정책)를 우회하여 다른 도메인에서 제공되는 리소스에 대한 접근을 허용할 수 있도록 하는 방법입니다. 여기서 SOP(Same-Origin Policy)란 ? SOP는 같은 출처에서만 리소스를 공유할 수 있는 규칙을 가진 메커니즘입니다. SOP는 XMLHttpRequest를 통한 다른 출처 차..