Developer

리액트 React 설치방법 feat. VS Code

React란? React 리액트- 복잡한 사용자 인터페이스(UI)를 쉽게 구축하기 위해 페이스북에서 제작한 자바스크립트 기반의 라이브러리- 싱글 페이지 애플리케이션이나 모바일 애플리케이션 개발에 주로 사용된다- 특정 데이터에 변화가 생길 때 매번 변화를 주기 위한 코드를 작성하는 것이 아니라, 기존 코드를 없애고 다시 새롭게 랜더링 시스템 환경 설정 Windows PowerShell 설정 Window PowerShell > 관리자로 실행 set-ExecutionPolicy bypass명령어를 입력해 세팅하기 y세팅완료 VS Code에서 react 설치 새 terminal을 생성해 명령어 입력npm i -g yarn명령어를 입력해 상태 확인 yarn -v버전확인 yarn g..

Figma 피그마 기본 기능 사용 - 플러그인, 커뮤니티

플러그인 마우스 우클릭 > Plugins > Manage plugins... 다양한 플러그인을 다운로드 할 수 있고다운로드한 플러그인은 상단에 저장되어 바로 실행 가능 - fontawesome icons - manage plugins - unsplash - Iconfy, Meterial Design Icons - skew - html.to.design - Blush - Remove BG - Brandfetch - Font Scale 웹페이지, 웹상세 등에서 사용되는다양한 이모티콘 또는 버튼 무료 소스 원하는 아이콘을 키워드로 검색해 찾을 수 있다 처음 가져오는 경우 프레임이 잠겨 있기 때문에사용 시 이미지가 잘릴 수 있으므로그룹을 해제해 벡터 형태로 변환 후 사용해주어야 한다 c..

Figma 피그마 기본 기능 사용 및 예제 - 프레임, 컴포넌트 생성

작업 영역 생성 Frame F 단축키로 작업 영역 생성작업 영역은 반복 생성 가능 컴포넌트 생성 컴포넌트: 재사용하기 위한 하나의 단위 프레임 내에서 생성한 도형을 선택한 후오른쪽 다이아모양 아이콘을 눌러 component를 생성 도형을 클릭했을 때 테두리 색상이파란색에서 보라색으로 변경됨 왼쪽 메뉴바 Assets > Create in this file파일 내에서 해당 컴포넌트를 사용할 수 있도록 생성 생성된 컴포넌트를 선택해파일 내에서 동일한 이미지를 생성할 수 있다 생성된 이미지에 대해한번에(동시에) 색상 변경 등의 작업이 가능 특정 도형에 대해 마우스 우클릭 > detach instance 설정으로컴포넌트에서 해제할 수 있다 그룹핑 Grouping grouping을 통..

Figma 디자인/기획/개발 협업 툴 피그마 기본 사용법 + 단축키

피그마 시작 피그마 사이트 접속 또는 앱 설치https://www.figma.com/ Figma: The Collaborative Interface Design ToolFigma is the leading collaborative design platform for building meaningful products. Design, prototype, and build products faster—while gathering feedback all in one place.www.figma.com 구글로 로그인 후 즉시 사용 가능일정 부분 유료로 사용 가능하며, 일부는 유로 툴로 사용 가능 피그마 기본 툴 설명 왼쪽: 메뉴 바중앙: workspace로 작업 영역draft > + 버튼으로 메뉴 선택 ..