TIL

항상 TIL을 쓰며 모르는 용어들에 대해 같이 적었었는데 분량이 너무 많아져 분리... 모르는게 많다는 것이니 ㅠㅠ각각 변수 선언 타입을 뜻함각 변수 선언 타입은 스코프, 호이스팅 특징에 따라 구분됨함수 레벨 스코프. ES5에서 사용되던 변수 선언 방법var로 선언된

작성중

실수로 통으로 날려서 대강 날림으로 재작성...변화가 일어나면 브라우저의 DOM에 새로운 것을 넣는 것이 아니라, js로 이루어진 가상의 DOM에 한번 렌더링(서버로부터 html파일을 받아 브라우저에 뿌려줌)을 하고 기존의 DOM과 비교 후 정말 변화가 필요한 곳에 업

js에서 반복적이고 자주 사용되는 작업을 자동화해주는 툴(또는 빌드 시스템)작업시간을 줄일 수 있어 생산성 향상에 큰 도움이 됨Grunt 또는 webpack과 비교됨js 라이브러리, 서드파티 앱 등을 모으고 축소/압축단위테스트(unit test) 수행less/css 컴

기존 html상에서 문자열로 넣어주던 형태와 다르게 적용함.리액트 상에서는 객체 형태로 스타일을 적용함기존 background-color 같이 하이픈으로 구분하던 것을 카멜케이스로 구분함.ex) background-color: white; -> backgroundCol

Props

state에 대해 공부하기 전 Props에 대해 리와인드부모가 자식에게 값을 내려줄 때 사용사실상 Props는 자식입장에서 볼 때 읽기 전용임.state는 콤포넌트가 내부에서 갖고 있음props와 달리 변경이 필요할때 사용state는 setState()함수 사용해서 변

this!

Life Cycle API part 1

Application Programming Interface. 응용프로그램 프로그래밍 인터페이스.응용 프로그램에서 사용할 수 있도록 운영체제나 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스인터페이스란?인터페이스(interface)는 컴퓨터 시스템끼리

node.js를 직접 사용하지는 않지만 webPack, Babel이 node.js를 사용하기 때문에 필요함.windows는 공홈에서 설치(windows 8.1이상)이거땜에 포맷함 ㅎ 사실 할 때 됐지..node.js를 설치하면 npm이라는 노드 모듈 관리자가 설치됨.프

npm 프로젝트 진행 시 init(초기화)단계 이후 작성되는 파일내 프로젝트의 카탈로그라고 할 수 있음. 카탈로그만 봐도 어떤 제품에 대해 파악할 수 있는 것처럼 package.json만 봐도 어떤 모듈이 포함되어있는지 알 수 있다.간단히 몇 가지 특성만 알아보자면해당

리액트에서 배열을 다룰 때, 자바스크립트처럼 this.state.array.push('some value')이런 식으로 하면 안된다.왜냐? 불변성을 유지해야 하기 때문state 내부의 값을 직접적으로 수정하지 않는 것을 불변성 유지라고 함.불변성을 유지해야 데이터가 필

Props와 State가 너무 헷갈려서 복습부모 컴포넌트가 자식에게 주는 값App.js(부모) -> MyName.js(자식) 값 전달 예시App.jsMyName.js데이터 전달받지 못했을 때에 디폴트값을 설정해주는 방법단순히 데이터를 전달받아서 렌더링만 하는 경우엔 함

리액트에서 배열을 다룰 때 평소 다루던 것 처럼 하면 안됨js에서는 데이터 추가시 이런 식으로 push를 사용했는데, 리액트에서는 그러면 안된다.불변성 유지가 중요하기 때문.불변성 유지란? state 내부의 값을 직접적으로 수정하지 않는 것.push, splice

컴포넌트 렌더링에 이어서\~~두 개의 신규 컴포넌트 생성1) PhoneInfo : 각 전화번호 정보를 보여줌info 객체를 props로 받아와서 렌더링해줌info값을 전달해주지 못할 경우 컴포넌트가 crash로 에러 발생함info가 undefined일 때는 비구조화 할

데이터 수정 시에도 불변성을 지켜줘야 함map 함수를 사용할건데 아래 예제 참고위의 배열을 데이터 수정 없이 id 1인 객체의 text값을 korea로 바꿀 예정

velog를 쓰지 못한 약 한달 반동안 굉장히 많은 일이 있어서 ㅠㅠ 오랜만에 쓴다. 이번에는 우리 팀의 프로토타입으로 테스트를 진행하기로 했는데 웹 플랫폼을 구축하기로 함. 그렇지만 내가 프론트엔드만 공부한 관계로 전체 서비스를 구축하기 전 테스트는 firebase로

프로젝트 진행 중에 리액트를 공부하면서 개념적인 부분들 정리함수형 컴포넌트에서도 상태관리(state, LifeCycle)를 할 수 있는 다양한 기능 제공내가 느끼기에는 내장 메소드와 비슷한 느낌인듯..사실 이 얘기를 듣기 전까지는 함수형 컴포넌트와 클래스형 컴포넌트의

nomadcoder 보고 공부하기Router에 있던 state를 지우자왜 지우느냐?Router는 라우터로서의 역할만을 해야 함. 페이지에서 state를 정의하지 않고 다른 페이지로 라우팅 하는 역할App.js에서 상태값을 props로 전달받아야 함.App.js에서 st

react로 구구단을 만들어본다.React, ReactDOM, Babel은 cdn으로 사용GuGudan class 기본 틀을 만들고, GuGuDan을 렌더링하는 구조로 제작.this.state로 상태값의 default값을 설정해준다.대상은 1)곱하는 숫자 앞 2)곱하는

원래 render 함수 내에서 return 내 최상위에 아무 의미 없는 div태그로 감싸줘야 함.이 div는 element상으로 의미없는 div가 생기는 건데 이러면 css적용 등에서 문제가 될 수 있음.div 태그를 React.Fragment로 바꿔주면 문서구조에서

여러개의 js 파일을 합쳐서 하나로 만들어줌중복을 최소화하기 위함Node.js를 알아야 함(= js 실행기)프로젝트 시작 경로에서 실행package.json 생성react, react-dom 설치웹팩 설치\-D : 개발용으로만 사용할 것웹팩 모듈 정보 기록용

컴포넌트를 모듈화함. 전체 코드 소스를 실행시키는게 아니고 각 코드 소스를 모듈화해서 필요한 코드만 불러와 실행모듈화하면 코드 유지보수도 간편해지고 재사용성이 뛰어남.코드 맨 위에서 React 호출 필요코드 맨 아래에서 해당 컴포넌트 모듈화해서 export해야 다른데서

1. webpack 빌드 준비 webpack실행하려고 터미널에 webpack이라고 바로 치면 에러나옴. webpack이 명령어로 등록되지 않았기때문. package.json에서 script에 'webpack'을 test명령어로 등록해주면 터미널에서 webpack명령어로

기존에 cdn방식으로 react를 호출해서 단일 html형식으로 빌드했던 구구단을 webpack을 사용해 빌드해보기.\-author, license정도만 수정npm i react react-domnpm i -D webpack webpack-clinpm i -D bab

웹팩을 사용할 경우 코드를 조금만 수정하더라도 npm run dev 또는 npx webpack을 통해 다시 리로딩을 해야하는 것이 불편함.그럴때 조금씩 수정한건 바로 반영이 되도록 하는 핫 리로딩 방법package.json에서script dev 명령어를 "webpack

node의 모듈 시스템에서 사용되는 키워드. module.exports로 모듈화된 소스코드를 다른 파일에서 불러옴.남이 만든 스크립트도 require로 불러올 수 있음.(ex: react)import도 require처럼 소스코드를 가져올 수 있는데 문법은 아래대신 im