https://github.com/TEAM-DAWM/NUTSHELL-FE/pull/293 [FEAT] 공통 컴포넌트 컨트롤버튼 퍼블리싱 by wrryu09 · Pull Request #293 · TEAM-DAWM/NUTSHELL-FE작업 내용 🧑‍💻 컨트롤 칸에 있던 공컴을 만들었습니다 shadow 테마를 추가했습니다 폴더를 button 하고 control 로 나눴습니다 알게된 점 🚀 기록하며 개발하기! 여기에서 Button 컴포넌트를 사용github.com여기에서 Button 컴포넌트를 사용하는데, Button은 width 가 따로 지정되어 있지 않고 flex 로 설정되어 있어 완료버튼 혼자 사이즈가 달라 설정해주어야 했습니다. + 눌렸을 때 shadow 도 줘야 해서..styled(Button)..

팀원이 코리 달아줘서 알게 된 내용!theme 를 context 로 themeProvider 로 전달해서 사용하고 있을 때, styled-component 안에서는 props.theme 해서 접근해 사용할 수 있었다.그런데 styled-component 밖 로직단에서 상태별로 분기해 색상을 변경해야 할 때는 어떨까?props로 사용할 수 없으니 나는 export 된 theme 를 직접 사용했었다.이때 useTheme의 존재를 알게 되었는데 ..https://emotion.sh/docs/theming#usetheme Emotion – Theming(Edit code to see changes)emotion.sh  가장 큰 차이점은 현재 theme 를 반영할 수 있다는 점인가보다. 이게 바뀌면 적용된 컴포넌..

아이콘을 버튼으로 쓰는 공통컴포넌트disable, hover, active, default 등의 상태를 가지고 각각의 색상이 다르다small, big 의 사이즈도 가진다outlined 는 border가 있고 나머지 type 두개는 border가 없다 그래서 총 세가지 부분으로 컴포넌트를 나누어서 봤는데1. 버튼 크기2. 타입별 버튼 배경색3. 아이콘 색상 type SizeType = 'small' | 'big';type IconBtnType = 'solid' | 'normal' | 'outlined';type IconButtonProps = { type: IconBtnType; size: SizeType; disabled: boolean; Icon: ReactElement; onClick: () => v..

잘 되어있는 React를 사용하고 있는데, 왜 Next.js가 필요할까요??오늘 다루어 볼 주제는 Next.js의 라우팅인데, 먼저 Next.js가 무엇인지 알아봅시다.Next.js 란?Next.js는 Vercel에서 리액트를 위해 만든 오픈소스 자바스크립트 웹 프레임워크로, 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG), 증분 정적 재생성(ISR)과 같은 기능들을 제공합니다. 리액트는 클라이언트 사이드에서만 작동하기 때문에, 첫 화면을 제대로 표시하기 위해 실행 초기에 성능 부담이 생기기도 하고 SEO 효과를 거의 볼 수 없었습니다.이 문제를 해결하기 위해 웹 어플리케이션을 서버에서 미리 렌더링해두는 방법을 연구하기 시작했고,서버 사이드 렌더링을 통해 리액트 앱을 HTML 페이지로 미리 렌더..