일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- 개발자
- c#
- 2020년
- javascript
- nextjs
- component
- 2024 계획
- 뇌를자극하는C#
- 라이브러리제작
- 다짐
- 2021년
- design
- style-dictionary
- 2023 회고
- 프로그래밍
- npm
- vite
- css framework
- mono-repo
- design token
- 디자인 토큰
- 24년 계획
- frontend
- 디자인시스템
- typescript
- design-system
- front
- 회고
- react
- compound component
- Today
- Total
목록nextjs (4)
개탕 IT FACTORY
개요최근 사이드프로젝트를 구상하다 보니 막상 떠오른 프로젝트(?)인지 모르겠지만, 나만의 템플릿을 제작해 보면 어떨까? 라는 생각을 많이 하게 되었다.Nextjs나 React(vite) 템플릿을 보면 공식 문서에서 이미 만들어진 틀을 준다.사실 베이스부터 시작해서 입맛에 맞춰서 바꿔도 되지만, 아주 귀찮고 재미없는 일인건 알고 있다. 특히 일적으로 바쁜 회사에서 하나씩 뭐 넣고 하는 건 매우 비효율적 (커스텀 웹팩이나 아니면 전사 프로젝트로 진행한다면 다를 수도)그래서 나만의 템플릿 엔진을 제작해 보기로 하였다npx create 을 통해서 어디서든지 어느 컴퓨터든지 내가 만들어놓은 lint, prettier 설정 등을 활용할 수 있게 하는 것으로 제작해 볼까 한다.🚨본 글은 시리즈물로 제작예정입니다 한..
RIP CRA(Create-React-App) CRA(Create-React-App)이 죽었다… 아 죽었다는 표현보단는 deprecated가 맞는 표현 같다 React에서는 새로운 문서 https://react.dev/ 를 공개하고 이전 문서의 지원을 중단했는데 충격적이게도… 새프로젝트 생성부분에 CRA(Create-React-App)부분이 존재하지 않았다 충격 실화! 근데 사실 전부터 이런 이슈는 존재해왔는데 어떤점이 문제였고, 그러면 어떤부분이 바뀌었는지 확인해보자 이후 Create-React-App는 CRA로 표현 💡 들어가기 앞서 이영상을 참고하면 좋을거 같다 https://www.youtube.com/watch?v=M4CLvtCS2YU 성능 이슈 사실 이문제는 전부터 존재하였지만, 새로운 모듈러..
1. 개요 개인 공부를 하던 와중에 친구와 공부내기에서 떠올린 프로젝트이다. 친구와 몇시간 혹은 특정 장소에서 공부한걸 인증한걸 공유하자 (도서관, 카페) 대신 집과 거리가 멀고, 공부를 하지 않고 인증만해도 그정도의 정성은 인정하자는 분위기였다. 근데 매번 타이머키고 인증하고, 또 공부 타이머앱 깔고 분석하기엔 뭔가 별루였다… (뭔가 보상이 없달까?) 그래서 뭔가 보상도 있고, 인터페이스도 쉬우면서, 동기부여가 되는 타이머앱을 만들기로 했다. 2. 기능 기본기능 타이머 : 당연하다, 타이머 앱이니까 타이머는 기본 탑재이다 분석기능 : 기본적인 목표치를 설정 주단위 분석 또는 달단위 분석 기능을 탑재할까 싶다 공유기능 : 자신의 공부시간 혹은 공부량등을 자랑할수있게 공유기능을 넣을예정 커뮤니티 기능 : ..
개요프로젝트를 진행할때마다 CRA를 활용한 어플개발을 많이 하였다. 일단 환경 구축등의 시간 단축이 좋다는 이유로 많이 사용하였지만, CRA의 단점은 커스텀이 어렵다는 부분이 있다.물론 npm run eject을 통해서 webpack설정을 바꿀순 있지만, 기존에 지원하던 좋은 장점을 버리는 거라 추천은 하지 않는다 (사실 직접 webpack으로 골라 만드는게 좋을듯…)그래서 SSR, SSG의 장점이 가진 Nextjs를 나만의 boilerplate로 제작해볼까 한다.준비사항일단 어떤 요소를 넣어야 하는지에 대한 부분이 필요했다.필수요소typescriptESLintPrettierReact-testing-library, jeststyled-componentstailwindCSS데이터페칭위 필수요소를 기반으로 ..