JIN's DEV Life

why Next.js ? next.js -> 리액트 기반의 프레임워크로 서버 사이드 렌더링(SSR)을 지원하는 프레임워크라 SEO같은 것들을 쉽게 적용할 수 있다. npx로 설치하지 않고 'create-next-app'이란 명령어로 생성 'create-react-app'이 아니다. npx create-next-app nextjs-tutorial 설치 후 package.json에서 확인 npm run dev 명령어로 실행시켜 로컬환경에서 돌려볼 수 있다. UI 프레임워크 사용 ( sementic ui ) sementic uinpm install semantic-ui-react semantic-ui-css sementic uinpm install semantic-ui-react semantic-ui-css ..

Redux? 우리는 리액트의 state 관리하는 것과 UI와의 일관성 유지하는 게 중요하다는 것을 알고?있습니다. (중요합니다ㅎ) 그런데 웹 애플리케이션이 훨씬 복잡해지고 많은 계층구조가 생기면(부모-자식-손자-증손자...) state관리는 극혐이됩니다. 각 계층은 자신이 가지는 기능을 해야하고 그 기능 수행을 위해 어떤 관계에서는 state를 가져와 사용하는 의존관계가 심화될 수 있습니다. 밑의 그림을 보면 서로서로 아주 격렬하게 의존관계가 생성됨을 알 수 있습니다... 애플리케이션 'state관리'라는 문제를 좀 해소시켜보자 해서 'Redux'라는 게 등장했습니다. 위의 그림을 보면 리덕스는 애플리케이션의 state를 다루고 저장하는 마법을 애플리케이션에 부여하는 일만 신경씁니다. 그리고 그것을 '스..

'싱글 페이지 앱(SPA)'이 멀티 페이지 앱과 가장 큰 차별점은 다음과 같습니다. "앱을 navigation할 때 완전 새로운 페이지가 로딩되는 일이 없다!!" 그 대신에 페이지 안에서 인라인으로 View를 로딩하는 것이죠!! SPA로 개발할 때 신경써줘야 할 부분 - 1. 주소 표시줄의 URL은 항상 지금 보고 있는 화의 진짜 URL과 같아야 함. 2. 브라우저의 이전/다음 버튼을 사용 가능해야 함. 3. 정확한 URL을 사용해 특정 View를 바로 볼 수 있어야 함. * 멀티 페이지 앱(MPA)에서는 전혀 신경쓰지 않아도 되는 부분을 신경써줘야 한다는 얘기 ㅜ 이 모든 걸 처리하기 위해서 라우팅(Routing) 을 사용해야 합니다. 라우팅은 URL을 물리적인 페이지 (Multi Page Applic..

ref ? 리액트 세계에선 JSX로 마크업 표현이 다 가능한데 왜 굳이 DOM에 직접 접근을 해야하는가! 여러 경우가 있습니다! - form태그에서 input에 focus할 때 - 특정 DOM의 크기/ 스크롤 위치를 가져오거나 설정할 때 - 외부 라이브러리를 사용할 때 portal? ReactDOM.createProtal()을 리턴해 기존에 계속 id값이 container인 div태그 안의 범위에 있는 걸 벗어나서 페이지의 어느 Element든 직접 접근이 가능해집니다! (포털을 사용함으로써 기존의 부모-자식으로 이뤄진 계층 구조를 벗어날 수 있다) class Container extends React.Component{ render(){ return( container jsx, destination )..

우선, React Component가 하는 일? render()메소드를 사용해 무엇을 렌더링할 지 설명합니다. 하지만, Componenet가 렌더링 되기 전/후에 추가적인 동작은 render()메소드에서 처리할 수 없습니다. 컴포넌트 LifeCycle 컴포넌트는 렌더링 전/렌더링 중/렌더링 후 등의 다양한 단계가 있습니다. 리액트에선 이런 과정을 컴포넌트 생명주기라 부르고 React컴포넌트는 이런 과정을 거칩니다. 이런 과정 단계에 원하는 메소드를 끼워 실행시켜 전반적인 제어를 할 수 있습니다. 이런 메소드를 Component LifeCycle API라 합니다 이런 컴포넌트 생명주기 메소드는 세 그룹으로 나뉩니다. 1. 마운트 : 컴포넌트가 DOM에 삽입되는 단계 2. 업데이트 : 실제 DOM이 업데이트..

this.state를 사용하면 Component의 render()에 데이터를 전달할 수 있습니다. this.props : - 부모에서 전달되는 읽기 전용 데이터 (상수처럼 사용) - 자식에서 변경 불가! 데이터 값을 변경할 수 없다 this.state : - Component의 private데이터를 저장하고(클래스 내에서만 접근 가능한) Component에 의해 변경 가능. - state가 업데이트(변경)되면 Componenet는 스스로 렌더링 작업을 한다. 주의!! state는 업데이트 되지 않는 데이터를 가지면 안된다. state = { isHeaderHidden : false title : 'welcome this stateful component' } ... return( this.state.ti..

React Element : React.createElement()로 정의. 가볍고, stateless 하며 불변하며 DOM Element의 가상 표현식입니다. ReactElement는 가상 DOM 안에 포함되어 있고, 이 개념들이 노드를 생성 - HTML 태그들이 바로 이런 Element (div / table / h1 / Fragment...) var ele = React.createElement('div'); ReactDOM.render( ele, document.getElementById('exam'); ) JSX는 HTML코드를 ReactElements로 컴파일 아래 코드 형식. var ele = this is div ReactDOM.render( ele, document.getElementBy..

JSX는 HTML 코드와 비슷하지만 자바스크립트로 변환됩니다. 리액트 컴포넌트를 사용할 때 쓰는 문법입니다. 꼭 닫혀야 하는 태그 (x) (o) - self closing tag 두개 이상의 Element는 무조건 하나의 Element로 감싸져 있어야 한다 // 따로 따로 Element가 있으면 error! class ReactApp extents Component { render(){ return ( hello!!! world!! ) } } // 이렇게 두 개의 div Element는 Element로 감싸져야 한다 class ReactApp extents Component { render(){ return ( hello!!! world!! ) } } // React 16.2부터 도입된 Fragment를..

Webpack(웹팩) 개발 단계 중 빌드(번들링)라 부르는 단계가 있습니다. 이 단계에서 가장 중요한 부분은 packaging(패키징) 잘 감싸 포장하는 것입니다. 즉, 빌드 단계에서 빌드 스크립트가 소스 파일과 node.js의 의존 패키지들을 가지고 브라우저가 성공적으로 실행하게 하는 하나의 file로 변환합니다. (node.js로 개발을 하면 의존하는 모듈이 엄청나게 많아집니다. -- 하나의 js로 패키징) 물론, 라이브러리만 모아둔 JS / 핵심 로직이 들어간 JS처럼 나눠서 생성할 수도 있습니다. Webpack은 이런 build tool 중 하나로 아래의 그림처럼 서로 의존적인 파일들(import/ require)을 축소하고 unit test도 수행하며 애플리케이션에 필요한 resource들(im..

자바스크립트 라이브러리,프레임워크 3대장 (Vue.js / Angular.js / React)중 React를 공부하며 정리하겠습니다. React 리액트는 facebook에서 제공하는 라이브러리로 "지속적으로 데이터가 변하는 대규모 애플리케이션을 구축하기 위해서 리액트를 만듦!" 이라고 제시하네요 :> 이 리액트는 Component라는 개념에 집중된 라이브러리입니다. 웹에서는 MVC/MVVM/MVW 등의 패턴을 사용했습니다. 공통점은 Model View 사이에 어떤 변화가 있으면 다른 쪽에서도 변화를 시켜주는 양방향 바인딩이었습니다. (Component : 데이터를 넣으면 우리가 지정한 인터페이스를 조립해서 보여줍니다.) 변화! facebook에서는 변화가 일어날 필요가 있다면 변화를 하지말고 View를 ..