react6 리액트에서 json을 못불러 올 때 대처법 eval(`file_list_json = ${file_list_json}`) { 키값 : "실제 값" } 형태로 되어있을 시 정식 json 형태가 아님. 정식은 { "키값" : "실제 값" } 이어야함. 위의 eval과 백팁 ` 을 이용한 방법으로 해결. 2020. 11. 10. [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] 공부할 때 도움이 되었던 사소하지만 큰 것 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. [vscode]Open with live sever 버튼이 안보일 때 해결방법 Ctr+Shft+X 를 눌러 extensions로 이동해 줍니다. live server를 검색해 준 후 install을 눌러 설치해줍니다. 설치가 끝난 후에 다시 우클릭 해 보면 아래와 같이 Open with Live Server가 활성화 되어 있습니다. 2020. 5. 27. 이전 1 다음
