reactjs React를 다시 시작하며 현재 회사에선 Vue만 사용했다. 이러다 React는 아예 까먹을 것 같아 팀원들을 꼬셔 React를 도전하기로 한다. 그나마 한번 React 프로젝트를 진행/운영 경험이 있는 나와 다르게 나머지 3명은 React를 한번도 해본적 없거나 신입.. 힘내자 본론으로 돌아가.. 다같이 모여 여러번의 회의끝에 스펙 정의를 했다. 되겟지? 일단 결정. 하나하나 공부하며 시작해보자.... react-querystyled componentstailwindstorybooknextjstypescriptmuimobxreactjsjestjest React 웹앱 구현하기 (생활코딩) 이는 로컬 컴퓨터에서 공간을 낭비하지 않고, 가장 최신의 프로그램을 사용할 수 있다는 장점이 있다. 맨 처음에 create-react-app을 통해서 리액트 프로젝트를 생성하게 되면 node_modules, public, src 폴더와 여러 json 파일들이 생성이 된다. 이 때 public 폴더에 index.html 파일이 있는 걸 볼 수 있을 것이다. 이 index.html 파일은 일종의... JavaScriptreactjs생활코딩CSSfrontendhtmlCSS [ReactJS] Immutability 불변성: 값이나 상태를 변경할 수 없는 값을 의미 필요한 값을 변형해서 사용하고 싶다면 어떤 값의 사본을 만들어서 사용해야 한다. 리액트는 얕은 비교를 통해 새로운 값인지 아닌지를 판단한 후 새로운 값인 경우 리렌더링을 한다. 얕은 비교란 객체, 배열, 함수와 같은 참조 타입들을 실제 내부 값까지 비교하지 않고 동일 참조(동일한 메모리 값을 사용하는지)를 비교한다. 다음 시나리오를 보면서 왜... JavaScript불변성ImmerreactjsImmer [ReactJS] 전역 상태 관리 도구 Context API state를 전역으로 관리해서 props로 내려주지 않아도 어떤 컴포넌트에서든 사용하고 관리가 가능하도록 하는 전역 상태 관리 도구. context.js App.js test.js... 전역상태관리도구contextAPI리액트JavaScript프론트엔드frontendjsReactreactjsJavaScript React가 처음인 당신 - Ep1. 탄생편 예를들어 Facebook의 뉴스피드의 좋아요 버튼을 생각해 볼 수 있습니다. 이 DOM이 Update 즉 변경된다는 뜻은 HTML요소에 변화가 발생했다는 뜻이 되며, 즉 웹사이트에 동적인 변화가 일어났다고 이해할 수 있습니다. 브라우저는 이 DOM이 변화하면 화면을 다시 그리게 되는데요 문제는 위에 명시한 하나하나의 변화마다 화면을 계속 새로 그리는 오버헤드가 일어나고 있다는 것 입니다. 이... reactjsreact.jsReactJavaScriptJavaScript
React를 다시 시작하며 현재 회사에선 Vue만 사용했다. 이러다 React는 아예 까먹을 것 같아 팀원들을 꼬셔 React를 도전하기로 한다. 그나마 한번 React 프로젝트를 진행/운영 경험이 있는 나와 다르게 나머지 3명은 React를 한번도 해본적 없거나 신입.. 힘내자 본론으로 돌아가.. 다같이 모여 여러번의 회의끝에 스펙 정의를 했다. 되겟지? 일단 결정. 하나하나 공부하며 시작해보자.... react-querystyled componentstailwindstorybooknextjstypescriptmuimobxreactjsjestjest React 웹앱 구현하기 (생활코딩) 이는 로컬 컴퓨터에서 공간을 낭비하지 않고, 가장 최신의 프로그램을 사용할 수 있다는 장점이 있다. 맨 처음에 create-react-app을 통해서 리액트 프로젝트를 생성하게 되면 node_modules, public, src 폴더와 여러 json 파일들이 생성이 된다. 이 때 public 폴더에 index.html 파일이 있는 걸 볼 수 있을 것이다. 이 index.html 파일은 일종의... JavaScriptreactjs생활코딩CSSfrontendhtmlCSS [ReactJS] Immutability 불변성: 값이나 상태를 변경할 수 없는 값을 의미 필요한 값을 변형해서 사용하고 싶다면 어떤 값의 사본을 만들어서 사용해야 한다. 리액트는 얕은 비교를 통해 새로운 값인지 아닌지를 판단한 후 새로운 값인 경우 리렌더링을 한다. 얕은 비교란 객체, 배열, 함수와 같은 참조 타입들을 실제 내부 값까지 비교하지 않고 동일 참조(동일한 메모리 값을 사용하는지)를 비교한다. 다음 시나리오를 보면서 왜... JavaScript불변성ImmerreactjsImmer [ReactJS] 전역 상태 관리 도구 Context API state를 전역으로 관리해서 props로 내려주지 않아도 어떤 컴포넌트에서든 사용하고 관리가 가능하도록 하는 전역 상태 관리 도구. context.js App.js test.js... 전역상태관리도구contextAPI리액트JavaScript프론트엔드frontendjsReactreactjsJavaScript React가 처음인 당신 - Ep1. 탄생편 예를들어 Facebook의 뉴스피드의 좋아요 버튼을 생각해 볼 수 있습니다. 이 DOM이 Update 즉 변경된다는 뜻은 HTML요소에 변화가 발생했다는 뜻이 되며, 즉 웹사이트에 동적인 변화가 일어났다고 이해할 수 있습니다. 브라우저는 이 DOM이 변화하면 화면을 다시 그리게 되는데요 문제는 위에 명시한 하나하나의 변화마다 화면을 계속 새로 그리는 오버헤드가 일어나고 있다는 것 입니다. 이... reactjsreact.jsReactJavaScriptJavaScript