프로젝트 (16) 썸네일형 리스트형 Playground) Histoire 설치 및 사용 Histoire Fast stories powered by Vite histoire.dev Historie는 어찌 읽나 헷갈리는데 공식 문서에 따르면 "이스투아" 라고 읽는다. 이스투아는 컴포넌트를 개발해서 props를 마음대로 변경할 수 있는 UI를 제공한다. 원래는 storybook 을 적용하고 싶었는데 생각보다 너무 무거워서 histoire로 변경했다. Histoire 설치 일단 나는 vue3 프로젝트에서 사용하기 때문에 여기를 참고했다. pnpm i -D histoire @histoire/plugin-vue # OR npm i -D histoire @histoire/plugin-vue # OR yarn add -D histoire @histoire/plugin-vue Histoire setting.. Husky로 Commit Message 포맷 설정 git hook과 husky에 대한 설명은 아래 포스트에 작성해두었다. Frontend) Git-husky가 무엇인가 1. Git Hooks이란? 특정 상황에 특정 git 커맨드를 실행할 수 있는 기능 따로 설치할 필요는 없고 .git/hooks/ 파일에 들어가면 .sample 확장자로 되어 있는 파일들이 git 에서 지원하는 hook 들이다. 여기서 seungyooon.tistory.com commit을 남길 때 git hook으로 메시지 포맷을 확인하려고 했다. 찾아보니 commitlint라는게 있었다. 그래서 그걸 설정해주고 commit-msg hook에 commitlint를 한번 체크해주기로 했다. 위 포스 Commit Types 커밋을 너무 어렵게 남겨야 된다면 남기기 싫어질..거니까 간단하게 .. eslint 적용 + GitHub Actions로 npm 패키지 자동 배포 Eslint란? 코드 내 문법적 오류나 정의된 스타일과 패턴에 맞지 않는 부분을 찾아내는 정적 분석 도구이다. 특히, vscode에서 eslint를 적용하고 다음과 같은 설정을 추가하면 prettier를 사용하지 않고도 파일 수정 사항을 저장할 때 eslint 규칙에 맞게 자동으로 수정할 수 있어 매우 편리하다. 근데 지금 새로 산 맥북에서 이제 적용이 안됨.. 왜지.. 해결하고 관련 문제 해결 과정도 남겨야겠다. "editor.codeActionsOnSave": { "source.fixAll": true, }, "editor.formatOnSave": true, 사수님의 주도 하에 팀 내 eslint config를 만들었다. 여러 사람이 프로젝트에 참여하다보니 코드 스타일이 너무 각양각색이라 코드가 너.. [React 프로젝트] KPMG Ideation Challenge 홍보 웹페이지 프로젝트 개요 Web frontend 2021.01.25-2021.02.24 React UI/UX 설계 및 디자인 KPMG Ideation Challenge 홍보 웹페이지 KPMG Ideation Challange kpmg-ideation-challenge.koreacentral.cloudapp.azure.com KPMG Ideation Challenge는 KPMG에서 매년 주최하는 해커톤으로, 인공지능 기술 솔루션 아이디어를 제안하는 대회입니다. 1차적으로 세계 각국의 글로벌 KPMG 멤버펌에서 각 나라별로 대회가 진행되고, 각 나라의 우승자들이 글로벌 대회에 각국 대표로 출전하여 우승자를 뽑는 대회입니다. 이 대회는 각 KPMG 내에 있는 인공지능 솔루션 개발 팀인 Lighthouse에서 주도하며, .. [HTML/SCSS/Typescript 프로젝트] Wordle Game 프로젝트 개요 Wordle 게임 만들기 2022.05.13-2022.05.16 HTML/SCSS/Typescript https://github.com/Seungyoonkim66/wordle Wordle : 단어 맞추기 게임 wordle은 2021년 10월 공개되어 2021년 12월 말부터 꾸준히 인기를 얻고 있는 영어 단어 맞추기 게임입니다. 자세한 게임 방법은 링크를 참고하시기 바랍니다. 이 프로그램이 순수 자바스크립트로만 만들어졌다는 소문(?)을 듣고 흥미를 가졌다가 typescript와 scss를 공부해볼 겸 이 프로젝트를 시작했습니다. 프로그램은 한 판마다 한 단어를 답으로 설정합니다. 이때 단어를 불러오는 API로 http://random-word-api.herokuapp.com/home를 .. [React 프로젝트] JSON 작성을 돕는 UI / JSON Builder 프로젝트 개요 React 프로젝트 2021.06.14-2021.06.18 프론트엔드 UI/UX 디자인 및 코딩 JSON 작성을 직접 텍스트로 입력하지 않고 간편한 입력과 클릭만으로 JSON을 생성해주는 React 기반의 JSON Builder 입니다. React JSON Builder GitHub - Seungyoonkim66/json-builder Contribute to Seungyoonkim66/json-builder development by creating an account on GitHub. github.com How to use clone the project file. $ git clone https://github.com/Seungyoonkim66/json-builder.git $ cd.. [Database Mini Project] 쇼핑몰 데이터베이스 요구사항 분석 (데이터 정의, ERD, MySQL Script) 프로젝트 개요 쇼핑몰 데이터베이스 미니 프로젝트 2021.04.13 ~ 데이터베이스 MySQL MySQL을 이용해서 쇼핑몰 데이터베이스를 구축해보는 미니 프로젝트입니다. Database Mini Project : 쇼핑몰 데이터베이스 요구사항 분석 1. 사이트맵 랜딩 페이지 회원가입 로그인 관리자 계정 로그인 상품 등록 페이지 구매자 계정 로그인 쇼핑 카트 페이지 상품 카테고리 네비게이션 상품 카테고리 1 상품 디테일 1 주문 페이지 또는 쇼핑 카트 페이지로 이동 (구매자 계정 로그인 한 경우에만 접근 가능) 상품 디테일 2 ... 상품 카테고리 2 상품 디테일 1 상품 디테일 2 ... ... 2. 데이터 정의 2.1 사용자 [PK] id (고유 식별자) : 중복 불가, 필수 password : 필수 t.. [React 프로젝트] react-chart-js2를 이용한 React Dashboard 프로젝트 개요 React 프로젝트 2021.01.11-2021.1.18 프론트엔드 UI/UX 디자인 및 코딩 react-chart0js2 라이브러리를 이용해서 만든 React 대쉬보드 템플릿입니다. React Dashboard Template Seungyoonkim66/react_dashboard_template Contribute to Seungyoonkim66/react_dashboard_template development by creating an account on GitHub. github.com How to use clone the project file. $ git clone https://github.com/Seungyoonkim66/react_dashboard_template.git $.. 이전 1 2 다음
