IT_Developers/React26 React.js - 배포를 위한 빌드하기 "npm run build" 리액트 배포 파일 만들기 안녕하세요. 고코더 입니다. ● 1. 리액트를 만들면 이것을 배포하여서 서비스를 게시해야 합니다. 아무리 열심히 만들어도 다른 사람에게 보여주지 못한다면 의미가 없습니다. 리액트로 생성한 프로젝트는 간단한 명령어를 통해 빌드하여 배포할 수 있는 버전으로 만들 수 있습니다. 그 방법을 한번 알아보겠습니다. ● 2. 명령 프롬프트로 우리가 만들어놓은 리액트의 폴더로 이동합니다. 그리고 아래와 같은 명령어를 실행합니다. 그럼 알아서 빌드가 진행되고 배포 버전으로 파일들이 만들어집니다. npm run build ● 3. 해당 빌드를 실행하면 프로젝트에 전에 없던 build라는 폴더가 생성됩니다. 이는 말 그대로 빌드된 파일들을 저장하는 폴더입니다. C:\react\hello\build .. 2021. 1. 16. React.js - 기본 생성된 "package.json" 파일 살펴보기 " 리액트 패키지 환경설정 파일 안녕하세요. 고코더 입니다. ● 1. 이전 시간에 리액트 기본 프로젝트를 생성했습니다. 그리고 폴더의 구조도 알아보았습니다. 하지만 가장 중요한 파일이 있습니다. 바로 패키지 매니저(Package manager)를 통해 설치된 모듈과 스크립트 명령어를 담은 json 파일입니다. 이 파일 하나로 npm 패키지들을 관리할 수 있습니다. 따로 node-modules 파일들을 공유할 필요 없이 package.json만 있으면 필요한 작업환경을 구축할 수 있습니다. ● 2. package.json 파일은 프로텍트 폴더 루트(/)에 위치해 있습니다. 해당 파일을 메모장이나 에디터로 열어보겠습니다 ● 3. 파일의 내용은 이렇습니다. 파일명처럼 json 형태로 되어 있습니다. 해당 프로.. 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 - 리액트의 기본 create-react-app 설치하고, 실행하기 리액트의 보일러플레이트 create-react-app 안녕하세요. 고코더 입니다. ● 1. 리액트를 사용하기 위해서는 코드를 실행하기 위한 환경을 설정해야 합니다. 보통 리액트를 연습하거나 사용할 때 크게 두 가지 방식을 사용합니다. 하나는 코드 펜을 이용하여 간단하게 실습하는 방식과 create-react-app를 사용하는 방식입니다. 오늘은 그중에서 로컬 컴퓨터에 환경을 만드는 create-react-app를 설치하는 방법을 알아보겠습니다. 리액트를 배우고 싶다면 연습할 수 있는 환경을 만들어 보는 게 가장 먼저입니다. create-react-app는 리액트 환경을 도와주는 보일러플레이트 ● 2. create-react-app는 리액트를 사용하기 편리하게 해주는 보일러 플레이트입니다. 오늘 설치할 리.. 2021. 1. 15. React.js - 리액트는 Node의 버전이 10 이상이어야 합니다. / Node 10 or Higher Node.js 버전은 10 이상이어야 리액트를 사용할 수 있습니다. 안녕하세요. 고코더 입니다. ● 1. 리액트를 설치해서 사용하기 위해 즉 create-react-app를 사용하기 위해서는 노드가 필요로 합니다. 그런데 최소 노드 10버전 이상의 Node.js가 필요로 합니다. 만약에 그 이하에 버전에서 리액트 설치를 시도한다면 아래와 같은 경고 메세지가 나타납니다. " Create React App requires Node 10 or higher. Please update your version of Node. " ● 2. 방법은 아주 간단합니다. 최신 버전의 노드 버전을 설치하면 됩니다. 마무리 최신 버전만 설치하면 됩니다. 2021. 1. 12. React.js - 리액트의 특징, 단방향 데이터 흐름(one-way reactive data flow) 이란? 리액트 특징 one-way reactive data flow 안녕하세요. 고코더 입니다. 오늘 리액트의 두번째 특징인 단방향 데이터 흐름(one-way reactive data flow)에 대해 알아보려고 합니다. ● 1. 쉽게 설명하면 부모로부터 자식으로만 데이터가 전달이 가능합니다. 하지만 이러한 방식은 코드의 양을 줄이거나 단순화하려는 목적은 아닙니다. 유지보수를 좀 더 편리하게 만들 수 있도록 해주는 역할을 합니다. 예를 들자면 운전이 익숙하지 않는 초보 운전자에게 일반통행 차선은 좀더 운전하기가 수월합니다. 중앙선을 침범할 수 없고, 모두가 같은 방향으로 달리기 때문입니다. 그렇다가 양방향으로 달리는 도로 위도 익숙해지면 상관없겠지만 처음 도로 위로 차를 끌고 나간 날에는 상당히 무서웠던 기억이.. 2021. 1. 11. React.js - 리액트의 특징, 버추얼 돔(Virtual DOM) 이란? 리액트에서 가상 돔이란? 안녕하세요. 고코더 입니다. ● 1. 리액트는 특징이 많은 라이브러리입니다. 그중에서도 가장 큰 특징을 하나 꼽으라고 하면 다름 아닌 가상 돔(Virtual dom)입니다. 하지만 제 블로그에서는 "버추얼 돔"이라는 명칭으로 지칭하겠습니다. 리액트가 더 빠른 사용자의 편의성을 위해 어떤 노력을 하는지 알아보겠습니다. 통째로 바꾸어 버리자! ● 2. 리액트를 만든 페이스북 개발자들은 기존의 브라우저의 변화가 일어날 때 복잡한 이벤트 발생을 발생시키는 기존의 방식이 아닌 통째로 뷰(view)를 날려버리고 새로운 뷰를 만들자는 상상을 하였습니다 ● 3. 조금 애매한 개념입니다. 그럼 예시로 한번 설명해보겠습니다. 예전에 개그콘서트 촬영 현장을 다녀온 기억이 납니다. 약 20개의 코너가.. 2021. 1. 10. ReactJS - 리액트를 만든 개발자는? , 왜 리액트 사용해해야 하는가! 리액트란? 안녕하세요. 고코더 입니다. ● 1. 오늘은 리액트란 무엇인지 한번 알아보는 시간을 가져보겠습니다. 2013년도에 공개되어 2015년도에는 React Native가 발표되었습니다. 웹부터 모바일까지 확장해서 여전히 꾸준하게 사용되고 있는 최고의 라이브러리입니다. 오늘은 이 리액트란 녀석을 만든 사람과 왜 이걸 사용해야 하는지 알아봅니다. 페이스북 개발자가 만든 프런트엔드 라이브러리 ● 2. 리액트는 Jordan Walke라는 천재 개발자가 만들었습니다. 현재 2010년 페이스북에서 10년이 넘는 시간 동안 재직해왔고, 워싱턴 대학을 나오고, 아마존에서 일을 한 경험도 있는 엘리트 개발자입니다. https://twitter.com/jordwalke ● 3. Jordan Walke의 깃허브와 링크.. 2021. 1. 4. 이전 1 2 3 다음
