너굴 개발 일지

업무 중 만난 버그를 해결한 과정을 작성한 글입니다.이슈회사 프로젝트는 Vue 기반으로 SPA 형식으로 되어 있습니다. 비디오 콘텐츠를 다루는 서비스로 웹페이지에서는 iframe 태그를 이용해 미리보기 기능을 제공하고 있습니다.미리보기에서는 다양한 인코딩 프로파일로 영상을 확인할 수 있으며 인코딩 프로파일 변경시 다른 콘텐츠 url를 iframe src 속성값으로 변경하게 됩니다.이때 인코딩 프로파일 변경 후 브라우저 뒤로가기 버튼 클릭시 동작하지 않고 현재 페이지에 머물러 있는 버그가 발생했습니다.원인iframe은 그대로 사용하고 src 속성값만 바꾸면 최근에 사용한 src 속성값을 브라우저 window.history 스택에 쌓게 됩니다. 따라서 그 후에 브라우저 뒤로가기 버튼 클릭시 history 스..

회사에서 CI-CD 구축 업무을 위해 Github Actions에 대해 공부한 글로 React 기반 테스트용 프로젝트에 적용해보며 느낀 점을 작성했습니다. (Docker Image 파일 크기 : 18MB)캐시 적용Github Actions 캐시 사용repo별로 최대 10GB까지만 저장할 수 있고, 7일간 접근하지 않을 경우 삭제된다.https://docs.github.com/en/actions/writing-workflows/choosing-what-your-workflow-does/caching-dependencies-to-speed-up-workflows#usage-limits-and-eviction-policy사용 action - https://github.com/docker/bake-action다..

yarn 버전을 다운그레이드하는 방법입니다. 1. yarn이 설치된 위치 찾기 $ which yarn /opt/homebrew/bin/yarn 2. yarn 파일 제거 $sudo rm '/opt/homebrew/bin/yarn' 3. yarnrc.yml 경로 확인 $ cat ~/.yarnrc.yml yarnPath: ".yarn/releases/somethingPath.." 4. yarnrc.yml 파일 제거 $ rm -f ~/.yarnrc.yml 5. 특정 버전이 yarn 설치 $ npm install -g 'yarn@1.22.19' 6. yarn 버전 확인 $ yarn -v 1.22.19

변경에 유연한 컴포넌트를 만들기 위한 방법 중 하나인 Headless 컴포넌트에 대해 정리한 글입니다.목차서론컴포넌트란프론트엔드 관점에서 컴포넌트란본론컴포넌트를 잘 만들어야 하는 이유Headless 컴포넌트Headless 컴포넌트가 필요한 이유Headless 컴포넌트 설계 방법Headless 컴포넌트로 리팩토링하기1. Compound Component2. Function as Children Component3. Custom HookHeadless 컴포넌트 장단점 Headless UI 라이브러리가 무조건 정답인가? 결론컴포넌트란일반적으로 기능적 단위로 각각의 독립된 모듈을 의미하며 프론트엔드 관점에서는 화면을 구성하는 UI 요소다.모듈일반적으로 프로그램을 구성하는 요소로 관련 데이터와 함수를 하나로 묶은..

사이드 프로젝트를 진행하며 프로젝트 폴더 구조를 구성하는 방법에 대해 고민한 과정을 정리한 글입니다. 목차 서론 본론 기능이란? 기능 중심 구조의 이점 경로 구조화 공통 파일 정리 기능 구성 결론 서론 프로젝트 구조를 잡는 기준은 크게 2가지로 역할 중심, 기능 중심으로 볼 수 있다. 대부분의 프로젝트 구조는 역할 중심이지만 이번 프로젝트에서는 기능 중심으로 적용하면서 겪은 고민들을 작성한 글이다. 기능이란? 기능은 서로 관련된 파일 그룹이며 더 나아가 프로젝트의 영역이나 주제를 대표한다. 예를 들면 인증, 랜딩 페이지, 대시보드가 있다. 프로젝트를 여러 기능으로 나누면 관심 분리 디자인 원칙에 대해 생각해 볼 수 있다. 기능을 만들기 전에 지금 작업하고 있는 것이 기능으로 그룹화 할 수 있는지 고민한다..

멘토님께 PR 리뷰를 요청드렸는데 PR 메세지 개선이 필요하다는 피드백이 있었다. 회사에서도 사용하고 있던 PR 양식으로 (물론 혼자 진행하는 프로젝트라 내가 임의로 만든 템플릿이다) 이를 개선하기 위한 고민의 과정을 기록하기 위해 글을 쓴다. 목차 PR이란 무엇인가? PR은 왜 하는 거지? 좋은 PR 메세지를 위한 개선 작은 PR로 만들기 결론 PR이란 무엇인가? 내가 작업한 부분을 코드베이스에 포함시키기 위해 보내는 요청으로 작업으로 생긴 변경사항(수정, 추가, 삭제)를 기존 코드에 적용하는 과정을 의미한다. PR은 왜 하는 거지? PR의 목적은 크게 세 가지로 볼 수 있으며 각 항목을 기준으로 필수로 있어야 하는 내용들을 생각해봤다. 변경사항 기록 코드의 변경사항들을 기록하기 위해 PR을 작성하는 ..

TypeScript any, unknown 타입의 차이를 공부하다가 알게 된 점을 정리한 글입니다. 목차 서론 본론 any 타입 any 타입을 사용할 수 밖에 없는 케이스 unknown 타입 any 타입과 unknown 타입의 차이 타입 검사말고 as unknown as를 사용하는 건 어떨까? 결론 서론 아래 설명에 앞서 아래 타입은 JS 자료형에서 제시되지 않은 독자적인 타입 시스템에 포함된 타입이다. 물론 TS의 타입 시스템이 내포하고 있는 개념은 모두 JS에서 기인되었지만 단지 JS로 표현할 수단과 필요성이 없었을 뿐으로 앞으로 소개한 모든 타입 시스템은 TS에만 존재하지만 그 개념은 JS에서 기인한 타입 시스템이라는 점을 인지해야 한다. any 타입 JS에 존재하는 모든 값을 오류 없이 받을 수 ..

JavaScript 사용시 타입 변환이 왜 일어나는지 어떤 규칙에 의해 타입이 바뀌는지 공부한 글입니다. 목차 서론 본문 타입 변환이란? 명시적 타입 변환만 사용하는 것이 좋은 방법 아닐까? 타입 변환은 어떻게 진행될까? 암묵적 타입 변환이 왜 일어날까? 명시적 타입 변환만 사용하는 것이 좋은 방법 아닐까? 타입 변환 규칙 숫자 표현식에서 숫자가 아닌 값 문자열 객체 Falsy and Truty NaN 결론 서론 JavaScript를 사용하다보면 종종 의도대로 코드가 동작하지 않는 경우가 있다. const sumNumber = (a, b) => { return a + b; }; console.log(sumNumber(1, 2)); // 3 console.log(sumNumber(100)); // NaN ..