Today Hailie Learned

SEO가 무엇인지 SEO의 종류 SEO가 왜 필요한지 SEO에 영향을 미치는 요소의 종류와 각 요소의 작성 방법 SEO란? 검색 엔진의 작동 방식에 맞게 웹 페이지를 최적화해주는 작업 SEO를 통해 검색 엔진에서 웹페이지를 더 상위에 노출될 수 있도록 만든다. SEO의 2가지 종류 ✔️ On-Page SEO 웹 페이지 내부에서 진행할 수 있는 SEO. 제목, 콘텐츠, 핵심 키워드의 배치, 효율적인 HTML 요소 사용법을 이용하는 방법 Off-Page SEO 웹 페이지 외부에서 이루어지는 SEO. 소셜 미디어 홍부, 백링크(타 사이트에서 연결되는 링크) 등을 이용하는 방법 (웹 페이지 내용이나 구조와 관계없다.) 구글에 특정 키워드를 검색하면 나오는 게시글 중에 상위에 있는 컨텐츠를 클릭해서 HTML 요소..

웹 표준은 어떤 환경에서도 이용할 수 있는 웹 페이지를 만들 수 있는 방법이다. 더 많은 사람들이 이용할 수 있는 웹 페이지를 만들 수 있도록 해보자! 웹 표준의 개념 웹 표준의 등장 배경 웹 표준을 왜 지켜야하는지 / 필요성 웹 표준의 개념 인터넷이 웹보다 더 포괄적인 개념이다. 인터넷 : 전 세계적으로 연결되어 있는 컴퓨터 네트워크 통신망 (웹, 온라인 게임, 모바일 앱, 이메일 등 네트워크를 사용하는 다양한 서비스 모두 포함) 인터넷은 클라이언트와 서버로 구성되며, TCP/IP라는 기본 프로토콜을 통해 제공되고 있다. 웹(world wide web) : 인터넷 상에서 문서, 이미지, 영상 등 다양한 정보를 여러 사람들과 공유할 수 있는 공간 웹표준 : W3C(World Wide Web Consort..

1. Redux를 왜 쓰는가? 해당 상태를 직접 사용하지 않는 최상위 컴포넌트, 컴포넌트1, 컴포넌트2도 상태 데이터를 가짐 상태 끌어올리기, Props 내려주기를 여러 번 거쳐야 함 애플리케이션이 복잡해질수록 데이터 흐름도 복잡해짐 컴포넌트 구조가 바뀐다면, 지금의 데이터 흐름을 완전히 바꿔야 할 수도 있음 ➥ 상태 관리 라이브러리인 Redux는, 전역 상태를 관리할 수 있는 저장소인 Store를 제공해서 데이터 흐름을 깔끔하게 만들어준다. 2. Redux의 구조 Action 객체 ⇒ Dispatch 함수 ⇒ Reducer 함수 ⇒ 전역 상태 저장소 Store 상태를 변경 ⇒ 화면 리렌더링 상태가 변경되어야 하는 이벤트가 발생하면, 변경될 상태에 대한 정보가 담긴 Action 객체가 생성됩니다. 이 A..

배운점 1. 왜 리덕스를 배울까? 2. 왜 리덕스가 리액트 생태계에서 중요하지? 3. 리덕스를 리액트에서 어떻게 사용하지? 왜 리덕스를 배울까? 리덕스는 크로스 컴포넌트 또는 앱 와이드 상태를 위한 상태 관리 시스템이다. 우리가 상태, 즉 우리 애플리케이션을 변경학 화면에 표시하는 데이터를 관리하도록 도와준다. 리덕스는 우리가 그런 데이터를 다수의 컴포넌트나 심지어는 앱 전체에서 관리하도록 도와준다. 앞에서 배운 state를 3가지로 구분할 수 있다. 1. local state : 데이터가 변경되어서 하나의 컴포넌트에 속하는 UI에 영향을 미치는 상태. (useState() 나 useReducer() 사용) 2. cross-component state : 하나의 컴포넌트가 아니라 다수의 컴포넌트에 영향을..

Storybook이란? ➥ CDD (Component Driven Development)를 하기 위한 도구 각각의 컴포넌트들을 따로 볼 수 있게 구성해 주어 한 번에 하나의 컴포넌트에서 작업할 수 있다. 👉 전체 UI를 한눈에 보고 개발 가능! 주요 기능 UI 컴포넌트들을 카탈로그화하기 컴포넌트 변화를 Stories로 저장하기 핫 모듈 재 로딩과 같은 개발 툴 경험을 제공하기 리액트를 포함한 다양한 뷰 레이어 지원하기 장점 1. 컴포넌트 문서화 👉 재사용성 확대 2. 자동으로 컴포넌트 시각화 👉 시뮬레이션 할 수 있는 다양한 테스트 상태 확인 가능 👉 버그 사전에 차단 가능 3. 테스트 및 개발 속도 개선 Storybook 설치 방법 // 리액트 프로젝트를 다운받았다는 가정 하에, npx storyboo..

CDD ( Component Driven Development ) ➥ 부품 단위로 UI 컴포넌트를 만들어 나가는 개발 방식 ➥ 재사용할 수 있는 컴포넌트를 개발한다. ➥ 상향식 개발 Styled-Component (CSS-in-JS가 나오게 된 배경) CSS 전처리기 ( CSS Preprocessor ) ➥ CSS가 구조적으로 작성될 수 있게 도움을 주는 도구 * 각 CSS 전처리기에 맞는 Compiler를 사용해야 한다. (CSS 전처리기 자체만으로는 웹 서버가 인지하지 못함) ➥ 그래서 CSS 파일들을 잘 구조화할 수 있게 되었고, 최소한 CSS 파일을 몇 개의 작은 파일로 분리할 수 있는 방법이 생긴 것이다. - CSS 전처리기로 가장 유명한 SASS (CSS를 확장해 주는 스크립팅 언어) 장점 :..

와이어프레임(wireframe) = 제품 기획 단계에서 페이지를 어떻게 구성할 것인지 구조를 잡기위한 목적으로 만든다. (스켈레톤) 3가지 레벨의 피델리티(fidelity) 1. Lo-Fi Wireframe (아이디어를 구체화 시키며 큰 그림을 잡을 때 좋다.) 2. Mid-Fi Wireframe (해당 페이지가 어떻게 작동하게 될 지 예상할 수 있다.) 3. Hi-Fi Wireframe (Hi-Fi한 수준까지 만드는 경우는 거의 없다.) 프로토타입(prototype) = 본격적으로 개발에 들어가기 전 단계에 작성하며, UI의 상호 작용을 시뮬레이션하는 것이 목적 ➥ 프로토타입은 실제 제품과 거의 흡사하게 구현한 것으로, 페이지 이동과 상호 작용이 가능!! 3가지 레벨의 피델리티(fidelity) 1. ..

UX는 UI를 포함한다. 또한 좋은 UX가 좋은 UI를 의미하거나, 좋은 UI가 항상 좋은 UX를 보장하지는 않는다. UI UI(User Interface, 사용자 인터페이스)는 사람들이 컴퓨터와 상호 작용하는 시스템을 의미한다. * 화면상의 그래픽 뿐만 아니라, 키보드, 마우스도 UI이다! GUI(Graphical User Interface, 그래픽 사용자 인터페이스) 요즘에는 스마트폰과 컴퓨터뿐만 아니라 스마트워치, 키오스크, 대중교통 터치스크린 안내판 등 화면과의 상호 작용을 통해 사용하는 기기들을 어렵지 않게 찾아볼 수 있다. 이처럼 현대 사회에서는 그래픽 UI, 즉, GUI(Graphical User Interface)가 굉장히 중요한 역할을 한다. GUI는 사용자가 그래픽을 통해 컴퓨터와 정보..

useState const [changeData, setChangeData] = useState('') useState는 리액트 라이브러리에서 제공하는 함수인데 컴포넌트 함수가 다시 호출되는 곳에서 변경된 값을 반영하기 위해 state로 값을 정의할 수 있게 해주는 함수이다. state가 변할 때, 이 컴포넌트 함수를 다시 호출하고 싶으면 state를 업데이트하는 함수(set어쩌고)를 호출하면 된다. 왜냐하면 그 함수를 호출해서 state에 새로운 값을 할당하고 싶다고 리액트에게 말하고 그런 다음 함수는 또한 useState로 state가 등록된 컴포넌트는 재평가되어야한다고 리액트에게 말한다. 그래서 리액트는 이 컴포넌트 함수를 다시 실행하고 또한 이 JSX코드를 다시 평가한다. 그리고 지난 번과 비교해..

방법 1. export default를 써주고 import로 받기 예시 - 내보낼 파일 const person = { name:'Max' } export default person 예시 - 받을 파일 (정확한 이름을 써주지 않아도 된다) import person from './person.js' import prs from './person.js' 방법 2. export만 써주고 중괄호 써서 import하기. (파일 안에서 정의된 정확한 이름 사용) 예시1 - 내보낼 파일 const person = { name:'Max' } 예시1 - 받을 파일 import {person} from './person.js' 한 문장으로 작성도 가능하다. 예시2 - 내보낼 파일 export const clean = () ..