분류 전체보기187 [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. [JS] 익명함수(무명함수)와 즉시실행함수 일반적인 함수의 형태(선언적 함수)는 아래와 같이 함수에 sum이라는 이름을 붙여 재사용 할 수 있게 만듦. function sum(a,b){ var m = a + b; return m; } var sumanswer = sum(1,2); console.log(sumanswer); 이에 반해 익명함수의 경우는 아래와 같이 함수(function)에는 이름이 없고 함수에 바로 (a,b)라는 인수만 지정됨. var sum = function(a,b){ var m = a + b; return m; } var sumanswer = sum(1,2); console.log(sumanswer); 위의 익명개념 함수에서 확장 된 것이 즉시실행함수 이 즉시실행함수는 변수 안에 함수와 인수값까지 몽땅 다 집어넣어서 사용하는 .. 2020. 8. 13. 이전 1 2 3 4 5 6 ··· 32 다음