react.js15 React.js - 리액트에서 "Hello JSX!" 출력하기 JSX를 사용해서 페이지 띄우기 안녕하세요. 고코더 입니다. ● 1. 이번 시간에는 JSX를 사용해 간단하게 리액트에서 "Hello JSX"를 표현해보려고 합니다. 리액트를 처음이라면 우선 JSX를 간단하게 사용하는 방법을 배워보는 게 좋을 거 같아서 JSX를 아주 간단하게 작성해보는 시간을 가집니다. 우선 이전에 프로젝트 빌드까지 과정이 끝나야 합니다 카테고리에 있는 글을 차례대로 읽어보시면 좋습니다. 그럼 create-react-app로 프로젝트가 완성되었다고 진행해보겠습니다. ● 2. 프로젝트 폴더에서 index.js 파일을 열어보겠습니다. 다양한 에디터 도구가 있지만 추천하는 건 VSCode로 수정을 해보시길 바랍니다. C:\react\hello\src\index.js ● 3. index.js 안.. 2021. 1. 17. React.js - 리액트 실행(npm start), 정지(npm stop???) 하는 방법 npm start , npm stop??? 안녕하세요. 고코더 입니다. ● 1. 리액트 프로젝트를 생성 후에는 자동으로 최초 1회 한해서는 자동 실행이 완료됩니다. 그 후에는 직접 해당 프로젝트를 실행할 수 있습니다. 이번 시간에는 create-react-app로 설치한 프로젝트를 시작하고 멈추는 방법을 알아보겠습니다. ● 2. 빌드된 프로젝트를 명령 프롬프트로 이동합니다. 제 블로그와 공부 중이라면 C:\react\hello 폴더에서 실습 중입니다. 해당 폴더에서 아래 명령어를 실행합니다. 프로젝트를 실행하는 npm 명령어입니다. 그럼 자동으로 localhost:3000로 기본 브라우저가 열리면서 결과 값이 보입니다. npm start ● 3. 그렇다면 반대로 stop은 어떻게 할까요? 패키지 파일을 .. 2021. 1. 17. React.js - JSX란? JavaScript + XML? JSX란? JavaScript eXtension 이란? 안녕하세요. 고코더 입니다. ● 1. 오늘은 JSX에 대해 알아보려고 합니다. 이름도 조금 낯설지만 알고 보면 우리가 익숙하게 사용했던 언어와 많이 닮아 있습니다. 하나둘씩 알아가 보는 시간을 가져보겠습니다. 이번 시간에는 이론적인 부분만 학습하겠습니다. ● 2. JSX란 Javascript+XML의 합성어입니다. 다시 말하면 XML 사용을 허용하는 자바스크립트 확장 문법이라고 말합니다. 빌드 시 Babel에 의해 자바스크립트로 변환됩니다. 자바스크립트와 HTML을 표현할 수 있기 때문에 편리한 개발이 가능합니다. 자바스크립트 내부에 마크업 코드를 작성해줄 수 있습니다. 그리고 변수와 프로퍼티의 바인딩 기능을 제공합니다. ● 3. 개발자에게 익숙하고.. 2021. 1. 17. React.js - 배포를 위한 빌드하기 "npm run build" 리액트 배포 파일 만들기 안녕하세요. 고코더 입니다. ● 1. 리액트를 만들면 이것을 배포하여서 서비스를 게시해야 합니다. 아무리 열심히 만들어도 다른 사람에게 보여주지 못한다면 의미가 없습니다. 리액트로 생성한 프로젝트는 간단한 명령어를 통해 빌드하여 배포할 수 있는 버전으로 만들 수 있습니다. 그 방법을 한번 알아보겠습니다. ● 2. 명령 프롬프트로 우리가 만들어놓은 리액트의 폴더로 이동합니다. 그리고 아래와 같은 명령어를 실행합니다. 그럼 알아서 빌드가 진행되고 배포 버전으로 파일들이 만들어집니다. npm run build ● 3. 해당 빌드를 실행하면 프로젝트에 전에 없던 build라는 폴더가 생성됩니다. 이는 말 그대로 빌드된 파일들을 저장하는 폴더입니다. C:\react\hello\build .. 2021. 1. 16. React.js - 리액트 프로젝트 기본 폴더 구조 리액트 디렉터리 구조 안녕하세요. 고코더 입니다. ● 1. 이전 시간에 create-react-app로 생성하여 프로젝트를 만들어보았습니다. 자동으로 파일들이 생성되고 실행에 필요한 모든 요소가 갖추어졌습니다. 오늘은 생성된 파일의 기본 구조를 알아보는 시간을 가져보겠습니다. ● 2. 저와 함께 실습했다면 아래 폴더에 파일들이 생성되어 있습니다. 구조는 생각보다. 간단합니다. C:\react\hello ● 3. "node_modules" 폴더 npm을 통해 설치된 패키지 매니저(Package manager)들이 모여 있는 디렉토리 입니다. C:\react\hello\node_modules ● 4. "public" 폴더는 html 파일들과 이미지 파일들이 모여 있는 걸 확인할 수 있습니다. 정적인 성격을 .. 2021. 1. 15. React.js - 리액트의 특징, 단방향 데이터 흐름(one-way reactive data flow) 이란? 리액트 특징 one-way reactive data flow 안녕하세요. 고코더 입니다. 오늘 리액트의 두번째 특징인 단방향 데이터 흐름(one-way reactive data flow)에 대해 알아보려고 합니다. ● 1. 쉽게 설명하면 부모로부터 자식으로만 데이터가 전달이 가능합니다. 하지만 이러한 방식은 코드의 양을 줄이거나 단순화하려는 목적은 아닙니다. 유지보수를 좀 더 편리하게 만들 수 있도록 해주는 역할을 합니다. 예를 들자면 운전이 익숙하지 않는 초보 운전자에게 일반통행 차선은 좀더 운전하기가 수월합니다. 중앙선을 침범할 수 없고, 모두가 같은 방향으로 달리기 때문입니다. 그렇다가 양방향으로 달리는 도로 위도 익숙해지면 상관없겠지만 처음 도로 위로 차를 끌고 나간 날에는 상당히 무서웠던 기억이.. 2021. 1. 11. 이전 1 2 다음
