밀래의 코딩북

React 프로젝트 생성하는 방법은 사용 용도에 따라 크게 4가지로 소개되고 있습니다. 일반적으로 front 독립적으로 운영되는 create-app cli를 활용한 방법을 활용합니다. 그리고 서버 사이드 랜더링 및 풀스택개발을 위한 Next.js를 기반으로 프로젝트를 생성할 수 있습니다. 이 포스팅에서는 Next.js를 활용하여 기본적인 프로젝트를 생성하는 방버에 대해 작성해보려고 합니다. 0. Next.js 란? Next.js는 리액트를 기반으로 한 오픈소스 자바스크립트 웹 프레임워크로, 리액트에는 없는 서버 사이드 렌더링 (SSR), 정적 사이트 생성 (SSG), 증분 정적 재생성 (ISR)과 같은 다양하고 풍부한 기능을 제공합니다. 이를 통해 개발자는 클라이언트와 서버에서 아주 복잡한 작업을 별다른..

class TempComponent extends Component{ constructor(props){ super(props); } render(){ return(); } } React에서 Component를 생성할 때 state 값을 초기화하거나 메서드를 바인딩할 때 construcotr()를 사용합니다. React의 Component의 생성자는 해당 Component가 마운트 되기 전 호출됩니다. React.Component를 상속한 컴포넌트의 생성자를 구현할 때는 super(props)를 선언을 권고하고 있습니다. 이유는 this.props 사용 시 생성자 내에서 정의되지 않아 버그 발생 가능성이 생기기 때문입니다. class TempComponent extends Component{ constr..

이체 Lotto Random 번호를 생성하는 Component를 만들어 기능을 만들어 보겠습니다. 2,3,4 번의 Component를 만들어 보겠습니다. 2 - NumberPlateComonent 3 - NumberPlateBoxComponent 4 - LottoNumberBoxComponent 3가지 기능을 만들어 보겠습니다. 1. NumberPlate NumberPlateComponent는 체크박스와 랜덤 번호를 생성하는 버튼을 담고 있는 Component입니다. lotto 폴더 밑에 number-plate 폴더를 생성한 뒤 4개의 파일을 생성합니다. NumberPlateComponent.js NumberPlateComponent.css NumberPlateBoxComponent.js NumberPl..

간단한 웹사이트 디자인을 완료하였고 어떻게 Component를 나눌지 정해졌기에 이제 Component를 나눠 생성해보겠습니다. 우선, 생성하기전 create-react-app 으로 생성한 기본구조를 알아보고 Components 폴더를 생성한 뒤 Components들을 생성하겠습니다. 1. 기본 폴더 구조 index.js : react app의 가장 먼저 진입점이 되는 js 파일 App.js : index.js에서 root로 렌더링 되는 페이지 1-1. index.js index.js는 엔트리 포인트가 되는 파일입니다. index.js 먼저 살펴보면 다음과 같은 코드를 확인할 수 있습니다. import React from 'react'; import ReactDOM from 'react-dom'; imp..

이번 포스팅에서는 로또 번혼 랜덤 사이트를 만들어보기 위해 아래 기능을 만들어 보려고 합니다. 1. 1~46번까지 사용자가 체크 박스로 번호를 선택하는 기능을 만든다. 2. 사용자가 체크 박스에 선택한 번호로 랜덤으로 6개의 번호를 선택한다. 3. 사용자가 뽑은 랜덤 번호를 히스토리로 보여준다. React는 Component 구조를 가지고 있습니다. 그렇기에 우리가 만들려고 하는 구조를 React 스럽게 모두 컴포넌트로 쪼게야 합니다. 그러기 위해선 바로 코딩을 하기보단 어떤 구조로 Component를 만들지 고민해봐야 합니다. 카카오 오븐을 사용한 사이트 간단 스케치 먼저 화면을 디자인 해보는 것이 중요합니다. 화면을 디자인하실때는 파워포인트나 그림판도 좋습니다. 간단하게 화면을 그려보는 것이 좋죠. ..

React란 페이스북에서 만든 자바스크립트 기반 라이브러리 입니다. React 공식 홈페이지에서는 아래와 같이 소개 하고 있습니다. A JavaScript Libarary for building user interfaces 유저 인터페이스를 만들기 위한 자바스크립트 라이브러리. React는 라이브러리 이다. 흔히 비교 대상이 되는 Angular는 프레임워크라 하지만 React는 라이브러리이다. 두개는 어떤 차이가 있을까? 간단히 설명하면 유저 인터페이스를 만들기 위해 모든 기능을 포함하지 않은 라이브러리는 React이고 모든 기능을 포함하고 있는 프레임워크는 Angular라고 생각하면 됩니다. React가 라이브러리라 불리우지만 걱정하지 않아도 됩니다. Raact를 프레임워크 급으로 만들어줄 여러가지 방..