모범 사례

머티리얼의 종류

1. blur 흐림

2. vibrancy 생동감

3. blending mode 혼합 모드 이를 조합하여 앱간 화면 전환에 부드러운 전환을 줌

4. 의미론적 의미에 따라 시스템 머티리얼 효과를 선택

5. 머티리얼 적용 시 적절한 대비감을 사용하여야 함

6. 흐림이나 생동감효과와 같이 이용할 머티리얼 사용 시 대비와 시각적 분리감을 위해서 적당한 두께의 콘텐츠나 고려하기.

7. 반투명도는 시각적 미리알림 효과로 진행을 유지하는 느낌을 줌

플랫폼 고려사항

iOS, iPadOS

표준 시스템 색상은 생동감 있는 버전에서 사용할 수 없지만 iOS 및 iPadOS는 각 머티리얼에 맞게 특별히 디자인된 각 레이블, 채우기 및 분리자의 생동감 있는 색상을 정의

채우기는 4차색까지 있으나 3차색까지만 사용 됨(4차 레이블은 대비가 적어서 사용하지 않음)

분리선은 1개의 종류만 사용 됨

macOS

윈도우, 메뉴, 팝오버, 사이드바, 제목 막대 등의 기본 스타일에 맞게 머티리얼을 선택할 수 있음

1. 생동감 설정: 사용자가 선택할 수 있는 옵션으로, 생동감이 활성화되면 콘텐츠가 더 선명하게 보임
2. 배경 혼합 모드 (Blending Modes) - 윈도우 뒤 혼합 (Behind-Window Blending)
   • 정의: 윈도우 뒤에 있는 콘텐츠를 표시해주며, 앱이나 게임의 진행 상태를 유지
   • 사용 예시: 메뉴, 시트, 사이드바 등에서 자동으로 사용됩니다.
3. 배경 혼합 모드 (Blending Modes) - 윈도우 내 혼합 (In-Window Blending)
   • 정의: 윈도우 내의 콘텐츠가 다른 윈도우 구성요소를 통해 표시
   • 사용 예시: 도구 막대가 윈도우 콘텐츠와 자연스럽게 혼합되며, 도구 막대 아래에서 스크롤될 때 연속성을 느낄 수 있음

포용성을 고려한 디자인

직관적인 경험을 주는 디자인이 좋은 디자인이므로 이를 위해서 사람의 목표와 관점을 조사하여 공감할 필요가 있다.

여러 관점으로 검토할 때 중요한 것 포용성 =/= 불쾌감을 주지 않는 것 불쾌감을 주지 않는 것에 관점을 두지 않고 포용성에 관점을 두면 불쾌감도 방지할 수 있음

포용성 있는 표현

1. 학술적인 어조를 조심하고 직접적으로 작성
2. 사람을 언급할 때, 여러분 또는 당신을 사용하기
   • 우리 : 소프트웨어 또는 회사를 지칭, 너무 개인적으로 보일 수 있음
   • 사용자, 플레이어 : 거리감 또는 환영받지 못하는 느낌을 줌
3. 전문적이거나 기술적 용어는 꼭 용어를 설명하도록
4. 구어체 표현은 일반적인 표현으로 바꾸기
5. 유머는 주관적이므로 신중하게 쓸 필요가 있음

접근가능성 유지하기

1. 명확한 인터페이스 적용(플랫폼에 따라 디자인을 변경하도록)
2. 온보딩을 통해서 설명을 포함하기

성 정체성

1. 불필요한 성별표기를 피하기
2. 꼭 필요한 경우 논바이너리, 자발적 신원 규정, 명시 거부등의 옵션제공

사람 및 세팅

1. 사람을 나타낼 때 다양한 인종, 유형, 나이 등을 표현하기

고정관념 피하기

1. 평범한 질문도 누군가 경험하지 못할 수 있다는 상황을 고려하기

접근성

1. 장애를 가진 사람을 제외하는 이미지와 표현 삼가기
2. 장애를 인정하고 장애가 없는 사람을 정상, 건강, 일반 으로 표현하지 않기
3. 모든 사람들이 사용할 수 있도록 간결성과 인식용이성을 우선시하기

언어

1. 현지화를 위해 번역 텍스트와 리소스 제공
2. 문화를 고려한 평이한 표현 사용하기
3. 각 국가에서의 색상의 의미 고려하기

포용성이 접근성과 관련이 있는줄 알았는데 접근성만 고려하기엔 포용성이 훨씬 더 큰 개념이였다. 디자인은 사람을 공감하는 자세가 필요하다는 것을 한 번 더 인식한다.

적응성

모든 앱과 기기는 시스템 컨텍스트가 변경 될 경우 조정이 필요함 SwiftUI 또는 자동 레이아웃을 사용하면 동적으로 조정되는 것을 확인할 수 있음 일반적인 기기 및 시스템 변형의 종류

화면크기, 해상도, 색상 공간 기기방향 다이나믹 아일랜드 및 카메라 제어기와 같은 시스템 기능 iPad의 외장 디스플레이 지원, 디스플레이 확대/축소 및 멀티태스킹 모드 다이나믹 타입 텍스트 크기변경 왼쪽/오른쪽으로 레이아웃 방향 변경 날짜/시간/숫자/형식/서체변경 등 지역기반 다국어

1. 안정영역, 여백 안내선을 활용하여 레아이웃 디자인
2. 텍스트 크기 변경에 대비
3. 가장 큰 레이아웃과 작은 레이아웃을 먼저 테스트하고 현지화 작업도 하기
4. 필요한 경우, 아트워크의 크기도 조정

시각적 계층

1. 상단에서 하단으로, 중요도에 따라서 배치
2. 중요한 정보에 충분한 공간을 주기
3. 정보를 시각적으로 그룹화하고 필요한 경우 영역을 분리
4. 정렬과 들여쓰기를 통해서 정보계층 구조화
5. 추가할 항목의 경우 시각적 힌트 제공
6. 구성요소끼리 너무 가까운 경우 구분이 어려움

안내선 및 안전영역

레이아웃 안내선은 화면에서 콘텐츠 배치, 정렬, 간격을 조정하도록 하는 직사각형 영역을 정의함

안전영역

탐색막대, 탭막대, 도구막대 등 기타 도구에 가려지지 않는 영역 각 플랫폼에서 주요기능을 고려해서 안전영역을 설정해야함

플랫폼 고려사항

IOS,IPadOS

1. 가로세로 지원하기
2. 시각적 콘텐츠를 확장하여 화면을 채우기(아트워크 , 스크롤 등)
3. IOS게임에서 풀 블리드 인터페이스를 사용하기
4. 전각버튼 삽입(오른쪽 아래 안전영역 하단)
5. 가로방향의 경우 양쪽에 화면제어기 배치
6. 하단에 상호작용제어기랑 겹치지 않게 하기
7. 값을 추가하거나 경험을 향상시킬 경우에만 상태막대 가리기
8. 다양한 상태막대에 대응(ex.키보드 나올 경우 안전영역이 좁아짐)

   macOS

9. 윈도우 하단에 제어기나 중요정보 배치하지 않기
10. 상단 가장자리에 카메라 하우징에 콘텐츠 피하기

    watchOS

11. 화면의 한 가장자리에서 다른 가장자리로 확장하도록 디자인 베젤이 패딩역할을 함
12. 인터페이스에 4개 이상의 제어기를 나란히 배치하지 않기 2개정도가 좋음
13. 동작에 반응하도록 회전을 지원

해상도

비트맵 이미지는 생성 시에 해상도가 결정 됨 모든 상황에서 고해상도 에셋을 제공할 수 있도록 만들기

1. ipad @2x / ios @2x및 @3x / mac @1x,@2x
2. 이름규칙 '@1x','@2x','@3x'
3. 해상도를 낮춰서 디자인 후 고해상도 에셋 생성(정렬때문)

포맷

1. 비트맵이미지, 래스터작업물 / 인터레이스가 미적용된 PNG파일
2. 24비트 png / 포맷 8비트 색상팔레트
3. 사진 / jpeg 또는 heic파일
4. 고해상도 플랫아이콘, 인터페이스 아이콘 및 아트워크 / pdf 또는 svg

모범 사례

1. 간소화된 디자인으로 세부사항을 줄이기
2. 시각적인 일관성 유지(크기, 세부정보, 선 굵기, 시점, 무게감)
3. 아이콘은 텍스트와 굵기가 유사하게
4. 시각적 보정으로 아이콘의 무게중심을 맞추기

위보다 아래가 더 시각적으로 안정감이 있음 5. 필요한 경우 색상을 넣는 선색상태버전 제공 6. 성별 등을 아이콘에 넣지 않는 포용성있는 디자인 생성 7. 꼭 필요한 경우만 텍스트 포함 8. 사용자 아이콘을 만드는 경우 pdf와 svg 두개를 제공 9. VoiceOver가 읽을 수 있도록 레이블 제공 10. apple의 하드웨어 모형 사용은 안됨(자주 변하기때문), 디자인리소스 사용

플랫폼 고려사항

macOS

1.문서아이콘

• 사용자 설정문서는 오른쪽 상단이 접혀있으므로 오른쪽 상단에 이미지 없도록
• 문서유형을 나타내는 이미지
• 작은크기는 디테일을 줄이기
• 512x512px @1x, 1024x1024px @2x 256x256px @1x, 512x512px @2x 128x128px @1x, 256x256px @2x 32x32px @1x, 64x64px @2x 16x16px @1x, 32x32px @2x
• 이미지 캔버스에 10%는 여백설정

다크모드는 어두운 환경에서 더 나은 시각적 환경을 제공하기 위한 시스템 화면 모드 설정 밝은색은 어둡게 어두운색(220~)은 약간 밝게 조정된다.

모범 사례

1. 화면 모드 설정은 공통으로 사용하게. 개별설정하지 않도록
2. 다크모드, 라이트모드를 모두 설정
3. 콘텐츠 대비를 확인하기.
4. 경우에 따라서 다크모드만 지원해도 괜찮음

색상

1. 설정색상 사용
2. 충분한 대비(4.5:1)를 사용하기. 작은텍스트는 7:1
3. 흰색 배경색상의 명도를 다크모드에서 낮추기

아이콘 및 이미지

1. SF Symbols을 사용해서 동적색상 사용
2. 필요한 경우 아이콘은 별도로 디자인하기

• filled 아이콘인 경우, 다크모드에서는 line 아이콘으로 디자인

3. 풀컬러 이미지와 아이콘은 두 화면에서 모두 확인

레이블

1. 시스템 색상 사용
2. 직접 텍스트를 그리는 대신 시스템 제공보기를 사용

플랫폼 고려 사항

ios,ipados

1. 다크모드는 기본 / 저심도 - 어두운색이 덜 어두움
2. 다크모드는 시스템 배경색으로 만들기 꼭

   mac

3. 가능하면 배경에 약간의 투명도로 시각적 조화를 계속 유지할 수 있음

• 색상을 따로 하지 않는 경우에만 추가하기

모범 사례

1. 앱은 색상을 절제
2. 동일한 색으로 다른 항목을 사용하지 않도록
3. 라이트모드와 다크모드 모두 고려
4. 주변환경을 고려한 색 테스트
5. 다양한 기기에서 앱 테스트
6. 아트워크와 반투명의 영향을 고려
7. 시스템 제공 색상 제어기를 사용

포용적 색상

모든 사람에게 색상을 통해 전하는 정보를 동일하게 이해하도록 하는 색상 체계

1. 색상에만 의존하는 식별은 금지
2. 대비를 충분히 사용
3. 색상의 문화적 인식을 고려

시스템 색상

시스템의 동적 색상은 목적에 의해서 재정의 됨. 배경색, 전경색, 구분선 색상등으로 분류가 정해진 색상체계를 하나씩 복제하거나 재정의하는 것은 시스템 색상체계를 해칠 수 있음. 또한 동적 색상은 자동으로 라이트 모드와 다크 모드에 따라 자동으로 적용되므로 하나의 단일값을 바꾸는 것이 전체의 일관성을 해칠 수 있음.

1. 하드코딩 금지, 색상 API사용
2. 동적 색상은 복제금지
3. 동적 색상 재정의 금지

색상 관리

일반적인 색상 공간(전체 색영역이라고도 함)은 sRGB와 Display P3

1. 이미지에 색상 프로필 적용
2. 호환 가능한 경우 시각적 경험을 향상하도록 와이드 컬러를 사용
3. 필요할 경우 색상 공간별 이미지와 색상 변형을 제공

모범 사례

1. 글에 고유한 스타일 지정
2. 강조 색상 사용
3. 사용자 서체는 기능 사용을 고려하여 적용
4. 브랜드 < 콘텐츠
   • 로고때문에 공간을 너무 할애하지 않도록
   • 필요하지 않은 경우 꼭 로고가 화면을 채우지 않도록
5. 표준화된 패턴으로 편안함을 느끼도록 구성
6. 실행화면을 브랜딩 기회로 삼지 않기
   • 브랜딩은 온보딩 화면에서
7. Apple 상표가 앱 이름이나 이미지에 표시되지 않도록

브랜드를 구성함에 있어서 체계적인 스타일링 시스템이 필요하다는 것을 느꼈다. 또한 이러한 시스템이 아무리 중요하더라도 질적 콘텐츠가 더 중요하다는 것을 명심해야한다. 양질의 컨텐츠가 체계화 된 디자인 시스템을 만났을 때, 완벽한 브랜딩으로 작용할 수 있을 것이다.

모범사례

1. 간결성
2. 플랫폼별 디자인 제공 [출처]https://developer.apple.com/kr/design/human-interface-guidelines/app-icons
3. 필수일 경우에만 텍스트 포함
4. 사진보다 그래픽
5. 아이콘이 UI를 반복하지 않도록
6. 아이콘 크기 1024x1024 px
7. 아이콘 일관성 유지, 크기에 따라서 세부사항 간소화
8. 아이콘은 사각형 이미지로 제작
9. 화면 가장자리까지 불투명하게 제작
10. 대체 앱 아이콘 제공을 고려
11. (저작권)Apple 하드웨어 제품을 본뜬 모양을 사용하지 않도록

플랫폼 고려사항

iOS, iPadOS

1. 시스템 아이콘에 어울리게 어둡고 색조가 적용되는 아이콘 디자인
2. 간소화 버전을 고려
3. 밝은 아이콘을 어두운 아이콘의 기초로 사용
4. 색조에 흑백 음영을 넣기
5. 아이콘에 테두리 넣지않기(자동으로 1px추가됨)

macOS

1. 익숙한 도구를 묘사하여 아이콘 디자인
2. 아이콘에 대상체를 표시할 때 질량이 느껴지게 디자인
3. 드롭 그림자 사용
4. 사실묘사를 위해 내부그림자와 하이라이트 사용
5. 모서리가 둥근 직사각형 외에는 윤곽 정의하지 않도록
6. 외부바운딩 안에 모든 콘텐츠를, 내부바운딩 안에 주요 콘텐츠를 넣도록

tvOS

1. 2~5개의 레이어를 분리시켜 깊이감 있게 구성
2. 콘텐츠가 잘리지 않도록 안정영역 포함
3. 그림자와 그라디언트를 적절히 사용해서 시차효과와 충돌하지 않도록 구성

visionOS

1. 배경레이어 + 대상체(1~2개의 레이어) 를 3D로 구성
2. 배경은 불투명한 풀 블리드 이미지, 선명한 테두리, 구멍이나 오목한 부분 없이
3. 레이어는 사각형으로 제공
4. 정면에서 깊이감이 너무 느껴지지 않도록.
5. 사용자 설정반사 하이라이트나 그림자를 사용하지 않도록

watchOS

1. 원형
2. 배경은 검은색X

명세

속성

sRGB(색상), 회색감마 2.2(흑백음영), PNG

visionOS를 제외한 나머지 아이콘은 Display P3색상을 지원함

서지영강사님이 앱 아이콘 크기를 1024x1024로 만들라는 이유가 이거였구나 생각함

접근성

누구나 제품이나 서비스를 이용하는데 불편함 없이 이용할 수 있는 정도

접근성은 단순히 장애인, 정보약자 계층 등을 위한 것 뿐만 아니라 어느사람이든 어떤 상황에 발생할 수 있는 불편함을 고려한 설계이기도 하다. 사람들은 떄때로 다양한 시기에 상호작용에 불편함을 겪을 수 있다.

접근성을 고려한 설계

모범사례

1. 애플의 손쉬운 사용을 염두하고, 간결성과 인식용이성을 우선시하여 디자인
   • 손쉬운 사용 : 개인이 원하는 방향으로 인터페이스와 소통하는 기능 (VoiceOver, 동작 줄이기, 더 큰 텍스트 등)
   • 간결성 : 복잡한 작업을 친숙하고 일관적이게 상호작용하도록 함
   • 인식 용이성 : 시각, 청각, 촉각 중 하나를 사용하지 않아도 인식에 문제가 없도록 함
2. 개인화 지원
   • 다양한 상황과 모든 기기, 개인적인 커스텀에서도 경험을 즐기도록 함
   • 다양한 기기 지원 + 표준구성요소를 함께 지원
   • (애플의 표준 구성요소)https://developer.apple.com/kr/design/human-interface-guidelines/components
3. 손쉬운 사용을 통하여 기능을 테스트

상호작용

보조 기술로 기기와 상호작용 할 때 지원방향

보조기술

1. VoiceOver

   • 대상: 시각을 이용하기 어려운 사용자
   • 설명: 화면의 텍스트, 버튼, 이미지 등을 읽어주는 스크린 리더 기능

2. AssistiveTouch

   • 대상: 손이나 팔 등 신체의 일부를 사용하기 어려운 사용자
   • 설명: 화면 제스처를 대신할 수 있는 가상 버튼이나 메뉴를 제공하여, 물리적인 터치나 제스처를 사용하지 않고도 기기를 제어

3. 포인터 제어 (Pointer Control)

   • 대상: 손이나 손가락으로 포인터를 제어하기 어려운 사용자
   • 설명: 손목, 머리, 또는 다른 신체 부위를 사용하여 포인터를 제어할 수 있게 해주는 기능

4. 스위치 제어 (Switch Control)

   • 대상: 손이나 팔의 움직임이 제한적인 사용자
   • 설명: 다양한 스위치나 버튼을 사용해 화면을 탐색하고 상호작용할 수 있는 기능으로, 신체의 다른 부위나 외부 장치를 이용해 기기를 제어

5. Dwell Control

   • 대상: 눈이나 머리 움직임을 이용해 상호작용이 필요한 사용자
   • 설명: 사용자가 화면을 일정 시간 동안 응시하면, 해당 항목을 선택하고 실행하는 방식으로, 눈이나 머리의 움직임만으로 화면을 제어

제스처

1. 플랫폼의 기본 제스처를 지우지 않도록
2. 쉬운 제스처를 사용
3. 제스처의 대체방식을 추가로 제공
4. 가능하면 두 가지 이상의 물리적 상호작용으로 접근방식을 제안
5. 사용자 설정 제스처의 경우, 앱과 상호작용할 수 있는 대체 방식을 제공하는 보조 기술을 지원
6. 접근성 API를 통해, 드래그 앤 드롭을 식별하고 상호작용 할 수 있게 안내

버튼 및 제어기

1. 터치스크린 기기 최소 44*44px
2. visionOs 60px이상 간격
3. 버튼에 대한 설명과 특징을 지정
4. 일관된 스타일 계층으로 중요성 나타내기
5. 시스템 제공 스위치의 구성요소를 그대로 사용
6. 색상 외에도 시각적 지표를 추가하는 것을 고려하기

사용자 입력

1. 키보드외 음성입력 지원
2. Siri와 단축어를 지원하여 음성만으로도 중요한 작업을 수행하도록 지원
3. 일반 텍스트 선택을 막지않기.

햅틱

촉각 또는 촉감을 통한 피드백, 예시로 진동이나 압력변화

1. 시스템 정의 햅틱을 지원 사용자가 혼란을 느끼지 않도록 일관된 햅틱을 사용

VoiceOver

시각적 콘텐츠에 대한 청각적 설명

콘텐츠 설명

1. 의미가 있는 모든 이미지 설명제공
2. 인포그래픽에 설명제공
3. 이미지가 장식용인 경우 보조기술에서 가리기
4. 각 페이지에 제목 지정, 섹션에도 적절한 머릿말 제공
5. 모든 사람이 비디오 및 오디오 콘텐츠를 즐기도록 정보제공

탐색

1. 모든 요소를 탐색하도록 하기
2. 요소의 그룹과 정렬 또는 연결을 지정하여 경험을 향상
3. 레이아웃이 변경되면 VoiceOver도 변경
4. 버튼 또는 제어기가 다른 웹,앱을 여는 경우 예측 가능하도록 표시
5. 중요한 인터페이스 요소에 대체텍스트 제공
6. 필요할 경우, VoiceOver 로터 지원
   • VoiceOver로터 : 제스쳐 기반 컨트롤 도구, 스와이프나 스크롤로 읽기방식 전환시킴
7. 키보드만으로 모든 구성요소를 탐색하고 상호작용하도록 지원

텍스트 표시

'타이포그래피'에서 더 자세히 다룰 예정 [애플 타이포그래피]https://developer.apple.com/kr/design/human-interface-guidelines/typography [애플 디자인리소스] https://developer.apple.com/design/resources/#ios-apps 애플 디자인 리소스에서 각 플랫폼에 대한 다이나믹타입 크기표를 다운받을 수 있음

개인적으로 궁금한 부분 다이나믹 타입과 더 손쉬운 사용 글자크기

📌다이나믹 타입(Dynamic Type) 접근성 향상을 위해 사용자가 조정할 수 있는 텍스트 크기의 종류

📌더 큰 손쉬운 사용 글자 크기 (Larger Accessibility Sizes) 다이나믹 타입을 넘어서는 텍스트 크기의 타입, 시력 약자가 주로 사용

고려사항

1. 각 플랫폼에서 다이나믹타입을 사용하고 앱의 레이아웃 점검
2. 서체 크기가 증가할 때 텍스트 잘림 최소화해야 함
   • 열리고 닫는 형태가 아닌 경우 필요한 만큼 스크롤 하도록 지원
3. 큰 서체 사용 시 열의 수를 줄이고 가독성을 향상시키도록 지원
   • 서체 증가 시 한 열에서 제공하는 레이아웃을 변경
4. 서체 크기 증가 시, 중요 아이콘의 크기도 증가
5. 서체가 크더라도 정보계층은 일관되게 주요정보는 상단에 위치
6. 볼드 텍스트를 킨 경우 보기 좋도록

텍스트 표시의 주의사항

1. 앱에서 얇은 글씨
2. 꼭 필요하지 않은 경우, 폰트 변경.
3. 텍스트 양쪽정렬
4. 긴 구절 이텔릭체
5. 전체대문자
6. 읽기 어려운 폰트

색상 및 효과

1. 색상만으로 주요한 정보전달은 피하기, 꼭 텍스트레이블과 글리프 추가하기
2. 가급적 시스템 색상 사용
3. 색상조합으로 상태 또는 값 구분은 피하기
4. 색 반전을 고려하기
5. 굵기와 크기에 따른 색상 대비비율을 고려하기

6. 투명도를 줄일 때 흐림효과 추가

동작

1. 애니메이션에 의존하지 않고 앱을 사용하도록 하기
2. 동작줄이기가 켜져있을 때, 제한 된 애니메이션을 재생하도록 구상
   • 바운스 효과 줄이기
   • 레이어의 깊이를 애니메이션으로 표현하지 않기
   • 흐림효과를 애니메이션으로 표현하지 않기
   • 움직임을 없애도록 슬라이드를 페이드로 대치
3. 비디오 및 기타 움직임은 재생버튼으로 재생
4. 움직이거나 깜빡이는 요소를 표시할 때 '뇌전증'을 일으킬 수 있음

여러가지 정리하면서 보니까 기존에 만들었던 웹사이트의 허점이 들어난다. 기억나는 것들을 간략하게 적어보면

1. 제스쳐의 대체방식 제공이 미흡
2. 텍스트 선택을 강제로 막음(보이스 리더 사용을 막아버림..)
3. 버튼의 크기와 형태에 대한 명확한 시스템이 없음
4. 텍스트 스타일에 대한 지정이 없음
5. 애니메이션의 남용 꼭.. 신경써서 사이트를 수정하도록 하자

계획수립 => 일정정리 => 실행 => 검토 => 최종확인 순으로 진행예정

사이트 개선에 대한 계획과 목록을 정리한다.

사이트 기준사양

계획

1. 수정 계획
   • 공통
     • 배경색상 변경
     • 폰트 크기 변경
     • 상단메뉴 width
     • 하단 소개 글자크기
   • 메인 페이지
     • html코드 for문으로 데이터 넣기
     • 리뷰, 인기상품 컴포넌트 디자인 변경(padding 추가)
     • 검색창 말풍선 커서 표시
     • 부드러운 스크롤 제거
     • 하단 링크아이콘 크기설정(MB)
     • 공통 코드 정리
     • 상하단 네비게이션 바 추가
   • 오시는길 페이지
     • 하단 탭 디자인(음영감 좀 더 깊게)
     • 공통 코드 정리
   • 고객센터 페이지
     • 코드 정리
     • 궁금하신 사항 제거
   • 온고롱안내 페이지
     • 소개글 더 빠른 animation
     • 소개글 스크롤 내리면 다 보여주기
     • 주문순서 안내 수정하기
   • 주문하기 페이지
     • 디자인 개선
     • 달력페이지 완성하기
     • 시계페이지 완성하기
     • 주문신청 단계이동 작성 전 막기
     • 주문완료 시 페이지 정리 및 이동링크

일정

• 메인페이지(22~23)
• 오시는길페이지(23)
• 온고롱안내(23~24)
• 주문하기(24~25)
• 공통(25)
• 검토(25~26)
• 부족한 부분 정리(27)

22일 진행사항

1. 코드 복제 후 기존코드 저장
2. 메인페이지 코드 확인

react-native-multiple-image-picker 라이브러리 사용 중 아래의 코드를 삽입 후 처리하는 과정에서 오류가 발생

import도 잘 되어있고, 가이드에 맞게 처리했는데 openPicker를 찾지 못함

const selectPhotoPickerAndroid = async () => {
    const options = {
      maxSelectedAssets: 10,
      doneTitle: '선택완료',
      cancelTitle: 'X',
      selectedColor: '#048AD4',
    };
    try{
      const response = await openPicker(options);
      console.log(response);
    }catch(e){
      console.log(e);
    }
  };

에러메세지

TypeError: Cannot read property ‘openPicker’ of null

원인

컴파일 에러로 인해서 openPicker가 불러와지지 않는 상황

깃허브 이슈내용에 따르면 rn0.73으로 업그레이드한 후 Android는 일부 파일을 찾을 수 없다는 오류를 보고한다고 함

해결방안

찾을 수 없는 R.drawable.ps_image_placeholder의 R을 com.luck.picture.lib.R로 변경

1. 콘솔창에 원인에 있는 코드라인 클릭

2. R을 com.luck.picture.lib로 바꾸기 ( 216라인)

3. 다른 코드라인도 반복!!

결론

다른 라이브러리와 React-native 업데이트 이후 호환 문제였다.

수정안을 다른사람이 올려주지 않았다면 처리가 어려웠을 듯 싶다.

git 용어

1. Repository(저장소) : 코드나 문서를 저장하는 프로젝트 저장공간

2. local Repository(로컬 저장소) : 개발자의 컴퓨터에서 작업되는 프로젝트 저장공간

3. Remote Repository(원격 저장소) : 클라우드 서비스(ex)GitHub)를 통해 인터넷 서버에 저장된 공간

4. Commit(커밋) : 저장소에 변경된 내용을 메세지와 함께 기록

5. Branch(브랜치) : 여러 작업을 동시에 협업하며 수행할 때 사용하는 관리 개념

6. Merge : 브랜치 작업 완료 시 기존 코드와 합치는 명령어

7. Pull : 원격 저장소에 변경사항을 로컬 저장소에 가져오는 명령어

8. Push : 로컬 저장소에 변경사항을 원격 저장소로 업로드하는 명령어

9. Pull Request : GitHub 호스팅을 통해 코드 수정을 요구하거나 토론하며 개선하는 개념

10. Fork : 다른 사용자의 저장소를 나의 계정으로 복제하는 것(원본 저장소와 독립적 관리 가능)

    1. Repository 생성 - git init

저장소를 생성할 위치의 directory에서 cmd창을 열고 git init : 사용할 원격저장소를 현재 디렉토리 기준으로 생성한다.

사용법

1. 저장소를 생성할 위치에서 cmd를 입력해서 명령프롬포트를 연다.

2. 명령프롬포트에 git init 을 입력한다.

3. 성공했다면 생성 된 .git 파일을 확인할 수 있다.

2. 작업상태 추가 - git add

git add <파일명/디렉토리 경로> : 변경 파일 또는 디렉토리를 스테이징 영역(staging area)에 추가 git add . : 현재 디렉토리의 모든 변경내용을 스테이징 영역에 추가(하위 디렉토리만 포함) git add -A : 작업 디렉토리의 변경내용을 스테이징 영역에 추가(상위, 하위 디렉토리 포함) git add -p : 변경사항을 터미널에서 확인하면서 스테이징 영역에 추가

git add는 로컬 디렉토리상의 변경 된 내용을 스테이징 영역에 추가하는 명령어이다. commit과 달리 깃 저장소의 변경이력에 어떠한 영향도 주지 않는다.

사용법

1) git add <파일명>

1. 파일생성(test 쓰려다 오타남;)
2. cmd 창에 git add [파일명] 입력
3. 작업상태 git status로 확인

2) git add .

1. 파일명 수정
2. cmd 창에 git add . 입력 후 작업상태 git status로 확인

3) git add -A

1. 하위폴더 생성 및 파일추가
2. cmd 창에 cd 하위폴더멍으로 폴더 접근 후 git add -A 입력
3. git status로 작업상태 확인

4) git add -p

1. 파일추가 및 파일내용 변경

2. cmd 창에 cd ..으로 상위폴더 이동 후 git add -p 입력, 내용변경을 진행할 것이므로 y로 진행

3. git status로 작업상태 확인

🤔🤔 git add -p는 하위폴더의 변경상태는 적용되지 않네?

4. 확인을 위해 한번 더 git add -p

-A 와 .의 -p차이

git add -A는 작업 디렉토리 상에 어디에 위치하든 항상 동일하게 모든 변경 내용을 스테이징으로 넘깁니다. 반면에 git add .는 명령어를 실행한 디렉토리 이하에서 발생한 변경 내용만 포함하며, 해당 디렉토리 기준으로 상위 디렉토리의 변경 내용을 포함하지 않습니다. git add -p는 현재 디렉토리의 변경상태를 감지하여 hunk(조각)를 만들어서 스테이징으로 넘깁니다. 하위폴더의 변경사항을 감지하지 못합니다.

git add 뒤에 옵션이 없으면?

뒤에 파일 명 없이 git add 했더니, 어떤 것도 더해지지 않았다. 문제사항을 보기 위해 git status 했다.

브랜치 안에 커밋이 아직 없고 추척되지 않는 파일을 add시키라는 설명이 나와있다. ** 옵션은 선택이 아닌 필수! **

add 취소하기 - git rm --cached

git rm --cached 파일명 : add 된 파일을 깃이 추척하지 않는 상태로 스테이지에서 내린다.

사용법

1. cmd창에 git rm --cached 파일명를 입력한다.

2. git status로 작업상태를 확인한다.

** 여러가지 hunk(파일 조각) 명령어 **

y : 이 조각(hunk) 이 이후 커밋에 포함될 수 있도록 stage 시킨다 n : 이 조각이 이후 커밋에 포함되지 않도록 stage 대상에서 제외한다 q : 종료; 이 조각 및 이후 모든 조각들을 stage 시키지 않는다 a : 이 조각과 이후 현재 파일 내 모든 조각들을 stage 시킨다 d : 이 조각 및 이후 현재 파일 내의 모든 조각들을 stage 시키지 않는다 g : 파일 내의 다른 조각들의 목록을 표시하고 이동할 조각 위치를 선택한다 / : 정규표현식을 이용해 조각을 검색하고 해당 위치로 이동한다 j : 현재 조각에 대한 결정은 뒤로 미루고 다음 미확정 조각 위치로 이동한다 J : 현재 조각에 대한 결정은 뒤로 미루고 확정 여부와 상관없이 다음 조각 위치로 이동한다 k : 현재 조각에 대한 결정은 뒤로 미루고 이전 미확정 조각 위치로 이동한다 K : 현재 조각에 대한 결정은 뒤로 미루고 확정 여부와 상관없이 이전 조각 위치로 이동한다 s : 현재 조각을 더 작은 단위의 조각으로 나눈다 e : 현재 조각 내용을 직접 편집한다 ? : 조각 관련 조작 도움말을 표시한다

3. local Repository에 변경상태 저장 - git commit

git commit -m "커밋 메세지" : staging area에 저장되어있는 변경 사항을 로컬저장소에 저장한다. git commit --amend -m "수정된 메시지" : commit상태의 메세지를 수정한다.

사용법

1. 로컬저장소에 저장할 디렉토리에서 cmd를 열어서 git commit -m "커밋 메세지"를 입력

메세지 수정하기

1. cmd창에 git commit --amend -m "수정된 메시지"를 입력

4. Remote Repository 연결 - git remote

git remote add origin https://github.com/[본인계정명]/[디렉토리명] : github의 원격저장소(Remote Repository)와 내 디렉토리를 연결한다. git remote -v로 연결상태를 확인할 수 있다. git remote remove origin로 저장소연결을 삭제할 수 있다.

사용법

1. cmd창에 git remote add origin https://github.com/[본인계정명]/[디렉토리명]

2. git remote -v로 연결 확인

5. 원격저장소에 push - git push

git push <remote> <branch> : remote는 저장소명 branch는 브랜치이름 으로 깃 저장소에 푸쉬함 git push origin main : 메인 브랜치에 origin을 원격저장소로 푸쉬함

git push <remote> <branch> 사용자가 이 두 매개변수를 지정하지 않는다면 Git는 기본적으로 origin을 원격 저장소로, 현재 작업하고 있는 브랜치를 푸시할 브랜치로 지정한다. 현재 작업 중인 브랜치가 main인 경우, git push 명령어는 두 개의 기본 매개변수를 제공하기 때문에 git push origin main과 동일하게 실행된다.

사용법

1. cmd에 git push origin main 입력 😨😨😨ERROR😨😨😨

   😢 에러코드 : failed to push some refs to 'https://github.com/itjuh/gitTEST' https://github.com/itjuh/gitTEST라는 경로를 참조하여 push할 수 없음. 🤔 원인 : 저장소를 깃허브에 만들 지 않고 자동생성해준다 생각하고 바로 적었기 때문~ 🙂 해결 : 깃허브에 저장소 생성 후 http링크를 가져와서 연결했다.

2. git remote remove origin입력 : 원격저장소 주소변경을 위한 삭제

3. git remote add origin https://github.com/itjuh/testRepo.git입력

4. cmd에 git push origin main 입력 😨😨😨ERROR😨😨😨

   

   😢 에러코드 : failed to push some refs to 'https://github.com/itjuh/testRepo.git' https://github.com/itjuh/testRepo.git라는 경로를 참조하여 push할 수 없음. 🤔 원인 : 저장소 내에 브랜치명이 main이 아니고 master임 🙂 해결 : git push origin으로 브랜치명을 확인하고 다시 push함!

   

비공개 저장소에 push

Private 저장소의 경우 Ssh key를 사용하여 업로드를 해야 함 https://github.com/settings/keys 로 접속하면 ssh키를 등록할 수 있다고 함

git remote add origin git@github.com:[사용자닉네임]/[저장소경로] Enter passphrase for key '/Users/.ssh/id_rsa':

참고)git ssh 키 생성 및 등록 참고) git add 사용법

6. 원격 저장소에서 pull - git pull

git pull : 원격 저장소에 있는 변경사항을 로컬저장소로 가져와서 자동으로 병합(merge) git pull [원격 저장소의 이름] [원격 저장소에서 받아오고자 하는 브랜치의 이름] : 원하는 저장소의 원하는 브랜치를 로컬저장소로 받아와서 병합

사용법

1. 저장소 연결상태 확인 git remote -v

2. 저장 할 로컬 디렉토리에서 git pull입력

7. 새로운 브랜치 생성하기 - git branch

git branch [브랜치명] : 로컬 저장소에 새로운 버전을 관리할 브랜치를 생성한다. git push -u origin [브랜치명] : 원격 저장소에 생성된 브랜치를 push한다.

사용법

1. main브랜치 생성을 위해 로컬 저장소의 루트에서 git branch -M main을 입력
2. 원격에 로컬 브랜치를 적용하기 위해서 git push -u origin main입력
3. 브랜치 상태 확인을 위해서 git branch --all입력

8. 브랜치 삭제하기

git branch -d [브랜치명] : 로컬 저장소에 브랜치를 지운다. git push [원격이름:origin] --delete [브랜치명] : 원격 저장소에 브랜치를 지운다.

사용법

1. dev 브랜치를 삭제하기 위해 git branch -d dev를 입력

2. 삭제된 것을 확인하기 위해 git branch --all을 입력

   🙄삭제되지 않았다.(`git branch`: 로컬저장소 브랜치 확인, `git branch --all`: 원격저장소 브랜치 확인)

3. 원격 저장소에 브랜치를 삭제하기 위해 git push origin --delete dev를 입력

4. 삭제된 것을 확인하기 위해 git branch --all을 입력

8. 브랜치 합치기 - git merge

git merge [브랜치명] : 브랜치 합치기(1) name의 branch를 현재 branch 로 합친다(merge) git rebase master : 브랜치 합치기(2) - 더 많이 사용하는 방법.

사용법

1. 현재 브랜치 확인하기 위해 git branch
2. main 브랜치의 업데이트 사항을 master 브랜치로 가져와야 하므로 git switch master
3. 현재 브랜치 확인하기 위해 git branch
4. 브랜치를 합치기 위해 git merge main
5. 브랜치를 merge했는데 아직 처리가 안됐다. 이유는? 깃에서 병합처리를 완료하지 않았기 때문~

   pull request 작성/승인

   

요청이 성공적으로 반영되었다.

9. 브랜치 fork하기 - git fork

fork : 원본 저장소와 연결 된 상태로 내 깃허브 저장소로 복제하기 clone : 원본 저장소를 내 저장소로 복제하기(연결이 끊김)

사용법

1. fork할 repository주소에서 fork를 클릭하여 create a new fork 진행
2. 포크 된 저장소 확인
3. fork 된 remote repository의 파일을 local repository로 clone하기 git clone [경로] [디렉토리명]
4. fork 상태 업데이트
5. 새로운 branch생성 후 pull request 보내기

깃 명령어 사용해보니 github desktop처럼 편리한데 하루종일 걸렸다. 그래도 fork, clone, pull, push등등 여러가지를 해볼 기회가 있어서 뿌듯했다. 자주 써야지, 까먹지 말자!!!

구현목표

구성 나누기

1. 제품 상태의 TextInput 컴포넌트를 클릭
2. 화면 하단에서 리스트가 있는 모달창이 올라옴
3. 리스트는 radio button형태로 1개만 선택가능
4. 선택한 리스트가 있다면 버튼 활성화 없다면 비활성화
5. 모달창 밖을 클릭 시 선택없이 모달창 바뀌기
6. 선택 리스트가 있는 상태에서 확인을 누르면 TextInput에 값 전달

TextInput 구현

제품상태 컴포넌트는 거래 컴포넌트와 유사한 구성을 가지므로 재사용이 가능하게 TextInput에 값을 여러가지 전달하기로 하였다.

세부적으로 구현해야 하는 기능은

• 직접 입력 막기
• TextInput 클릭 시 모달창 열리기
• 모달에서 선택 된 값 넣어주기

<TextInput
  multiline={isArea}
  style={isArea ? styles.inputArea : styles.inputText}
  value={value}
  placeholder={placeholder}
  onFocus={onPressHandler}
  inputMode={inputType ? undefined : 'none'}
  onChangeText={inputType ? onChangeHandler : () => {}} />

• 직접입력은 inputMode={'none'}을 이용해서 막아주었다.
• TextInput에 클릭이벤트가 적용되지 않아 onFocus를 이용해서 이벤트를 적용하였다. -> 이 부분은 포커스가 유지 될 때 적용되지 않아서 수정이 필요하다.
• 모달창에 선택 된 값은 상태관리 라이브러리 zustand를 이용하여 저장하고 value를 통해서 전달했다.

// store.ts

interface MyProduct {
  ...
  status: string;
}
interface ProductRegist {
  product: MyProduct;
  setProduct: (product: MyProduct) => void;
}
const useProductStore = create<ProductRegist>()(set => ({
  product: {} as MyProduct,
  setProduct: product => set(state => ({...state, product})),
}));

Modal 구현

Modal 열기, 닫기

모달창은 하단에서 슬라이드로 올라오는 형태로 선택리스트를 보여주는 형태를 가진다. 다른 컴포넌트도 모달창을 사용하고 있어서 공통컴포넌트로 묶고자 하지만 내부 디자인이 달라서 우선적으로 제품상태에 대한 항목만 작성하였다.

세부적으로 구현해야 하는 기능은

• 슬라이드 형태로 나타나는 모달창 구현
• 길이는 전체화면을 덮지 않고 뒷 배경은 투명하며 하단부터 이동하도록 한다.
• 모달창 외부를 클릭 시 모달창이 닫히도록 설정한다.
• 데이터 받아와서 내부 리스트 구성하기(axios사용)

// 데이터 받아오기
  const [data, setData] = useState([]);
  const {modalState, setModalState} = useProductModal();

  let axiosUrl = '';

  useLayoutEffect(() => {
    axios
      .get(axiosUrl)
      .then(response => {
        let newArray = response.data.map((d: productListData) => {
          return {key: d.codeId, value: d.codeNm};
        });
        setData(newArray);
      })
      .catch(e => {
        console.log(e);
      });
  }, []);

// modal구현
    <Modal animationType={'slide'} visible={modalState} transparent={true}>
      <Pressable
        onPress={() => {
          setModalState(false);
        }}
        style={styles.modalBackground}></Pressable>
      <View style={styles.modal}>
        <View style={styles.title}>
          <Text style={styles.titleText}>제품 상태</Text>
        </View>
        <View style={styles.breadcrumb}>
          <Text style={styles.breadcrumbText}>제품의 상태를 알려주세요</Text>
        </View>
        <MakeList data={data} />
      </View>
    </Modal>

• 모달창 슬라이드는 animationType={'slide'}를 사용한다.
• 모달창의 visible상태를 modalState라는 boolean 타입의 useState로 구성하여 활용한다.
• 모달창 외부의 Pressable 버튼을 만들어서 modalState를 false로 바꿔준다. 이를 통해 모달창 닫기를 구현한다.
• 내부의 리스트의 값은 axios를 이용해서 값을 전달받아서 response.data를 mapping해서 codeId와 codeNm로 구성된 array로 리스트를 구성하였다.
• 리스트는 MakeList 의 data로 전달하여 각 항목의 컴포넌트를 구성 후 리턴받는다.
• 모달을 하단에 붙이기 위해 style은 높이를 주고 마진값을 설정하였다.

  //StyleSheet
  modal: {
    marginBottom: 0,
    marginTop: 'auto',
    height: 570,
  }

radio button 구현

제품의 상태는 한 가지 항목을 필수로 선택하도록 하고 있다. 체크박스의 형태는 별도로 필요없으니 구현하지 않는다. 제품상태는 형태가 같은 컴포넌트이므로 FlatList를 활용하여서 구성하였다.

세부적으로 구현해야 하는 기능은

• 제품의 상태는 한 가지 항목만 선택가능
• 선택한 항목을 명시적으로 나타내기
• 선택을 취소할 수 있도록 함
• 선택항목이 있는 경우 하단의 버튼을 활성화
• 하단의 버튼을 누르면 모달이 닫히고 InputText에 값이 전달

  const [checkedNum, setCheckedNum] = useState<number>(-1);
  const [checked, setChecked] = useState<string>('');

  <FlatList
      data={data}
      ListFooterComponent={<ConfirmButton checked={checked} />}
      renderItem={({item, index}) => {
        let key = item.key ?? item.value ?? item;
        return (
          <Pressable
            onPress={() => {
              if (matchSelected(index)) deSelected();
              else selected(index, key);
            }}>
            <View style={styles.list}>
              <Text
                style={
                  matchSelected(index)
                    ? [styles.listText, styles.textActive]
                    : styles.listText
                }>
                {productStatusName(key)}
              </Text>
              <Text
                style={
                  matchSelected(index)
                    ? [styles.listTextDesc, styles.textActive]
                    : styles.listTextDesc
                }>
                {productStatusDesc(key)}
              </Text>
            </View>
          </Pressable>
        );
      }}
    />
  );
};

• 선택 된 순번과 선택 된 값을 저장하기 위해 useState를 활용하였다.
• onPress속성에 선택 일치여부로 selected(선택)와 deSelected(선택해제)를 분기하였다.
• index에는 한 가지 값만 들어가므로 radio button의 형태로 선택이 된다.
• style도 선택 일치여부로 분기하여 선택항목을 명시적으로 보여주었다.
• FlatList에 반복되지 않는 하단 버튼을 구현하기 위해 ListFooterComponent속성에 <ConfirmButton />컴포넌트를 리턴하였다.

//ConfirmButton Component

const {setProduct, product} = useProductStore();
const {setModalState} = useProductModal();

  return (
    <TouchableOpacity
      disabled={checked ? false : true}
      style={checked ? [styles.button, styles.buttonActive] : styles.button}
      onPress={() => {
        if (checked) {
          setProduct({...product, status: checked});
          setModalState(false);
        }
      }}>
      <Text style={styles.buttonText}>확인</Text>
    </TouchableOpacity>
  );
// store.ts

const useProductStore = create<ProductRegist>()(set => ({
  product: {} as MyProduct,
  setProduct: product => set(state => ({...state, product})),
}));

• 확인버튼을 누르면 zustand로 설정한 Product의 status에 선택 된 항목을 전달한다.
• 확인버튼을 누르면 zustand로 설정한 ModalState의 값에 false를 전달하여 모달을 닫는다.

개선사항

모달창이 닫힌 후 포커스가 그대로 남아 있어서 onFocus가 동작하지 않는다. 그래서 동일한 동작에도 반복 될 수 있도록 onPressIn으로 변경하였다.

    <View style={styles.inputContainer}>
      <Text style={styles.inputTitle}>{label}</Text>
      <TextInput
        multiline={isArea}
        style={isArea ? styles.inputArea : styles.inputText}
        value={value}
        placeholder={placeholder}
        onPressIn={onPressHandler}
        inputMode={inputType ? undefined: 'none'}
        onChangeText={inputType ? onChangeHandler : () => {}}></TextInput>
    </View>

모달창이 닫힌 후에 커서가 그대로 남아있지만 값은 value에 저장되어 수정되지 않는다.

구현완료!

** components folder와 view folder에 대한 고찰 **

발단. 프론트개발자가 2명인데, 구조가 2개?

우리 프로젝트는 나를 포함하여 프론트엔드 개발자가 3명인 있는 규모가 꽤 있는 프로젝트이다. 그리고 페이지 개발은 각 개발자가 파트를 나누어 진행하고 있다. 그러다보니 페이지의 일관성을 해치는 경우가 더러 발생하고 있는데, 그 중 한 가지에 대한 의문이 발생하게 된다.

case1 A개발자는 각 컴포넌트를 components에 넣고 index.js에 담아서 export 시키고, view폴더에서는 컴포넌트의 출력만을 보여준다. case2 B개발자는 각 컴포넌트를 view에 componentNameView의 이름으로 넣고 components에서는 common component만 넣어둔다.

전개. C 개발자의 폴더구조는?

일단 C개발자인 나는 B개발자의 폴더구조를 따라서 코딩을 진행하고 있다. 이유는 B개발자와 협업을 통하여 같은 기능을 나누어 제작하고 있었기 때문이다. 그런데 두 방식에 따른 차이와, 어느방향이 좋을지에 대한 고찰이 필요한 시점인 듯 싶었다.

위기. 폴더 구조 파악하기

** _tests_ ** 테스트 코드 폴더 ** api ** api와 관련 된 로직을 정의해놓은 폴더 ** assets ** 프로젝트에 사용되는 이미지, 폰트 등이 들어가 있는 폴더 ** components ** 기능적 요소를 담당하는 폴더 하위에 각 페이지별 이름으로 나누어서 구성되어있음 ** screen ** 페이지를 모아주는 역할을 하는 폴더 하위에 view, router폴더로 구성되어 있음 ** stores ** 전역상태 라이브러리인 zustand를 정의해놓은 폴더 ** type ** 별도의 타입이 필요한 경우 타입을 정의해놓은 폴더

절정. 어떤 구성이 더 좋은건데? - 각각의 장단점

case1

** 장점. ** 각 컴포넌트들이 한 가지의 기능을 하고 index.js를 통해 export하고 있으므로 필요한 컴포넌트를 꺼내쓰기 편리함

** 단점. ** 컴포넌트의 재사용이 가능한지 여부를 찾아서 common으로 관리가 필요해보임.

case2

** 장점. ** 공통 기능의 컴포넌트가 components폴더에 모여있어 필요 시 import해서 사용할 수 있음.

** 단점. ** 그 외의 단일페이지 컴포넌트가 view라는 이름으로 view폴더에 모여있어서 기능적인 부분을 재사용 할 때 중복코드가 발생할 수 있음.

결말. 우리는 components/common 이 필요해

이렇게 폴더 구조를 뜯어보니 우리는 통일이 필요하다는 생각이 들었다. components/common 를 만들어서 기능적인 부분을 원자화 한 다음에 재사용성을 늘리면 프로젝트의 완성도가 올라갈 것 같다.

react 공식문서에 파일구조에 대한 이야기가 있다. https://ko.legacy.reactjs.org/docs/faq-structure.html

결론

너무 깊게 생각하지 마세요

그래 일단, 코드를 구성하고 common폴더를 추가하자는 의견을 내보자.

발단. 카메라 아이콘을 넣자.

프로젝트의 상품등록 파트를 구성하기로 한 나는 와이어프레임을 열심히 뜯어봤다. 상단에 작은 카메라 아이콘 하나 들어가는 이미지 로드 컴포넌트를 구성해야 했고, 리액트 네이티브 아이콘 패키지를 사용해볼 기회가 생겼다.

사실 이미 IOS에서 개발하시는 팀원께서 react-native-vector-icons 패키지를 설치해놨다.

그냥 가져다 쓰기만 하면 됬다. 아니 그랬어야 했다.

전개. react-native-vector-icons 사용하자

1. react-native-vector-icons 패키지 설치하기

npm install react-native-vector-icons
npm install -D @types/react-native-vector-icons

아래줄은 타입스크립트용이다.

2. 폰트파일 이동하기

node_modules/react-native-vector-icons/Fonts의 폰트파일을 android/app/src/main/assets/fonts을 만들어서 이동시킨다.

3. 원하는 아이콘 선택하기

아이콘디렉토리 여기서 원하는 아이콘을 선택하여 이름을 알아둔다.

4. 코드 사용하기

import Icons from 'react-native-vector-icons/MaterialCommunityIcons';

export defalut App(){
    ...
    return(
    ...
    <Icons name="camera-outline" size={20} color="#4F8EF7" />
    )
}

** 그런데 이 이상한 이미지는 뭐지? **

** 나의 camera-outline은 어디간거지 **

위기. 이미지가 다르다.

이제부터가 본격적으로 나를 괴롭히던 문제에 대한 이야기이다. 왜 다를까? 구글 도와줘..

의심1. 안드로이드용 설정?

구글에 검색하니 안드로이드용은 따로 설정해 줄 부분이 있다고 한다.

android/app/bundle.gradle 파일에 코드 추가하기

project.ext.react = [
    enableHermes: false,  // clean and rebuild if changing
]
apply from: file("../../node_modules/react-native-vector-icons/fonts.gradle")

역시 이유 없이 안 될리 없지 생각하고 리빌드했지만, ... 호락호락하지 않다.

의심2. 폴더이름 설정?

다른 원인으로 .ttf를 옮긴 폴더명의 오류가 있나 살펴보게 된다.

//create-icon-set.js

  const fontBasename = fontFile
    ? fontFile.replace(/\.(otf|ttf)$/, '')
    : fontFamily;

  const fontReference = Platform.select({
    windows: `/Assets/${fontFile}#${fontFamily}`,
    android: fontBasename,
    web: fontBasename,
    default: fontFamily,
  });

create-icon-set.js 파일에 의하면 windows에서 Assets경로를 받아오니 폴더명을 대문자로 바꿔봤다.

변화가 없다.

의심3. 별도의 설정이 필요한 것은 아닌가?

열심히 구글링한 결과로 나와 비슷한 현상이 있다는 이슈를 찾았다. https://github.com/oblador/react-native-vector-icons/issues/1294

그러나 사용하는 장치의 문제로 내가 사용하는 에뮬레이터와 전혀 상관이 없었다.

절정. 왜 오류나는지 전혀 모르겠다.

안 넣지 뭐 라는 반 포기의 심정으로 다른 컴포넌트를 구성하였다. 그러나 아이콘을 너무 넣고 싶은, 저 둘의 사랑을 보고싶지 않은 이 마음이 해소되지 않는다.

포기란 없다. react-native 강의 수강신청

그래서 이제 전문가의 직접적인 도움을 받고자 react-native 강의를 찾아봤다. 배달앱 클론코딩 조현영 강사님의 배달앱 클론코딩이다.

그래도 혹시 아이콘이 없으면 무용지물이니 먼저 질문을 한다.

압도적 감사😭😭😭 바로 강의를 구매한다.

강의수강

강의 자체는 스무스하게 진행되며 UX/UI를 고려한 코딩으로 실제 개발코드에도 적용할만큼 섬세한 부분이 많아서 좋았다.

좋아서 순간 강의를 수강한 목적을 잃었다.

순서대로 수강하고 있으면 아이콘은 언제고치는데?!!

react-native-vector-icons 강의 수강

빛과 소금같은 강의를 수강한다. 오.. 그런데.. 나 이거 다 해본거잖아?

다시 살짝 좌절하고 고민에 빠진다.

1. 강사님 도와주세요. 저의 camera아이콘이 이렇게 이상한 gays가 나와요.
2. 도와주세요... 근데 그 전에 한 번 만 더 찾아볼게요.

쉽게 가자 다짐했는데 잘 안된다. 한 번 더 고생하러 간다.

의심4. 값을 전달하는 과정에서 발생한 것은 아닌가?

사실 패키지를 가져다 쓰면서 사용법 외에 내부코드를 상세하게 보지 않았지만, 필요하니까 열심히 찾아봤다.

render() {
      const { name, size, color, style, children, ...props } = this.props;

      let glyph = name ? glyphMap[name] || '?' : '';
      if (typeof glyph === 'number') {
        glyph = String.fromCodePoint(glyph);
      }
      ...

    return (
        <Text selectable={false} {...props}>
          {glyph}
          {children}
        </Text>
      );
    }

랜더링 시 glyph에 name파라미터 값을 토대로 glyphMap에서 number타입의 값을 반환받아서 glyph에 값을 할당하는 형태였다.

그래서 내가 전달하는 camera-outline이 있는지 확인하기 위해 glyphMap을 찾아봤다. https://unpkg.com/browse/react-native-vector-icons@10.0.3/glyphmaps/MaterialCommunityIcons.json

"camera-outline": 986461, 있다.

그리고 실제로 콘솔창에 glyphMap[name]값과 name을 출력하니 잘 받아오고 있었다.

의심5. String.fromCodePoint(glyph)?

String.fromCodePoint() JavaScript String fromCodePoint()는 주어진 코드 포인트 값(ASCII 값) 시퀀스에 대한 문자열이나 요소를 반환하는 데 사용되는 JavaScript의 내장 메서드입니다.

https://en.wikipedia.org/wiki/List_of_Unicode_characters 반환되는 코드 포인트 목록은 위의 링크에 나와있다. 보니까 거의 유니코드를 반환한다.

그럼 glyph에 number값을 넣어서 각 코드포인트에서 반환값을 가져온다는 것 같은데, 실제로 가져오는지 보고싶었지만 콘솔에 찍히지 않는다. 여기서 맨 왼쪽 값(네모박스 안에 /모양)이 String.fromCodePoint(glyph)값이다.

그래서 ttf파일의 형식으로 코드포인트를 구성해서 glyph로 인덱싱을 하나 생각하게 된다.

여기까지 도달했지만 ttf파일의 인코딩타입을 뜯어 볼 엄두가 나지 않았다.

고민. 결국 전문가에게 지원요청?

1. 강사님 도와주세요. 저의 camera아이콘이 이렇게 이상한 gays가 나와요. 2. 도와주세요... 근데 그 전에 한 번 만 더 찾아볼게요.

1번의 선택지를 선택하는 기로에 섰다.

강사님께 질문에 대한 과정을 정리하기 위해 폴더명을 다시 바꾸려고 했다. 의심2.에서 했던 Assets폴더명이 대문자인게 거슬려서 수정하려니 오류가 났다.

일단 삭제하자.

그런데... ... ... ...

너 고생했지? 살려줄게

... ...!! 와 왜지 fonts 폴더를 삭제하니 아이콘이 뜬다.

결말. 문제해결, 아이콘이 정상적으로 뜬다.

개발자들이 항상 하는 고민

이게 왜 되지?

그러게 이게 왜 될까. fonts 폴더를 main에서 지우니 경로를 알아서 찾아간다. 이유는 모르겠습니다. 알게 되면 공유하겠습니다.

혹시 모를 react-native-vector-icons incorrect icon issue를 해결하고 싶은 분들 main 안에 복사했던 assets/fonts 폴더를 삭제해보세요.

** 나의 일주일을 괴롭히던 gays bye~ **

0415) 추가내용. fonts 폴더 재 생성 후에도 잘 찾아감. 원인이 이게 아닌듯

디버깅툴 플리퍼 설치과정중 오류로 인한 기록

플리퍼 공식사이트

위의 사이트에서 각 운영체제에 맞는 파일을 받는다. 다운받고나니 처음 본 확장자명 .tgz로 인해서 추가적으로 cmd로 파일압축을 해제 할 필요가 있었다.

1. cmd창에 tar를 입력하기 ->>윈도우 내에 tar가 있는지 확인

2. tar -xvzf filename.tgz로 압축풀기 ->>확장자가 .tgz

엄청난 패키지가 압축해제 되었다.

일반 윈도우에서 해제 안된 이유가 있었다.

알고보니 지금 사이트 링크오류로 인해서 플리퍼 윈도우 버전을 찾을 수 없다. 어찌할꼬-

당장 못 고친다고 한다. 😨😨😨😨😨😨

https://github.com/facebook/flipper/issues/5517

잘 정리해놓자

TextInput

사용자 입력값을 받는 컴포넌트로 <input type='text'>와 동일하게 사용 된다. 이벤트 핸들링도 가능하다.

import React from 'react';
import { TextInput } from 'react-native';

export defalut function App(){
    const [text, onChangeText] = React.useState('Useless Text');
     const [number, onChangeNumber] = React.useState('');

    return(
        <View>
            <TextInput 
                onChangeText={onChangeNumber}
                value={number}
                placeholder="useless placeholder"
                // 숫자만 입력받음
                keyboardType="numeric"
            />
            <TextInput
              editable
              // TextArea
              multiline
              numberOfLines={4}
              maxLength={40}
              onChangeText={text => onChangeText(text)}
              value={value}
              style={{padding: 10}}
            />
        </View>
    )
}

TextInput에서 multiline속성으로 Textfield를 TextArea처럼 사용 할 수 있다.

ScrollView

한 번에 렌더링 되는 스크롤이 가능한 뷰 위젯 스크롤 뷰에는 하나의 위젯만 넣어야 한다!

<ScrollView>
    <Text>
        Lorem ipsum dolor sit amet, 
        consectetur adipiscing elit, 
        sed do eiusmod tempor incididunt ut 
        labore et dolore magna aliqua. 
    </Text>
</ScrollView>

FlatList

데이터 양이 많은 경우 스크롤에 의해서 렌더링되는 뷰 위젯 data와 renderItem을 필수 props로 받음

• data : 만들 리스트의 source
• renderItem : data의 값 하나하나를 render해주는 콜백함수
• keyExtractor : id를 대신 할 key
• getItemLayout : 동적크기를 사용 할 필요가 없는 경우 미리 크기를 지정
• initialNumToRender : 초기 랜더링 개수

  const renderItem = useCallback(({item}) => <ListItem item={item} />, [])
  const keyExtractor = useCallback((item) => item.id.toString(), [])
  const getItemLayout = useCallback(
   (data, index) => ({
       length: ITEM_HEIGHT,
       offset: ITEM_HEIGHT * index,
       index,    
   }), 
   []
  );
  

렌더링 성능 향상을 위해서 renderItem과 keyExtreactor는 익명함수를 useCallback으로 사용하는 것이 좋다.


# SectionList
섹션이 있는 스크롤에 의해 렌더링 되는 뷰 위젯
renderItem과 sections을 필수 props로 받음
 - sections : flatList의 `data`와 같음 array형태의 source
 - renderItem : `sections`의 값 하나하나를 render해주는 콜백함수

사용법은 FlatList와 동일함

# Button
일반적인 클릭이벤트를 적용할 수 있는 버튼 위젯
title의 속성은 안드로이드에서 대문자로 표시 됨

<Button onPress={()=>{buttonClickEvent()}} title="inner Text" color="#841584" disabled accessibilityLabel="Learn more about this purple button"//웹 접근성을 위한 요소 />

# Switch
토글로 사용되는 버튼 위젯
 - trackColor : 토글 on/off 배경색상(ios는 ios_backgroundColor로 false상태 색상 지정)
 - thumbColor : 토글 버튼 원형 안쪽 색상
 - onValueChange : value 상태에 대한 setState()
 - value : 토글 상태가 on으로 전환(기본 값: false)

<Switch trackColor={{false: '#767577', true: '#81b0ff'}} thumbColor={isEnabled ? '#f5dd4b' : '#f4f3f4'} ios_backgroundColor="#3e3e3e" onValueChange={toggleSwitch} value={isEnabled} /> ```

Components

react-native에서는 웹에서 사용하는 태그를 다음의 컴포넌트로 표현한다.

사용

react-native는 display: flex flex-direction: column이 기본값이다.

View

import React from 'react';
import {View} from 'react-native';

export defalut function App() =>{
    return <View 
            style={{
                borderColor: 'blue',
                borderWidth: '1',}}>
            </View>
}

Text

import React from 'react';
import {View, Text, StyleSheet} from 'react-native';

type startMsg = {
    msg: string;
}
const styles = StyleSheet.create({
  container: {
     borderColor: 'blue',
     borderWidth: '1',
  },
  item: {
    padding: 10,
    fontSize: 18,
    height: 44,
  },
});
export defalut function App(msg:startMsg) =>{


    return <View style={styles.container}>
                <Text style={styles.item}>{msg}</Text>
            </View>
}

Image

import React from 'react';
import {Image} from 'react-native';

export defalut function ImgList(){
    return <Image source={{uri: 'https://reactnative.dev/img/tiny_logo.png',}}>
    </Image>
}

ScrollView

부모요소를 기준으로 한 높이에서 스크롤을 제공함

..
export defalut function App(){
    return <ScrollView>
        <Text>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
          aliquip ex ea commodo consequat. Duis aute irure dolor in
          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
          culpa qui officia deserunt mollit anim id est laborum.
        </Text>
    </ScrollView>
}

React란?

사용자 인터페이스를 만드는 자바스크립트 라이브러리 페이스북 개발팀에서 개발

리액트는 타 프레임워크가 MVC, MVW패턴을 고려함과 달리 View만 신경쓴다. 데이터의 변화에 따라서 화면을 렌더링¹ 하면서 성능을 아끼고 최적화 한다. _{렌더링: 사용자화면에 뷰를 보여주는 것}

어떻게? -> Virtual DOM 방식을 사용해서 DOM처리 횟수를 줄이고 효율적으로 진행한다.

Virtual DOM?

가상돔(Virtual DOM)을 이해하기 전에 먼저 돔(DOM)에 대한 이해가 필요하다.

1. DOM이란?

DOM(Document Object Model)은 객체로 문서의 구조를 표현하는 방법으로 XML이나 HTML로 작성되며 트리구조로 이루어져있다.

2. Virtual DOM이란?

Virtual DOM은 이 트리구조로 작성된 자바스크립트 객체인 DOM을 추상화 한 모델이다.

3. Virtual DOM의 작동원리

1. 데이터가 업데이트 되면 전체 UI를 Virtual DOM에 리렌더링 함
2. 이전의 Virtual DOM에 내용과 비교
3. 변화 된 부분만 실제 DOM에 적용

즉, 변화 된 부분만 적용하기 때문에 실제 DOM을 조작하는 것 보다 성능이 향상 될 수 있다. 이 Virtual DOM을 활용하는 것이 리액트의 가장 큰 특징이며 장점이고 핵심이다.

JSX문법

1. 자바스크립트 코드는 {}중괄호 구역 안에서 사용한다. return <p>{text}</p>
2. 하나의 루트를 가지고 리턴한다. return <div></div>
3. 모든 태그를 잘 닫아야한다. </>

props와 state

1. props?

리액트에서 컴포넌트에 속성을 설정 할 때 사용하는 요소

props는 properties를 줄인 말로 컴포넌트 내부에서 속성을 설정할 때 사용되며 부모 컴포넌트에 의해 설정되며 값을 전달 할 수 있다.

2. State?

컴포넌트 내부에서 바뀔 수 있는 값

props가 부모 컴포넌트에서 값이 설정 됨과 다르게 state는 컴포넌트 내부에서 바뀔 수 있는 값이다.

react map()함수

컴포넌트를 반복시켜서 렌더링 할 때 자바스크립트 내장객체인 map()함수를 사용하게 된다. 리액트에서 map()함수는 자바스크립트의 함수와 동일하지만 반환값에 join()을 별도로 사용하지 않아도 된다는 편의점이 있다.

1. map()사용 시 주의점

react에서 map()함수를 사용해서 컴포넌트의 요소를 구성할 때 주의할 점은 key props값을 유일한 값으로 넣어주어야 한다는 점이다.

2. key props?

react가 어떤 항목에 대해 변경, 추가 또는 삭제할지에 대한 식별 값

react에서 컴포넌트 배열의 변화를 감지할 때 순차적으로 위에서부터 읽어들이게 된다. 이때 key를 설정하면 이 key값의 변화를 읽어 변화를 좀 더 빠르게 알아낼 수 있다. 그래서 key값은 유일한 값으로 설정해야 렌더링 성능 향상에 유리하다.

Component?

리액트에서 요소를 구성하는 요소들의 집합체

1. class type component

state 기능 및 라이프사이클 기능을 사용할 수 있고 임의의 메서드를 정의할 수 있는 컴포넌트

1-1. 클래스형 컴포넌트에서의 라이프사이클 메서드

• componentDidMount
• componentDidUpdate
• componentWillUnmount

1-2. 클래스형 컴포넌트 사용

import { Component } from 'react';

class App extends Component{
    render(){
        const text = '클래스형컴포넌트';
        return <div>{text}</div>;
    }
}

2. function type component

컴포넌트의 라이프사이클을 useState와 useEffect로 관리하고 일반적인 함수의 형태로 선언되는 컴포넌트

v16.8이후로 Hooks를 통한 함수형 컴포넌트의 상태관리가 가능하므로 함수형 컴포넌트의 사용을 권장하고 있다.

2-1. 함수형 컴포넌트 사용

function App(){
    const text = '함수형컴포넌트';
    return<div>{text}</div>;
}
export defalut App;

3. 차이점 및 장단점

1. 클래스형은 라이프사이클 메서드를 통해 컴포넌트의 라이프사이클을 관리한다.
2. 클래스형에 비해 함수형이 선언이 편하며 자원소모도 적다.
3. 클래스형은 state값을 this.state로 설정하고 this.setState로 핸들링한다. 함수형은 useState로 설정하고 핸들링한다.
4. 클래스형은 props값을 this.props로 불러오고 함수형은 랜더함수의 파라미터로 전달받아 사용한다.

react 성능 최적화?

1. 상태를 업데이트 할 때 기존값을 업데이트 하지 않도록 함 - 불변성유지
   • 예시) 배열에 새로운 항목 추가 시 push 대신 concat 사용
2. 컴포넌트 배열 구성 시 key props값을 유일한 값으로 설정 - 변화 감지가 빠름
3. 함수형 컴포넌트의 사용 - 메모리자원의 사용이 적고 빌드파일의 크기도 작음