728x90 [FrontEnd]19 리액트(React) 기초와 관련 용어 정리 리액트(React) A javaScript library for building user inerfaces 사용자 인터페이스를 만들기 위한 자바스크립트의 UI 라이브러리이다. SPA를 쉽고 빠르게 만들 수 있게 도와주는 도구이다. 특징 장점 빠른 업데이트 & 렌더링 Virtual DOM을 사용한다. 컴포넌트로 구성되어 있기 때문에 레고 블록을 조립하듯이 컴포넌트를 모아 개발한다. 하나의 컴포넌트는 다른 곳에서 재사용될 수 있다. 이 덕분에 개발 기간이 단축되고 유지 보수가 용이하다. 단점 방대한 학습량(Vitual DOM, JSX, Component, State, Props 등등) 높은 상태관리 복잡도를 가진다. 간단 용어 정리 프로그래밍에서의 라이브러리? 쉽게 말해서 자주 사용하는 기능을 모아둔 것을 .. 2023. 6. 1. 주니어 백엔드 개발자를 위한 자바스크립트 기초 내용 정리 이 글의 내용 프론트엔드 경험이 없는 백엔드 개발자 기준에서 빠르게 실무에서 프론트엔드 영역을 다루기 위한 자바스크립트 기초 내용 정리 JavaScript 웹 페이지를 동적으로, 프로그래밍적으로 제어하기 위해 고안된 언어이다. 웹브라우저에서 유일하게 사용할 수 있는 프로그래밍언어이다. HTML이 한 번 화면에 출력된 후에 그 형태나 동작 방법을 바꿀 수 없는 문제를 해결하기 위해 고안되었다. 정식명칭은 ECMAScript이며, 버전을 구분할 때는 EC5, ES6 등으로 구분한다. Script Language 자바, C언어와는 다르게 프로그램이 실행되는 런타임시에 코드가 해석된다. 기초 문법 변수 할당 자바의 경우 변수를 선언하는 시점에 자료형이 결정된다. 자바스크립트의 경우 변수에 데이터가 들어가는 시점.. 2023. 5. 30. nvm, npm ,npx, yarn, package.json 간단 정리 nvm(Node Version Manager) Node.js를 설치하는 툴이다. Node.js의 다양한 버전을 관리하는 프로그램으로 원하는 버전을 쉽게 설치할 수 있다. nvm으로 Node.js를 설치하는 이유 OS에서 특정 버전의 Node.js를 설치하면 향후 다른 버전의 Node.js가 필요한 경우 대응이 불가능하게 되어 먼저 nvm을 설치하고 설치한 nvm을 통해 원하는 특정 버전의 Node.js를 원하는 조건에 따라 복수로 설치할 수 있다. npm(Node Package Manager) Node.js로 개발된 프로그램(npm 패키지)을 간단하게 설치 및 업데이트, 삭제할 수 있는 프로그램이다. 필요한 모듈을 다운로드할 수 있고 수많은 모듈이 모여있는 모듈 스토어이다. Node.js를 설치하게 되면.. 2023. 5. 15. Flexbox Flexbox 행과 열을 이용하여 항목을 배치하는 레이아웃 메소드이다. display : flexbox; Flexbox는 부모 박스 요소를 통해서 자식 박스의 크기 등을 결정한다. 위 코드를 부모 박스에 선언함으로써 실행이 가능하다. box1 box2 box3 HTML 코드 이라는 부모 박스 안에 세 개의 자식 박스가 있다. main{ display : flex; border : 1px dotted red; } div { border : 1px solid green; } * { margin : 10px; padding : 10px; } 위의 HTML 코드에 연결된 CSS 코드에 display : flex를 추가한다. Flexbox의 속성 Flexbox에는 부모 요소에 적용해야하는 속성과 자식요소에 적용.. 2022. 8. 24. 페이지 레이아웃 ※ 본 게시물은 컴퓨터 및 프로그래밍을 공부중인 비전공자가 개인적인 공부를 위해 적어둔 것으로 내용이 정확하지 않을 수 있으며, 언제든지 추가되거나 수정될 수 있음. CSS는 사용자 중심의 인터페이스를 좀 더 구체적이고 세련되게 제작할 수 있게 도와주는 역할을 한다. CSS에서 다룰 수 있는 페이지 레이아웃 기능은 그 중에도 가장 기본적이며 필수적인이라고 할 수 있다. 레이아웃 리셋 HTML로 제작한 문서에는 기본적으로 내장되어있는 스타일이 있다. HTML의 내장 스타일은 문서를 만들 때 일일이 스타일을 지정해줄 필요가 없다는 점에서 편리하지만, 때로는 문제를 일으키기도 한다. 박스의 시작을 (0,0)에서 시작하고 싶은데 태그가 가진 내장 스타일에는 여백이 있음 width, height 계산은 내장 .. 2022. 8. 24. CSS 박스 모델 ※ 본 게시물은 컴퓨터 및 프로그래밍을 공부중인 비전공자가 개인적인 공부를 위해 적어둔 것으로 내용이 정확하지 않을 수 있으며, 언제든지 추가되거나 수정될 수 있음. Margin 테두리(border) 바깥의 외부 여백 영영으로, 기본적으로 투명하며 배경색을 지정할 수 없다. p { margin : 1px 2px 3px 4px; } 왼쪽부터 위, 오른쪽 아래, 왼쪽으로 시계방향으로 기억하면 쉬움 p { margin : 1px 2px; } 값이 두 개만 있을 때는 왼쪽이 상하, 오른쪽이 좌우임 p { margin : 1px; } 값이 하나만 있을 때는 모든 영역이 동일하게 적용 p { margin-top : 1px; margin-right : 1px; margin-bottom : 1px; margin-lef.. 2022. 8. 23. CSS의 셀렉터 정리 ※ 본 게시물은 컴퓨터 및 프로그래밍을 공부중인 비전공자가 개인적인 공부를 위해 적어둔 것으로 내용이 정확하지 않을 수 있으며, 언제든지 추가되거나 수정될 수 있음. 기본 셀렉터 Id와 Class 비교 ...내용... #name { color : red; } ...내용1... ...내용2... ...내용3... .name { color : red; } id class #name .class 한 문서에 하나의 요소에만 적용 가능 한 문서에 여러 요소에 적용 가능 특정 요소(하나의 요소)만을 위해 사용 스타일 분류에 사용함 전체 셀렉터 *{} Tag 셀렉터 h1, nav {} 자식 셀렉터 내가 니 할애비다. 내가 니 애비다. 응애 .GrandFather > h3{ background-color : skybl.. 2022. 8. 23. CSS의 코드를 보며 기본 구조를 알아보자. 어서오세요! 스즈몰입니다 :) 오늘의 특가 상품 Apple Watch Mac iPhone iPad 특가 구매 놓치지마세요!! ... 광고배너란 ... 개인정보 처리방침 이용 약관 법적 고지 웹사이트 스즈몰의 HTML 코드 link link 문법을 통해 index.css라는 css파일과 연결할 수 있다. link에서 rel은 현재문서와 외부 리소스 간의 연간관계를 명시하며, stylesheet는 속성값으로 stylesheet로 사용할 외부 리소스 값을 불러온다는 뜻이다. body { margin: 0; padding: 0; background: #fff; color: #4a4a4a; } header, footer { font-size: large; text-align: center; padding: 1em.. 2022. 8. 23. 이전 1 2 3 다음 728x90
