Development
-
Github 연동Configuration Management/git 2023. 10. 26. 17:15
원격 저장소 설정 저장소 만들기 Default branch 변경 main -> master로 기본 브랜치를 변경하자. 로컬 저장소 -> 원격 저장소에 올리기 리액트 프로젝트 생성 및 스토리북 등록 # 리액트 프로젝트 생성 $ npx create-react-app test-design-system --template ko # 스토리북 등록 $ cd test-design-system $ npx -p @storybook/cli sb init 로컬 저장소에 원격 저장소 정보 설정 # gitignore 파일 생성 $ npx add-gitignore storybookjs,react,yarn # 저장소 초기화 $ git init # git이 관리할 대상으로 파일 등록 $ git add . # 파일상태 확인 $ git..
-
리액트 & 스토리북 설치Project/Figma+Storybook 2023. 10. 26. 15:05
https://storybook.js.org/docs/react/get-started/install?ref=chromaticblog.ghost.io Install Storybook Storybook is a frontend workshop for building UI components and pages in isolation. Thousands of teams use it for UI development, testing, and documentation. It’s open source and free. storybook.js.org 리액트 프로젝트 생성 $ npx create-react-app test-design-system --template ko 스토리북 등록 $ cd test-design-sy..
-
디자인 시스템 & 스토리북 & 피그마란?Project/Figma+Storybook 2023. 10. 25. 17:16
제일 많이 쓰이는 `스토리북`+`피그마` 조합으로 리액트 컴포넌트용 디자인 시스템 구축 과정을 기록해 보자! 아자아자! Bard. 디자인 시스템 디자인 시스템은 재사용 가능한 UI 컴포넌트, 스타일 가이드, 디자인 원칙 등을 포함하는 시스템입니다. 디자인 시스템을 사용하면 개발자는 일관되고 품질이 높은 사용자 인터페이스를 보다 쉽게 구축할 수 있습니다. Bard. 스토리북 https://storybook.js.org/ Storybook: Frontend workshop for UI development Storybook is a frontend workshop for building UI components and pages in isolation. Thousands of teams use it for ..
-
테스트 코드의 필요성Language/기타 2023. 10. 24. 11:30
테스트 코드를 작성해야 하는 이유를 나름대로 정리해 보려고 했더니 Bard와 ChatGPT가 많은 부분이 정리가 되어있고 참고 할 만한 블로그도 존재하여서 그걸 토대로 정리해 놓았다. 아래 사이트가 잘 정리되어있는것 같아서 먼저 읽어보시는걸 추천 드린다. https://brunch.co.kr/@50c7eab91a7c44d/10 테스트 코드를 모르면 손해 보는 3가지 혹시 테스트 코드에 대해서 들어보셨나요? 테스트 코드를 간략하게 표현하자면 다음과 같습니다. 내 프로젝트 코드에 오류가 있는지 검증하기 위해 매크로 프로그램을 만든다. 이게 무슨 소리 brunch.co.kr 이것 외에도 새로운 개발자가 오게 되었을때 테스트 코드만 작성되어 있다면 따로 문서를 보지 않아도 테스트 코드만 보고도 업무 인수인계가 ..
-
QA 시스템 구축Language/기타 2023. 10. 23. 17:27
QA란 무엇인가? 잘하려면 어떻게 해야할까? 대체적인 구성은? QA란? QA는 Quality Assurance의 약자로, 제품이나 서비스의 품질을 보증하기 위한 활동을 의미합니다. QA는 제품이나 서비스의 개발, 테스트, 출시, 운영 등 모든 단계에서 이루어집니다. QA의 주요 업무 제품이나 서비스의 요구 사항을 파악하고, 그에 맞는 품질 기준을 설정합니다. 제품이나 서비스의 설계, 구현, 테스트를 통해 품질을 검증합니다. 제품이나 서비스의 출시 후에도 지속적으로 품질을 모니터링하고 개선합니다. QA는 제품이나 서비스의 품질을 향상시키고, 고객의 만족도를 높이는 데 중요한 역할을 합니다. QA의 중요성 QA는 제품이나 서비스의 품질을 향상시키고, 고객의 만족도를 높이는 데 중요한 역할을 합니다. QA를 ..
-
NextJS에서 queryString 변경 감지 hook 만들기Language/React 2023. 10. 20. 09:43
NextJS 환경에서 `/aaa?arg1=111` 경로를 `/aaa?arg1=222`로 push 혹은 replace 헀을떄 arg1를 받아오는 hook을 생성하는 과정을 간략하게 정리해 놓는다. useQuery 훅 생성 필자는 p가 팝업레이어 아이디인데 path가 바뀔때 그부분은 제외한 로직이다. export function useQuery() { const router = useRouter(); const [query, setQuery] = useState(router.query); useEffect(() => { const beforeQuery = { ...query }; const afterQuery = { ...router.query }; // 팝업 파라미터 제외 (레이어 팝업) delete be..
-
VSCode에서 Python 개발환경 만들기Tool/VSCode&Cursor 2023. 8. 11. 10:06
VSCode에서 파이썬 개발환경을 설정해보자 1. Visual Studio Code 설치 https://code.visualstudio.com/ Visual Studio Code - Code Editing. Redefined Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. code.visualstudio.com 2. 필수 Extension 설치 및 테스트 2.1. Py..
-
MacOS에서 파이썬 버전 관리하기ETC/MacOS,Rancher 2023. 8. 8. 11:52
맥에서 Python버전을 관리하는 방법을 정리해 놓자! 1. pyenv 설치 & 업그레이드 & 삭제 # 설치 $ brew install pyenv # 업그레이드 $ brew upgrade pyenv # 삭제 $ brew uninstall pyenv 2. 환경설정 ~/.zshrc에 추가 및 적용을 한다. $ echo -e '\nif command -v pyenv 1>/dev/null 2>&1; then\n eval "$(pyenv init -)"\nfi' >> ~/.zshrc 결과적으로 아래 코드가 추가된다. if command -v pyenv 1>/dev/null 2>&1; then eval "$(pyenv init -)" fi 아래 명령어로 설정코드 적용 $ source ~/.zshrc 3. 필요한 V..