전체 글 108

리액트 ES6 문법 - 클래스

아래 책을 읽고 정리한 내용입니다. https://m.yes24.com/Goods/Detail/87631428 Do it! 리액트 프로그래밍 정석 - 예스24 실리콘밸리 리액트 클래스를 그대로 담았다!에어비앤비 프런트엔드 리드에게 배우는 리액트 프로그래밍!전 세계의 뛰어난 개발자들이 모여 일한다는 실리콘밸리! 실리콘밸리에서도 핫한 기업 m.yes24.com 클래스 ⇒ 기존 자바스크립트 문법은 클래스 표현식이 없어서 prototype으로 클래스를 표현함 기본 자바스크립트의 클래스 표현 방법 알아보기 // ES5 문법 function Shape(x, y) { this.name = 'Shape'; this.move(x, y); } // static 타입 선언 예제 Shape.create = function(x..

React 2024.01.28

리액트 ES6 문법 - 가변 변수와 불변 변수

아래 책을 읽고 정리한 내용입니다. https://m.yes24.com/Goods/Detail/87631428 3. 가변 변수와 불변 변수 ⇒ 기본엔 변수 선언에 var를 사용했지만 ES6에서는 let, const를 사용한다. ES6의 가변 변수 사용 방법 알아보기 let num = 1; num = num * 3; let str = '문자'; str = '다른 문자'; let arr = []; arr = [1, 2, 3]; let obj = {}; obj = { name : '새 객체' }; let으로 선언한 변수는 읽거나 수정할 수 있다 ES6의 불변 변수 사용 방법 알아보기 const num = 1; num = 3; // 타입 에러가 발생합니다 const str = '문자'; str = '새 문자';..

React 2024.01.27

리액트 ES6 문법 - 전개 연산자

아래 책을 읽고 정리한 내용입니다. https://m.yes24.com/Goods/Detail/87631428 Do it! 리액트 프로그래밍 정석 - 예스24 실리콘밸리 리액트 클래스를 그대로 담았다!에어비앤비 프런트엔드 리드에게 배우는 리액트 프로그래밍!전 세계의 뛰어난 개발자들이 모여 일한다는 실리콘밸리! 실리콘밸리에서도 핫한 기업 m.yes24.com 전개 연산자 ⇒ 전개 연산자 사용 방법 배열이나 객체, 변수명 앞에 마침표 세 개(…)를 입력한다. 다만 배열, 객체, 함수 인자 표현식( [], {}, () )안에서만 사용해야 한다. ES6의 배열 전개 연산자 사용 방법 알아보기 // ES5 문법 var array1 = ['one', 'two']; var array2 = ['three', 'four..

React 2024.01.27

리액트 ES6 문법 - 템플릿 문자열

아래 책을 읽고 정리한 내용입니다. https://m.yes24.com/Goods/Detail/87631428 Do it! 리액트 프로그래밍 정석 - 예스24 실리콘밸리 리액트 클래스를 그대로 담았다!에어비앤비 프런트엔드 리드에게 배우는 리액트 프로그래밍!전 세계의 뛰어난 개발자들이 모여 일한다는 실리콘밸리! 실리콘밸리에서도 핫한 기업 m.yes24.com 템플릿 문자열 템플릿 문자열 사용 방법 - 템플릿 문자열은 문자열 안에 변수와 연산식을 혼합하여 사용한다. 기존 자바스크립트의 문자열 사용 방법 알아보기 // ES5 문법 var string1 = '안녕하세요'; var string2 = '반갑습니다'; var greeting = string1 + ' ' + string2; var product = {..

React 2024.01.27

SPA 개발 시 고민해야 할 것들

SPA 개발 시 고민해야 할 것들 - 컴포넌트 구조를 어떻게 정의해서 역할을 나눌까? - 컴포넌트 사이의 데이터 흐름을 어떻게 제어하는 게 좋을까? - 웹 서비스에서 골치아픈 CSS 관리는 어떻게 해야 할까? - 비동기 처리는 어떻게 관리해야 할까? - 상태 관리는 컨텍스트로 해야할까? 리덕스로 해야할까? 그리고 데이터 구조는 어떻게 만들까? 방학 전에 전부 공부하기~~~

일기 2024.01.27

[react] 패키지 관리 툴 비교 npm, npx, yarn

npm - node package manager 자바스크립트 런타임 환경 Node.js의 기본 패키지 관리자 npx - execute npm package binaries npm에 속해 있는 npm 패키지 실행 도구! 패키지를 실행만 되게 해주기 때문에 가볍게 쓸 수 있다 ex) 깃허브 레포에서 다른 사람의 코드를 하나만 실행하고 싶을 때 npx와 스크립트를 적으면 패키지 설치를 하지 않고 실행할 수 있음 yarn 안전하고 안정적이며 재현 가능한 프로젝트 버전을 어디에서나 같게 만들어 버그를 줄이고 보안을 높임! 취향 차이인 것 같다! 나는 개인적으로 공부할 때는 npm이나 npx를 쓰고 프로젝트를 할 때는 yarn을 썼다 버전 충돌 이슈를 방지하기 위한 건가... 사실 쓰면서도 왜 쓰는 건지는 모르겠다..

React 2024.01.27
728x90