깃허브 이슈와 커밋 연결해서 사용하기
·
⚙️ 개발 팁 & 노하우/기타
📍이슈를 만들고 사용하는 이유 프로젝트에서 어떤 작업(버그 수정 or 기능 추가 등)을 시작하려면, 구성원과의 소통에 다음과 같은 것들이 필요할 것이다 - 작업의 필요성 : 왜 이 작업이 필요한지.. - 작업 상세 : 어떤 파일을 수정하거나 생성하게 되는지.. 이를 이슈로 만들고 팀의 이슈 템플릿에서 포맷을 미리 지정할 수 있다 ⭐또한 커밋과 이슈를 연동할 수도 있다 (이슈 넘버를 활용) 📍이슈 템플릿 사용 방법 1. 레포 세팅 > 제너럴 > 이슈 템플릿 - 디폴트 설정 가능 : placeholder, 라벨, 담당자 - 개요, 상세, 기타 등을 정리 - 이슈 제목은 그냥 feat: ~ 이렇게 해도 될듯 2. 커밋 시 이슈 넘버 붙이기 - 커밋 메시지 뒤에 #이슈 번호 붙이면 됨 - 예시 : feat: 새..
QDD 1-2. Next.js pages 기능 & Styled-components 규칙
·
👨‍💻 프로젝트 경험/Toy
📍Q5. Next.js 에서 폰트를 적용하려면? 폰트를 포함하는 global styles를 적용할 root 컴포넌트가 필요하다.. Next.js 에서는 _app 컴포넌트가 root 컴포넌트가 되며 여기에 글로벌 스타일을 추가할 수 있다 pages/_app.tsx를 만든다 import type { AppProps } from 'next/app' export default function MyApp({ Component, pageProps }: AppProps) { return } styled-components의 createGlobalStyle API 로 글로벌 스타일을 만든 뒤, 컴포넌트 형태로 import 하여 추가해야 하는데, 이왕이면 Layout 컴포넌트로 감싸는게 좋을 것 같다. 그런데 theme..
QDD 1-1. Yarn Berry & Next.js 설치, ESLint & Prettier 설치
·
👨‍💻 프로젝트 경험/Toy
📍Q1. Yarn Berry로 프로젝트를 시작하려면? 일반적인 Yarn은 클래식 (1.X) Yarn Berry 는 2.X 버전 이상을 말한다 - Node.js 18.15.0 - Yarn 3.5.0 기준 yarn init -2 생성된 프로젝트 구조가 꽤 달라서 당황.. Yarn Berry의 핵심인 zero-install 및 plug-n-play 에 대해서 나중에 알아봐야겠다 zero-install 덕분에 - 커밋, 푸쉬하는데 시간이 오래 걸림 ㅠㅠ - zero-install 기능을 해제하려면 .yarn/cache 를 .gitignore에 추가하면 됨. 단 이는 node_modules 처럼 초기에 yarn install 필요 (현재는 !가 붙어서 gitignore의 부정 상태) ⭐zero-install 덕분..
QDD 1-0. Intro: Academia
·
👨‍💻 프로젝트 경험/Toy
프로젝트 이름 : 아카데미아 프로젝트 소개 : 원포인트 공부모임을 만드는 플랫폼 If you can't explain it simply, you don't understand it well enough. 아인슈타인은, 쉽게 설명할 수 없다면, 그것을 잘 이해한 것이 아니다라고 말했다. 내가 잘 아는지 확인하는 방법, 또는 잘 배우는 방법은, 남에게 쉽게 설명하는 것이다. 이를 통해 아카데미아에서 공부할 모임 또는 배우는 모임을 찾을 수 있다 기술 스택 Next.js Styled-components yarn berry를 써보자! (빌드 시간이 매우 빠르고 node_modules를 사용하지 않는다고 해서!)
[번역] QDD로 새로운 프레임워크, 언어를 빠르게 배우기
·
👨‍💻 프로젝트 경험/Toy
📍참고 https://nickjanetakis.com/blog/learning-a-new-web-framework-with-question-driven-development Learning a New Web Framework with Question Driven Development When I'm learning a new language or web framework, I often go at it from a problem / solution angle and use error driven development. nickjanetakis.com 📍요약 ✅새로운 프레임워크나 라이브러리를 빠르게 배우려면, 관련 서적을 미리 읽는 것보다 직접 코드를 작성해보는 것이 더 중요하다 📍상세 내용 ✅QDD (Q..
#49 콜백에서 this에 대한 타입 제공하기
·
🎨 프론트엔드 공부/JS & TS
이펙티브 타입스크립트 (댄 밴더캄 지음) 를 읽고 정리 📍요약 ✅콜백에서 this를 사용해야 한다면, this 바인딩을 확인해야 한다. 확인하려면 2가지 방법이 있다. - 생성자에서.. - 화살표 함수를 사용.. 📍JavaScript this 복습 C class를 만들고 logSquares 메서드를 정의한다 C의 인스턴스 c를 정의하고 메서드를 실행 => 정상 (this = c) c의 메서드를 새로운 변수에 저장하고 그것을 호출 => 에러 (this = undefined) call 메서드를 활용해 this에 c 바인딩 => 정상 class C { vals = [1, 2, 3]; logSquares() { for (const val of this.vals) { console.log(val * val); }..