(기업프로젝트) 4 - 유라클 프로젝트 git 교육

■ 오늘 배울 내용

 

1. GIT / GITHUB
2. Morpheus 프로젝트 안드로이드 아이콘적용
3. Vue3 / Vee-Validate (유효성 체크)
4. 이미지 업로드(모피어스) 
5. 팀별로 면담

 

■ git / github 란?

 

분산 버전관리 시스템

작업하던 시점에 대해 일정한 버전을 관리하기 위한 시스템

 

ex)

대학교 ac.kr -> 대학교별 학생 계정 만들면 좋다.

1. intelij - IDE학생계정

2. terminus - 터미널(SSH) 학생계정

3. 노션 - 게시판 학생계정

 

GITHUB

- Group

- Repository (서버와 ui 나눌 수 있다.)

  - api server

  - ui

 

GIT

 

1. branch (main) 작업공간 -> 여러개의 브런치를 생성할 수 있다. 

2. tag(태그) / 북마크 release 시점이다.

3. commit

 

git branch

commit history를 관리하는데 데이터를 저장하는 시점을 관리한다.

 

v1 - v2 - v3

 

git commit

git push

git status

 

TOOL

intelij (androidstudio)

eclipse

sourcetree

vscode

 

■ git bash 이용해보기

 

 

mkdir 파일명 : dir 생성하기

 

 

cd  파일명/ : 해당 파일로 이동하기

 

 

pwd : 현재 내가 있는 경로를 말해줌

 

 

git init - 깃 생성

 

 

git branch -M main : 브런치 이름을 변경

 

 

touch text.txt : 텍스트 파일 생성

 

 

git status : 깃 상태 확인

 

 

git add {filename} : filename 을 추가한다. 

git add -A : 모든 파일을 추가한다.

 

※ 참고

github 계정 정보를 입력 

git config --local user.email {email}

git config --local user.name {name}

 

git config user.name
git config user.email

 

:qa 로 나온다.

 

 

git commit -m "first init" // 커밋 메시지와 함께 commit

 

 

git log / 커밋

 

■ 정리

mkdir git-study
cd git-study
touch text.txt
git config --local user.name {이름}
git config --local user.email {이메일}
git add -A
git commit -m "first init"

 

■ 불필요한 파일 무시하기

 

gitignore 파일 생성하고 클릭하여 무시하고 싶은 파일명 작성하면 무시된다. 

주석을 제외해야 정상적으로 제외된다. 

 

 

다시 확인했을 경우 .DS_Store 파일이 제외된 것을 확인할 수 있다. 

 

■ github 연동하기

 

 

마크다운 에디터

readme file 을 생성할 것인지 체크여부

 

 

github 웹사이트에서 repository 생성하고 해당 주소를 넣어준 뒤 

다시 git remote -v 처리를 해준다.

 

나의 경우 글로벌로 이미 로그인 돼 있어서 바로 넘어갔다. 

 

 

git push origin main 처리해준다. 

 

 

다음과 같이 repository 생성 되고 정상적으로 들어간다. 

 

■ 충돌날 경우

 

 

 

git pull origin main 을 통해 충돌된 것 받아오기 가능

 

■ git 버전을 되돌리는 방법

 

 

git log를 통해 전체 커밋 내역을 본다. 

되돌리고자 하는 주소를 복사한다. 

 

 

git reset --hard 복사한 주소를 통해 비워준다.

그리고 다시 git pull origin main 을 통해 내용 받아온다. 

 

1. reset : 아예 이전 내역 삭제처리하면서

2. revert : 새로운 커밋을 만들면서 되돌리기 

 

git undo : 커밋이 다시 돌아감

git stash :  작업이 다시 초기화 , 메모리 영역에 저장

git pull origin main : 

git stash pop : 메모리 영역에 저장된 것이 다시 꺼내져 이때 발생되는 충돌을 해결

 

push / pull(받는거)

 

■ 마지막 정리

mkdir 파일명 : dir 생성하기

cd 파일명 : 해당 파일로 이동하기

pwd : 현재 경로 확인하기

git init : 깃 생성

git branch -M main : master 에서 main 으로 branch 변경하기

touch text.txt : 원하는 파일 생성하기

git commit -m "commit 메세지 입력(맘대로)" : 커밋 메세지 입력하기

----중간에 나오는 것은 :qa 처리하면 된다.------

git log : 커밋

----파일 찾지 못한다면----

git status : 상태 확인하기

git add -A : 전체 추가해주기

git commit -m "원하는 메시지"

git push origin main : 다시 넣어주기

 

■ vs코드로 해보기

 

■ 브런치 하나로 작업 시

소스코드 푸시 전에

git stash

git pull origin main

git stash pop -> 충돌 해결

git push origin main

 

2. 브런치 나누는 경우

main -> 작업이 된 소스코드

2-1) 작업하는 사람 기준

feat/hadine

heat/siggy

메인이랑 머지할 때

먼저, main -> feat/hadine에 머지

feat/hadine -> main에 머지

 

커밋 메세지 컨벤션 (작성)

feat : 알림 기능 추가

fix : 알림 기능 이슈 해결

chore:

refactor

~~~내용

2-2) 작업 단위로 나누는 케이스

feat / header

fix/이슈해쉬

 

※ 

lf : \n

crlf: \r\n

 

window

git config --global core.autocrlf true

 

■ Morpheus 프로젝트 안드로이드 아이콘적용

 

 

아이콘 다운로드

 

 

파일 붙여넣기

 

 

AndroidManifest.xml에 @mipmap/ic_launcher 넣어주기

 

 

원하는 아이콘으로 변경 완료

 

https://icon.kitchen/

IconKitchen

 

■ 이미지 업로드(모피어스) 

 

npm i -g http-server

 

cmd 실행

cd 실행할 폴더위치

기본 사용법: http-server -p 5500 -C 1

 

simple json server

db  역할을 json이 대신해주는

 

https://github.com/yb-k/simple-json-server

GitHub - yb-k/simple-json-server: use simple json server

 

 

 

■ vue

 

SSR - jsp, 타임리프

CSR - vue, angular, react, svelte (서버에 대한 영향을 줄인다)

 

SinglePageApplication

MultiPageApplication

 

Vue

-Vue 화면을 제어하는 js 라이브러리

1. 선언형 프로그래밍

2. Component 단위 개발

3. 복잡한 브라우저 생태계에 대응 / nodejs

크로스 브라우저 여러~ 전처리 과정이 필요.

 

node 프로젝트 위에서 번들링 작업

ESLint

Babel (크로스 브라우저)

PostCss (CSS 전처리)

Tyescript / Sass

Bundle -> Webpack, vite, rollup, esbuild

 

js 

 

관심사의 분리

html

css

js

 

하나의 컴포넌트에서 html, css, js

 

 

* jQuery를 쓰지 않는 이유?

프로그래밍 방식에서의 차이

jquery, 바닐라스크립트(js)

명령형 프로그래밍 언어를 사용

 

vue, angular, react
선언형 프로그래밍 언어

 

e2e

종간 단 테스트

cypress

 

package.json 이 있는 경우 node 프로젝트이다.

node_modules -> npm install 시 다운로드 되는 모듈 경로

 

package.json -> 노드프로젝트 설정 파일

-scripts : 실행 할 수 있는 스크립트

npm run {scripts}

- dependencies : 실제 소스에 영향이 가는 (포함)이 있는 라이브러리

vue, jqery, moment, dayjs, swiper, sweetalert2, lodash

- DevDependencies : 소스에 영향이 가지 않는 라이브러리(TOOL)

typescript, webpack, vite, babel, rettier, 등등

 

node 번들링 -> 브라우저가 읽을 수 있는 파일로 변환(압축, 난독화)

 

node프로젝트

vite 번들러

.vue -> 브라우저가 읽을 수 있는 html, css, js

npm run build

 

webserver

contextRoot = '/web'

 

vite 설정 파일에서 관리.

assets / 정적 리소스

components / 재사용 가능한 최소단위, 컴포넌트들의 집합

views / spa에서 대규모 어플리케이션 구축을 위한 라우팅 설정

stores / 전역적으로 관리해야하는 데이터 저장

views/ 페이지 단위 컴포넌트

public / 정적 소스 (카피만)

 

+ composables / composite api
+ hooks /hook apis

 

vue

virtual(가상) dom

1. DOM보다 훨씬 가벼움.

2. 렌더링 비용을 최소화 하기 위해서.

 

<div>{{message}}</div>

state (상태 중심의 개발) const state= reactive({message: ' ' })

state.message = 'update message';

sub pub pattern (선언형과 관련)

데이터는 단방향으로 위에서 아래로 흐름.

state

부모컴포넌트 (상태)

자식컴포넌트 (상태)

 

html DOM (Document Obect Model)

DOM

v-dom

 

■ 모피어스앱 이미지 업로드

 

 

해당 부분이 있어야 모피어스 사용 가능하다. 

 

■ 예정

- sourcetree git push 예제

- empty-morpheus / simple-json-project 같이 해서

이미지 업로드하는 예시 하나

 

https://fontawesome.com/icons

Font Awesome

 

fontawesome

swiper

jquery

sweetalert2

dayjs

 

* 채점기준

1. 개발자로서

구현력

클린코드x 동작하여야함

문제해결능력

spring security

spring batch

jwt

ws

 

2. 임원진

1. 보여지는게 큼

 

* 마지막 시험