AtomicDesign 3분 안에 Nuxt.js(+TailwindCSS) + Storybook으로 Atomic Design하는 환경 만들기 이것은 Nuxt.js + Storybook의 환경을 만들고 싶지만 여러 가지 귀찮은 사람을 위해 만든 히나가타입니다. 우선 샘플용으로 Button 만 작성하고 있습니다. Git for Windows 또는 Terminal을 시작하고 작업 디렉토리에서 다음 명령을 순서대로 입력합니다. 마지막 명령의 실행이 끝나면 마음대로 브라우저가 기동할 것입니다만, localhost:3003 하지만 열 수 있... AtomicDesignVue.jsnuxt.jstailwindcssstorybook Atomic Design 재검토(Button 구성 요소는 Atom or Molecule?) 앞의 기사에서 다루고 있는 Button 컴퍼넌트의 구현은 이와 같이 되어 있습니다. 또, 이 Button 컴퍼넌트를 사용해 구현한 단순한 직사각형의 버튼을, Molecule로 하는 것은 위화감이 있는 것은 아닐까요? 이 핵심 기능을 가진 Button 클래스는 로직 부분을 담당하기 때문에 UI 구성 요소의 Atoms에 넣는 것은 위화감이있었습니다. 이 기능을 사용하려면 버튼의 배경색과 같은 것... AtomicDesign자바스크립트React우이 Vue로 양식 구성 요소에 맞서기 어떤 웹 서비스에도 "양식"이 필요하다고 생각합니다. 그 밖에도 마케팅의 시책으로, LP로부터의 비행처로서 회원 획득을 위한 폼을 여러가지 만들 수도 있을지도 모릅니다. 「이것, 폼을 컴퍼넌트화해 버리면 편해질까요… 」 그렇게 생각해 버리면, 이제 엔지니어의 성으로서 실행하지 않고 있을 수 없습니다. 우선은, 아래와 같은 간단한 문의 폼의 컴퍼넌트화를 생각해 갑니다. 프레임워크는 경량 Vue... AtomicDesignVue.js자바스크립트ゔ그림x초보자 Atomic Design에 대해 살펴 보았습니다. React를 공부하고 3개월 정도 지나지만 책을 읽고 「Atomic Design」라고 하는 디자인 시스템이라는 개념이 나오고 「뭐야 이것!?」라고 생각해 조사해 보았습니다. React와 Atomic Design의 궁합이 꽤 좋은 것 같다. Atomic Design은 다음 5가지 구조로 페이지를 나누어 각각의 역할을 명확히 하고 재사용 가능한 컴포넌트를 만들어 가는 것입니다. Atoms (원자... React자바스크립트디자인AtomicDesign /UX 디자이너이지만 React를 사용하여 Framer X에서 프로토 타입을 만들고 싶습니다. 주식회사 어드벤처로, UI/UX 디자이너와 프런트 엔드 주위의 개발을 하고 있다 라고 합니다. 라는 자사 서비스 사이트를 주로 만들고 있습니다. React 이외의 사용법 메인입니다. 여기↓ 브라우저가 아니라 Framer X로 움직이고 있습니다! 시작하기 React 코드로 컴포넌트(Button) 만들기 을 참조하십시오. 톱 페이지 이미지를 동영상 퍼가기 (UI소재나 여러가지 입수할 수 있습니다... AtomicDesignReactFramerX프로토타입우이 컴포넌트 지향으로 react-redux로 화면을 만드는 아이디어 컴퍼넌트 지향에 대해, 알았던 것 같은 신경이 쓰여 실제로 만들어 보면 여러가지 엉망이 되어 버렸지만, 다시 생각을 정리하면 조금 잘 가게 되었다. 어쨌든, 성분으로 만든다. 예를 들면 이런 느낌의 화면을 만드는 것을 생각한다. 화면에서 사용할 컴포넌트를 먼저 열거한다. 어떤 props가 있으면 좋은가를 생각하면서 구현한다. 괄호 안에는 필요한 것 같은 props와 처리 Atoms나 Mole... AtomicDesign자바스크립트Reactredux React 폴더 구조, 설계에 대한 고민 우리가 React 폴더 구조를 고민해야하는 이유 하지만, 유명한 개발자들의 폴더 구조를 보면, 저마다 다른 구조를 이루고 있는 것을 보아 React를 이용한 개발에서 우리가 무조건 선택해야하는 길은 없어 보인다. 실제로 어떠한 폴더 구조를 취하는지는 React의 성능에 영향을 끼치는 사항은 아니기 때문이다. 내 폴더 구조가 팀의 성격과 프로젝트의 목적에 따라 효율성과 생산성에 방해되는 형식일... structureAtomicDesignReactAtomicDesign 약자 전략의 Atomic Design 및 테스트 선정[React+TypeScript] 이러한 품질, 유지보수성과 설치 속도를 균형 있게 하기 위해 저는 Atomic Design을 구성 요소의 디자인 방침으로 채택하고 효율을 고려하는 동시에 유한하게 자동 테스트를 채택하기로 결정했습니다. 이것은 Organisms, Molecules, Atoms 등 구성 요소를 실제 서비스와 같은 층으로 배치하는 데 사용된다.이 층의 목적은 구성 요소가 페이지에 정확하게 배치되었는지 확인하는 것... ReactTypeScriptAtomicDesign Vue.js에서 함수형 구성 요소를 사용하면 따라서 이번 이야기는 이 서비스 개발의 일부분에서 Atomic Design과 함수형 구성 요소를 사용한 것이다. 최소 요소(Atoms)로 만들기 Atoms, Molecules를 결합하여 화면을 구성하는 하나의 요소(Organisms) 만들기 이번에 Atomic 디자인에서 조립된 구성 요소 중 일부 Atoms를 함수형 구성 요소로 조립해 보았다. ※Vue.js의 공식 참고에서 함수형 구성 요소... 함수형 구성 요소Vue.jsAtomicDesign 건축가가 생각하는 길 - Atomic Design 드디어 까지의 나는 조립품 개발을 조금씩 추진했다. 이럴 때 큰 기능이 있는 페이지 만들기 만약 프로그램의 전망이 나빠졌다고 생각한다면, 분할할 수 있는 곳을 내놓아라 이런 순서로 기능을 만들었어요. 이렇게 되면 목록 구성은 나도 모르는 상태가 된다. 디렉토리 구성 나도,sub 디렉터리가 뭐야...의 상태.이렇게 되면 멀티플레이어 개발 등이 꿈의 또 다른 꿈이 된다. React 전용은 아니지... ReactAtomicDesign React에서 여러 항목의 공통 구성 요소를 처리하는 방법 [create-react-ap] 리액트에 Atomic Design 등을 적용해 재활용성을 추가하면서 구성 요소를 만들고, 여러 프로젝트에서 공통의 구성 요소를 사용하려는 경우도 있다.(e.g.User用와 Admin用는 다른 프로젝트로 제작, 공동 구성 요소 처리 등) 프로젝트를 시작하는 경우 기본 설정이 어렵기 때문에 거스를 수 없는 조작yarn eject(ornpm run eject을 통해 수동으로 설정합니다. creat... Reactcreate-react-appAtomicDesign 어떻게 해야만 디자인의 보수성을 높일 수 있습니까?Atomic Design으로 UI 설계 이런 상황을 열기 위해 스케치에서 아토믹 디자인(Atomic Design)을 가져와 보수성이 높은 디자인을 시도했기 때문에 적었다. Atomic Design은 Atoms(원자), Molecules(분자), Organisms(유기체), Templates(템플릿), Pages(페이지) 5개 요소로 디자인한 디자인 기법이다. Atoms는 디자인의 최소 단위이고 Molecules는 Atoms의 조합... UI 설계sketchAtomicDesign Atomic Design × Sketch Library를 사용하여 설계 파일 작성 저는 엔지니어로 평소 업무 중에 Atomic Design을 사용하여 설계 문서 제작을 추진합니다. 10월에 발매된 스케치의 새로운 기능인 스케치 리브레리는 아토믹 디자인 관리에 상당히 편리해졌기 때문에 이 일을 쓰려고 합니다. Atomic Design은 부품 및 어셈블리 단위로 정의된 설계 기법입니다. Atoms 아토믹 디자인 적용을 통해 설계·개발에서 구성 요소 등의 장점을 반복적으로 활용... sketchAtomicDesign Vue.Jst와 Vuex에 들어간 지 3일밖에 안 됐지만 구성 요소의 사용법을 적어 놓을게요. ' '11일째 보도다. ※ 졸문이지만 자신의 생각을 정리한 노트입니다. Vue.js 소개 사용자 인터페이스의 줄별 프레임워크 구축(공식에서 발췌) Vuex란 무엇입니까? Vue.js 응용 프로그램의 상태 관리 모드 + 프로그램 라이브러리에 사용 가능 (공식에서 발췌) 상태 관리 사실은 베입니다.js만 있으면 상태 관리를 할 수 있습니다. 다만, 구성 요소와 의존성이 강하고 응용 프로그램의 규... VuexVue.jsAtomicDesign
3분 안에 Nuxt.js(+TailwindCSS) + Storybook으로 Atomic Design하는 환경 만들기 이것은 Nuxt.js + Storybook의 환경을 만들고 싶지만 여러 가지 귀찮은 사람을 위해 만든 히나가타입니다. 우선 샘플용으로 Button 만 작성하고 있습니다. Git for Windows 또는 Terminal을 시작하고 작업 디렉토리에서 다음 명령을 순서대로 입력합니다. 마지막 명령의 실행이 끝나면 마음대로 브라우저가 기동할 것입니다만, localhost:3003 하지만 열 수 있... AtomicDesignVue.jsnuxt.jstailwindcssstorybook Atomic Design 재검토(Button 구성 요소는 Atom or Molecule?) 앞의 기사에서 다루고 있는 Button 컴퍼넌트의 구현은 이와 같이 되어 있습니다. 또, 이 Button 컴퍼넌트를 사용해 구현한 단순한 직사각형의 버튼을, Molecule로 하는 것은 위화감이 있는 것은 아닐까요? 이 핵심 기능을 가진 Button 클래스는 로직 부분을 담당하기 때문에 UI 구성 요소의 Atoms에 넣는 것은 위화감이있었습니다. 이 기능을 사용하려면 버튼의 배경색과 같은 것... AtomicDesign자바스크립트React우이 Vue로 양식 구성 요소에 맞서기 어떤 웹 서비스에도 "양식"이 필요하다고 생각합니다. 그 밖에도 마케팅의 시책으로, LP로부터의 비행처로서 회원 획득을 위한 폼을 여러가지 만들 수도 있을지도 모릅니다. 「이것, 폼을 컴퍼넌트화해 버리면 편해질까요… 」 그렇게 생각해 버리면, 이제 엔지니어의 성으로서 실행하지 않고 있을 수 없습니다. 우선은, 아래와 같은 간단한 문의 폼의 컴퍼넌트화를 생각해 갑니다. 프레임워크는 경량 Vue... AtomicDesignVue.js자바스크립트ゔ그림x초보자 Atomic Design에 대해 살펴 보았습니다. React를 공부하고 3개월 정도 지나지만 책을 읽고 「Atomic Design」라고 하는 디자인 시스템이라는 개념이 나오고 「뭐야 이것!?」라고 생각해 조사해 보았습니다. React와 Atomic Design의 궁합이 꽤 좋은 것 같다. Atomic Design은 다음 5가지 구조로 페이지를 나누어 각각의 역할을 명확히 하고 재사용 가능한 컴포넌트를 만들어 가는 것입니다. Atoms (원자... React자바스크립트디자인AtomicDesign /UX 디자이너이지만 React를 사용하여 Framer X에서 프로토 타입을 만들고 싶습니다. 주식회사 어드벤처로, UI/UX 디자이너와 프런트 엔드 주위의 개발을 하고 있다 라고 합니다. 라는 자사 서비스 사이트를 주로 만들고 있습니다. React 이외의 사용법 메인입니다. 여기↓ 브라우저가 아니라 Framer X로 움직이고 있습니다! 시작하기 React 코드로 컴포넌트(Button) 만들기 을 참조하십시오. 톱 페이지 이미지를 동영상 퍼가기 (UI소재나 여러가지 입수할 수 있습니다... AtomicDesignReactFramerX프로토타입우이 컴포넌트 지향으로 react-redux로 화면을 만드는 아이디어 컴퍼넌트 지향에 대해, 알았던 것 같은 신경이 쓰여 실제로 만들어 보면 여러가지 엉망이 되어 버렸지만, 다시 생각을 정리하면 조금 잘 가게 되었다. 어쨌든, 성분으로 만든다. 예를 들면 이런 느낌의 화면을 만드는 것을 생각한다. 화면에서 사용할 컴포넌트를 먼저 열거한다. 어떤 props가 있으면 좋은가를 생각하면서 구현한다. 괄호 안에는 필요한 것 같은 props와 처리 Atoms나 Mole... AtomicDesign자바스크립트Reactredux React 폴더 구조, 설계에 대한 고민 우리가 React 폴더 구조를 고민해야하는 이유 하지만, 유명한 개발자들의 폴더 구조를 보면, 저마다 다른 구조를 이루고 있는 것을 보아 React를 이용한 개발에서 우리가 무조건 선택해야하는 길은 없어 보인다. 실제로 어떠한 폴더 구조를 취하는지는 React의 성능에 영향을 끼치는 사항은 아니기 때문이다. 내 폴더 구조가 팀의 성격과 프로젝트의 목적에 따라 효율성과 생산성에 방해되는 형식일... structureAtomicDesignReactAtomicDesign 약자 전략의 Atomic Design 및 테스트 선정[React+TypeScript] 이러한 품질, 유지보수성과 설치 속도를 균형 있게 하기 위해 저는 Atomic Design을 구성 요소의 디자인 방침으로 채택하고 효율을 고려하는 동시에 유한하게 자동 테스트를 채택하기로 결정했습니다. 이것은 Organisms, Molecules, Atoms 등 구성 요소를 실제 서비스와 같은 층으로 배치하는 데 사용된다.이 층의 목적은 구성 요소가 페이지에 정확하게 배치되었는지 확인하는 것... ReactTypeScriptAtomicDesign Vue.js에서 함수형 구성 요소를 사용하면 따라서 이번 이야기는 이 서비스 개발의 일부분에서 Atomic Design과 함수형 구성 요소를 사용한 것이다. 최소 요소(Atoms)로 만들기 Atoms, Molecules를 결합하여 화면을 구성하는 하나의 요소(Organisms) 만들기 이번에 Atomic 디자인에서 조립된 구성 요소 중 일부 Atoms를 함수형 구성 요소로 조립해 보았다. ※Vue.js의 공식 참고에서 함수형 구성 요소... 함수형 구성 요소Vue.jsAtomicDesign 건축가가 생각하는 길 - Atomic Design 드디어 까지의 나는 조립품 개발을 조금씩 추진했다. 이럴 때 큰 기능이 있는 페이지 만들기 만약 프로그램의 전망이 나빠졌다고 생각한다면, 분할할 수 있는 곳을 내놓아라 이런 순서로 기능을 만들었어요. 이렇게 되면 목록 구성은 나도 모르는 상태가 된다. 디렉토리 구성 나도,sub 디렉터리가 뭐야...의 상태.이렇게 되면 멀티플레이어 개발 등이 꿈의 또 다른 꿈이 된다. React 전용은 아니지... ReactAtomicDesign React에서 여러 항목의 공통 구성 요소를 처리하는 방법 [create-react-ap] 리액트에 Atomic Design 등을 적용해 재활용성을 추가하면서 구성 요소를 만들고, 여러 프로젝트에서 공통의 구성 요소를 사용하려는 경우도 있다.(e.g.User用와 Admin用는 다른 프로젝트로 제작, 공동 구성 요소 처리 등) 프로젝트를 시작하는 경우 기본 설정이 어렵기 때문에 거스를 수 없는 조작yarn eject(ornpm run eject을 통해 수동으로 설정합니다. creat... Reactcreate-react-appAtomicDesign 어떻게 해야만 디자인의 보수성을 높일 수 있습니까?Atomic Design으로 UI 설계 이런 상황을 열기 위해 스케치에서 아토믹 디자인(Atomic Design)을 가져와 보수성이 높은 디자인을 시도했기 때문에 적었다. Atomic Design은 Atoms(원자), Molecules(분자), Organisms(유기체), Templates(템플릿), Pages(페이지) 5개 요소로 디자인한 디자인 기법이다. Atoms는 디자인의 최소 단위이고 Molecules는 Atoms의 조합... UI 설계sketchAtomicDesign Atomic Design × Sketch Library를 사용하여 설계 파일 작성 저는 엔지니어로 평소 업무 중에 Atomic Design을 사용하여 설계 문서 제작을 추진합니다. 10월에 발매된 스케치의 새로운 기능인 스케치 리브레리는 아토믹 디자인 관리에 상당히 편리해졌기 때문에 이 일을 쓰려고 합니다. Atomic Design은 부품 및 어셈블리 단위로 정의된 설계 기법입니다. Atoms 아토믹 디자인 적용을 통해 설계·개발에서 구성 요소 등의 장점을 반복적으로 활용... sketchAtomicDesign Vue.Jst와 Vuex에 들어간 지 3일밖에 안 됐지만 구성 요소의 사용법을 적어 놓을게요. ' '11일째 보도다. ※ 졸문이지만 자신의 생각을 정리한 노트입니다. Vue.js 소개 사용자 인터페이스의 줄별 프레임워크 구축(공식에서 발췌) Vuex란 무엇입니까? Vue.js 응용 프로그램의 상태 관리 모드 + 프로그램 라이브러리에 사용 가능 (공식에서 발췌) 상태 관리 사실은 베입니다.js만 있으면 상태 관리를 할 수 있습니다. 다만, 구성 요소와 의존성이 강하고 응용 프로그램의 규... VuexVue.jsAtomicDesign