'Daily/Today I Learned' 카테고리의 글 목록 (16 Page)

Daily/Today I Learned

22.07.08_TIL 2022.07.08
22.07.07_TIL 2022.07.07
22.07.06_TIL 2022.07.06
22.07.05_TIL 2022.07.05
22.07.04_TIL 2022.07.04
22.07.01_TIL 2022.07.01

22.07.08_TIL

호밀이 2022. 7. 8. 10:38

2022. 7. 8. 10:38

📌 웹 표준과 SEO는 개념을 알고 있긴 하지만 살짝 알고 있을 뿐이고 기술 면접에서 자주 나오는 부분이니 열심히 암기해야 하는 학습이다.!

📗 오늘 학습한 내용

인터넷

전 세계적으로 연결되어 있는 컴퓨터 네트워크 통신망

웹

문서, 이미지, 영상 등 다양한 정보를 여러 사람들과 공유할 수 있는 공간

웹 표준

W3C(World Wide Web Consortium)에서 권고하는 '웹에서 표준적으로 사용되는 기술이나 규칙'
사용자가 어떤한 운영체제나 브라우저를 사용하더라도 웹페이지가 동일하게 보이고 정상적으로 작동할 수 있도록 하는 웹 페이지 제작기법
웹 표준에 맞게 웹 페이지를 작성하면 어떤 브라우저를 사용하든 동일한 결과물을 얻을 수 있다.

웹 표준의 장점

유지 보수의 용이성
웹 호환성 확보
검색 효율성 증대
웹 접근성 향상

Semantic HTML

semantic: 의미가 있는
HTML: 화면의 구조를 만드는 마크업 언어

HTML을 사용하는 두 가지 방식

<div>와 <span>으로 화면 구성
- 두 가지의 요소만 알면 충분히 화면의 구조를 만들 수 있지만, 어떤 내용이 들어갈지는 명시되지 않아서 경험을 토대로 태그가 어떤 역할을 하는지 추측해야하는 어려움이 있다.
시맨틱 요소로 화면 구성
- <header>, <nav>, <main>, 등 여러가지 태그를 사용하여 어떤 역할을 하는 하는지 확실하게 알 수 있다.

시맨틱 HTML의 필요성

개발자간 소통
검색 효율성
웹 접근성

자주 틀리는 태그

인라인 요소 안에 블록 요소 넣기
- 인라인 요소(<span>)
  - 컨텐츠가 차지하는 만큼 영역 지정
  - 항상 블록 요소 안에 들어가야 한다.
- 블록 요소(<div>)
  - 가로로 넓게 화면 영역을 차지한다.
<b>, <i> 요소 사용
- 웹 표준을 준수하기 위해서는 이 요소들을 사용하지 않는 것이 좋다.
- 표현을 기준으로 이름이 지어진 요소이기 때문이다.
- 대신 <strong>, <em>을 사용하는 것이 좋다.
<hgroup> 난발하여 사용
- 글자에 스타일 속성을 적용하기 위한 목적으로 사용하면 안된다.
<br/> 연속 사용
- 이어지는 텍스트 흐름에 줄 바꿈을 하기 위해 사용
- 요소 사이에 간격이 필요한 경우 별도의 단락으로 구별하거나, CSS 속성에 여백을 주는 것이 좋다.
인라인 스타일링 사용
- HTML 요소 안에서 스타일링을 하는 방법보다 CSS 코드를 분리하여 작성하는 것이 좋다.
- HTML 안에 작성할 경우 분리한 영역을 다시 합치는 것이 되기 때문이다.

크로스 브라우징(Cross Browsing)

웹 사이트에 접근하느 브라우저의 종류에 상관 없이 동등한 화면과 기능을 제공할 수 있도록 만드는 작업
모든 브라우저에서 완전히 똑같이 화면이 보이도록 하는 것은 아닌, 모든 브라우저에서 동등한 수준의 정보와 기능을 제공하는 것이다.

크로스 브라우징 워크 플로우

초기 기획
- 어떤 웹 사이트를 만들 것인지 정확하게 결정
- 어떤 컨텐츠와 기능, 디자인은 어떻게 할지 등의 사항을 결정한다.
개발
1. 코드를 작성할 때 사용하는 코드가 각 브라우저에서의 호환성이 어떤지 파악하고 사용해야 한다.
2. https://caniuse.com/
테스트 / 발견
1. 안정적인 테스크톱 브라우저에서 테스트를 진행한다.
2. 휴대폰 및 태플릿 브라우저에서 테스트를 진행한다.
3. 초기 기획 단계에서 목표했던 브라우저가 있다면 해당 브라우저에서 테스트를 진행한다.
4. Window, Linux, Mac 등 다양한 운영 체제에서도 테스트를 진행한다.
수정 / 반복
- 버그의 수정을 하기 위함

SEO (Search Engine Optimization, 검색 엔진 최적화)

SEO를 통해 검색 엔진에서 웹 페이지를 보다 더 상위에 노출 될 수 있게끔 할 수 있다.
On-Page SEO
- 페이지 내부에서 진행할 수 있는 SEO, 제목과 컨텐츠, 핵심 키워드의 배치, 효율적인 HTML 요소 사용법 등을 이용하는 방법
Off-Page SEO
- 웹 사이트 외부에서 이루어지는 SEO, 소셜 미디어 홍보, 백링크 등을 이용하는 방법

On-Page 통제 요소

<title> 요소
- 검색 결과창에 제목에 해당하는 요소이며, <head>의 자식 요소이다.
- 어떤 내용을 작성하는가에 따라서 검색 후 유입까지 유도할 수 있다. (제목 길이를 짧게)
- 핵심 키워드가 포함되면 상위에 노출될 확률이 높아진다. (핵심 키워드는 한번만 포함)
<meta> 요소
- 메타 데이터를 담는 요소이며, <head>의 자식요소이다.
- 웹 사이트에서 다루고 있는 데이터가 무엇인지에 대한 데이터
- 검색 결과창에서 제목 밑에 따라오는 설명글
<hgroup> 요소
- 제목을 표시하는 용도
컨텐츠
- 개성있는 브랜딩
- 복사 + 붙여넣기 금지
- 간결한 제목과 설명글
- 최대한 글자로 작성하기

📘 추가로 공부할 내용

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

[python] leetcode 문제풀이

[React] 혼자 제작한 CRUD 프로젝트 리팩토링

📝 중요한 내용

웹 표준이란?
웹 표준을 지켜야 하는 이유
웹 표준을 사용했을 경우의 장점
자주 틀리는 태그(시맨틱 태그를 활용하는 방법)
크로스 브라우징
SEO, 검색 엔진 최적화

'Daily > Today I Learned' 카테고리의 다른 글

22.07.12_TIL (0)	2022.07.12
22.07.11_TIL (2)	2022.07.11
22.07.07_TIL (0)	2022.07.07
22.07.06_TIL (0)	2022.07.06
22.07.05_TIL (0)	2022.07.05

📌 어제 배운 내용의 React Redux를 사용한 과제를 다시 한번 복습하는 차원에서 푼다음에 파일의 전체적인 구조에 대해서 페어님과 함께 차근차근 뜯어보는 시간을 가졌습니다. 작은 쇼핑몰에서 물건을 장바구니에 담고 삭제하는 페이지였지만 많은 state와 컴포넌트가 존재하였고 어떻게 하나하나 작은 단위로 컴포넌트를 만들어야 하는지에 대해서 감을 익히는 시간이 되었습니다. 다음에 프로젝트를 하게 된다면 꼭 컴포넌트 분리를 작업 단위로 나눠서 재사용성을 높일 수 있도록 작업을 해야겠다는 마음가짐을 다시 잡는 하루였습니다!!

📗 오늘 학습한 내용

React-Redux

Action을 정의하는 과정에서 Dispatch를 사용하여 Action안에서 Reducer를 실행 할 수 있도록 하는 것을 깨달았습니다. 물론 파일을 직접 분해해보고 Action안에 Dispatch(Reducer)가 있어서 생각할 수 있었습니다.

📘 추가로 공부할 내용

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

React-Redux-toolkit 공부해보기

📝 중요한 내용

Redux를 사용하여 상태관리를 할 때에는 꼭 props드릴링이 발생하는지 확인하고 사용해야한다.
드릴링이 발생하지 않고 사용하게되면 Redux를 낭비하게 되는 것이다.

'Daily > Today I Learned' 카테고리의 다른 글

22.07.11_TIL (2)	2022.07.11
22.07.08_TIL (0)	2022.07.08
22.07.06_TIL (0)	2022.07.06
22.07.05_TIL (0)	2022.07.05
22.07.04_TIL (0)	2022.07.04

22.07.06_TIL

호밀이 2022. 7. 6. 18:00

2022. 7. 6. 18:00

📌 Redux 상태 관리 라이브러리를 실습하는 날이다. 어제는 prop를 남발하여 prop drilling이 생겼다는 것을 알 수 있었다. 하지만 React-Redux를 사용하게 될 경우 store(상태 저장소)에서 상태를 관리(갱신, 수정, 삭제 등)를 하고 있기때문에 위의 문제점을 해결할 수 있다는 것을 알았고, Redux를 실제로 사용해보며 손에 익힐 수 있는 시간이 되었다!!

📗 오늘 학습한 내용

Redux

상태 관리 라이브러리 (React 없이도 사용 가능)
컴포넌트와 상태를 분리하는 패턴
상태 변경 로직을 컴포넌트로부터 분리하여 단순한 함수 컴포넌트를 만들 수 있게 해준다.

Redux를 사용하는 이유

모든 컴포넌트에서 prop 없이 state를 직접 꺼낼 수 있다.
- 상위 컴포넌트에서 하위 컴포넌트로 state를 넘겨야 하는데 하위 컴포넌트가 너무 많을 경우 사용한다.
- state를 보관하는 파일을 하나 만들어서 state를 보관하여 모든 컴포넌트들이 props 없이 꺼내서 사용할 수 있다.
상태(state)를 관리하기 용이하다.
- 모든 컴포넌트에서 state를 변경하기 시작할 경우 Redux를 사용하지 않는다면 에러를 찾기 힘들지만 state 저장소에서 바로 찾을 수 있다.

Redux의 상태 관리 구조: (Action → Dispatch → Reducer → Store)

상태가 변경되어야 하는 이벤트가 발생하면 변경될상태에 대한 정보가 담긴 Action 객체 생성
Action객체: Dispatch 함수의 인자로 전달
- 어떤 액션을 취할 것인지 정의해 놓은 객체
- type은 Action 객체가 어떤 동작을 하는지 명시해주는 역할을 하기 때문에 필수로 지정해야 한다.(대문자, Snake Case로 작성)
- payload* : 액션에 필요한 추가 데이터
Dispatch 함수: Action 객체를 Reducer 함수로 전달
- Reducer로 Action을 전달해주는 함수
Reducer 함수: Action 객체의 값을 확인하고, 그 값에 따라 전역 상태 저장소 Store의 상태를 변경
- Dispatch에게서 전달받은 Action 객체의 type에 따라 상태를 변경하는 함수 (순수 함수)
상태가 변경되면, React는 화면을 재 렌더링
Store: 상태가 관리되는 오직 하나뿐인 저장소의 역할

Redux의 세 가지 원칙

Single source of truth
- 동일한 데이터는 항상 같은 곳에서 가지고 와야한다.
State is read-only
- 상태는 읽기 전용이라는 뜻으로, Redux의 상태를 직접 변경할 수 없고, Action 객체가 있어야만 상태를 변경할 수 있다.
Changes are made with pure functions
- 변경은 순수함수로만 가능하다.
- 상태가 엉뚱한 값으로 변경되는 일이 없도록 순수함수로 작성되어야 하는 Reducer와 연결되는 원칙.

📘 추가로 공부할 내용

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

Redux 복습해보기

📝 중요한 내용

Redux의 구조: Action -> Dispatch -> Reducer -> Store
Redux를 사용하는 이유
Redux의 세 가지 원칙

'Daily > Today I Learned' 카테고리의 다른 글

22.07.08_TIL (0)	2022.07.08
22.07.07_TIL (0)	2022.07.07
22.07.05_TIL (0)	2022.07.05
22.07.04_TIL (0)	2022.07.04
22.07.01_TIL (0)	2022.07.01

22.07.05_TIL

호밀이 2022. 7. 5. 10:23

2022. 7. 5. 10:23

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

📗 오늘 학습한 내용

프론트엔드 개발 상태관리

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

📘 추가로 공부할 내용

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

Redux 공부해보기

📝 중요한 내용

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

'Daily > Today I Learned' 카테고리의 다른 글

22.07.07_TIL (0)	2022.07.07
22.07.06_TIL (0)	2022.07.06
22.07.04_TIL (0)	2022.07.04
22.07.01_TIL (0)	2022.07.01
22.06.30_TIL (0)	2022.06.30

22.07.04_TIL

호밀이 2022. 7. 4. 22:07

2022. 7. 4. 22:07

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

📗 오늘 학습한 내용

Styled Component를 사용한 UI 패턴 구현

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

stopPropagation

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

📘 추가로 공부할 내용

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

📝 중요한 내용

useRef
Styled Component

'Daily > Today I Learned' 카테고리의 다른 글

22.07.06_TIL (0)	2022.07.06
22.07.05_TIL (0)	2022.07.05
22.07.01_TIL (0)	2022.07.01
22.06.30_TIL (0)	2022.06.30
22.06.28_TIL (0)	2022.06.28

22.07.01_TIL

호밀이 2022. 7. 1. 22:45

2022. 7. 1. 22:45

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

📗 오늘 학습한 내용

Styled Component를 사용한 UI 패턴 구현

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

[udemy] React 완벽 가이드 강의

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

📘 추가로 공부할 내용

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

📝 중요한 내용

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

'Daily > Today I Learned' 카테고리의 다른 글

22.07.05_TIL (0)	2022.07.05
22.07.04_TIL (0)	2022.07.04
22.06.30_TIL (0)	2022.06.30
22.06.28_TIL (0)	2022.06.28
22.06.27_TIL (0)	2022.06.27

PREV 이전 1 ···13 14 15 16 17 18 19 ···26 NEXT 다음

Homile