20231016 _[90일차]_01. 기업 교육(4일차)

오늘 할 거
1. GIT / GITHUB

 

 

2. Morpheus 프로젝트 아이콘 적용
3. Vue 3

4. 이미지 업로드 모피어스

---

 

 

$ touch text.txt  => text.txt 파일생성

깃헙에서 새로운 repository (git-study)만들어주고 

연결해서 파일을 올려준다.

 

 

위처럼 충돌이 나면 pull 하고 다시 push를 하면 된다.

 

reset 은 말그대로 리셋

revert 는 새로운 commit을 만들면서 되돌아가는거.

 

git undo => push 전에 commit했던걸 되돌릴수 있음.

git stash => 작업이 다시 초기화되면서 메모리영역에 저장. ()

git pull origin main 으로 충돌 잡아주고

git stash pop => 메모리 영역에 저장된게 다시 꺼내진다. 이때 발생되는 충돌을 해결

( 여기까지는 로컬에서 이루어지는 작업이고, 원격저장소에 영향을 미치는건 push / pull )

 

[ 기본 과정 ] _ reset / revert는 그냥 구글링 해보세여.....

 

[ branch ]

1. 브런치 하나로 작업시

소스코드 푸시 전에 

git stash

git pull origin main

git stash pop => 충돌해결

git push origin main

 

 

2. 브런치를 나누는 경우

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

feat / 사람1 

feat / 사람2

메인이랑 머지할 때

먼저, main -> feat / 사람1 에 머지 (충돌해결)

feat / 사람1 -> main에 머지 

 

 

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

feat / header

fix / 이슈해쉬

---

이제 이클립스로 해보자.

충돌발생시키면서 머지 해볼 예정

 

줄바꿈 에러 잡아야한다. (window)

 

git config --global core.autocrlf true 

위 명령어로 설정 한번 잡아주기. 

통상적으로는 lf를 많이 쓴다.

 

clone git repository 눌러서 아까 만들 git-study 가져올 예정

가져오면 아래처럼 생성된다.

 

마우스 우클릭으로 import project 

이건 하다가 말았다.

---

다시 안드로이드 스튜디오 켜주고

저번에 프로젝트 파일 넣었을때 오류 (라이센스 때문인듯) 잡아주셨다 뭔지는 모르겠다.

암튼 이제 잘된다.

어플 이름 바꿔보자

적용이 안되면 clean project 해주기

---

 

https://icon.kitchen/

IconKitchen

---

 

아이콘 만들어서 다운로드 받는다.

res폴더 - open in - explore 열기

그러면 아래 폴더가 뜬다.

압축파일을 풀어서 android / res 폴더에 있는 아래 파일들(mipmap-*)을 

위에서 열린 res폴더 내부에 넣어준다.

아래처럼 아이콘 모양이 내가 바뀐다.

---

이미지를 서버에 올려보자

node 사용예정

node 설치되어 있다.

npm install -global http-server (설치해서 전역으로 사용하겠다는 의미다.)

이렇게만 하면 서버가 뜬다. 포트번호 5500, 프록시는 생략...) 

모르겠다

localhost:3000/docs 로 접속해서

 

session / login 으로 로그인해준다.

아래부분에서 파일 업로드 하면

내가 생성한 uploads 폴더에 사진파일이 업로드 되고

 

아래 주소로 접속해보면

내가 업로드한 파일이 뜬다.

---

 

vue-study 폴더생성하고 

vs code 로 열어서 basic폴더생성 - index.html 파일 생성 

보내주신 코드 넣어보면 된다. (머스타치가 적용이 된다. 원래는 안되는게 맞는데 크롬에서 편의성을 위해 업데이트 해준거다.)

 

jQuery를 왜 안쓸까요?.?.?.?.?.?

> 프로그래밍 방식에서 차이.

 

[ Vue ]

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

1. 선언현 프로그래밍

 

jquery, 바닐라스크립트(js) => 명령형 프로그래밍 언어를 사용

ex) 2호선 삼성역까지 가서 강남방면 지하철 타고 12번출구로 200m직진 후 왼쪽으로 가서 7층

 

vue, angular, react => 선언형 프로그래밍 언어를 사용

ex) 서울특별시 강남구 테혜란로112 7층

 

 

2. Component 단위 개발

 

관심사의 분리

html

css

js

 

하나의 컴포넌트에서 html, css, js 를 함께 관리하게 되면 문제가 발생했을 때 그 하나의 컴포넌트만 살펴보면 되니까. 

jsx, vue, tsx => 얘네들은 한곳에서 관리할 수 있음.

 

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

크로스 브라우저를 수행하기 위해서 여러 전처리 과정이 필요

 

 

번들링 과정

 

이후에 나오는 명령어 4개 순서대로 실행해주면 

vue-project가 생성되는데 

해당 폴더를 옆으로 끌어내면 해당 프로젝트만 열린다.

 

이게 포함되어 있으면 node 프로젝트

 

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

 

dist가 생성된듯?

아래같은 방식으로 옵션설정 할건가보다.

vite 설정 파일에서 관리.

아래처럼 설정해줘야 한다.

---

App.vue 파일 수정해준다.

 

assets / 정적 리소스

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

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

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

 

views / 페이지 단위 컴포넌트 

public / 정적 소스 (카피만)

 

+ composables / composite api

+ hooks / hook apis

---

vue

virtual(가상)-dom.

1. DOM보다 훨씬 가벼움.

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

 

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

sub pub pattern. (선언형과 관련)

state (상태 중심의 개발)

 

---

모피어스 앱에서 

이미지 업로드 

 

이렇게 바꿔주면 안된다.

왜냐면

 

루프백아이피 

localhost / 127.0.0.1  

0.0.0.0

=> 설명은 안해주니 찾아보란다 참나

 

3. package.json "scripts" "dev" : "vite --host 0.0.0.0"

서버를 다시 실행해주면

아래처럼 뜬다.

---

 

 

 

 

아래 홈페이지에서 자세한 설명 확인..

 

pdf로 정리해서 보내주신다고 한다.

---

 

 

Font Awesome

Font Awesome

 

 

 

채점 기준은 학습력

4~5개월 학원에서 배운것들 잘 만들기!

 

개발자로서, 

구현력 (클린코드x , 동작해야함)

문제해결능력

spring security

spring batch

jwt

ws

 

임원진 기준은?

 

기획서 작성하기 ** 

기능 우선도 정해서 완료 후에 추가적인 기능 구현하기 (시간분배중요)

팀장 뽑기