'📝 Study' 카테고리의 글 목록

본문 바로가기

📝 Study

useSyncExternalStore? 💡 학습 공유 스터디에서 발표를 위해 정리한 글입니다. 🤐 빠른 작성을 위해 음슴체로 작성되어 있습니다. ☠️ 학습 중에 작성한 글이므로 내용에 오류가 있을 수 있습니다! 🥰 오류를 발견하신다면 댓글로 알려주시면 감사하겠습니다! ✔️ useSyncExternalStore 왜 나옴? 1. React 18의 혁신, Concurrency React 팀은 React 18을 발표하면서, 이번 릴리즈는 동시성(Concurrency) 의 도입으로 렌더링 엔진 개선(자동배칭)과 사용자 경험 향상(transition, suspense)에 집중했다고 함. 동시성이 먼디? 이름 그대로 순서에 상관없이 동시에 수행 될 수 있는 성질. 프로그래밍 적인 개념으로 말하면 프로그램을 독립적으로 실행될 수 있는 여러 조각으로 나누어 .. 더보기

🛑 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. .. 더보기

이전 1 다음

티스토리툴바