Tech Log

리액트 공부에 도움되는 사이트 목록 - CodeSandbox : 리액트에서 만든 결과를 바로 볼 수 있음 - toolchain Component에 본격적으로 들어서기 앞서 개괄적으로 정리해보았다. react의 component는 javascript에서 사용하는 사용자 정의 태그와 비슷하다. component의 장점 가독성 재사용성 유지보수 -> 실시간으로 변경된 내용이 업데이트된다. 개발 환경 설정할 때 만들어놓은 샘플을 예로 들면, 샘플 폴더 안에 있는 src에 App.js를 살펴보면 Component를 볼 수 있다. 사진에 나오는 index.js의 이라는 것이 js로 말하면 사용자 정의 태그이고, react에서는 컴포넌트라고 볼 수 있다. 사진에 나오는 클래스 안에 있는 내용이 컴포넌트의 실제 구현이..

이 모든 설정 과정은 Windows 기준이다. 1.2.1 Node.js 설치 먼저 Node.js를 반드시 설치해야 한다. 리액트 애플리케이션은 웹 브라우저에서 실행되므로 Node.js와 직접적인 연관은 없다. 그러나 프로젝트를 개발하는 데 쓰이는 주요 도구들이 Node.js를 사용한다. Node.js를 설치하면 Node.js 패키지 도구인 npm이 설치된다. Windows는 공식 홈페이지 https://nodejs.org/ko/download/ 에서 설치한다. 1.2.2 yarn 설치 npm 대신에 yarn이라는 패키지 관리자 도구를 설치한다. yarn은 npm을 대체할 수 있으며 npm보다 빠르며 효율적인 캐시 시스템과 기타 부가 기능을 제공한다. Windows는 https://yarnpkg.com/e..

배경 프로그램 내 사용자에게서 어떤 작업을 받으면 모델 데이터를 조회하거나 수정하고, 변경된 사항을 (아키텍처에 있는)뷰에 반영한다. 이와같이 특정 부분을 변경하는 규칙을 정하는 것은 애플리케이션의 규모가 크면 상당히 복잡해진다. 또한, 제대로 관리하지 않으면 성능이 떨어질 수도 있다. 이때 페이스북이 아이디어를 고안해냈다. 이것은 어떤 데이터가 변할 때마다 어떤 변화에 대해 고민하는 것이 아니라, 기존 뷰를 없애버리고 처음부터 다시 렌더링하는 아이디어이다. 페이스북 개발 팀이 이 방식으로 최대한 성능을 아끼고 편안한 사용자 경험을 제공하고자 구현한 것이 리액트(React)다. 정의 자바스크립트 라이브러리로 사용자 인터페이스를 만드는 데 사용. 구조가 MVC, MVW인 프레임워크와 달리 오직 V(View..

2021/3/25(목) DSC 리액트 스터디 시작 리액트를 통해서 앱 개발을 한다. 이 활동을 통해 팀원들과 협업 능력을 향상시키고 개발 지식을 더 많이 얻었으면 좋겠다. 앱을 개발하고 배포하는 것은 처음이라 긴장이 되기도 하지만, 모르는 만큼 열심히 활동해서 개발자라는 목표에 더 가까워졌음 한다!