Homile

📌 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의 관계

📌 힙(Heap)이란?

• 최댓값과 최솟값을 빠르게 찾기 위해 고안된 자료구조
• 힙은 최대힙, 최소힙으로 나눠집니다.
• 힙 트리에서는 중복된 값을 허용한다. (이진 탐색 트리에서는 중복된 값을 허용하지 않는다.)
• 시간복잡도 = O(log n)

✅ 최대힙

부모 노드의 키 값이 자식 노드의 키 값보다 크거나 같은 완전 이진 트리

key(부모) >= key(자식)

✅ 최소힙

부모 노드의 키 값이 자식 노드의 키 값보다 작거나 같은 완진 이진트리

key(부모) <= key(자식)

🍀 힙의 구현

• 힙을 저장하는 표준적인 자료구조는 배열이다.
• 구현을 쉽게하기 위하여 배열의 첫 번째 인덱스인 0은 사용되지 않는다.
• 특정 위치의 노드 번호는 새로운 노드가 추가되어도 변하지 않는다.
  • 루트 노드의 오른쪽 노드의 번호는 항상 3이다.
• 부모 노드와 자식 노드의 관계
  • 왼쪽 자식 인덱스 = (부모의 인덱스) * 2 
  • 오른쪽 자식 인덱스 = (부모의 인덱스) * 2 + 1 
  • 부모의 인덱스 = (자식의 인덱스) / 2

✅ 삽입 연산

1. 삽입하고자 하는 값을 트리의 가장 마지막 원소에 추가한다.
2. 부모 노드와의 대소관계를 비교하면서 만족할 때까지 자리 교환을 반복한다.

✅ 삭제 연산

1. 힙에서는 루트 노드만 삭제가 가능하므로 루트 노드를 제거한다.
   1. 최대 힙에서 삭제 연산은 최댓값을 가진 요소를 삭제하는 것이다.
2. 삭제된 루트 노드에는 힙의 마지막 노드를 가져온다.
3. 자식노드와 비교하여 조건이 만족할 때까지 이동시킨다.

📝 추가자료

• 힙구현

📌 습하고 눅눅하던 목요일이 지나고 맑은 하루를 졸린눈으로 시작했습니다🥲 새벽까지 새로운 리액트 강의를 들었는데 내용이 너무 좋아서 시간 가는줄 모르고 들었습니다. 강의는 유데미의 'React 완벽가이드'라는 제목의 외국 강사분께서 강의하는 내용이었는데 리액트를 사용하는 이유부터 차근차근 설명해주시고 내용이 리액트에 대한 내용이 깊이있어서 천천히 학습 할 수 있었습니다.
또, 이번에 진행했던 express 서버를 구현해서 리액트를 이용한 crud를 프로젝트에 fetch를 해서 실제 서버에서 API 데이터를 받아와 렌더링을 해보기로 해서 마음이 들떴습니다. 이번에도 무사히 해결할 수 있도록 기대해 봅니다.**

📗 오늘 학습한 내용

JSON (JavaScript Object Notation)

• 구조가 재귀 함수를 사용할 수 있는 트리 구조이다.
• 데이터 교환을 위해 만들어진 객체 형태의 포맷
• 데이터를 보내는 발신자와 받는 수신자가 같은 프로그램을 사용하거나, 문자열처럼 범용적으로 읽을 수 있는 형태여야 가능

JSON 전송 가능한 조건 (transferable codition)

• 수신자와 발진가가 같은 프로그램을 사용한다.
• 문자열처럼 범용적으로 읽을 수 있어야 한다.

JSON.stringify: 객체를 JSON으로 변환

• 직렬화(serialize)
• 변환된 객체의 타입은 문자열

JSON.parse: JSON을 객체로 변환

• 역직렬화(deserialize)

📘 추가로 공부할 내용

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

React에 로컬서버 API 데이터 불러오기

• express 로컬 서버 구현 
  • 데이터 조회
  • 데이터 추가
  • 데이터 수정
  • 데이터 삭제
• React CRUD 프로젝트에 적용
  • API 데이터 조회 후 렌더링
    • React로 만든 페이지 새로고침해도 데이터 날아가지 않게하기.
  • API 데이터에 추가
  • API 데이터 수정 후 추가
  • API의 데이터 삭제

📝 중요한 내용

• JSON.stringify: 객체를 JSON으로 변환
• JSON.parse: JSON을 객체로 변환

Create React App

리액트 프로젝트를 시작하는 가장 쉬운방법입니다.

기본적인 리액트 코드 파일이 있는 미리 설정된 폴더들과 상용화할 수 있는 리액트 앱을 구축할 수 있도록 돕는 가장 중요한 환경설정 파일들이 존재합니다. 작성한 프로그램을 미리보기 할 수 있도록 해주고 코드나 기타 다른 것들이 변경될 때마다 브라우저가 자동적으로 페이지를 업데이트 하는 방식으로 이 프로그램을 미리 볼 수 있어 개발 과정을 단순화시켜 줍니다.

node.js

브라우저 밖에서 자바스크립트 코드가 실행될 수 있도록 하는 자바스크립트 런타임이 필요하다. 리액트를 위해 필요한 것은 아니지만 create react app을 실행하기 위해 node.js가 필요하기 때문에 node.js를 먼저 설치를 해줘야 한다.

Create React App 명령어 사용

• 터미널을 실행한 후 경로를 설정한다.
• npx create-react-app "생성할 폴더명"

• 명령어 실행 후 아래와 같은 화면이 나온다면 정상적으로 설치 된 것이다.

• 설치가 정상적으로 되었다면 생성된 리액트 폴더에 연결하여 npm start 명령어를 작성하면 리액트 서버가 실행됩니다.

• 정상적으로 실행되었다는 문구가 나온다면 http://localhost:3000/ 에 접속하여 실행결과를 볼 수 있습니다.(기본경로)

• 서버를 종료하고 싶다면 서버가 구동중인 터미널로 가서 ctrl+c를 눌러 구동을 멈출 수 있습니다.
• VScode를 사용중이라면 리액트 폴더를 열어서 npm install 명령을 사용하여 package.json에 있는 프로젝트에 필요한 모든 패키지와 개발에 필요한 것들을 다운로드해서 설치합니다.