리액트21 React.js - JSX에서 주석 사용하기 JSX에서 주석 안녕하세요. 고코더 입니다. ● 1. 이번 시간에는 JSX에서 주석을 사용하는 방법을 알아보겠습니다. JSX는 자바스크립트 기반입니다. 그러므로 주석도 스크립트에서 사용하는 방식입니다. 주석은 개발자들의 흔적을 남길 수 있고 지우는 대신에 주석을 처리함으로 실행되지 않게 할 수 있습니다. ● 2. 단일 행을 처리하는 주석입니다. 한 줄 한줄 사용 가능합니다. //단일행 주석 ● 3. 복수행을 처리하는 주석입니다. 여러 줄을 처리하는 복수행 주석을 사용합니다. /* 복수행 주석 */ ● 4. 예제 소스를 함께 살펴보겠습니다. 3번, 4번 라인 : 복수행 주석을 사용하여 2개의 줄을 한 번에 주석 처리했습니다. 5번 라인 : 중괄호 안에 자바스크립트에도 사용 가능 6번 라인 : 단일행을 주석.. 2021. 1. 20. React.js - 코드펜(CodePen)으로 리액트 실행하기 CodePen으로 리액트 실행 안녕하세요. 고코더 입니다. ● 1. 이번 시간에는 코드펜을 사용하여 리액트를 실행하는 방법을 알아보겠습니다. 코드펜은 제 블로그에서 다루었던 프런트엔드 개발을 연습할 수 있는 온라인 IDE 사이트입니다. 해당 사이트의 사용법은 해당 "코드펜 사용법" 태그를 통해서 학습해주시기 바랍니다. 하지만 보통의 개발자라면 바로 사용법을 익힐 수 있기 때문에 그대로 따라오 오셔도 될 거 같습니다. ● 2. 코드펜을 로그인하고 Pen을 생성합니다. 무료 사용자도 사용이 가능합니다. ● 3. 펜이 생성되었다면 Settings를 클릭합니다. ● 4. 왼쪽 탭에 JS를 클릭합니다. 자바스크립트 설정을 할 수 있는 화면이 오른쪽에 나타납니다. 그리고 "Add External Scripts/Pe.. 2021. 1. 18. 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 - 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 - 기본 생성된 "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. 이전 1 2 3 다음
