개인 자료란 (JE)

  서버 커뮤니티

Profile AllPGS 대표칭호 없음
Profile

리액트(React) 개발에 있어서 가장 효과적인 통합 개발 환경(IDE) 중 하나는 바로 비주얼 스튜디오 코드(Visual Studio Code)입니다. 일단 지난 시간에 만들었던 리액트 프로젝트를 실행(Start) 시켜주세요. 기본적으로 서버가 구동 중인 상태에서 소스코드를 수정하면 알아서, 수정된 내역에 맞게 다시 컴파일이 이루어지면서 실제 웹 서비스에 반영된다는 특징이 있습니다.

687b934648997660eaf97f7e6dc90c45.jpg

이제 이 상태에서 비주얼 스튜디오 코드를 설치해서 프로젝트 소스코드를 비주얼 스튜디오로 열어 보도록 하겠습니다. 혹시 비주얼 스튜디오 코드가 설치되어 있지 않으신 분은 다음의 사이트에서 설치를 진행하시면 됩니다.

▶ 비주얼 스튜디오 코드(Visual Studio Code) 사이트: https://code.visualstudio.com/

접속 이후에는 자신의 운영체제에 맞는 응용 프로그램으로 설치를 진행할 수 있습니다. 설치를 하실 때에는 기본 설정으로 설치를 진행해주셔도 별다른 어려움 없이 따라오실 수 있습니다.

설치 이후에는 비주얼 스튜디오 코드를 실행해주세요. 이후에 [File] - [Open Folder] 자신의 리액트 프로젝트를 열어주세요.

기본적으로 리액트(React)는 App.js라는 이름으로 메인 자바스크립트를 관리할 수 있습니다. 실제로 HTML 문서에서 <body> 태그에 해당하는 내용은 이 App.js가 채우게 됩니다. 따라서 한 번 이 App.js를 수정해 봅시다.

저는 다음과 같이 내용을 대략 아무렇게나 바꾸어 보도록 하겠습니다.

이후에 저장(Ctrl + S)을 해주시면 자동으로 소스코드가 컴파일 되어 다음과 같이 웹 사이트에서 수정 내역을 확인할 수 있습니다.

c24cf4b4e19da57da9838c3759468b8e.jpg


Warning
댓글이 없습니다.

새로운 댓글을 등록해 주세요!

뉴스 및 창작물
/files/thumbnails/115/774/003/262x150.crop.jpg?20240424234825

업데이트

마인크래프트 1.20.5 정식 업데이트

학교가기싫다

2024-04-24

0

/files/thumbnails/762/770/003/262x150.crop.jpg?20240418073724

레드스톤

T.B.H (고민중독) | 노트블럭 버전 | NoteBlock Cover [한국어 영어 중국어 가사 추가]

노트블럭전문가

2024-04-18

0

/files/thumbnails/218/767/003/262x150.crop.jpg?20240412130213

레드스톤

우리의 꿈 - 원피스 오프닝

노트블럭전문가

2024-04-12

0

/files/thumbnails/505/766/003/262x150.crop.jpg?20240411122306

레드스톤

기동전사 건담 수성의 마녀 | 노트블럭 커버 1

노트블럭전문가

2024-04-11

1

/files/thumbnails/932/765/003/262x150.crop.jpg?20240410124459

레드스톤

마인크래프트 노트블록으로 만든 『 밤양갱 (Bam Yang Gang) 』

노트블럭전문가

2024-04-10

0