js와 ts의 간단 비교 js의 변수, 함수의 매개변수, 함수의 리턴값에 타입이 붙어있다고 생각하기ex) const config : webpack.Configuration ()위의 경우 변수 config에 타입(webpack.Configuration)을 붙여준건데 저

세팅하는데 원래 좀 걸린다그래서 강좌 소스코드에 같이 동봉되어있는데 직접 세팅해보면서 익히는게 중요함그걸 쓰면 기본 세팅이 다 포함되어있기 때문에 뭐가 문제인지 모르는 경우가 생길 수 있음. 그래서 없이 연습을 하는게 좋다.git bash 쓰는걸 추천. git 설치하면

https://www.inflearn.com/course/%ED%81%B4%EB%A1%A0%EC%BD%94%EB%94%A9-%EC%8B%A4%EC%8B%9C%EA%B0%84%EC%B1%84%ED%8C%85죽~죽 처지는 react 공부 텐션..뭐라도 만들어봐야

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

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

preset-env는 plugin의 모음. 기본적으로 babel은 최신 문법을 예전 문법으로 작동하게 해주는데 preset-env는 예전 브라우저에도 적용을 해주는 기능이 있음.이런 preset-env에 대해 추가로 옵션을 적용할 수 있음.이런 브라우저 옵션 등은 웹팩

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

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

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

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

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

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

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

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

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

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

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

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

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

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