sugar.kim

해당 내용은 컴포넌트의 생명 주기와 관련된 내용이다.  React Component Lifecycle (컴포넌트 생명 주기)컴포넌트는 생명주기마다 함수를 가지고 있는데 이 함수들을 이용하면 특정 시점에 원하는 동작을 하도록 만들 수도 있다.아래는 App컴포넌트의 자식 컴포넌트인 LifeCycleExample 컴포넌트를 만들sugarslayer.tistory.com아래 예제 코드를 통해서 상위 컴포넌트에서 전달받은 프로퍼티 값을 어떻게 동기화 할 수 있는지 살펴보자. 리액트 서버 구동 시에 최초로 실행되는 index.js에 App 컴포넌트 대신에 AppMakeCounter 컴포넌트를 만들어 예제 구현하였음. import React, { Component } from 'react';import Counter..

컴포넌트는 생명주기마다 함수를 가지고 있는데 이 함수들을 이용하면 특정 시점에 원하는 동작을 하도록 만들 수도 있다.아래는 App컴포넌트의 자식 컴포넌트인 LifeCycleExample 컴포넌트를 만들어 생명주기 함수의 흐름을 살펴 보았다.//단축키 RCFC하면 생명주기 함수와 함께 생성된다고.....import React, { Component } from 'react';class LifeCycleExample extends Component { /** getDerivedStateFromProps(props,state) * 1. 정적 함수이다. * 2. 인자로 props,state 전달할 수 있다. * 3. 인자로 전달된 props로 상위 컴포넌트에 전달된 값을 가져올 수 있다. * 4..

1. 템플릿 문자열 [template stirng]작은 따옴표(') 대신 백틱(`)으로 문자열을 표현병합연산자(+)를 사용해서 문자열+문자열, 문자열+변수 하던것을 그냥 백틱 안에 `문자열 문자열 ${변수}` 형태로 사용가능 2. 전개 연산자 [spread operator]독특하면서도 매우 유용한 문법나열형 자료를 추출하거나 연결할 때 사용한다. 사용 방법은 배열이나 객체 변수명 앞에 마침표 세 개(...)를 입력한다. 다만, 배열[], 객체{}, 함수 인자() 표현식 안에서만 사용해야 한다. 3. 가변변수와 불변변수 가변변수 : 값을 수정할 수 있는 변수, let 키워드로 선언한다.불변변수 : 값을 수정할 수 없는 변수, const 키워드로 선언한다.무결성 제약 조건에 위배되었다. > 불변 변수는 값을..

1. Code Runner 플러그인 설치 후에 런 버튼 혹은 단축키로 js 파일 실행code runner 실행 단축키는 아래와 같음.macwindows[control] + [option] +[ n][control] + [alt] +[n]두번 째 방법은 node 명령어로 실행하기 - 실행하고 싶은 js 파일이 있는 경로포함해서 'node >' 하거나 js 파일이 있는 경로까지 이동 한뒤 'node >' 해주기.

https://code.visualstudio.com/ Visual Studio Code - Code Editing. RedefinedVisual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.code.visualstudio.com위의 링크에서 Downloads for macOS 버튼 눌러서 설치 진행하면 됨비주얼 스튜디오 코드 : 윈도우, 리눅스, macOS 등 대부분의 운영 체..

설치하려는 패키지와 로컬에 설치되어 있는 node 버전이 맞지 않아서 발생하는 에러다.이 에러를 해결하기 위해서는 크게 두 가지 방법이 있으나 나는 2번 버전으로 진행함.왜냐하면 지금 Do it 책으로 실습중이라 버전은 맞춰줘야 할 것 같아서.....두개 방법 다 정리하겠음. 1번. 로컬에 설치되어 있는 node 버전을 업데이트 하는 방법#노드 버전 확인node -v#캐시지우기npm cache clean -f#노드 버전 관리 플러그인 n 설치npm install -g n노드 버전별 설치 최신n latestlts 버전n lts안정 버전n stablenpm 업데이트 #npm 버전 업데이트npm i -g npm버전 맞춰서 설치 해야할 때 2번. 노드 버전 무시하고 강제로 설치하기. # yarn 설치yarn i..

틸드는 간단히 말하면 현재 지정한 버전의 마지막 자리 내의 범위에서만 자동으로 업데이트한다.~0.0.1 : >=0.0.1 ~0.1.1 : >=0.1.1 ~0.1 : >=0.1.0 ~0 : >=0.0 그래서 다양한 방식으로 버전을 명시했을 때 위와 같은 범위내에서 자동으로 업데이트한다. 이 방식은 꽤 다루기가 편해서 그동안 유용하게 사용하고 있었다. Node.js도 그렇고 npm의 모듈은 모두 SemVer를 따르고 있다. SemVer는 MAJOR.MINOR.PATCH의 버저닝을 따르는데 각 의미는 다음과 같다.MAJOR version when you make incompatible API changes,MINOR version when you add functionality in a backwards-co..

Do it 리액트 프로그래밍 정석>>으로 리액트 기본 다지기 하는중... 회사에서도 프런트 개발할 때 사용하기는 했지만 아직 개념이 많이 부족하니 해당 책을 중점으로 개념 정리와 올바른 사용법을 익혀보려 한다. 노드제이에스 : 구글에서 공개한 소프트 웨어로 V8 엔진을 기반으로 만든 자바스크립트 런타임 도구  ( 웹 브라우저가 아닌 컴퓨터 혹은 서버에서 자바스크립트를 실행할 수 있게 해준다. NVM(Node Version Manager) 노드 버전 매니저 : 노드 제이에스 버전을 관리해주는 프로그램 (노드 제이에스 설치 진행) npm(node package manager) 노드 패키지 매니저 : 자바스크립트 라이브러리를 관리해주는 프로그램, 노드 제이에스와 함께 설치된다. ( 동작 방식은 https://..

React란?오픈 소스 자바스크립트 라이브러리중 하나이다.But, 현재 보고 있는 Do it책에는 프런트엔드 '프레임워크'라고 되어있는데 리액트의 레거시 홈페이지에도 '자바스크립트 라이브러리'라고 소개 되어있기에 일단은 나도 저렇게 정의해 보았다. 관련해서 논란...?이 조금 있기에 찾아보니 사용되는 방식에 따라서 라이브러리로 사용이 되느냐, 프레임워크로 사용이 되느냐를 두고 이중적 정체성을 가지고 있는 듯 했다. 아마 해당 책에서는 create react app이라는 틀이 잡힌 프로젝트를 설치 후 예제를 실행하는 방식이라 프레임워크라고 적은건가 싶기도 한데...자료를 찾아보다 보니 더더 헷갈리는데...😀 ( 책을 다 보고 나면 왜 프레임워크로 정의한 것인가... 가닥이 잡힐것 같기도 하고...??_?..

책을 보면서 맥에다가 리액트 설치하다가 책과 좀 다른 부분들이 있어서 정리 (책은 윈도우 기준...)현재 내가 사용중인 도구 mac m1 인데 기본 shell이 zsh이다. (shell 종류도 bash, zsh 등 있음.. 정리 잘해주심...ㄱㅅ)homebrew 설치하기 Homebrew란, macOS 운영 체제에서 사용되는 패키지 관리자.패키지 관리자는 소프트웨어나 라이브러리 등을 설치, 업데이트, 제거하는 프로그램을 관리하는 도구. Command + space 단축키로 terminal 검색 후 커맨드 창에 아래 명령어들 입력**아래 명령어 입력1/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/instal..