Docker로 React 프로젝트를 배포하는 실습을 해보자. 우선 React 프로젝트를 생성할 Visual Studio Code와 Docker Desktop은 설치 및 실행이 완료된 상태여야 한다. 1. React 프로젝트 생성 먼저 Visual Studio Code에서 터미널을 열어 배포 실습을 진행하는 데에 필요한 React 프로젝트를 생성해 준다. React 프로젝트를 생성하는 명령어는 아래와 같다. npx create-react-app react-with-docker 이렇게 프로젝트를 자동 생성해 준다. npm start 명령어로 프로젝트를 로컬 환경에서 실행해 볼 수 있으며, Docker를 활용해 배포를 진행해 보는 실습이니 따로 프로젝트를 수정하진 않고 진행한다. 2. Dockerfile 생성..

1. SPA Single Page Application 단일 웹 페이지로 돌아가는 애플리케이션 (ex. index.html) 브라우저에서 자바스크립트를 이용하여 단일 웹 페이지의 상위 HTML 요소를 동적으로 생성 및 조작 검색 엔진 최적화 (SEO)에는 적합하지 않음 [ 특징 ] 대표적인 SPA라이브러리 : React.js, Vue.js, Augular2 등 컴포넌트들이 모여 하나의 페이지를 작성하고, 이후 특정 부분만 데이터를 바인딩하는 개념 [ 장점 ] 사용자 친화적 초기에 한 번의 렌더링 후, 데이터만 받아오기 때문에 상대적으로 서버 요청이 적음 FE와 BE의 분리로 개발 업무의 분업화 및 협업에 용이 효율적인 개발을 할 수 있도록 함 [ 단점 ] 처음 화면을 로딩할 때, 모든 화면이 미리 준비되..

1. 일반 CSS 일반적으로 우리가 알고 있는 바로 그 CSS 소규모 프로젝트에 적합 별도의 라이브러리 필요 X 1.1 주의사항 CSS 작성 시 컴포넌트 별 클래스가 중복되지 않도록 작성하는 것이 중요 1) 클래스 생성 규칙 클래스의 이름을 생성할 때 중복되지 않도록 특정한 규칙을 정해둘 수 있음 이름-태그의 형식과 같이 규칙을 정할 수 있음 ex) App 컴포넌트에 헤더를 생성 => App-header 2) CSS Selector DOM트리 구조를 통해 원하는 DOM을 참조하여 꾸밀 수 있음 ex) .App .logo { ... } 1.2 CSS 모듈 사용 CSS의 모듈 형식을 사용하면 자동으로 클래스명이 생성 CSS의 파일명을 컴포넌트명.module.css로 생성 -> 사용하려는 js 파일에서 imp..

1. Component란? React에서 컴포넌트는 프로그램을 이루는 최소한의 단위 자바 스크립트에서의 함수와 유사 컴포넌트의 이름은 대문자로 시작되도록 함 컴포넌트를 통해 UI를 여러 개의 조각으로 나눈 뒤, 재사용이 가능하도록 함 각각의 조각들을 개별적으로 관리할 수 있도록 함 2. Component의 구분 2.1. 함수 컴포넌트 - function으로 정의 - return 문에 JSX 코드를 반환 함수 컴포넌트를 작성하는 방법은 function 사용 유무에 따라 다시 2가지로 나뉜다. 1) function 함수 사용 밑줄 친 부분은 함수 컴포넌트로, 해당 함수를 따라가서 살펴보면 function App() { return ( Hello ); } 이렇게 function으로 App 함수를 정의하고 있으..

JSX란? React에서 component는 꼭 저런 형식으로 작성이 되어야 하는데, 이 때 Javascript와 HTML이 합쳐진 문법 일종의 자바스크립트의 확장된 문법 JSX는 React로 개발할 때 주로 사용이 되며, 공식 자바스크립트의 문법이라고 할 수는 없음 JSX의 작성 방법 Javascript 언어 사용 JSX 내부에서 Javascript 언어를 사용하기 위해서는 { }로 코드를 감싸주어야 한다. div로 요소 묶기 하나의 컴포넌트 안에 여러 개의 요소가 존재하면 div 태그로 묶어주어야 한다. // 잘못된 코드 function App(){ return( Hello bad code ) } // 올바른 코드 function App(){ return( Hello good code ) } 조건 연..

앞서 작성한 프로그램 생성 법과 유사한 내용이지만 너무 간단하게 적었나 싶어 조금 더 자세하게 !! 과정을 한 번 더 작성한다. 1. create-react-app ?! - React를 만든 페이스북에서 제공하는 CLI 도구 (CLI : 커맨드 라인 인터페이스) - React를 사용해 프로젝트를 개발하고자 할 때, 아무것도 없는 상태에서 시작하는 것이 아닌 기본적인 틀을 잡아줌 2. 프로젝트 생성 npx create-react-app [ 프로젝트 이름 ] cmd에서 폴더를 만들 위치로 이동한 뒤,, 위에 보이는 명령어를 한 줄만 작성하면 끝이다! 그런 다음 기다리면 요렇게 진행 상황이 보여지고.. 조금만 더 기다리면..! 짠~~! 이렇게 프로젝트의 틀이 만들어진 것이다!! 이렇게 간편하게 만들어지다니 놀..

1. ReactJS 프로그램 생성하는 법 cmd 창에서 파일을 생성하려고 하는 저장소로 이동 후 하단 명령어 입력 npx create-react-app [ 프로젝트 이름 ] VSCode 에서는 터미널에서 npm start 명령어를 통해 프로그램을 실행 App.js import { useState, useEffect } from "react"; function App() { const [counter, setValue] = useState(0); const [keyword, setKeyword] = useState(""); const onClick = () => setValue((prev) => prev + 1); const onChange = (event) => setKeyword(event.target..

modifier 함수를 가지고 state(setCounter)를 변경할 때 react에 의해 컴포넌트(function)가 재생성됨 (새로운 값을 가지고 리렌더링) 코드가 실행되는 과정 : 1. 버튼을 누르면 counter가 1이 됨 2. console.log(1), Total clicks: 1이 됨 3. 이는 컴포넌트 자체가 재생성 된 것임 4. 데이터(setCounter)가 바뀔때마다 컴포넌트를 리렌더링하고 UI를 refresh하는 것 바닐라 js를 대체 HTML요소를 생성하거나 찾을 필요 X 이벤트 리스너를 더해줄 필요 X UI 업데이트 필요 X -> return 안에서 HTML을 바로 생성해버렸고, 거기에서 바로 이벤트 리스너를 더해줬고, UI를 업데이트 하면 자동으로 리렌더링 됨 state를 바꾸..

https://nomadcoders.co/react-for-beginners ReactJS로 영화 웹 서비스 만들기 – 노마드 코더 Nomad Coders React for Beginners nomadcoders.co