(기업프로젝트) 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 넣어주기
원하는 아이콘으로 변경 완료
IconKitchen
Cook up app icons for any platform
icon.kitchen
■ 이미지 업로드(모피어스)
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
use simple json server. Contribute to yb-k/simple-json-server development by creating an account on GitHub.
github.com
■ 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 같이 해서
이미지 업로드하는 예시 하나
Font Awesome
The internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome.
fontawesome.com
fontawesome
swiper
jquery
sweetalert2
dayjs
* 채점기준
1. 개발자로서
구현력
클린코드x 동작하여야함
문제해결능력
spring security
spring batch
jwt
ws
2. 임원진
1. 보여지는게 큼
* 마지막 시험
