본문 바로가기

전체 글

🛑 Storybook Error : useLocation() may be used only in the context of a <Router> component. 이 에러는 메세지에서도 알 수 있다 싶이 컴포넌트 내에서 useLocation() 메서드를 사용할때 이건 Router 컴포넌트 내에서만 사용 할 수 있다고 경고하는 에러다. 원래는 이 에러를 storybook-react-rouer 를 설치해 해결 할 수 있는거 같은데 최근 업데이트 된 React Router v.6 랑 호환이 안되는건지 뭔지 나는 적용이 잘 안됐다...ㅠ 그래서 이리저리 방법을 찾아보다 임시방편으로 아래와 같이 우선 해결했다. function TestRouter({ children }) { return ( ); } 이런 아무 역할도 안하는 Router 를 하나 만들고 export const decorators = [ Story => ( ), ]; .storybook/preview.js 파.. 더보기
Storybook Chromatic 으로 배포해보기! + 번외 Netlify Storybook은 단순한 테스팅 툴을 넘어 협업 & 문서화 툴이다. 그러기 위해선 당연히 공유할 수 있도록 배포도 할 수 있고 Storybook을 배포하기 위한 전용 서비스까지 있다. 그것이 바로 Chromatic! Chromatic 과 함께라면 배포는 물론 그 이후의 build 관리까지 Storybook 맞춤으로 손쉽게 할 수 있다! 준비물은 Storybook을 적용한 프로젝트 Github 레포지토리만 있으면 된다! 1. 가입 먼저 Chromatic 사이트에 접속해 Github 계정으로 가입을 해주자! 2. 프로젝트 생성 아마 최초 회원가입을 해서 로그인을 하면 위의 화면이 뜰 것이다. 여기서 Choose from GitHub을 선택! 만약 안뜬다면 화면 Projects 탭에 있는 add projec.. 더보기
React 프로젝트에 Storybook 일단 사용해보기! with TS 💡Storybook에 대한 이해와 학습보다 빠른 적용을 목적으로 정리한 글입니다! ☠️ Storybook 학습 중에 작성한 글이므로 내용에 오류가 있을 수 있습니다! 컴포넌트의 props 값을 편하게 수정하면서 어떻게 렌더링 되는지 쉽게 테스트 할 수 있는 스토리북은 써보면 정말 편하고 좋다. 그렇기에 컴포넌트 단위로 개발을 할 수 있고 또 일종의 프로젝트 문서화 작업도 할 수 있다. 그런데 경험상 처음 써보려고 할때 스토리북이 정확히 뭔지도 모르겠고 어떻게 시작해야 할지 감이 잘 안 오는데 무엇보다 스토리 테스트 코드를 따로 작성을 해야 한다는 부담감에 선뜻 시작하기가 어려운 거 같다. 하지만 막상 한번 적용해서 이거저거 건드려보며 어느 정도 적응하고 나면 그냥 공장처럼 찍어낼 수 있다! ^-^)ㅎ 아.. 더보기
타입스크립트 기본 & 기본 타입 💡 Udemy 의 Typescript : 기초부터 실전형 프로젝트까지 강의 스터디에서 학습한 내용을 기반으로 작성합니다. 🗓 스터디 날짜 : 22.05.29 # 정적 타입 언어 VS 동적 타입 언어 1. 동적 타입 언어 실제 소스 코드가 실행되는 시점인 런타임 시 타입을 체크하고 결정한다. 코드를 작성 할 때 타입 선언이나 타입에 대한 규칙을 지킬 필요가 없어 상대적으로 코드가 짧으며 러닝 커브가 낮다. 타입을 명시 할 필요가 없어 정적 타입 언어에 비해 코드를 빠르게 작성할 수 있다. 코드 내에서 타입을 유동적으로 변경하며 사용 할 수 있다. 런타임 타입 오류를 발생시킬 가능성이 높다. 코드를 읽을때 타입을 추론하며 읽어야 하기 때문에 가독성이 상대적으로 좋지 않다. ex ) JavaScript 2. .. 더보기
[220516 ~ 20] 코드스쿼드 마스터즈 주간 회고 # 갑자기 주간 회고 ㅋㅋㅋㅋㅋㅋㅋ...일일회고 열심히 쓰자고 다짐한 게 무색하게... 바로 밀려버렸다. 아예 안쓴건 아니고 이번 주 동안 밀린 미션 진도 빼느라 정신이 없어서 노션에다 주요 내용만 대충 써놨다. 그랬는데 이제와서 정리한 것들을 따로따로 일일 회고라고 써 올리기도 뭐해서 그냥 한꺼번에 주간 회고를 하기로 했다. # 요일별 주요 활동 월 : Atomic Component 마무리 작업 화 : 지난 금요일 PR 피드백 반영 + 코쿼 강남 센터 방문 수 : react Router v6 + react transition group 뻘짓 목 : Context API 금 : useReducer + Axios + 피어세션 # Atomic Design 이번 내 미션 프로젝트를 돌이켜 보면 그냥 Atomi.. 더보기
[220512] 코드스쿼드 마스터즈 일일 회고 # 늦잠 잤다! 전 날 Atomic의 기준을 중점으로 학습하다가 새벽 6시가 넘어서 잠들었다. 그 탓에 눈 뜨니까 10시 반...! O oO)! 일단 세수고 뭐고 줌부터 켜서 들어가며 하루를 시작했다. # 오전에는 새벽 동안 참고했던 글을 정리하며 생각 정리를 했다. Effective Atomic Design | kciter.so 구글링으로 찾아 읽은 Atomic Design 관련 글 중 제일 자세하게 설명이 되어 있는 것 같다. 또한 글의 저자 분이 보완하고 새롭게 정의한 Atomic Design의 표준 규칙을 명확하고 타당한 이유와 함께 정리를 해주셔서 참고가 많이 됐다. 내용 중에 Atomic Design을 실제 구현을 하다 보면 애매모호한 부분이 생기는 원인으로 Atomic Design은 방법론이.. 더보기

티스토리툴바