10주 2일차 - 피그마

10주 2일차 - 피그마

1. 배운 것

• 피그마로 프로토타입 제작

2. 내용 정리

• overflow된 항목은 프레임으로 묶여 있어야 prototype 탭에서 효과 적용 가능. → 우클릭 해서 frame selection.
• 프레임 크기 조정 시 내부 요소가 fixed 되어 있어야 내부 요소가 움직이지 않음. → 좌측의 layers 탭에서 해당 프레임 안의 요소들 선택 후 우측 design 탭에서 constraints 항목에서 고정 방향 지정. 예제는 좌측, 상단 2개 방향 지정.
• 캐러셀 카드 아이템 스크롤 효과 개선을 위해:
  1. 사각형 도형을 그린다.
  2. 도형을 해당 프레임 안에 넣고 우클릭: send to back 하여 한 레이어 내린다.
  3. 도형의 배경색을 Design 탭에서 기존 화면의 색과 일치하게 흰색으로 바꿔준다.
• 컴포넌트 생성
  • 묶고싶은 요소를 선택하여 상단 마름모 버튼 클릭
• 인스턴스 생성
  1. 좌측 상단 Assets 탭에서 가져오거나
  2. 컴포넌트를 opt + shift + 클릭하여 드래그

유데미 【한글자막】 React 완벽 가이드 with Redux, Next.js, TypeScript 강의 내용을 바탕으로 공부 내용을 정리합니다.

1. Conditional & Dynamic Styles

인풋 필드에 입력이 있다면 해당 입력값을 처리해주고, 인풋 필드가 공백인 상태로 입력 버튼을 누를 경우 사용자에게 내용을 입력하라는 알림을 표시하도록 해주기 위해 동적으로 스타일링이 필요하다.

• 동적 스타일링 만들기 과정
  1. 입력 값이 유효한지 여부를 저장하는 State 생성. (ex: Boolean 값)
  2. 이벤트 핸들러에서 조건문으로 값의 유효 여부에 따라 state 변경. setIsValid(false)
  3. 태그에 클래스명 부여 시 템플릿 리터럴 내 표현식 사용 → 삼항연산자로 클래스 추가 또는 공백으로 동적 스타일링

하지만 인라인 스타일링의 한계로 인해, 컴포넌트 스타일링은 후술하는 방식으로 하는게 가장 적절한 방법이다.

2. Styled Components

• 인라인 스타일링은 다른 css 스타일을 오버라이딩하여 최우선 적용되고 관심사 분리 원칙에도 맞지 않으므로 지양할 것.
• 파일마다 개별 css 파일에 css 스타일링 하더라도 만약 클래스명이 중복되면 css가 겹친다. 따라서 styled components 패키지나 module css 두가지 방법으로 스타일링 하는게 좋다.

2.1 Styled Components

스타일링을 태그드 템플릿 내에서 작성한다.

• 사용하기
  1. 패키지 설치
  2. import 해오기
  3. 태그드 템플릿 리터럴 문법으로 styled 객체의 메서드에 접근. 이 때 메서드명은 html 태그명과 동일함.

// 1. 패키지 설치
npm i --save styled-components;

// 2. import 해오기
import styled from 'styled-components';

// 3. 태그드 템플릿
const Button = styled.button``;
// styled 는 styled-components 에서 import한 객체이다.
// button은 styled 객체의 메서드이다.

참고 자료

• 유데미 【한글자막】 React 완벽 가이드 with Redux, Next.js, TypeScript 강의

3. 리뷰

3.1 좋았던 점

• 피그마 재밌었다.

3.2 아쉬웠던 점

• 스타일드 컴포넌트 공부할 시간에 css module을 공부하는게 나았겠다. 아님 알고리즘을 풀던지.
• 백준 1764번 실패

3.3 notes

css구현도 피그마로 ui짜는것처럼 쉽게 할 수 있는 날도 오겠지.