행복을 담는 블로그

📌 JSX 란?? : JavaScript를 확장한 문법으로, React element를 생성한다. 즉, 쉽게 말해 HTML을 품은 JS 문법이라고 생각하자. ▶️ UI가 어떻게 생겨야 하는지 설명하기 위해 React와 함께 사용할 것을 권장하고 있습니다. const element = Hello, world!; JSX 소개 링크 참고 ✅ 컴포넌트에서 반환 할 수 있는 element는 단 1개!! = 즉, 모든 요소들을 묶어 줄 수 있는 최상위 요소가 무조건 필요하다!! /* 최상위 element가 없는 경우, ERROR*/ return ( 안녕하세요! 리액트 반입니다 :) ); /* 최상위 요소 로 하나로 묶어줘야만 한다. */ return ( 안녕하세요! 리액트 반입니다 :) ); 🚨 ...는 DOM 요..

CRA로 초기 프로젝트 생성 시, 오류 발생 React 강의를 듣다가 CRA로 프로젝트 생성을 하려고 하는데 오류가 발생했다. npm, node, yarn 버전도 다 확인했는데, 설치가 잘 되어 있다고 뜨는데 왜 문제가 생긴거지 싶어서 바로 질문하러 감.. 처음에는 잘 설치가 되나 했는데, 이런 오류가 떴다. Aborting installation. npm install --no-audit --save --save-exact --loglevel error react react-dom react-scripts cra-template has failed. 1. npm cache clear --force 구글링을 좀 해보니 npm cache clear --force 이 코드를 작성하면 해결이 된다는 말도 있었..

React 개발을 하기 위해서 꼭 필요한 JS 문법 중 ES6 문법에 대해 알아보자. 📕 Javascript ES6 문법 1.상수와 변수 상수 : const(constant : 변함없는 수) 변수 : let const a = 1; let b = 3; a = 3; // 상수는 한 번 선언한 값을 다시 할당할 수 없다. b = 2; // 변수는 값을 재할당 가능 console.log("a :", a); // Error console.log("b :", b); // b : 2 var는 그냥 쓰지마쓰지마...!! : Block level scope를 따르지 않기 때문에 종종 다른 언어와 오해가 발생한다. if (1 === 1) { // 항상 이 안으로 들어온다 var c = 3; console.log("c :"..

📌 React 란 무엇인가? : A Javascript library for building user interfaces ▶️ React를 통해 UI(User Interface)를 building 한다. = 웹 또는 앱 애플리케이션의 UI, 즉 보여지는 부분(화면)을 구축한다는 의미 = 프론트엔드 영역 웹 개발 안에서도 여러 가지 역할이 나뉜다. 프론트 , 백엔드 등 ✔️ React.js : SPA 기반의 프론트엔드 개발 프레임워크 중 하나. 컴포넌트 단위의 독립적인 블록을 이용한 개발 방법을 이용 비슷한 프레임워크 : AngularJS, VueJS 1. SPA란 무엇인가? Single Page Application : 하나의 페이지로 이루어진 application이라는 말. MPA(Multi Page ..