Webpack을 이용해 React 프로젝트를 설정하게 되었습니다. 생각보다 간단하지만은 않아서 환경 설정하는 과정을 기록해두려고 합니다. 모든 세팅이 끝난 Wepack-React 보일러플레이트 저장소 GitHub - Gilpop8663/webpack-react-boilerplate: react-18, webpack5, typescript, storybook, jest, msw, @tanstack/react-query_v4, s react-18, webpack5, typescript, storybook, jest, msw, @tanstack/react-query_v4, styled-components, eslint, dotenv, whatwg-fetch - GitHub - Gilpop8663/webpack..
팀원과 협업을 할 때 dev 브런치를 pull 해오는 상황에 앞선 커밋 기록이 있다고 합칠 수 없다는 오류 메세지였습니다. 해결하려면 깃의 전역 설정을 바꿔줘야 합니다. 깃 설정 목록 보기 git config --list 저의 경우 pull.ff only가 적용되어 있어서 이 설정을 삭제해주었습니다. 깃 설정 삭제하기 git config --unset --global pull.ff 하지만 이러한 옵션이 하나도 없다면 충돌날 가능성이 많아지므로 추가적인 옵션 설정을 해주었습니다. rebase를 하지 않는 옵션 추가 git config pull.rebase false 참고자료 https://b41.kr/2022/02/14/git-fatal-%EC%A0%95%EB%B0%A9%ED%96%A5%EC%9D%B4-%..
PR 템플릿 등록하는 방법 PULL_REQUEST_TEMPLATE.md 파일을 .gihhub 폴더에 넣어줍니다. PULL_REQUEST_TEMPLATE.md ## 🔥 연관 이슈 close: # ## 📝 작업 요약 수행할 작업을 1~2줄 사이로 요약해주세요. ## ⏰ 소요 시간 기능 구현에 소요된 시간을 적어주세요. (추정했던 시간과 다르다면 이유도 함께) ## 🔎 작업 상세 설명 주요 기능 및 로직에 관해 설명해주세요. ## 🌟 논의 사항 크루들과 이야기 해보고 싶은 부분을 적어주세요. 이슈 템플릿 등록하는 방법 1. 레포지토리 세팅에 들어갑니다. 2. 밑으로 내리면 Features - Issues - Set up templates 버튼을 눌러줍니다. 저의 경우 버그와 기능 두 개를 설정해주었습니다. 버..
팀 프로젝트를 시작하는 방법 팀 소통을 위한 방법 정하기 슬랙과 노션을 통해 팀 소통을 하기로 했습니다. 그리고 나에 대해 소개하는 글을 통해 자신이 소통하기 편한 시간, 장소를 팀원과 공유했습니다. 프로젝트를 위한 노션 설정하기 프로젝트 소개 프로젝트가 왜 진행되어야 하는지, 어떤 가치를 만들어낼지 설명합니다. 목적을 명확히 함으로써 팀원들이 프로젝트에 대한 이해도를 높일 수 있습니다. 저희의 경우 투표를 통해 결정할 수 있는 서비스를 기획했습니다. “첫 소개팅 뭘 먹으러 가면 좋을까?”, “치킨, 피자 중 더 취향은?” 어느 곳에서 정보를 찾아야 할지도 막막한 사람들을 위한, 심심풀이로 나의 취향과 남의 취향을 비교해보고 싶은 사람들을 위한 프로젝트입니다. 킥오프미팅 킥오프 미팅은 프로젝트 시작 전에..
설정에서 Prettier Path 를 다음과 같이 바꿔줍니다. For Example /usr/local/lib/node_modules/prettier (Mac OS) \AppData\Roaming\npm\node_modules\prettier (Windows) 출처: https://stackoverflow.com/questions/58866847/in-vs-code-im-getting-this-error-failed-to-load-module-attempted-to-load-pr In VS Code, I'm getting this error, 'Failed to load module. Attempted to load prettier from package.json' When I'm using VS Cod..
React/Next/Javscript Eslint Import/Order (import 순서) 설정하는 방법 0. 이 글을 쓰게 된 계기 과거부터 지금까지 import를 순서를 관리한다면 일일이 수동으로 알파벳 순으로 맞춰주었었는데 리엑트에서 폴더가 많아지고, 컴포넌트가 많아지다 보니 불편함을 느꼈습니다. 그러던 와중 다른 크루가 import/order에 대해 포스팅 한 글을 보고 적용해 봐야겠다고 마음먹었었고, 새로운 프로젝트를 할 때 어떻게 했는지 기억하기 위해 작성하게 되었습니다. 1. Import 순서를 설정하면 좋은 점 일관성 유지: import 문이 일관된 순서로 작성되면 코드를 이해하기 쉬워집니다. 모듈 경로를 알파벳순으로 정렬하면 모듈 검색이 용이해집니다. 충돌 방지: 일부 모듈은 다른 모..
CRA(create-react-app)로 만든 프로젝트 / Storybook 7 버전에서 절대 경로를 설정하는 방법 (with craco) / jest 절대 경로 설정하기 0. 이 글을 적게 된 계기 스토리북 절대 경로를 설정하지 않아 발생한 에러가 났습니다. Module not found: Can't resolve "@" Field 'browser' doesn't contain a valid alias configuration CRA로 만든 프로젝트에서 절대 경로 설정하는 방법은 많이 있으나 스토리북 7 버전 환경에서 절대 경로를 설정한 예시를 찾기가 어려워 나중에 제가 다시 볼 목적으로 글을 작성하게 되었습니다. 그리고 이러한 정보가 필요한 사람들에게 도움이 되었으면 좋겠습니다. CRA(create-..
설치 npm install @apollo/client graphql Get started with Apollo Client Hello! 👋 This short tutorial gets you up and running with Apollo Client. If you're using a React sandbox from CodeSandbox and you encounter a TypeError, try downgrading the version of the graphql package to 15.8.0 in the Dependencies panel. If you encou www.apollographql.com 설정 graphQL을 사용하는 서버의 주소를 uri로 설정합니다. client.js import..
- Total
- Today
- Yesterday
- Storybook
- env
- 스토리 북
- 북클럽
- 프리온보딩
- createPortal
- 노마드코더
- NextRequest
- import/order
- C언어
- NextApiRequest
- nextjs
- 윤성우 열혈C프로그래밍
- jest
- WSL2
- React
- javascript
- 프론트앤드
- TopLayer
- electron
- 원티드
- CLASS
- error
- nodejs
- 위코드
- 우아한테크코스
- 초보
- 아차산
- 노개북
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 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 |