공부기록용

❓레이아웃을 자유자재로 사용하는 것을 연습하는 도중 가로로 배열하는 일이 더 많았음 자주 사용하는 방법 정리하기로❓ 1 2 3 section{ border: 5px solid; } article{ background-color: yellow; height: 100px; width: 200px; border: 1px solid red; } 이 block요소의 배치를 가로로 바꿔보기! 1. float속성을 사용하기(+overflow: hidden) float속성을 사용하여 배치를 바꿀 수 있다. section { border: 5px solid; } article { background-color: yellow; height: 100px; width: 200px; border: 1px solid red; f..

❓제이쿼리~ 제이쿼리~~하는데 그간 딱히 사용했던 적이 없어서 그냥 무시해왔었는데,,, (그럼 안됬지만) 이제서야 뭔지 알고 싶어졌다❓ jQuery jQuery(제이쿼리)란 Javascript 언어를 간편하게 사용할 수 있도록 단순화시킨 오픈 소스 기반의 Javascript의 라이브러리 ✔️Javascript는 동적인 기능 구현을 할 수 있지만 코드가 너무 길어지고 복잡해지는 단점이 있다. 이때 jQuery를 사용하면 같은 기능도 간략하고 단순한 코드로 구현할 수 있다.( Javascript, HTML, CSS에 비해 단순하고 간편한 코드 문법을 가지고 있고 웹 페이지에 다양한 효과나 연출을 적용할 수 있음) ✔️ jQuery는 클릭 이벤트, 체인지 이벤트 등 웹 페이지 동작의 기능을 조작할 때 브라우저..

❓css-in-js와 styled-components이 상당히 유사해 보여서 혼동!! 자세한 차이를 알고 싶음❓ CSS modules CSS Modules에서는 스타일을 정의한 CSS 파일의 클래스 이름들이 객체로 변환되어 자동으로 생성된 모듈에 들어가게 된다. 컴포넌트에서는 이러한 클래스 이름을 사용하여 스타일을 적용한다. /* styles.module.css */ .container { padding: 16px; background-color: #f0f0f0; border: 1px solid #ccc; } .text { color: blue; font-size: 16px; } ➕ 이 CSS들이 styles객체로써 js파일에 import되어지고 사용할 때도 객체에서 값을 찾아오는 방식으로 사용해야 함!..

🔴 Hooks 🔻State Hook(useState) 🔻Effect Hook(useEffect) 🔻useMemo 🔻useCallback 🔻useRef Hook 컴포넌트에서 데이터를 관리(State)하고 데이터가 변경될 때 상호작용(Effect)을 하기 위해 사용한다. 기존에는 컴포넌트 내에서 State와 생명주기를 관리하기 위해서 반드시 클래스 컴포넌트(Class Component)를 사용하여야했다. 그러나 개발자가 느끼기에 다소 복잡한 클래스 컴포넌트(Class Component)를 보완하고 함수 컴포넌트에서 클래스컴포넌트의 기능을 구현하기 위해 React 16.8버전에 추가된 것이 바로 Hook이다. 즉, 함수형 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 ..

* : HTML페이지 내부의 모든 태그를 선택 *은 페이지에 있는 전체요소를 대상으로 한다. #A: id가 A인 태그를 선택 #은 id가 부여된 요소를 대상으로 한다. 🔻id는 문서에서 중복되지 않도록 한 요소에 한 개의 아이디를 사용한다. 🔻id선택자는 유연성이 없고 재활용할 수 없다. .A: class가 A인 태그를 선택 .은 class / className가 부여된 요소를 대상으로 한다. 🔻class이름은 서로 다른 태그에서 중복으로 사용 가능하다. 🔻같은 유형의 여러 요소를 선택할 때 사용한다. 🔻하나의 요소에 2개 이상의 class를 적용할 수 있다. ➡️ 띄어쓰기로 구분해줌(target, id도 여러개 사용 가능 하지만 지양!) A B: 태그명이 A인 태그와 B인 태그를 선택 따로 class나..

🔴Element Rendering 🔻ReactDOM.render() 🔴React.createElement() React React 요소는 변경이 불가능하다. 한번 요소를 만들었다면, 그 자식이나 속성을 변경할 수 없다. (특정한 시간대의 UI를 보여줄 뿐) 그래서 UI를 업데이트할 수 있는 유일한 방법은 새로운 요소를 만드는 것이며, 이 요소를 ReactDOM.render() 로 전달하는 것이다. ReactDOM React DOM이란, Virtual DOM에서 HTML을 생성하는 데 필요한 라이브러리이다. React DOM에는 리액트 엘리먼트를 브라우저에 렌더링 하는 데 필요한 모든 도구가 들어 있다. ReactDOM.render() element는 리액트의 가장 작은 단위이다. ReactDom.rend..