Homile

📌 오늘도 어제와 같이 너무 너무 더운날이다!! 하지만 에어컨과 함께라면 공부하는데 전혀 지장이 없다 😀 😀
     오늘은 Redux를 배우기전에 상태관리를 왜 하는지 학습하고 Redux를 미리 학습해볼 예정이다.(이미 학습 해본건 안비밀)

📗 오늘 학습한 내용

프론트엔드 개발 상태관리

• 상태: UI에 동적으로 표현될 데이터(변하는 데이터)
• Side Effect: 함수(컴포넌트)의 입력 외에도 함수의 결과에 영향을 미치는 요인
  • 대표적인 예: 네트워크 요청 (백엔드 API 요청)
• 로컬: 특정 컴포넌트 안에서만 관리되는 상태
  • 다른 컴포넌트와 데이터를 공유하지 않는 폼 데이터 (input box, select box 등)
• 전역: 프로덕트 전체 혹은 여러 컴포넌트에서 관리되는 상태
  • 다른 컴포넌트와 상태를 공유하고 영향을 끼치는 상태
  • 전역 변수를 남용하는 것은 좋지 않지만 서로 다른 컴포넌트가 동일한 상태를 다룰 때는 출처는 오직 한 곳에서 상태를 관리해야 한다. (하나의 출처 = 전역 공간)
  • 데이터 무결성을 위해 동일한 데이터는 항상 같은 곳에서 데이터를 가지고 오도록 한다. (Single source of truth)
    • 데이터 무결성: 데이터의 정확성을 보장하기 위해 데이터의 변경이나 수정 시 제한을 두어 안정성을 저해하는 요소를 막고 상태들을 항상 옳게 유지하는 것.
  • 전역으로 상태 관리하는 경우
    • 테마 설정
    • 국제화 설정
• 상태 관리를 위한 툴
  • React Context
  • Redux
  • MobX
• 상태 관리 툴의 기능
  • 전역 상태 저장소 제공
  • Props drilling 이슈 해결

📘 추가로 공부할 내용

[udemy] React 완벽 가이드 강의 보기 (매일 조금씩 이라도 꾸준히 듣기)

Redux 공부해보기

📝 중요한 내용

• 상태관리를 할 때, 로컬과 전역을 잘 활용해야 한다.
• Redux: 상태관리도구

📌 React에서 사용하는 styled component를 더욱 잘 사용할 수 있게 되었고, UI 패턴 구현을 할 수 있고 어떤 형식으로 이루어지는지 잘 알 수 있는 시간이었습니다.

📗 오늘 학습한 내용

Styled Component를 사용한 UI 패턴 구현

• Autocomplete Component (자동완성 구현)
• ClickToEdit Component (input focus 구현)

stopPropagation

• 이벤트 버블링을 해결 할 수 있다.
• 인벤트 버블링: 자식 태그를 감싸고 있는 부모 태그를 클릭 시 자식 태그도 이벤트에 반응하게 되는 현상.

📘 추가로 공부할 내용

[udemy] React 완벽 가이드 강의 보기 (매일 조금씩 이라도 꾸준히 듣기)

📝 중요한 내용

• useRef
• Styled Component

📌 오늘은 스터디원과 페어가 되었다!!! 조금은 편안하게 페어활동을 할 수 있을 것 같다!! 내가 잘 하지 못하는 css의 영역이기 때문에 이전날 css를 최대한 공부해서 다행이다...😀

📗 오늘 학습한 내용

Styled Component를 사용한 UI 패턴 구현

• Modal 구현
• Toggle 구현
• Tab 구현
• Tag 구현

[udemy] React 완벽 가이드 강의

• className도 prop으로 넘겨줄 수 있다.

📘 추가로 공부할 내용

[udemy] React 완벽 가이드 강의 보기 (매일 조금씩 이라도 꾸준히 듣기)

📝 중요한 내용

• Styled Component 사용
  • ``(백틱)으로 감싼다.

📌 CDD에 대해서 학습하는 날이다.. 요즘 비가와서 그런지 기분이 한층 다운된 상태로 유지하고 있다... 조금 더 힘내서 기운을 되찾아서 열심히 해보자!!!

📗 오늘 학습한 내용

CDD (Component Driven Development)

• 기획자가 이전에 요청 받았던 기능을 똑같이 사용하도록 요청했다. 이때, 팀에서 같은 UI 컴포넌트를 공유한다면 고민하지 않고 컴포넌트를 재새용 할 수 있는 방법론이 CDD이다.
• 부품 단위로 UI 컴포넌트를 만들어 나가는 개발을 하는 것.

CSS in JS

• 프로젝트의 규모나 복잡도가 점점 커지고 함께 작업할 팀원 수도 많아지면서 CSS를 작성하는 일관된 패턴이 없어서 효율적으로 작업하기 위해 구조화된 CSS가 필요해졌다.
• 위의 문제점을 해결하기 위해 나온것이 CSS 전처리기이다.
  • CSS 전처리기: 많은 반복적인 작업을 요구하고 값을 찾는 번거로운 작업이 많아지면서 자연스럽게 CSS 문서의 양도 증가하여 유지관리에 영향을 끼쳤는데 이런 문제를 해결하기 위함.
    • 전처리기를 통해CSS 파일들을 잘 구조화할 수 있게 되었고, 최소한 CSS 파일을 몇 개의 작은 파일로 분리 할 수 있는 방법이 생겼다.
• CSS 전처리기 중 가장 유명한 것은 SASS(Syntactically Awesome Style Sheets)
  • SASS: CSS를 확장해 주는 스크립팅 언어
    • CSS를 만들어주는 언어로서 JS 특정 속성의 값을 변수로 선언하여 필요한 곳에 선언된 변수를 적용할 수 있으며, 반복되는 코드를 한 번의 선언으로 여러 곳에서 재사용할 수 있도록 해주는 기능 등을 가지고 있다.
    • 하지만, 장점보다 다른 문제들을 더 많이 만들어지는 것이 밝혀졌습니다.
    • 내부에서 어떤 작업을 하는지 알지 못한 채, 스타일이 겹치는 문제를 해결하기 위해 계층 구조를 만들어 내는 것에 의지하여 컴파일된 CSS의 용량은 생각지도 못하게 커져있었습니다.
• 전처리기 문제 보완 방법론
  • BEM, OOCSS, SMACSS
    • 공통 지향점
      • 코드의 재사용
      • 코드의 간결화(유지 보수 용이)
      • 코드의 확장성
      • 코드의 예측성(클래스 명으로 의미 예측)
• BEM
  • 대표적인 CSS 방법론
  • Block, Element, Modifier로 구분하여 클래스명을 작성하는 방법 (--와__로 구분한다)
  • 클래스명은 BEM 방식의 이름을 여러 번 반복하여 재사용할 수 있도록 한다.
• Styled-Component
  • 기능적 혹은 상태를 가진 컴포넌트들로부터 UI를 완전히 분리해 사용할 수 있는 아주 단순한 패턴을 제공
  • CSS를 컴포넌트화 시키는 라이브러리
    • 사용하는 이유
      • class, id 이름을 짓느라 고민될 때
      • CSS 파일 안에서 원하는 부분을 찾기 힘들 때
      • CSS 파일이 너무 길어져서 파일을 쪼개서 관리해본 적이 있을 경우
      • 스타일 속성이 겹쳐서 내가 원한느 결과가 나오지 않은 경우
• Storybook
  • UI 개발, CDD를 하기 위한 도구
  • 컴포넌트들을 따로 볼 수 있게 구성해 주어 한 번에 하나의 컴포넌트에서 작업할 수 있다.
  • 복잡한 개발 스택을 시작하거나, 특정 데이터를 데이터베이스로 강제 이동하거나, 애플리케이션을 탐색할 필요 없이 전체 UI를 한눈에 보고 개발할 수 있다.
• useRef
  • DOM 노드, 엘리먼트, React 컴포넌트 주소값을 참조할 수 있다.
  • useRef로 선언된 주소값은 컴포넌트가 re-render 되더라도 바뀌지 않는다.
  • 활용예제
    • focus
    • text selection
    • media playback
    • 애니메이션 적용

📘 추가로 공부할 내용

[udemy] React 완벽 가이드 강의 보기 (매일 조금씩 이라도 꾸준히 듣기)

UI/UX 패턴 React에서 구현해보기

useRef 사용법 자세히 찾아보기

📝 중요한 내용

• CDD
• CSS - in - JS
• BEM
  • Block, Element, Modifier로 구분하여 클래스명을 작성하는 방법 (--와__로 구분한다)
• Styled-Component
  • CSS를 컴포넌트화 시키는 라이브러리

📌 오늘은 피그마를 하는 날이다!!!!!!!!!!!!!!!!!! 페어분이랑 마켓컬리를 피그마로 클론해보았다!

📗 오늘 학습한 내용

와이어프레임(wireframe)

• 선으로 틀을 잡는다는 뜻으로, 제품 기획 단계에서 페이지를 어떻게 구성할 것인지 구조를 잡기위한 목저으로 만든다.
• Low Fidelity Wireframe (Lo-Fi Wireframe)
  • 손으로 빠르게 그린 수준의 와이어 프레임
• Middle Fidelity Wireframe (Mid-Fi Wireframe)
  • Lo-Fi 와이어프레임을 그리면서 아이디어가 어느정도 구체화되고 확정된 후에 보기 좋게 다음어주는 프레임
• High Fidelity Wireframe (Hi-Fi Wireframe)
  • 와이어프레임을 완성본에 가깝게 작성한 프레임

프로토타입

• 실제 제품과 거의 흡사하게 구현한 것으로 페이지 이동과 상호 작용이 가능하다.
• 개발에 들어가기 전 단계에 작성한다.
• UI의 상호 작용을 시뮬레이션하는 것이 목적이다.

📘 추가로 공부할 내용

[udemy] React 완벽 가이드 강의 보기 (매일 조금씩 이라도 꾸준히 듣기)

Figma

• 캐러셀 구현 크기 맞추기

📝 중요한 내용

• 와이어프레임: 코드로 페이지 구현 전 디자인을 틀을 잡는 단계
• 프로토타입: 개발에 들어가기 전 UI 상호 작용을 시뮬레이션하는 단계

📌 장마철이 시작하고 거의 매일 비가 온다고 하네요... 비 오는건 좋지만 나가고 싶지 않으니 집에서 코딩만 ㅎㅎ 그럼 오늘은 UI. UX에 대해서 알아보는 시간이네요!! 화이팅!!

📗 오늘 학습한 내용

UI (User Interface, 사용자 인터페이스)

• 사람들이 컴퓨터와 상호 작용하는 시스템을 의미한다.
• 화면상의 그래픽 요소외에도 키보드, 마우스 등의 물리적 요소도 컴퓨터와 상호 작용하기 위한 시스템이므로 UI라고 볼 수 있다.

GUI (Graphical User Interface, 그래픽 사용자 인터페이스)

• 사용자가 그래픽을 통해 컴퓨터와 정보를 교환하는 작업환경을 말한다.
•  운영체제의 화면, 애플리케이션의 화면이 GUI이다.

UX (User Experience, 사용자 경험)

• 사용자가 어떤 시스템, 제품, 서비스를 직・간접적으로 이용하면서 느끼고 생각하는 총체적 경험이다.
• 제품, 서비스 자체에 대한 경험은 물론, 홍보, 접근성, 사후 처리 등 직간접적으로 관련된 모든 경험을 사용자 경험이라고 할 수 있다.

📘 추가로 공부할 내용

[udemy] React 완벽 가이드 강의 보기 (props 전달)

Figma 사용법 익혀보기

📝 중요한 내용

• UI와 UX의 관계