본문 바로가기

분류 전체보기

 (61)
[유용한 App&Plugin] Fima Plugin [ 이미지 지원 ] ✨→ Unplash [ Width / Height 소숫점 없애기 ] ✨→ pixl Perfect [ Neon , 뉴모피즘 Text 효과 ] ✨→ Morph [ 이미지 펜툴 자동화 ⇒ 벡터화 ] ✨→ Image Tracer [ 배경 누끼 / 깔끔하게 따지는 선 ] ✨→ Icons8 background Remover [ 디자인 화면 설계 설명서 / 컴포넌트 가이드 라인 생성 ] ✨→ EightShapes Specs [ 텍스트 일괄 수정 ] ✨→ Text Edit [ 원하는 사이트 편집가능한 Figma Design 으로 추출 ] ✨→ html.to.design [ Text 구부리기 ]→ Arc [ 편집이 바로 가능한 UI KIT 모음 ]→ UIHUT [ 프레임 이름 일괄 수정 ]→ Rena..
[ React ] 단축키 플러그인 , Component 설명 → ES7+ React/Redux/React-Native snippets [ 함수형 컴포넌트 생성 단축키 ]1. rfce (React Funtion Component)→ 표준 함수 선언을 사용하여 컴포넌트를 정의한다.→ 함수 내부에서 this 를 사용할 수 있으므로, 클래스 컴포넌트와 유사한 방식으로 자체 상태(state)를 관리할 수 있다.→ 더 복잡한 컴포넌트나 생명주기 메서드가 필요한 경우, 함수 컴포넌트에 추가적인 로직을 더 쉽게 통합할 수 있다.import React from 'react' function ToDoList() { return ( ToDoList ) } export default ToDoList 2. rafce(React Arrow Function Component)→ 화살표 함수..
[ React ] JSX(JavaScript Xml) JSX(JavaScript XML) 은 React 에서 사용되는 JavaScript 의 확장문법이다.이는 UI를 표현하기 위한 React 요소를 생성하는데 도움이 되는 간편하고 가독성이 높은 문법을 제공한다.JSX 는 Javascript 코드 안에서 XML 또는 HTML 과 유사한 구문을 사용하여 작성된다.XML(Extensible Markup Language) const element = Hello, world!위의 예제에서 과 사이에 있는 부분이 JSX 이다.이것은 React 요소를 나타내며, 이는 React 가 가상 DOM을 사용하여 실제 DOM 업데이트를 최적화할 수 있도록 한다. JSX 특징과 이점가독성 향상: XML과 유사한 구문을 사용하므로 코드가 간결하고 가독성이 높아진다.표현력 향상: J..
[Knowledge] XML(Extensible Markup Language) 데이터를 저장하고 전송하기 위한 마크업 언어.XML 은 사용자가 자체적인 태그를 정의하여 데이터를 구조화 할 수 있는 유연한 형식을 제공한다.주로 데이터 구조와 의미를 표현 하는 데 사용되며, 웹 서비스에서 데이터를 교환하는데 널리 사용된다. XML 문서는 태그,속성,텍스트 데이터로 구성되어 있다.각 태그는 열린태그 와 닫힌 태그의 쌍으로 이루어져 있다 태그 사이에는 텍스트 데이터나 하위 태그가 위치할 수 있다.속성은 태그에 추가 정보를 제공한다. 30 New York NY 태그에는 속성으로 first와 last가 있고, 태그에는 또 다른 하위 태그들이 포함되어 있다. → XML 은 다양한 분야에서 데이터 교환과 저장에 사용되며, 특히 웹 서비스에서는 데이터를 표준화된 형식으로 교환하기 위해 XML 이 ..
[ React Native ]Tag React Native 에서는 JSX 를 사용하지만, 그 JSX 는 HTML 이 아니라 React 컴포넌트를 나타내는 것 이라고 생각하면 된다. JSX 사용되는 태그는 React Native 에서 해당하는 네이티브 컴포넌트로 변환되어 실행된다.JSX(JavaScript Xml) 간단한 예로,→ 대신에 React Native에서는 를 사용해 레이아웃을 구성한다.→ 대신에 를 사용하여 텍스트를 표시한다.→ 대신에 를 사용하여 텍스트를 표시한다.→ 이미지를 표시하려면 를 사용한다.→ 스크롤을 구현하려면 를 사용한다. : 리스트 데이터를 렌더링하는데 사용되는 컴포넌트 중 하나이다유저가 화면의 끝에 도달했을 때 새로운 데이터를 호출(fetch) 하여 비효율을 해결할 수 있게 한다.효율적인 렌더링 : 화면에 보이는..
[ React Native ] Install 1. Project 생성npx create-expo-app AwesomeProject cd AwesomeProject yarn add expo // expo 있다면 생략 npx expo start 2. app store 에 가서 Expo Go 앱을 다운로드 받는다.→ 터미널에 출력되는 QR 코드 실행 실행이 안된다면 추가 설치1. Expo install npm install -g expo-cli 2. Watchman intallbrew update brew install watchman Uploaded by N2T
[ Figma ] 레이어 블러 배경 만들기 1. 맘에 드는 색상 넣기 2. 모든 원 선택 3. Effect → LayerBlur → 200 Uploaded by N2T
[ Figma ] Dark Mode & Light Mode 자동으로 바꾸기 1. Local variables 선택 2. Create variable - color 선택 3. Value 에 mode 설정해주고 , Color 세팅 해주기 4. 디자인 요소에서 세팅한 Color 로 지정해주기 5. 전체 Frame 선택 → Layer → 모드 변경 Uploaded by N2T

티스토리툴바