hook 을 배우기 위해서 npx create-react-app hooks-tuotrial 을 해주세요! 1. useState useState는 가장 기본적인 Hook 으로서, 함수형 컴포넌트에서도 가변적인 상태를 지니고 있을 수 있게 해줍니다. 만약에 함수형 컴포넌트에서 상태를 관리해야 되는 일이 발생한다면 이 Hook 을 사용하시면 됩니다. 한번 이 기능을 사용해서 숫자 카운터를 구현해보겠습니다. src 디렉터리에 Counter.js 파일을 생성하고 다음 코드를 입력해보세요 Counter.js import React, { useState } from 'react'; const Counter = () => { const [value, setValue] = useState(0); return ( 현재 카..

4차 산업 혁명과 UX의 상관관계 Industry 1.0 - 기술의 혁신과 새로운 제조 공정 - 대량 생산 - 인간의 노동력 대체 Industry 2.0 - 석유를 동력으로 활용 - 전기가 새로운 동력 - 컨베이어 벨트 - 전기 장치를 이용한 엔터테인먼트 제품들이 개발 Industry 3.0 - 인터넷 커뮤니케이션 기술과 재생 가능한 에너지의 결합 - 수평적으로 이루는 수단 Industry 4.0: Product as a Service - 모든 분야에 영향을 미치는 다양한 신기술 - 초스피드, 초자동화, 초연결 UX 디자인은 사용자 관점에서 디자이너가 해야 할 일이 무궁무진한 분야 ✔ 인간을 이해하고 공감할 것 ✔ 문제를 파악하고 관찰할 것 ✔ 윤리적인 책임을 가질 것

인터렉션 법칙 1. 힉의 법칙 - 정보가 증가할수록 우리 뇌는 알아서 선택지를 categorizing 하거나 grouping하는 방식으로 사고 - 그렇기 때문에 뇌의 인지 process 처럼 동일한 인터랙션을 적용하면 빠른 선택이 가능 2. 피츠의 법칙 - 인간의 행동에 대해 속도와 정확성의 관계를 설명하는 기본적인 법칙 - 목표물의 크기가 작을수록 목표에 도달하는데 속도와 정확도가 떨어지므로 적당한 크기의 버튼을 제공해야 함 3. 마법의 숫자 7 - 1956년 심리학자 George Miller가 소개한 청킹 이론 - 적은 정보로 쉬운 판단을 유도해야 함 4. 복잡성 보존의 법칙 - 사용자가 느끼는 편리함 -> 엔지니어와 디자이너의 공수 - 훌륭한 UX는 그 복잡성을 시스템이 맡지만 불편한 UX는 유저에..

User Interface - 사용자와 기술이 만나는 인터페이스이자 접점 - 사용자가 시스템을 입력하면 출력 장치를 통한 정보 제공이 이뤄지는 디자인 User Interface Role ✔ 보편성 - 다양한 사용자가 사용할 수 있도록 디자인 한다. ✔ 사용성 - 좋은 사용성은 사용자 인터페이스의 주된 목적이다. UI 디자인 원칙 1. 일관성을 유지한다. - 일관성이 기반된 제품은 신뢰를 갖고 사용할 수 있음 - 사용자가 디지털 환경에 적응하는데 도움이 됨 2. 보편적인 사용성을 추구한다. - 기술 성숙도 여부에 상관 없이 용이한 학습이 가능하도록 - 사용자들이 숙련된 사용자가 될 수 있도록 서포트하는 디자인 3. 유용한 피드백을 제공한다. - 현실에서 느끼는 피드백처럼 디지털 환경에서도 액션에 대한 피드..

Digital 시대에서 UX의 역할 : 기술이 일상에 정착하기 까지 기술과 사용자 간 거리를 좁히는 것 UX 역사 1. 테일러리즘 - 프레드릭 윈슬로 테일러가 창시한 과학적 관리법 - 기존의 비효율적인 생산 방식 -> 표준 작업방식으로 경제적 효율성, 특히 노동생산성 증진(대량생산) 2. 도요타의 생산 방식 - 어느 누구라도 노동하기 쉬우면서 일하는 보람과 자아실현을 느낄 수 있는 공장 지향 - 적시 생산 방식과 자동화 도입 3. 인지과학 - 1940년대 인간을 연구하는 철학자, 심리학자, 인류학자, 컴퓨터과학자, 생물학자등 다양한 분야의 학자들의 인공지능 연구가 시작되며 만들어진 융합 학문 - 1960년대까지 컴퓨터를 주로 '문제 해결형 기계' 로 생각함 4. 제록스와 HCI - 최초의 GUI와 마우스..

Hello World!>※ node, vscode 사용이후 콘솔창을 열어서 node main.js를 해주면 콘솔창에 Hello World가 출력되는것을 보실수 있습니다. index.html 에 기본 코드 입력후 title태그 밑에 main.js를 연결해주는 코드 작성 이후 Live server extension 을 사용해 index.html 을 열어 console을 보면 Hello World!가 찍혀져 있는것을 볼수 있습니다.parsing HTML -> blocked -> parsing HTML fetching js, executing js 단점 : 사용자가 웹 사이트를 보는데 많은 시간이 걸린다 parsing HTML -> fetching js -> executing par..