리액트는 가볍게 만들어졌지만 개발자 니즈에 맞춰 많은 라이브러리를 사용하게 되면서, 이런 라이브러리를 골라서 번들링 할 수 있는 웹팩이 필요하게 되었다.

🏁 Bare Minimum src 폴더 만들어서 index.html, script.js, style.css 넣기 멍청한 실수.. 자꾸 src/index.html 을 연다..ㅎ

웹팩으로 웹 애플리케이션 로딩 속도 빠르게 하고 DX와 UX를 좋게하자!

Flex 와 비슷하지만 뭔가 정해진 표(규격) 안에 컨텐츠들을 정리할 수 있다는 느낌이 드는 것이다.Flex 는 한 방향 레이아웃 시스템이고Grid 는 두 방향(가로, 세로) 레이아웃 시스템Grid 레이아웃을 적용하는 시작은 그리드를 쓸 컨테이너에display: gri

검색 엔진의 작동 방식에 맞게 웹 페이지를 최적화 해주는 작업 SEO(Search Engine Optimization, 검색 엔진 최적화) 가 필요하다.

원래의 상태(state)는 최상위 컴포넌트에 위치시키는게 적절하지만, 프로젝트 규모가 커지거나 코드 관리를 용이하게 하기위해서는 Redux 같은 상태관리 툴을 이용할 수 있다

User Interface | User Experience

브라우저는 처리해야 할 특정 사건이 발생하면 이를 감지해 이벤트를 발생 시킨다.만약 이벤트가 발생했을 때 호출될 함수를 브라우저에게 알려 호출을 위임하고이때 이벤트가 발생했을 때 호출될 함수를 이벤트 핸들러이벤트가 발생했을 때 브라우저에게 이벤트 핸들러의 호출을 위임하

상위 컴포넌트의 상태를 변경하는 함수 그 자체를 하위 컴포넌트에 전달하고 그 함수를 하위 컴포넌트가 실행한다. ⇒ 단방향 데이터 흐름에 맞는 해결방법으로 이걸 상태 끌어올리기 라고 한다.

문서 객체 모델(Document Object Model)

요청과 응답을 할 때, '제대로 보내고 받을 수 있는' 일종의 규약, 웹에서 사용되는 데이터나 자원을 HTTP URI로 표현하고, HTTP 프로토콜을 통해 요청과 응답을 정의하는 방식

리소스를 사용하는 앱 `클라이언트` , 리소스를 제공(serve)하는 곳 `서버`

함수 너... 스코프 너...

논리연산자(&&, ||, !), 삼항연산자(조건 ? 'true' : 'false'), Null 병합 연산자(a ?? b)

new Set() 과 new Map()

버블링 : 자식 요소에서 발생한 이벤트가 부모 요소로 전파캡쳐링 : 자식 요소에서 발생한 이벤트가 부모 요소부터 시작해 이벤트를 발생시킨 자식 요소까지 도달

JS는 발생한 이벤트에 반응해 지정한 동작을 수행할 수 있다.대표적인 이벤트 종류 : 키보드 이벤트 , 마우스 이벤트 등

둘 다 부모 노드에 자식 노드를 추가하는 메서드이지만 차이가 존재한다 append() > 노드 객체(Node object)나 DOMString(text)를 사용할 수 있고 한번에 여러 개 의 자식 요소 설정 가능 return 값을 반환하지 않음 Node object 사용 예시 문자열(DOMString)사용 예시 여러 개의 자식 요소 설정 예시 & 리...

DOM(Document Object Model)

터미널로 프롬프트(Prompt) 에 원하는 명령어를 입력해 컴퓨터와 소통할 수 있다. pwd : 현재 위치 확인하기mkdir : 새로운 폴더 생성하기ls : 특정 폴더에 포함된 파일이나 폴더 확인 \- ls -l : 파일이나 폴더의 포맷을 확인 \- ls -a :