FrontEnd/React
![[storybook] viewport 설정](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcKBDWw%2FbtsClJVsePs%2F7lt3XKwFKLtSoyCqgKOFB1%2Fimg.png)
[storybook] viewport 설정
스토리북을 사용하다보면 viewport를 조금 더 자유롭게 사용하거나 컴포넌트마다 기본적으로 설정되는 viewport를 다르게 설정해주고 싶은 경우가 있다. https://storybook.js.org/docs/essentials/viewport Viewport • Storybook docs Storybook is a frontend workshop for building UI components and pages in isolation. Thousands of teams use it for UI development, testing, and documentation. It’s open source and free. storybook.js.org 기본적인 내용은 위 공식문서를 참고했다. 우선 viewpo..
![[REACT] storybook reset.css 적용](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fbl8CmN%2FbtsCpfS7LQh%2Fi9xyBo4yyMxNWwnKU0StYk%2Fimg.png)
[REACT] storybook reset.css 적용
storybook에서 보면 기본적으로 reset.css가 적용되어 있지 않아 화면에서 볼때 깨지는 문제가 발생했었다. reset.css혹은 다른 css 파일을 넣는 방법은 굉장히 쉽다. https://velog.io/@kimhyo_0218/Storybook-emotion%EC%9C%BC%EB%A1%9C-storybook-%EA%B8%80%EB%A1%9C%EB%B2%8C-%EC%8A%A4%ED%83%80%EC%9D%BC-%EC%84%A4%EC%A0%95%ED%95%98%EA%B8%B0-reset-css [Storybook] emotion으로 storybook 글로벌 스타일 설정하기 (reset css) 컴포넌트를 만들기 전, css를 reset하는 작업이 필요하다.공통으로 사용되는 font-family도..
![[Next.js] SSR프레임워크 Next.js와 css-in-JS](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbnmCIH%2FbtsCk4DQ47p%2FR84Ano5FbaBItxRmDFLztk%2Fimg.png)
[Next.js] SSR프레임워크 Next.js와 css-in-JS
이번에 진행하는 프로젝트에 Next.js를 적용하려는 생각을 해보았다. 프로젝트는 이제 갓 시작해서 한 10%~20% 정도 진행된 것 같다. 이상황에서 Next.js를 적용하고 싶었던 이유는 1. SSR의 장점 SPA(Single Page Application)는 리소스를 많이 잡아먹을 수 밖에 없다. 기타 등등 이유 2. Next.js 학습 Next.js 를 제대로 다뤄본 경험이 없었기에 이 기회에 프로젝트에 적용을 해보고 싶었다. 3. 기업들 내가 목표로하는 몇몇 기업들에서 Next.js를 사용하고 있기에 해당 기술의 사용경험이 꼭 필요했다. 등등.. 여러가지 이유가 있지만 사실 2-3번이 가장 큰것 같다. 그럼에도 Next.js로 이주하지는 않기로 했다 그이유는 1. emotion과 next.js의..
[React] 리액트에서 tdd 개발하기 (with emotion)
만약 CRA를 통해서 리액트 프로젝트를 만들었다면 손쉽게 Test코드를 작성하는 것이 가능하다. testing-libray/react 와 jest는 CRA를 통해 리액트 프로젝트를 만들었다면 이미 설치가 되어있을 것이고 emotion을 적용한 프로젝트에서 테스트 코드를 작성하기 위해서 @emotion/jest 라이브러리를 추가적으로 설치해준다. npm install --save-dev @emotion/jest 이후 테스트 코드를 만들때 아래 항목을 추가하면 된다 import { matchers } from "@emotion/jest"; expect.extend(matchers); @emotion/jest와 다른 테스팅 라이브러리를 비교할 때, @emotion/jest의 강점은 다음과 같다. 간편한 구성:..
![[StoryBook] 스토리북 적용하기](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FlwKbA%2FbtsBQxVogQQ%2FWkyyivtXkAp5vM10ZElIO1%2Fimg.png)
[StoryBook] 스토리북 적용하기
스토리북이란 컴포넌트의 다양한 경우를 정리할 수 있게 도와주는 시각화 도구이다. 컴포넌트들을 시각적으로 볼 수 있게 해주는것은 물론 각 컴포넌트를 문서화 해주는 역할까지 가지고 있다. 따라서 디자이너와 협업을 할때 보다 쉬운 피드백이 가능하며 개발자와의 협업에서도 매우 뛰어난 효율을 보여줄 수 있다. 또한 storybook과 jest를 활용하여 컴포넌트를 불러온 후 테스트코드를 작성하는 것도 가능하다. https://storybook.js.org/tutorials/intro-to-storybook/react/ko/get-started/ Storybook Tutorials Learn how to develop UIs with components and design systems. Our in-depth f..
[REACT] 이미지 관리 방법 (public vs assets)
리액트에는 크게 이미지처리방법이 2가지 있다. 1. public 파일 안에 바로 이미지를 관리하는 방법 2. src/assets 파일을 만든 후 이미지를 관리하는 방법 과연 어떤 방법이 좀 더 좋은 방법일까? 정답은 두가지 방법다 장단점이 존재한다.. 이다. 1. public 사용 간단하게 사용할 수 있으며 public 폴더에 있는 이미지를 상대 경로를 통해 쉽게 불러올 수 있다. 이미지를 직접 불러오기 때문에 번들링 처리가 필요없다 라는 장점이 있다. 대신 이미지의 관리가 어려울 수 있으며 이미지가 많거나 프로젝트가 커질수록 유지보수가 어려워진다는 단점이 있다. 또, 이미지의 크기가 큰 경우 로딩 성능에도 영향을 미칠 수 있다고 한다. 위 예시처럼 불러올 수 있다. 2. src/assets 사용 이미지..