TIL

참고: Vite를 사용해야 하는 이유이전에 브라우저는 소스 모듈을 브라우저에서 실행할 수 있는 파일로 크롤링, 처리 및 연결하는 "번들링(Bundling)" 기법을 사용하여 JavaScript 모듈화를 진행했었다.Webpack, Rollup, Parcel 과 같은 도구

참고 | 깃의 Detached HEAD git push가 안 될 때 / detached HEAD 문제 해결 방법 \[Git/번역] Detached HEAD🤯 storybook을 공부하느라 레포를 생성하고 인트로를 보며 따라하던 도중 갑자기 push가 되지 않고

참고 | \[DOM 다루기] template 태그 이용Cracking Vue.js(https://joshua1988.github.io/vue-camp/reuse/slots.html페이지를 불러온 순간 즉시 그려지지는 않음 실제로 스크립트를 이용해 어딘가 붙

Storybook 내 Vue 컴포넌트의 문법 구조를 파악하던 중 React와의 주요 차이점은 무엇인지 알아보게 되었다. (React만 공부해보고 Vue에 대해서는 처음 접해보는 상태)🆅Vue : 템플릿(Template), 스크립트(Script), 스타일(Style)로

Storybook 의 StyledButton.stories.js 파일에서 코드를 짜다가 발생한 오류 메세지에 대한 트러블 슈팅 기록.Storybook의 stories.js 파일에서 코드를 짜다가 아무리 봐도 오류가 안 보이는데 문법 오류라고 하며 다음과 같은 에러 메세

Storybook에서 사용하는 args 중에 특정 args(props)만 제외하고 나머지는 disable하고 싶었는데, 동일 코드가 계속 반복되고 있어서 더욱 알아보기 쉽고 간략하게 추상화해보고자 함.StyledButton 이라는 UI 요소를 만들고 이를 storybo

참고 | Automate Chromatic with GitHub Actions워크서버개발팀의 GitHub Actions 적용기Github Actions으로 배포 자동화하기 React-Storybook을 Chromatic으로 배포하는 과정에서 CI 도구로써 GitHu

storybook 코드를 작성하던 중, stories 파일과 styled 컴포넌트 간에 prop들을 인자로 주고 받는 개념이 헷갈려서 확실하게 재정립 해보고자 구조분해할당에 대한 개념을 다시 알아보게 되었다.참고 | https://velog.io/@soral2

Vue-vite 프레임워크로 생성된 UI 컴포넌트들을 React-vite으로 변환 후, storybook의 composition 기능을 활용하여 multi-frameworks을 단일 레포에 관리할 수 있도록 고민해본 과정 기록.Bitbucket vue-storyboo

vue와 react storybook을 동시에 관리하는 과정에 있어서 storybook-root 속 package.json 파일의 script 부분에 코드를 입력해서 명령어를 관리하는 것을 보고 package.json에 대해 좀 더 구체적으로 알아보고 싶다는 생각이 되

Storybook 으로 StyledRadio를 만들고 있던 와중, docgenInfo 로 props 정보를 불러오려고 했으나 props 가 없다!? 이 문제를 어떻게 해결했는지 기록. > 왜 자꾸 props를 인식 못하지? StyledRadio.stories.js

React-Storybook을 Chromatic으로 배포하는 과정에서 CI 도구로써 GitHub Actions를 쓰기도 하는 것을 알게 되었고, Chromatic과 storybook docs 내에 있는 actions 코드를 그대로 복붙하니 자꾸 오류가 나게 되어 구체적

우테코 프리코스 1주차 과제를 하다가 테스트 코드와 App.js 내 async play() 가 하는 역할이 무엇이며, 이 둘 사이의 관계성은 뭘까를 알아보기 위해 Jest에 대해서 검색해보게 되었다.참고 | Jest를 이용한 Unit Testjest 로 api unit

이번 우테코 프리코스 1주차 과제 덕에 Jest와 테스트코드에 대해 처음 접해보게 되었다. 과제에서 주어진 테스트 코드 내용을 이해해보고자 한 줄씩 뜯어보기로 함.async와 await은 JavaScript에서 비동기 코드를 다루는 데 사용되는 키워드이다. 이들은 비동

구글 크롬 익스텐션 개발을 위해 다음 참고글을 회독하며 필기한 글입니다.참고 | 크롬 익스텐션 개발기 (feat.Manifest V3) - 임성현님구글 크롬 익스텐션을 개발하기 위해서는 manifest.json 파일이 필수인데, 이 파일에는 package.json 처

Chrome Extension 튜토리얼 따라하기 (1)참고 | Hello Extensions루트 디렉토리에 manifest.json 파일이 배치되어 있는 것을 확인하면 된다.action : 확장 프로그램의 작업 아이콘으로 사용해야 하는 이미지 (default_icon)

Chrome Extension 튜토리얼 따라하기 (2)참고 | Reading Time: 패턴 매칭 으로, 특정 패턴에 맞는 데이터를 찾거나 추출하는 기능을 한다. <scheme>://<host>/<path> 의 구조를 띈다.<scheme> : 이중

| VanillaJS 를 이용해서 간단한 투두리스트를 만드는 방법 기록 index.html index.js 한 줄씩 뜯어보기 DOMContentLoaded 이벤트 리스너 웹 페이지의 DOM이 완전히 로드되고 파싱되었을 때 실행되어야 하는 스크립트를 감싸는 데 사

Nextjs를 사용한 프로젝트를 생성 중, 아이폰 15 프로 크기에 맞춰 개발하기 위한 전역 스타일링 설정이 필요해서 찾아보다가 정리하는 글 (📁 styles > globals.css)Next.js 12 이상에서 app 폴더를 사용할 경우, app 폴더 내 \_app