Front-end
-
[React] React Element, ComponentFront-end/react 2022. 8. 7. 22:35
React Element 💡 리액트 앱들의 가장 작은 building block이다 React element는 DOM element의 가상표현이다 React element는 화면에 보이는 것들을 기술한다 React element는 자바스크립트 객체 형태로 존재한다(불변성의 특징을 가짐) const element = Hello, World; 실행될 때 createElement() -> React element 생성 -> DOM element 생성된다 React element 특징 React element는 불변성 특징을 가지고 있다 즉, element 생성 후 자식이나 속성을 바꿀 수 없다(업데이트 하려면 element를 재생성해야 한다) 리액트의 장점 중 빠른 랜더링 속도는 virtual DOM을 사용하..
-
[React] JSX에 대해 알아보기Front-end/react 2022. 8. 5. 21:33
JSX란? - A synyax extension to JavaScript (자바스크립트의 확장 문법) - JavaScript + XML/HTML const element = Hello, world!; JSX의 역할 - XML, HTML을 JavaScript로 변환(createElement 함수 사용)하는 과정을 거친다 /* JSX를 사용한 코드 */ const element = ( Hello, world! /* JSX를 사용하지 않은 코드 */ const element = React.createElement( 'h1', { className: 'greeting' }, 'Hello, world!' /* React.createElement()의 결과로 자바스크립트 객체가 생성됨 */ const element..
-
[React] 개요Front-end/react 2022. 8. 5. 19:01
리액트 시작 전 준비사항 node.js 자바스크립트로 네트워크 애플리케이션을 개발할 수 있게 해주는 환경 npm(node package manager) node.js를 위한 패키지 매니저(버전, 의존성 관리 및 편하게 삭제할 수 있도록 도와주는 역할) React란? A JavaScript library for building user interfaces *라이브러리: 자주 사용되는 기능들을 모아서 정리해둔 모음집(문자열 관련 기능, 숫자 관련 기능, ...) => UI 라이브러리이다. 프레임워크 vs. 라이브러리 React Vue 라이브러리(도구) 프레임워크(메뉴얼) 개발자가 필요한 부분만 찾아서 사용 흐름 제어 권한을 프레임워크가 가짐 리액트의 장점 - 빠른 업데이트와 랜더링 속도 * Virtual D..
-
[100DaysOfCode] 20강Front-end/100DaysOfCode 2022. 8. 5. 15:04
🔥 카드를 배치하는데 이용한 주요 css 속성 display: grid grid-templete-columns: nfr nfr : nth-of-type grid-column 유니코드 문자를 이용해서 버튼 옆에 화살표 만들기 Arrows (Unicode block) - Wikipedia Unicode block Unicode character block ArrowsRangeU+2190..U+21FF(112 code points)PlaneBMPScriptsCommonAssigned112 code pointsUnused0 reserved code points1.0.0 (1991)91 (+91)3.0 (1999)100 (+9)3.2 (2002)112 (+12) Code chartNote: [1][2] Arrow..
-
[100DaysOfCode] 19강Front-end/100DaysOfCode 2022. 8. 1. 20:30
overflow border radius 값이 이미지에 먹히지 않는 현상 발생! 💡overflow: hidden * 컨테이너 자식에게 적용X, 컨테이너 자체에 적용O main li { display: flex; background-color: white; box-shadow: 0px 4px 16px 2px rgba(219, 219, 219, 0.561); border-radius: 16px; overflow: hidden; width: 600px; } CSS grid 💡 Task - Card를 2개씩 한 줄에 두고 싶다 - Card 3는 한 열을 다 차지하게 하고 싶다 /* css grid */ display: grid; /* 그리드 내 사용 가능한 공간 정의하는 방법: fr(fraction) */ gr..