목록 전체 글 (198)
이롭게 현명하게
[React] 리액트 JSX
목차 JSX란? JSX 역할 JSX사용 시 장점 JSX 사용 규칙 JSX 안에 자바스크립트 값 사용하기 style과 className을 설정하는 방법 JSX에서의 주석 JSX [JSX란?] JSX(Syntax Extension to Javascript) : 리액트에서 생김새를 정의할 때 사용하는 문법이다. JSX는 리액트를 사용하여 개발할 때 거의 필수적으로 사용해야 한다. 자바스크립트의 확장 문법이라는 의미를 가지고 있다. 자바스크립트와 XML.HTML을 합친 것이라고 생각하면 이해하기 쉽다. 얼핏 보면 HTML 같지만 실제로는 자바스크립트다. const element = Hello, World! 위 코드는 대입 연산자 equal이 나온다. 대입 연산자는 오른쪽에 있는 값을 왼쪽에 있는 변수에 대입해 ..
[React] 리액트 컴포넌트(Component) 란? / component의 개념
목차 Component란?Component 만들기Component의 이름 [Component란?]리액트는 Component 기반의 구조라는 특징을 가지고 있다.리액트는 모든 페이지가 Component로 구성되어 있고 하나의 Component는 또 다른 여러 개의 Component의 조합으로 구성될 수 있다.이러한 Component들을 마치 레고 블록을 조립하듯 끼워 맞춰 새로운 Component를 만들 수 있다. Component : 입력(props)을 받아 출력(Element) 하는 역할 코드 양을 줄일 수 있다.개발 시간을 줄일 수 있다.유지 보수 비용이 줄어든다. 더보기Component를 사용해야 하는 이유 에어비앤비 홈페이지다. 에어비앤비의 Component는 다음과 같다.파란색 Compone..
[React] 리액트 시작하기 / 리액트 설치 / 개발환경
목차 작업환경 준비하기Node.js 설치하기yarn 설치하기vscode 설치하기git for windows 설치하기리액트 환경설정 [작업 환경 준비하기]리액트 개발을 시작할 수 있도록 작업 환경을 준비해야 한다.설치하기 위해서는 총 3가지를 설치해야 한다. Node.js : 브라우저 환경이 아닌 곳에서도 자바스크립트를 실행할 수 있게 해주는 자바스크립트 런타임리액트 프로젝트를 진행하면서 사용하는 도구들로 Webpack, Babel 같은 도구들이 자바스크립트 런타임 node.js를 기반으로 만들어져 있기 때문에 node.js를 설치해야 한다. yarn : 조금 개선된 버전의 npm으로 생각하면 이해하기 쉽다. 자바스크립트 패키지 매니저 도구로 node.js를 설치하면 npm이라는 도구가 같이 설치된다...
[yarn] yarn 설치하기
[Node.js 설치] yarn을 설치하기 위해서는 node.js를 설치해야한다. 단축키 윈도우 + Q를 눌려 cmd를 실행한다. node -v 명령어를 입력하고 Enter키를 누른다. 결과가 다음과 같이 버전이 나온다면 설치가 되어있다. 만약 버전이 나타나지 않는다면 node.js를 설치해야한다. node.js 설치하기 https://devyihyun.tistory.com/166 [yarn 설치하기] yarn은 npm을 대체할 수 있는도구로 npm보다 더 빠르며 효율적이다. 또한 캐시 시스템과 기타 부가기능을 제공한다. npm에 이미 익숙하고 진행 흐름에 변화를 주고 싶지 않다면 yarn을 설치하지 않아도 무방하다. yarn은 npm으로 설치하거나 또는 yarn 공식 홈페이지에서 다운받아 설치하는 방법..
[Node.js] Node.js 설치하기 / 노드js 설치하기
[Node.js 설치하기] ※ 본 포스팅은 윈도우 11의 환경에서 진행되었습니다. Node.js 공식 홈페이지 접속 Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org LTS와 Current 버전 중 원하는 버전을 선택하여 설치한다. LTS : 기업을 위해 3년간 지원하는 버전이다. 짝수 버전만 LTS 버전이 될 수 있다. 서버를 안정적으로 운영해야 할 경우 선택한다. 하지만 최신 기능을 사용하지 못할 수 있다. Current : 최신 기능을 담고 있는 버전이다. 실험적인 기능이 들어 있어 예기치 못한 에러가 발생할 수 있다. 서버에 신기능이 필요하거나 학습용으로 사용할 때 적합하다. 단, 짝..
[Node.js] Node.js란 / 노드js란
node.js는 크롬 v8자바스크립트 엔진으로 빌드된 자바스크립트 런타임입니다. [Node.js란?] HTML : 웹페이지에 글을 쓰고 그림을 넣는 마크업 언어이다. HTML은 정적인 페이지를 만든다. 자바스크립트는 HTML 페이지의 종속된 언어로 HTML을 조작하기 위해 만들어진 언어이다. 버튼을 클릭하려고 버튼 위에 커서를 올리면 색이 변한다. 이런 것들을 자바스크립트로 조작한다. 자바스크립트로 HTML을 조작할 수 있기 때문에 웹페이지를 보다 더 다이나믹하게 바꿀 수 있다. 그렇다면 자바스크립트는 어떻게 작동이 될까? 자바스크립트 코드 실행은 브라우저가 담당한다. ex) 크롬브라우저, 파이어폭스 등 이러한 브라우저들이 자바스크립트 해석을 담당한다. 자바스크립트는 정적이었던 웹페이지를 조금이나마 동적..