IT Dev Log

spotlight search 를 위한 단축키 맥에서 많이 사용하는 기능중에 하나가 spotlight search 일 것이다. 이를 매번 마우스를 클릭해서 오픈했었는데, 단축키를 사용하면 빠르게 열어서 필요한 프로그램을 찾아서 쓸수 있다. 손에 익으면 빠른게 필요한 어플을 오픈해서 사용할수 있다. 맥을 사용한다면 많이 사용하는 기능 몇가지만 단축키로 열어주면 작업 효율을 높일수 있다. 커맨드 + 스페이스바 ... 끝..

git 을 사용해서 소스 코드 없데이트 하려고 하는데 authentication failed 라고 나온다. 이는 git 에 대한 계정정보가 없어서 나오는 에러이다. git config --global user.email "email@example.com" git config --global user.name "Brian" 이렇게 작성해주면 중간에 인증창이 하나 뜨고 인증을 시도하면 다음부터는 에러가 발생하지 않는다. 끝..

GNS3 설치는 다음의 순서대로 프로그램을 설치한다. 1. vmware workstation Pro설치 2. GNS3 다운로드 및 설치 3. IOSv router 추가 4. IOSvL2 switch 추가 - vmware workstation Pro설치 vmware workstation Pro 말고 Player 를 사용할 수도 있고, 그외에 다른 Virtual Machine 도 사용가능하지만 GNS3 에서는 VMware Workstation 을 사용하는 것을 권장하고 있다. - GNS 3 다운로드 및 설치 link : https://gns3.com/software/download 다운로드 받은 파일을 설치한다. 설치중에 component 옵션을 선택하는 부분이 있는데, GNS3 VM 을 추가한다. 이부분은..

error - yarn 에서 react 프로젝트 생성시 에러 발생 yarn 에서 react-app 을 생성하는데, 다음과 같은 에러가 발생했다. [2/4] Fetching packages... error jest-watch-typeahead@1.0.0: The engine "node" is incompatible with this module. Expected version "^12.22.0 || ^14.17.0 || >=16.0.0". Got "14.15.4" error Found incompatible module. info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command. Aborting installati..

Visual Studio Code - extensions ( 2022.01) 비쥬얼 스튜디오 코드에 설치한 extensions 정리 1. Material Theme & Material icon theme 2. Prettier 설치후 setting에서 다음 항목을 수정한다. quote 로 검색해서 "single" 로 설정 3. Bracket Pair Colorizer 4. Indent-rainbow 5. Auto rename tags 6. CSS Peek 7. HTML CSS Support 8. Live Server React Development

VS Code 초기화 및 재설치 VS code를 사용하면서 extention 을 여러개 설치해서 사용하다보면 어느순간 특정 기능들이 동작하지 않게 된다. 이를 해결해 보려고 구글링을 통해서 여러시도를 해보았지만 생각처럼 쉽게 문제가 해결되지 않는다. 그래서 문제가 발생했을때는 차라리 깨끗하게 지우고 다시 설치하는 편이 가장 쉬운 해결 방법이다. 1. 기존에 설치된 extension 목록 확인 이미 설치된 extensions 을 목록을 확인해서 꼭 필요한 것 나중에 다시 설치한다. 2. VS code 삭제하기 VS code 를 완전히 삭제하기 위해서는 extension 과 설정파일들까지 모두 지워주어야 한다. - extensions 삭제하기 사용자 계정 폴더에 있는 .vscode 폴더는 삭제해준다. c:\..

프로젝트 #1 - REACT 를 이용해서 Admin Dashboard - new product 이번에는 Create 버튼을 클릭하면 새로운 product 을 생성하는 페이지를 만든다. newProduct 생성을 위한 준비 newProduct 에 관련된 폴더 및 파일을 생성한다. 그리고 app.js 에 /newProduct 에 대한 route 정보를 변경한다. newProduct 생성하기 결과 화면

프로젝트 #1 - REACT 를 이용해서 Admin Dashboard - product 페이지 product 페이지에서는 product 에 대한 상세 정보를 보고 필요에 따라서 수정할수 있다. product 페이지 준비하기 product 폴더 및 파일을 생성한다. 기본 react functional component 를 만든다. app.js 파일에 product/{id} 에 대한 route 를 업데이트 해준다. 결과 화면 이제 준비 작업이 완료되었다. Product 상세 페이지 및 업데이트 결과화면 Product 페이지에서는 상단에는 상품에 대한 sales 및 제품 정보를 보여주고, 그 밑에 제품 업데이트 기능을 추가한다. TopLeft : product sales for 3months. 챠트를 그리기 ..

프로젝트 #1 - REACT 를 이용해서 Admin Dashboard - productList 페이지 ProductList 페이지 준비 productList 를 위한 폴더 및 파일 생성하고 기본 react fuctional component 를 생성한다. app.js 에서 product 를 위한 routes 를 설정해 준다. user 와 동일하게 productList, product, newProduct 를 만들어 주고 이번 포스팅에서는 ProductList를 구현한다. /products 링크로 들어같을때 다음과 같이 나오면 준비가 완료된 것이다. ProductList 데이터 테이블 만들기 userList 에 DataGrid 를 참고해서 products 테이블을 만들면 된다. UserList.jsx 와 ..

프로젝트 #1 - REACT 를 이용해서 Admin Dashboard - new user 새로운 사용자 등록을 위한 페이지 만들기 사용자 등록을 위한 폴더 및 페이지 생성한다. 이번에 새로운 페이지 생성과 같이 기본 react 컴포넌트를 만들고 css를 import 시킨다. 그리고 app.js 에서 새로운 url 에 대한 Route 를 설정해 준다. 결과 화면 여기까지 나오면 새로운 페이지에 대한 준비가 완료된 것이다. 등록에 필요한 사용자 정보를 입력할 수 있도록 추가한다. newUserForm에 flex를 적용한다. 화면의 크기를 조절해보면 아이템의 갯수가 크기에 따라서 조절되는 것을 확인할 수 있다. flex-wrap: wrap 으로 설정했기 때문에 브라우저 사이즈에 따라서 아이템배열이 달라진다. ..