재밌는 Coding

1. 시험환경

- 윈도우 10

- STS

- Git

2. 목적

- 실제적인 프로젝트 진행 과정을 통해 git 사용법을 학습한다.

- 원격 저장소 (Remote Repository)에 프로젝트가 등록된 상태에서 시작한다.

- 원격 저장소를 로컬 저장소로 복제한다.

- STS(Spring Tool Suite)를 이용하여 로컬 저장소와 프로젝트를 연동한다.

3. 적용

① Remote Repository(원격 저장소)를 Local Repository(로컬 저장소)로 복제한다.

    - 보통, "C:\Users\[사용자]\git" 폴더 이하를 저장소 폴더로 생성한다.

    - 로컬 저장소 폴더에서 다음 명령어를 실행하여 원격 저장소를 복제한다.

       git clone [URI]  [대상폴더]

② 로컬 저장소와 연결된 원격 저장소를 확인할 수 있다.

    git remote -v

※ 참고: 로컬 저장소에 연결된 원격 저장소 삭제

    git remote remove [이름]   (여기선 origin에 해당)

③ STS 프로젝트 폴더를 생성한다.

    - 로컬 저장소 폴더와 STS 프로젝트 폴더는 다른 것이다.

④ STS를 실행하고, 임포팅 방식을 선택한다.

⑤ 로컬 저장소를 선택한다.

⑥ 로컬 저장소 위치를 선택한다.

⑦ Next 클릭

⑧ Finish 클릭

⑨ 프로젝트 임포팅 완료

4. 결과

- 톰캣 등 STS 설정 후 실행하여 정상동작을 확인한다.

※ 내용이 도움 되셨다면 광고 클릭 한번 부탁드립니다.

1. 시험환경

- STS(Spring Tool Suite)

- git, git hub

2. 목적

- 실제적인 프로젝트 진행 과정을 통해 git 사용법을 학습한다.

- Git Hub에 로그인하여 원격 저장소(Remote Repository)를 생성한다.

- 생성한 원격 저장소를 로컬 저장소에 복제(clone) 한다.

- 프로젝트와 로컬 저장소 간 연동

- 프로젝트를 로컬 저장소와 원격 저장소에 업데이트 한다. (add, commit, push)

- STS(Spring Tool Suite)를 이용하여 Git Hub와 연동하는 법을 학습한다.

3. 적용

① git hub에 로그인하여 Repository를 생성한다.

② STS 우측상단에 위치한 "Open Perspective" 아이콘을 클릭 후 나타나는 팝업창에서 Git 클릭한다.

③ 원격 저장소를 로컬 저장소로 복제하기 위한 절차를 진행하자.

    - Git Repositories 창에서 "Clone a Git repository" 메뉴

    - 원격 저장소의 주소를 URI에 복사 후 Next 버튼을 클릭한다.

    - 원격 저장소의 Branch 선택

    - 로컬 저장소 위치 지정

    - 원격 저장소를 로컬 저장소로 복제(clone)한 결과

④ 현재 프로젝트를 로컬저장소와 연동하자.

    - 프로젝트 우클릭 → Team → Share Project...

    - Repository : 로컬 저장소 위치 선택

    - 로컬 저장소 연동 결과 : 프로젝트 디렉토리에 있던 소스코드가 Local Repository로 이동

⑤ 로컬저장소 및 원격저장소에 한번에 프로젝트를 올려보자. (commit and push)

    - 프로젝트 우클릭 → Team → Add to Index

    - 프로젝트 우클릭 → Team → Commit

    - Commit : 로컬 저장소에만 업데이트, Push : 로컬 저장소 내용을 원격저장소로 업데이트

    - 원격 저장소의 Branch 확인

4. 결과

① 원격 저장소에 프로젝트가 저장 되었는지 확인한다.

※ 내용이 도움 되셨다면 광고 클릭 한번 부탁드립니다.

1. 시험환경

- 윈도우 10

- Virtual Box

2. 목적

- Virtual Box 가상 머신에서 공유 폴더를 설정한다.

- 공유 폴더를 통해 실 PC와 가상 PC 간의 데이터를 전달한다.

3. 적용

① Virtual Box 메뉴 : 머신 → 설정... 메뉴를 클릭한다.

② 좌측메뉴에서 공유 폴더를 선택한다.

    - 폴더 경로를 설정한다.

    - 항상 사용하기를 체크한다.

4. 결과

① 실 PC 네트워크에서 공유 폴더를 확인한다.

    - 해당 폴더를 통해 실 PC와 가상 PC 간 데이터 공유가 가능하다.

※ 내용이 도움 되셨다면 광고 클릭 한번 부탁드립니다.

1. 시험환경

- Visual Studio Code

- node v14.17.0

- npm 6.14.13

2. 목적

- 간단한 블로그를 단계별 제작하는 방법을 통해서 ReactJS 사용법을 익힌다.

- 메인 페이지를 수정하여 HelloWorld 문자열을 출력한다.

3. 적용

① src/compts/HelloWorld.js 파일을 생성한다.

② App.js 파일을 코딩 시작점으로하여 메인 페이지를 수정한다.

    - App.js에서 HelloWorld.js 파일을 import 한다.

    - 기존 JSX 태그 대신 HelloWorld 컴포넌트를 호출한다.

4. 결과

① npm start 명령어로 프로젝트를 실행하면, 메인 페이지가 수정된 것을 확인할 수 있다.

※ 내용이 도움 되셨다면 광고 클릭 한번 부탁드립니다.

1. 시험환경

- Visual Studio Code

- node v14.17.0

- npm 6.14.13

2. 목적

- 간단한 블로그를 단계별 제작하는 방법을 통해서 ReactJS 사용법을 익힌다.

- create-react-app을 통해 설치한 신규 프로젝트의 메인 페이지를 확인한다.

3. 적용

① public/index.html

    - <div> 태그의 id는 "root"이다.

② src/index.js

    - 'root' ID를 갖는 Element 목적지에 <App/> 컴포넌트를 호출한다.

③ src/App.js

    - npm start 명령어를 실행하면 나타나는 초기 페이지이다.

※ 내용이 도움 되셨다면 광고 클릭 한번 부탁드립니다.

1. 시험환경

- Visual Studio Code

- node v14.17.0

- npm 6.14.13

2. 목적

- 간단한 블로그를 단계별 제작하는 방법을 통해서 ReactJS 사용법을 익힌다.

- npm을 이용하여 create-react-app을 설치한다.

- create-react-app 명령어를 통해 신규 프로젝트를 생성한다.

3. 적용

① node.js가 설치되어 있는 상태에서 create-react-app을 설치한다.

    - 개발 환경을 제공하기 위한 통합 툴 체인이며 자세한 사항은 react 공식 사이트에서 확인할 수 있다.

    - npm install -g create-react-app (-g 옵션: 설치 pc에서 누구나 사용 가능)

② create-react-app 명령어를 이용하여 신규 프로젝트를 생성한다.

    - create-react-app [프로젝트 폴더]

    - 여기서는 blog라는 폴더 이름을 사용하였다.

③ [프로젝트 폴더]에서 설치한 프로젝트를 실행한다.

    - 여기서는 blog라는 폴더에서 아래 명령어를 실행해야 한다.

    - npm start

4. 결과

① 신규 프로젝트 생성 폴더

② 신규 프로젝트 실행

※ 내용이 도움 되셨다면 광고 클릭 한번 부탁드립니다.

1. 시험환경

- Visual Studio Code

- node v14.17.0

- npm 6.14.13

2. 목적

- 단계별 학습을 통해서 ReactJS 사용법을 익힌다.

- class 컴포넌트의 내장 객체 state 사용법을 학습한다.

- click 이벤트 처리방법을 학습한다.

3. 적용

① state 객체를 정의한다.

② this.setState() 함수를 이용해서 state 객체의 참조값을 변경한다.

③ 버튼 클릭시 state 참조값이 교대로 변경되도록 function 컴포넌트를 호출한다.

4. 결과

※ 내용이 도움 되셨다면 광고 클릭 한번 부탁드립니다.

1. 시험환경

- Visual Studio Code

- node v14.17.0

- npm 6.14.13

2. 목적

- 단계별 학습을 통해서 ReactJS 사용법을 익힌다.

- 기존 function 컴포넌트를 class 컴포넌트로 대체하여 동일한 동작이 되는지 확인한다.

3. 적용

① 기존 function 컴포넌트를 주석처리한다.

② class 컴포넌트로 대체하고, 문법 구조를 학습한다.

    - class 컴포넌트에서는 반드시 render(){} 안에 JSX 문법을 사용해야 한다.

4. 결과

- function 컴포넌트를 class 컴포넌트로 대체해도 동일한 결과가 나타난다.

※ 내용이 도움 되셨다면 광고 클릭 한번 부탁드립니다.