반영훈/웹 개발34 [React]JSX, style, class, 조건부 렌더링 JSX는 리액트 개발을 쉽게 하기 위해, HTML과 비슷한 문법으로 작성하면 이를 React.createElement를 사용하는 자바스크립트 형태로 변환시켜줌. XML 형태의 코드를 자바스크립트로 변환해야 하기 때문에, JSX를 제대로 사용하기 위해 몇가지 규칙을 준수해야 한다. import React, { Component } from 'react'; class App extends Component { render() { return ( ); } } export default App; - 태그는 반드시 닫혀있어야 함. input, br, div 모두 태그를 닫아야 오류가 발생하지 않음. - 두개 이상의 엘리멘트는 무조건 하나의 엘리멘트로 감싸져 있어야 함. 간단한 방법으로는 div를 이용하여 감싸주는.. 2020. 8. 19. [React] 리액트 시작하기 - 컴포넌트와 렌더링 리액트는 앞에 언급했듯이 웹 애플리케이션에서 사용하는 UI를 재사용 가능한 컴포넌트로 분리하여 작성함으로서, 프로젝트의 유지보수성을 높여줍니다. 컴포넌트에 해당하는 소스를 App.js에서 확인해 보자. import React, { Component } from 'react'; import logo from './logo.svg'; import './App.css'; class App extends Component { render() { return ( Welcome to React To get started, edit src/App.js and save to reload. ); } } export default App; 이 코드를 또 작게 나누어서 해석해보자. import React, { Compone.. 2020. 8. 19. [React] Node.js, Yarn 1.Node.js 자바스크립트 런타임으로 Webpack과 Babel같은 도구들이 이를 기반으로 만들어져 있음. 2.Yarn npm의 개선된 버전, npm은 Node.js를 설치하게 될 때 같이 딸려오는 패키지 매니저 도구. 프로젝트에서 사용되는 라이브러리를 설치하고 해당 라이브러리들의 버전 관리를 하게 될 때 사용. Yarn은 더 나은 속도, 더 나은 캐싱시스템을 사용하기 위해 사용함. 참고- 벨로퍼트님 블로그 2020. 8. 19. [React] 공부할 때 도움이 되었던 사소하지만 큰 것 DOM/Virtual DOM, Rendering 제가 본 것중 가장 정리가 잘 되어있어서 너무 추천하는 페이지 링크로 남기겠습니다. https://velog.io/@kimtaeeeny/DOM%EC%9D%B4%EB%9E%80-FE-study3-9xk56ahmsu Webpack 코드들을 의존하는 순서대로 잘 합쳐서 하나 또는 여러개의 파일로 결과물을 만듦. 웹프로젝트를 만들때 전체적으로 파일을 관리해주는 도구 Babel 자바스크립트 변환 도구(컴파일러) 새로운 문법을 입력하면 JS의 구세대 문법으로 바꾸어 줌. (also jsx) let/const와 var의 차이점. let과 const는 scope가 블록 단위(지역) var 는 scope가 전역 const : 한번 선언 후 고정적인 값 Let: 유동적인 값.. 2020. 8. 19. [React] 프론트엔드 라이브러리 웹은 단순한 웹이 아니라 웹 애플리케이션이다. -> 브라우저상으로 자연스럽게 매우 많은 것을 할 수 있음. 어떠한 유저 인터페이스를 동적으로 나타내기 위해 수많은 '상태'를 관리해야 한다. Counter 0 + 버튼을 눌러 숫자0의 값을 바꿔주려면 각 DOM element에 대한 레퍼런스를 찾고, 해당 DOM에 접근하여 원하는 작업을 아래와 같이 해야함 var number = 0; var elNumber = document.getElementById('number'); var btnIncrease = document.getElementById('increase'); btnIncrease.onclick = function() { number++; elNumber.innerText = number; } 프로.. 2020. 8. 18. [JS]함수 스코프 개념 이해 Scope란 사전적 의미는 '범위'이며, 함수 스코프는 함수의 유효 범위를 말함. 전역변수와 지역변수의 개념과 차이 전역변수는 자바스크립트 어디에서든 사용할 수 있는 변수 지역변수는 함수 스코프에서만 사용할 수 있는 변수. 아래는 전역변수와 지역변수를 선언하는 기본형태. var 변수명; //-전역변수// function 함수명() { var 변수명; //- 지연변수// } 아래와 같이 입력하면 첫번째 alert으로 50, 두번째 alert로는 10이 나온다. var score = 10; function myFnc() { var score = 50; alert(score); //50 } myFnc(); alert(score); myFnc()를 호출하는데 이 함수는 score 값으로 50을 가지고있고 sco.. 2020. 8. 13. 이전 1 2 3 4 ··· 6 다음